デザイン

デザイン

PR

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

5,026 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」を翻訳・再編集したものです。

おすすめ新着記事

おすすめタグ