Adobe Illustrator は、Web デザインの世界で復活を遂げつつあります。 SVG がオンラインで一般的に使用されるようになっただけでなく、ますます多くのデザイナーがワイヤーフレーム作成にベクターを使用するようになっています。 以下のヒントは、ワイヤーフレーム作成ツールとしてIllustratorを最大限に活用するのに役立ちます。

ワイヤーフレーム作成は、迅速に作業し、迅速に反復することです。 魅力的なインターフェイスを作ることが目的ではなく、情報と体験をデザインすることが最優先です。 ワイヤーフレームは、ユーザーが利用可能な情報を処理する順序を視覚的に示しています。 ユーザーが「今すぐ購入」ボタンを押す前に見出しを処理するようにしたい場合、見出しはより多くの注意を要求することにより、ボタンを「切り捨てる」必要があります。 見出しをよりインパクトのあるものにするためにサイズを使用したり、（ボタンの前に配置することで）位置付けを使用したりすることができます。

方程式から色を取り除くことにより、位置、サイズ、および (追加のステップを実行する場合) コントラストによって定義される視覚的な関係は、はるかにすっきりとしています。 限られた範囲のグレーにこだわり、ラベルやメモにだけ色を使用します。 特定の目的のためにレイヤーを維持する

ラベル、メモ、およびコメントについて言えば、それぞれを専用のレイヤーに配置するのは素晴らしいアイデアです。 ビジュアルを 1 つのレイヤーに、ビヘイビアを別のレイヤーに、ラベルを別のレイヤーに配置し、必要なときに簡単に表示を切り替えられるようにします。

3. 記号の活用

D.R.Y. はプログラミング用語としてよく使われますが、設計ワークフローにも同様に適用できます。 任意のワイヤーフレームでは、特定のオブジェクトを使用および再利用することになります。 これらのオブジェクトをシンボルにすると、1 つに加えた変更は即座に残りのオブジェクトに反映されます。

たとえば、ここにシンプルなフォーム フィールドがあります。

これをシンボル ペインにドラッグします (Shift + Command + F11)

これで何度でもこのシンボルをシンボル ペインからアートボード上にプルできます。 そのうちの 1 つをダブルクリックすると、（グループ化されたオブジェクトのように）それを分離して、編集できるようになります。 この場合、矩形の角を丸くするなどの変更は、使用したフォームフィールドシンボルの一つ一つに適用されます。

記号のコレクションができたら、それらをセットとして保存することもできます。

これにより、将来、他のファイルにそれらを読み込むことが可能になります。

4.シンボルパレットについてもっと知りたい場合は、クイックヒント：Adobe Illustratorでシンボルを使用するを参照してください。 矢印はポインティングに最適

1 つの素晴らしいヒントは、CS5 以降、Illustrator ですぐに利用できるストローク矢印を活用することです。 ワイヤーフレームは、インタラクション、アプリケーション フロー、ナビゲーション、および移動を視覚的に説明する理想的な機会です。

最近では、ストローク ペインから直接、ストロークに矢印を簡単に追加できます。

Ryan Cornwell が説明したように、Illustrator ソース “Arrowheads.ai” ファイルを編集して、独自の矢印を追加することさえできます。

注意: 残念なことに、スポイト ツールは他のストローク スタイルと一緒に矢印を適用しないので、選択した効果を複製するのはそれほど簡単ではありません。 しかし、それでも、ワイヤーフレームには最適です。

5. グリッドにスナップして統一されたスペーシングとサイジング

多くの点で、これは色を使用しないことから続いています。 正確な寸法が、UI が将来的にどのようになるかを反映していなくても問題ありません。

グリッドを表示 > グリッドにスナップ を選択すると、オブジェクトを正確に配置できます。

グリッドをどのように見せたいかを正確に指定するには（ここでは細かいことは考えずに）、Illustrator > 設定 > ガイド & グリッドに移動します。 そこで、グリッド線間の距離を定義し、それらの線の中にいくつのサブディビジョンが必要かを指定します。

Note: 自由にグリッドをグレー以外の色で着色してください。 柔軟なボタンにグラフィック スタイルを使用する

忠実度 (最終的な Web サイトにどれだけ忠実か) のレベルに応じて、たとえば、ボタンの中に実際のテキストがある場合があります。

では、ダミーのテキスト文字列から始めてみましょう。

Window > Appearance で外観ペインを開いてください。

［アピアランス］ペインを使用すると、1つのオブジェクトに複数の塗りつぶしを追加することができます。 この画像では、複数の塗りつぶしが重なって表示されています。

とりあえず、2 つの塗りつぶしが必要なので、テキストに暗い色の塗りつぶし、背景に薄い色を追加してみましょう。

現在、薄いグレーの背景は、一番上の塗りとまったく同じ形をしているため、見ることができません。 しかし、それぞれの塗りつぶしを分離して個別に操作することができます。 外観] ウィンドウで一番下の塗りつぶしを選択し、[効果] > [図形に変換] > [角丸四角形]…

適当な設定を入力し、サイズがこれを適用するオブジェクトと相対関係にあることだけを確認します。 ボタンだ! この外観を他のオブジェクトに適用するには、[グラフィック スタイル] ウィンドウを開き、ボタン全体をその中にドラッグします。 その外観はスタイルとして保存され、再利用できます。

たとえば、ここに長いテキスト文字列があります。 テキストを選択した状態で、新しく作成したグラフィック スタイル (ダブルクリックして名前を変更したもの) をクリックすると、即座にそれが適用されます。 レイアウトを走り書きして、次に進み、別のレイアウトを走り書きして、次に進みます。 したがって、簡単にアクセスできる既製の出発点を持つことは理にかなっています。 たとえば、ここでは、iPad の画面 (1536x2048px) と 4 つの iPhone 4S の画面 (640x960px) のレイアウトですが、任意の数のデバイス画面例のファイルを準備することができます。 手動で希望の寸法を設定するか、または、[アートボード オプション] から利用可能なプリセットのいずれかを選択します：

すべての共通のガイド、レイヤー名、記号セットなどを含めます。 この出発点は、File > New from Template… で利用可能で、そこに残しておいたすべての断片が含まれます。 ダミーテキストに TextExpander を使用する

Illustrator にはダミーテキスト ツールが付属していません。 遊んでみる価値のあるスクリプトもありますが、Illustrator Wireframes にダミー テキストを入れる最も簡単な方法は、TextExpander を使用することです。

注意: Windows ユーザーなら、PhraseExpress は TextExpander と同様の機能を提供します。

ワイヤーフレームでよく使用する一連のテキスト スニペット (大きな見出し、短い見出し、さまざまな長さの本文、典型的なボタン テキスト、メニュー アイテムなど) を追加して、Illustrator からすぐに利用できるようにします。

各スニペットにキーフレーズを定義すると、TextExpander はそのフレーズを入力するたびにコンテンツに置き換え、時間を大幅に節約できます。

TextExpander ワークフローの最適化についてもっと知りたい場合は、Master TextExpander With These Helpful Tips & Tricks をご覧ください。 論理的なファイル名の練習

変更やアイデアをすばやく視覚化できることは、ワイヤーフレーム作成の核心です。 重要なのは、重要な段階で、論理的なファイル命名規則で保存することです。

たとえば、各ファイル名を作業中のページ名で始めるとよいでしょう。 それから、ある種のバリアント名を使用し、その後にバージョン番号を使用するのが賢明かもしれません。 page-variant-version.ai

たとえば、Eメールキャンペーンや電子書籍のプロモーションに集中するランディングページを作成するとします。 この場合、ファイル名は次のようになります。

これにより、プロジェクト フォルダが整理されるだけでなく、手動バージョン管理の一形態として機能するようになります。 Matt Smith は、彼の記事 Wireframing With Illustrator and InDesign で、このアイデアについて詳しく説明しています。 Dropbox に保存して簡単にバージョン管理する

バージョン管理のアイデアをさらに発展させ、ファイルを Dropbox に直接保存すると、そのタスクが To Do リストから完全に削除されます。 Dropbox の無料プランでも、保存するたびにファイルのコピーが 30 日間保存されます。

同様に、Layervault は無料プランで同様の素晴らしい機能を提供しています。 すべてのメンバーが 1 つの中心的な場所で作業し、誰かが何か変なことをしても、任意のバージョンを復元できるオプションがあれば、チームワークに最適です。

結論

これらのヒントの多くは、私自身のワークフローに完全に個人的なもので、あなた自身のやり方に完全に翻訳することはできないかもしれません。 しかし、少なくとも、あなたが Web レイアウトのワイヤーフレームの作成方法について考えるきっかけになれば幸いです。 もし、あなた自身の他のヒントがあれば、コメントで共有してください！

Further Reading

• Wireframing With InDesign and Illustrator
• Wireframing With Illustrator and InDesign (subtle difference!)
• A Beginner’s Guide to Wireframing
• Illustrator and Arrowheads