Balsamiqを使用したワイヤーフレーミング入門

ワイヤーフレーミングは、理想的には画面のレイアウトを視覚化するアクティビティとして定義できます。 今日の市場には多くのワイヤーフレーミングツールがありますが、最も簡単で最も広く使用されているのはBalsamiqです。これが今日のトピックです。 しかし、その前に、なぜワイヤーフレームが必要なのかを最初に理解しましょう。
ソフトウェア開発に関しては、開発が始まる前であっても、最終製品がどのように見えるかを知ることが重要です。 製品のこの最初の視覚化は、すべての利害関係者のガイドラインとして機能し、将来発生する可能性のあるあいまいさを回避するのに役立ちます。
昔は、ソフトウェア要件を引き出すためにテキストの段落が使用されていました。

ただし、これらのテキストのチャンクは、視覚化を進めるのに十分ではありませんでした。要件を読んでいる各人が、他の人とは異なる可能性のある方法で視覚化するためです。 このあいまいさは多くの混乱を招き、時間、お金、労力の浪費につながります。 原因を助けるために、ワイヤーフレーミングが登場します。 それが全体的な開発プロセスにもたらす容易さのおかげで。

この記事では、次のような質問を理解するのに役立ちます。

• • Balsamiqとは何ですか？

• • それを始める方法は？

• 最終的なワイヤーフレーム/モックアップをエクスポートするにはどうすればよいですか？

Balsamiqとは何ですか？

ワイヤーフレーミングは、本質的に、ペンを使用してナプキンで実行できます。 結局のところ、それは結局のところ単なるスケッチです。 ただし、それを専門家と協力して共有する場合は、現在市場に出回っている多くのツールの1つに切り替えることをお勧めします。 そのようなツールの1つがBalsamiqです。使い方は簡単で、便利なワイヤーフレームを構築するための多くの機能を提供します。
Balsamiqは優れたツールであり、ワイヤーフレーミングとコラボレーションのすべての要件を満たしています。 迅速なワイヤーフレーミングを実行し、リアルタイムのフィードバックを取得し、それらのフィードバックを組み込み、ワイヤーフレームを改善することを可能にする独自の機能セットを備えています。 これにより、最終的にチーム全体がレイアウトに関するアプリケーションの機能と一致するようになります。
Balsamiqを使用すると、離れた場所にいるチームメンバーとのコラボレーションも簡単になります。これは、ワイヤーフレームをPNGまたはPDF形式でエクスポートできるため、ワイヤーフレームを共有しながら柔軟性を実現できます。
10最も効果的なワイヤーフレーミングツール

Balsamiq入門

BalsamiqはWindowsおよびMacOSで利用可能であり、オンラインでダウンロードできます。 ツールをダウンロードして開くと、次のような画面が表示されます。

上のスクリーンショットに示されているように、Balsamiqのユーザーインターフェイスは次の4つの部分に分かれています。

• • ナビゲーター

• • UIライブラリ

• • インスペクター

• ワイヤーフレームスペース/エリア

赤で強調表示されているセクションは、セクションインスペクターとプロジェクト情報を切り替えるためのものです。 機能はUIライブラリに含まれているので、詳しく見ていきましょう。

UIライブラリ

UIライブラリは、さまざまな画面要素に基づいて分類されています。
Balsamiqで利用できるさまざまな画面要素のカテゴリについて理解しましょう。

• • すべて-これをクリックすると、Balsamiqが提供するすべてのUI要素が表示されます。 水平方向にスクロールすると、それらを表示または使用できます。

• • アセット-このセクションには、アップロードして後でワイヤーフレームで使用できるものが含まれています。

• • 大きい-これには、プレースホルダー、ブラウザウィンドウ、iPhone、iPadなどの適度に大きい画面要素が含まれます。

• • ボタン-このセクションには、アクションボタン、チェックボックスなど、ワイヤーフレームに必要なすべてのボタンコントロールが含まれています。

• • 共通-このセクションは、最も一般的な相互作用を示すために使用される形状で構成されています。

• • コンテナ-ウィンドウ、フィールドセット、ブラウザなどのオプションが含まれています。名前が示すように、ウィンドウ、フィールドセット、ブラウザなどが含まれます。

• • フォーム-このカテゴリには、入力要素、ラジオボタン、送信ボタンなど、フォームに関連するすべてのコントロールが含まれます。

• • アイコン-これには、特定の操作を示すために使用できるアイコンのセットが含まれています。 たとえば、保存ボタンの代わりにフロッピーアイコンなどがあります。Balsamiqは、さまざまなアクションに使用できる無料のアイコンの膨大なコレクションを提供しています。

• • iOS-これには、iOSに固有のUIコントロールが含まれています。

• • レイアウト-基本的なページ/機能を表現する必要がある場合、レイアウトは非常に重要です。 このカテゴリには、垂直/水平タブ、アコーディオンなどのほとんどのレイアウトが含まれます。

• • マークアップ-これは、ワイヤーフレーム内の特定のコントロールにコメントを追加するために使用されます。 また、多くのシナリオで接続を示すために使用されるコールアウトも含まれています。

• • メディア-このセクションでは、ワイヤーフレームに画像/ビデオ/サウンドを表示するのに役立つすべてのメディア関連のUIコントロールを使用できます。

• • シンボル-これは、共通コンポーネントの作成時間を短縮できる再利用可能なコンポーネントのコレクションです。

• テキスト-名前のとおり、これにはテキストに関連するすべてのUIコントロールが含まれます。 このカテゴリでは、テキストのブロック、コンボボックス、リンクバーなどの機能を利用できます。

Balsamiqを使用すると、コンポーネントを簡単にドラッグアンドドロップできるという事実と相まって、これらのコンポーネントの知識は、選択したワイヤーフレームをすばやく効果的に作成するのに役立ちます。
これらの製品管理ツールのうち、すでに使用しているものはどれですか？

ここで、Webサイトについて、ホーム、製品とサービス、お問い合わせ、および概要の4つのページのワイヤーフレームを作成したとします。 次に、ワイヤーフレームを本格的なWebサイトのように見せ、スケッチのように見せないようにする、もう1つの重要なタスクを実行する必要があります。 そのためには、理想的にはWebサイトでリンクされるため、ページをリンクする必要があります。 リンクは、ワイヤーフレーム間を簡単に行き来するのにも役立ちます。

ページのリンク

この手順は、他のWebサイトと同じように、ワイヤーフレームを順番に表示するのに役立ちます。 このナビゲーションを実現するには、右上隅のリンクバーをクリックします。
まず、ホームページを製品とサービスのページに接続することから始めましょう。

• • ホームページに移動

• 右上隅のリンクバーをクリックします

プロパティペインを参照してください

緑色で強調表示されたセクションには、これまでに作成したさまざまなワイヤーフレームが表示されます。 ホームページをリンクすることから始めましょう。 ドロップダウンをクリックして、使用可能なモックアップのリストを表示します。 以下のようなリストが表示されます。

表示されるドロップダウンリストから、[製品とサービス]を選択して、[ホーム]から[製品とサービス]へのリンクを作成します。 同様に、他のページについても同じ手順を繰り返します。
意思決定の芸術：マネージャー、リーダー、製品担当者向け

ワイヤーフレームのエクスポート

作成したばかりのワイヤーフレームは、PDFやPNGなどのより一般的な形式でクライアント/エンドユーザーに提示できない場合は役に立ちません。 この目的のために、Balsamiqを使用すると、これらの形式のいずれかでモックアップを簡単にエクスポートできます。
この例では、モックアップをPDF形式でエクスポートしています。 これを行うには、[プロジェクト]メニューをクリックしてから、[ PDFにエクスポート]をクリックします。
次のような画面が表示されます。

チェックボックス–「リンクのヒントを表示する」を選択します。
次に、[ PDFにエクスポート]をクリックします。 PDFをエクスポートするローカルを指定できるポップアップが表示されます。 進行状況は、以下のような進行状況バーに表示されます。

エクスポートが完了すると、確認ボックスが表示されます。 ボックスをクリックすると、設定したすべてのナビゲーションとともにPDFを表示できます。
最小限の実行可能な製品の構築–いくらですか？

まとめ…
今日のアプリケーション開発の世界では、ワイヤーフレーミングの重要性を否定することはできません。 それらはあなたの全体的な作業負荷を軽減することになる多くの機能を提供します-ワイヤーフレーミングツールの不足は絶対にありませんが、Balsamiqはあなたの万能の要件を満たす数少ないツールの1つです！

世界のトップ大学からオンラインMBAコースを学びましょう。 マスター、エグゼクティブPGP、または高度な証明書プログラムを取得して、キャリアを迅速に追跡します。