Balsamiq-mockups-quick-guide

Balsamiqモックアップ-ワイヤーフレームの基本

ソフトウェア開発に関しては、実際の開発が始まる前に、実際のソフトウェアがどのように見えるかを知ることが重要です。 これは、ソフトウェアプロジェクトのすべての利害関係者のガイドラインとして機能するため、重要なアクティビティです。

従来、ソフトウェアの要件を説明または引き出すためにテキストの段落が使用されてきました。 ただし、これらのテキストの理解に関しては、すべての個人が要件を視覚化する独自の方法を持っています。 これはソフトウェア開発チームの混乱を招き、最終的なコストは無駄な労力、お金、時間の面で発生します。

ワイヤーフレームは、特定の画面（モバイルまたはWeb）のレイアウトを視覚化するアクティビティとして定義できます。 近年、画面/ページのワイヤフレーム化でその許容性を評価するための需要が高まっています。

なぜワイヤーフレーミングなのか？

ソフトウェア要件の理解に費やされる時間を節約するために、ワイヤーフレームが必要です。 彼らが言うように、写真は千語以上の価値があるので、Wireframingは画面レイアウトと要素を効果的に視覚化することにより、あらゆる機能/ページの要件を垣間見ることができます。 最終的に、開発チームが共通の最終目標に向けられるようにもなります。

Wireframingアクティビティの所有者は通常、ビジネスアナリスト/ユーザーインターフェイスデザイナー/インタラクションデザイナーです。 このチームメンバーは、Wireframingプロセスの前、後、および最中にチームと協力する必要があります。

ワイヤーフレームツールとしてのBalsamiq

Wireframingアクティビティを割り当てられた専門家にとって、ツールを使用して時間を節約することは理にかなっています。 Wireframingを行うための最も効果的なツールの1つは、シンプルなペンと鉛筆を使用することです！ これには投資は一切必要ありません！ ただし、チームに伝える場合は、ペンと鉛筆に似たルックアンドフィールが必要ですが、電子メールや同様のメディアで共有するなどの機能が追加されています。

*Balsamiq* は、ワイヤーフレーミング、コラボレーション、創造性のすべての要件を満たす優れたツールとして機能します。 そのユニークな機能セットにより、チームメンバーは迅速なワイヤーフレーム化を行い、開発する機能についてコンセンサスを得ることができます。 これにより、最終的にチームはレイアウトの観点から機能を調整することになります。

また、さまざまなチームでのコラボレーションが可能になるため、チームメンバーは、同じ場所に配置されたチームまたはリモートに配置された異なるチームとコラボレーションできます。 ワイヤフレームをPDF/PNG形式でエクスポートする機能により、柔軟性を確保しながら、ワイヤフレームをチームと共有できます。

Balsamiqがワイヤフレームをその場で作成するのにどのように効率的であるかがわかりました。 関係者の期待を設定するためにソフトウェア開発の早い段階でこの時間を利用する場合、ワイヤーフレームの作成に必要な最小限の時間を考慮すると、関係者の間でより高い満足度が得られます。 これが、顧客/ステークホルダーとの関係を満たすことが重要な製品組織の大半でBalsamiqが使用される主な理由です。

プロダクトマネージャー/UXアナリストにとって、Balsamiqモックアップは開発の初期段階で価値を追加するためのプラットフォームを提供します。 豊富なツールセットを使用することにより、Product Manager/UX Analystは、製品を成功に向けてシームレスに推進できます。

Balsamiqモックアップ-はじめに

Balsamiqのインストール

Balsamiqをインストールするには、次の要件を満たしていることを確認してください。

コンピューターでBalsamiqを実行するには、Adobe Air 2.6を実行する必要があります。 ほとんどのコンピューターとオペレーティングシステムで正常に動作します。 Adobe Air 2.6の最小システム要件は以下のとおりです-

Windowsの場合

• 2.33GHz以上のx86互換プロセッサ、またはネットブッククラスデバイス用のIntel Atom ^ TM ^ 1.6GHz以上のプロセッサ。
• Microsoft®Windows Server 2008、Windows 7、Windows 8 Classic、またはWindows 10。
• 最低512MBのRAM（1GBを推奨）。
• AIR SDK開発は、Microsoft®Windows 7以降、64ビットのみをサポートします。

Mac用

• Intel®Core ^ TM ^ Duo 1.83GHz以上のプロセッサ。
• Mac OS X v10.7以降。
• 最低512MBのRAM（1GBを推奨）。
• AIR SDK Developmentは、Mac OS 10.9以降、64ビットのみをサポートしています。

参照リンク-https://support.balsamiq.com/installation/systemrequirements/[Balsamiqシステム要件]

Balsamiqのダウンロード

Balsamiqは、次のリンクからダウンロードできます。https://balsamiq.com/download/[デスクトップ用Balsamiqモックアップ] Balsamiqは、WindowsおよびMac OSで利用できます。

ユーザーインターフェース

インストールが完了すると、コンピューターからBalsamiqを開くことができるはずです。 Balsamiqを実行すると、次の画面が初めて表示されます。

UI

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

• ナビゲーター
• UIライブラリ
• 検査官
• ワイヤフレームスペース/エリア

スクリーンショットで、赤で強調表示されているセクションは、Inspector/Project Informationセクションのトグルです。 選択に基づいて、インスペクター/プロジェクト情報セクション（3）のいずれかが表示されるはずです。

UIライブラリ

次のスクリーンショットに示すように、UIライブラリはさまざまな画面要素ごとに分類されています。 「すべて」セクションを水平にスクロールして、Balsamiqで利用可能な画面要素についてのアイデアを得ることができます。

UIライブラリ

Balsamiqで利用できるさまざまな基本的な画面要素のカテゴリを理解しましょう。

• すべて-これは、Balsamiqに存在するすべてのUI要素を対象としています。 水平にスクロールして表示/使用できます。
• アセット-導入のため、これらはユーザーがアップロードしたカスタムアセットです。
• ビッグ-このカテゴリには、サイズ/外観がかなり高い画面要素が含まれます。 このカテゴリでは、プレースホルダー、ブラウザーウィンドウ、iPad、iPhoneなどの要素を確認できます。
• ボタン-モバイル/ウェブワイヤフレームで使用されるすべてのボタンコントロールが含まれます。 典型的な例は、アクションボタン、チェックボックスなどです。
• 共通-最も一般的な相互作用を示すために使用されるさまざまな形状/コントロールです。
• コンテナ-名前が示すように、ウィンドウ、フィールドセット、ブラウザなどが含まれます。
• フォーム-フォームに関連するすべてのUIコントロールがこのカテゴリに存在します。
• アイコン-任意の時点で、アイコンで特定の操作を示す必要があります。 たとえば、最近では、[保存]ボタンが付いたフロッピーアイコンがあります。 このカテゴリのコントロールは、この操作に必要なアイコンを提供します。 Balsamiqにはアイコンの膨大なコレクションがあります。それらをチェックしてください！
• iOS -Apple iOSモバイルオペレーティングシステムに固有のUIコントロールは、このカテゴリで使用できます。
• レイアウト-基本的なページ/機能を表す場合、基本的なレイアウトを表すことが重要になります。 カテゴリレイアウトには、アコーディオン、水平/垂直タブなど、それらのほとんどが含まれます。
• マーク-ワイヤフレームの特定のコントロールにコメントを追加するとします。 コメントボックスはマークアップで使用できます。 さらに、多くのシナリオで相互接続性を示すためにコールアウトが使用されます。 マークアップカテゴリで使用できます。
• メディア-ワイヤーフレームで画像/音声を表示することになると、関連するUIコントロールがメディアカテゴリで利用できます。
• シンボル-シンボルは再利用可能なコンポーネントであり、最も一般的な要素を作成する時間を短縮できます。
• テキスト-名前の通り、リンクバー、テキストブロック、コンボボックスなど、テキストまたは段落に関連するすべてのUIコントロールは、このカテゴリで使用できます。

次の章では、Balsamiqで最初のプロジェクトを作成します。

Balsamiqモックアップ-最初のプロジェクト

Balsamiqで最初のプロジェクトを作成しましょう。 Wireframingにジャンプする前に、画面/ページを計画することは非常に重要になります。 ワイヤーフレームの作成に進むと、会社のWebサイトを確認します。

コンセプト：会社のウェブサイト

このチュートリアルでは、会社のWebサイトを作成します。 このワイヤフレームは、多くの中小企業のWebサイトに関連しています。

それでは、計画段階ではどうなりますか？

計画段階では、ウェブサイトに表示されるすべてのページとそれぞれのコンテンツをブレインストーミングするために時間を費やします。 Webサイトの次のページを検討してください。

最初のプロジェクト

次の章では、Balsamiqを使用してこれら4つのページを設計する方法について説明します。

Balsamiqモックアップ-動作中のワイヤーフレーム

この章では、Balsamiqを使用して次の4つのページをWebサイト用に設計する方法について説明します-

• リンク：/balsamiq_mockups/designing_home_page [ホームページ]
• リンク：/balsamiq_mockups/design_product_services_page [製品とサービスのページ]
• リンク：/balsamiq_mockups/designing_about_us_page [会社情報ページ]
• リンク：/balsamiq_mockups/designing_contact_us_page [お問い合わせページ]

Balsamiqモックアップ-ナビゲーション

ページを作成したので、重要な部分は、Webページのような順序でページを表示することです。 この例では、ナビゲーションは右上隅の*リンクバー*を使用して実現されます。

最初のページ Home と2番目のページ Products and Services を接続する方法を見てみましょう。

• ホームページへ
• *リンクバー*をクリックします
• properties ペインを参照してください

ナビゲーション

強調表示されているように、*リンク*セクションから、*製品*のドロップダウンをクリックします。 利用可能なモックアップのリストが表示されます。 以下にオプションを示します。

ナビゲーション

リストから、[製品とサービス]をクリックします。

ホームページ*で完了したら、他のページでも同じ手順を繰り返します-*会社概要、お問い合わせ。 他のページでは注意してください。選択したページ以外のページにナビゲーションリンクが挿入されます。

Balsamiqモックアップ-モックアップのエクスポート

この章では、プロジェクトのすべてのモックアップをまとめて、PNG画像またはPDFファイルにエクスポートする方法を説明します。

作成したワイヤフレームをエンドユーザー/クライアントに表示する場合、このワイヤフレームをより一般的な形式（PDFなど）で表示することは明らかです。 この目的のために、Balsamiq Mockupsは、PNG画像またはPDFファイルの形式で*モックアップをエクスポートする柔軟性を提供します*。

モックアップをPDFにエクスポートします。 これを行うには、[プロジェクト]メニューをクリックし、[PDFにエクスポート]をクリックします。 以下のスクリーンショットに示すような画面が表示されます。

PDF抽出

上記の画面から、チェックボックス-「リンクヒントを表示する」を選択します。 [PDFにエクスポート]をクリックします。 PDFをエクスポートする場所を尋ねるポップアップが表示されます。 場所を指定すると、PDFは指定された場所にエクスポートされます。 進行状況は、以下に示すように進行状況バーに表示されます。

エクスポート中

以下に示すようにPDFがエクスポートされると、確認ボックスが表示されます。

確認ボックス

このメッセージをクリックすると、PDFが表示されます。 PDFでは、強調表示されたリンクバーでナビゲーションを試すことができます。

リンクバー

最適な表示およびナビゲーションエクスペリエンスを得るには、Adobe Acrobat Readerを使用してください。