デザイン

デザイン

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

369 views

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

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

 

 

 

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

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

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

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

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

usesketch①

 

 

 

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

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

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

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

usesketch②

 

 

 

 

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

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

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

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

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

usesketch③

usesketch④

 

 

 

 

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

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

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

usesketch⑤

usesketch⑥

 

 

 

 

できるだけシンプルに

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

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

 

 

 

 

 

 

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

関連記事

おすすめ記事