デザイン

デザイン

【シンプルで素晴らしい】Sketchでワイヤーフレームと情報アーキテクチャーを統合する方法

    2,662 views

    読了時間 : 約1分34秒

    Sketchを使えば、ワイヤーフレームと情報アーキテクチャーを統合し、ひとつのSketchドキュメントにまとめることができます。

    その方法をご紹介しましょう。

     

     

     

    ステップ1: デバイス情報とともに情報アーキテクチャのアートボードを作成する

    まずはデバイス1つのシンボルを配置し、それをアートボード全体に広がるよう繰り返しましょう。

    ダイアグラムが大きくなるとともにいくつでもデバイスを追加することができますし、必要であれば別のデバイスを追加することも可能です。

    ここで、デバイスのレイヤーを確実にロックするようにしてください。

    こうすることで次のステップがやりやすくなります。

    usesketch①

     

     

     

    ステップ2: シンボルページにワイヤーフレームを作成する

    シンボルページに切り替え、デバイスの画面領域に合うようにいくつかアートボードを作成します。

    ワイヤーフレームのシンボルを情報アーキテクチャーページに貼り付けることができます。

    ここで各機能に応じてシンボルアートボードに名前をつけておくのがいいでしょう。

    usesketch②

     

     

     

     

    ステップ3: 情報アーキテクチャーアートボードにワイヤーフレームとロジックを追加する

    シンボルツールを使用して、情報アーキテクチャーページにワイヤーフレームをドロップします。

    ワイヤーフレームはシンボルなので、ダブルクリックすることでいつでも編集を行えます。

    配置ができたらロジックとシーケンスダイアグラムを追加しましょう。

    それぞれの画面ごとにタイトルを付けるのを忘れないようにしてください。

    usesketch③

    usesketch④

     

     

     

     

    ステップ4: 情報アーキテクチャーとワイヤーフレームをエクスポートする

    作成したアートボードをPDFでエクスポート可能な状態にしましょう。

    こうしておくと後で検索することができるようになります。

    usesketch⑤

    usesketch⑥

     

     

     

     

    できるだけシンプルに

    この方法の優れた点は、ワイヤーフレームと情報アーキテクチャーを同じファイルに保存しながらもそれぞれが独立しているということです。

    こうすることで全てをシンプルに保つことができます。ぜひ取り入れてみてください。

     

     

     

     

     

     

    ※本稿は「Use Sketch to combine Wireframes and Information Architecture together」を翻訳・再編集したものです。

    おすすめ新着記事

    おすすめタグ