はじめの一歩はワイヤーから

webサイトやアプリの作成はワイヤーフレームからはじまります。シンプルな線と塗りで描く設計図のようなもので、ページのサイズや要素の構造、ナビゲーション、サイトの機能などをレイアウトしたものです。関係者や他のチームがページの遷移、コンテンツの状態、デザインの要素を理解するのに役立ちます。
 
 

はじめの一歩はワイヤーから
例えば、自社のマイクロサイトをデザインする場合は、ワイヤーフレームを使用すれば、すべてのページとページの要素、それぞれの関わり方が一目でわかります。最も基本的なレイアウトの(最終のカラー、文字、その他のビジュアル要素を省いた)デザインを示すことで、関係者や他のチームに機能、基本的な構造、ユーザーフローをまず確認してもらうことができます。ワイヤーフレームは全体の画面設計の欠陥や矛盾を見つけるためにも欠かせないステップとなります。
webサイトやアプリの作成をワイヤーフレームから開始することで、作成者を含むすべての人がユーザビリティの観点でプロジェクトを捉えることができ、具体化されたイメージを持ってフレームワークを構築できます。Adobe XDがワイヤーフレームの作成をシンプルにします。基本的な手順をご覧ください。
  • 1. 最初は基本的なシェイプから
  • 1. 最初は基本的なシェイプから

    デザインを表示するデバイスにもとづき、適切なサイズのアートボードを選択します。プリセットサイズを選択するか、プリセットサイズがない場合は、カスタムサイズを選択します。
    アートボードの左上にあるタイトルをダブルクリックして、名前を付けます。
    アートボードにオブジェクトを追加するときは、それぞれの目的と意図、ユーザーによるインタラクションの方法を考えましょう。シェイプは要点がわかる程度にごくシンプルにし、詳細は頭の中にしまっておきます。

    アートボードを使用するのは初めてですか? 使い方をご覧ください。

  • 2. シェイプを画像プレースホルダーとして使用

    長方形や円などの基本的なシェイプを画像のプレースホルダーとして使用できます。ワイヤーフレームでは、シンプルなシェイプを画像の代わりに配置します。
  • 2. シェイプを画像プレースホルダーとして使用
  • 3. インタラクションのアートボードを複製する
  • 3. シンボルでスピードアップ

    インタラクションの表現をデザインするとき、メニューバーやヘッダーなどの主要なオブジェクトは、あたかもフィルムのコマのようにアプリのどの画面にも繰り返し表示されます。
    そのような場合、新しいアートボードを追加するたびに、繰り返し同じものを作る必要はありません。オブジェクトを、アートボードのどこにでも簡単に配置できるシンボルに変換しましょう。シンボルはすべてリンクされるため、ひとつを更新するだけで、すべて更新されます。

    シンボルの利用は初めてですか? さらに詳しく
  • 4. アートボードを整列

    範囲選択(ドラッグして選択)またはShiftキーを押しながら選択すれば、複数のアートボードを選択して移動できます。ボタンまたはメニューを使って複数のアートボードを整列でき、重ね順を変えることができます。
  • 3. インタラクションのアートボードを複製する
  • 4. グリッドでデザイン
  • 5. グリッドでデザイン

    グリッドを使ってオブジェクトやテキストをガイドに合わせます。描画中にオブジェクトの端がグリッドのスナップゾーンに入ると、自動的にグリッドにスナップします。オブジェクトやテキストをアートボードにレイアウトする際に、簡易ものさしとしても利用できます。
  • 6. ワイヤーフレームをアニメーションでリンク

    一連のアートボードを作成したら、それぞれをアニメーションでリンクし、インタラクションの方法を示します。これを「アプリのワイヤリング」と呼びます。Adobe XDでは、画面間のトランジションのタイプとして、左にスライド、右にスライド、上にスライド、下にスライド、ディゾルブなどを設定できます。また、トランジション自体のイージングと継続時間も設定できます。Adobe XDでは最後に選択した設定がデフォルトに設定されるため、同じ種類のトランジションを大量に設定しなければいけない時でも、ワイヤリング作業をすばやくおこなうことができます。
  • 5. ワイヤーフレームをアニメーションでリンク
  • 1. 最初は基本的なシェイプから
  • 7. ワイヤーフレームを共有

    作成したデザインをプレビューしましょう。デザインを共有するには、リンクを送信するか、webページに埋め込みます。フィードバックを求める場合は、コメントを有効にします。ワイヤーフレームでの一連の操作を.movファイルに記録することもできます。
    共有するAdobe XDファイルを開き、「オンラインで共有」アイコンをクリックします。名前を付け、「新規リンク」をクリックすると、URLが表示されます。デザインに変更を加えた場合は、「リンクを更新」をクリックしてURLを更新します。 リンク先はプレビューウィンドウでも、フル画面でも表示できます。プレビューを使って、インタラクションを記録することもできます。
    修正が必要な場合は、プレビューウィンドウを開いたままおこなうことができます。デザインや画面遷移を変更すると、すぐにプレビューウィンドウに反映されます。

さらに詳しく

XDチュートリアルでモバイルデザインの詳細や、アドビのエキスパートがリアルタイムにワイヤーフレームとプロトタイプを作成する様子をご覧ください。
XDでワイヤーフレームを作成しましょう
紙とペンで描画したアプリまたはwebサイトの画面がある場合は、XDのアートボードとアニメーションで再現してみましょう。その後、XDのPhotoshopとIllustratorのファイルを読み込むオプションを使用すれば、インタラクションに使用するオブジェクトを追加できるほか、必要に応じてアートボードも追加していけます。これだけで、チームや関係者にとっても概要をつかみやすい基本的なワイヤーフレームができますが、さらにいくつかの操作を追加すれば、アプリまたはサイトの完全なインタラクティブモデルができ、そのままプレゼンテーションでも使用できます。