Pages Navigation Menu

For Creative Communication

ワイヤーフレーム模写で学ぶ!Adobe XDチュートリアル

Adobe XDでこれからワイヤーフレームを引いていきたい方へ!爆速の制作環境Adobe XDへようこそ!

この記事では、既存サイトを「模写」しながら、ワイヤーフレーム作成に必要なAdobe XDの主要機能と手順を紹介しちゃいます。題材は先日別記事(RFPの話)でも紹介した “Boston.gov” です。

Boston_gov

書体がかわいいので(Montserrat + Lora)、手順上書体設定を反映していますが、日本語サイトでやる場合はヒラギノ/メイリオでいいと思います。また、ワイヤーの粒度は人によりますので、それぞれの粒度でやってみてください(筆者の粒度は相当細かい方だと思います。別にレイアウトをデザイナーさんに指示するつもりはないのですが、CMSでのコンポーネント化はかなり意識して作業しています)。

さて、まずはAdobe Experience Design CC (Beta) を開きます。macOS 10.11.6 El capitan の画面で解説します。

01-hiraku

続いて最初の「アートボード」を作成します。PC版のWebページ用ワイヤーフレームを描く場合は、アートボードを1280にして、サイト幅1040ぐらいで作っていくとほどよい感じになると思います。

02-artboard

真っ白なキャンバスが手に入りました。まずはテキストを置いていきましょう。左サイドバーの「T」をクリックするか、半角英数入力モードでTキーを押すと、テキスト要素配置モードになります(私は半角キー⇒Tab+Tで選択しています。選択モード Tab+V と切り替えてよく使います)。

03-text

テキストを入力します。ここで、テキストの塗りの初期値がなぜかけっこう薄めのグレー #95989A になっているので、黒に変更します。なお、カラーパレットでよく使う無彩色のバリエーション(黒 #222222, 白 #ffffff, 濃グレー #cccccc, 薄グレー #f0f0f0 辺り)を登録しておくと捗ります。ワイヤーフレームなので、極力無駄な装飾用の色を使わないようにします。使うとしても強調の赤・テキストリンクの青程度にとどめます。

04-nuri

テキストの初期値も設定しておきましょう。文字サイズは「大」「中」「小」それぞれの標準サイズ(たとえば32px, 20px, 16pxなど)を決めておくとスムーズです。行間も1.5〜1.7ぐらい(フォントサイズ20なら行間30〜34)になるように整えておきます。このあたりのレギュレーションづくりはデザイナーさんの役割です。スタイルガイドがある場合は、それに沿うことで美しさを保ちましょう。

05-lineheight

テキスト入力モードは、「クリック」だと文字量成行のボックス、「ドラッグ」だとエリア可変のテキストボックスになります。私は「ドラッグ」の方を多用します。ちなみに、テキスト要素をクリックして、その直後にテキストボックスを作成すると、直前に選択していたテキストのスタイルを引き継ぎます。けっこう便利です。

06-kahen

ヘッダー/グローバルナビの要素を置いていきます。スマートガイドが出てくるので、中央を探したりするのが楽ちんです。

07-smartguide

なんとなく上の方が形になってきました。

08-kvarea

キービジュアル下の5つ並びのアイコンのところをトレースしていきます。適当に要素をコピーしておいて、「水平方向に配置」。これはKeynoteやPowerPointでもおなじみの操作です。

09-distribution

そろそろアートボードの高さが足りなくなってきたので、アートボードを選択して、下端にある丸を下にひっぱってキャンバスを拡張します。

10-expand

編集を続けましょう。「アイコン」はデザイン要素なので、ワイヤー上はただのグレー丸やグレー矩形にしておくと早いです。丸・見出し・リード文を選択して、Option+ドラッグで複製します。項目間余白も勝手に揃うようにスマートガイドが出てきます。

11-guide2

そうそう、こういう複数要素の繰り返しの所は「リピートグリッド」が便利なのでした。
でも実は、私はあんまりリピートグリッドを使いません。項目の高さが変わったり、3列x2のところが5項目になったり、いまいちはまらないことが多い。単にグループ化して整列させるだけでも見やすくなります。

12-repeatgrid

その下のボックスが並ぶエリアもとりあえずリピートグリッドで置いておきます。

13-repeatgrid2

ニュース一覧エリアも少しトレースしてみます。「サムネイル画像+リンク付きページタイトル+概要文」というセットの一覧は、CMSでは頻出のパーツです。日付やカテゴリーアイコンなどの出力要素も置いていきます。この辺りの表示要素を検討することで、CMS側で持たせる属性についても検討が進みます。

14-news

市長を紹介するエリア。画像左寄せ+見出し+本文+リンクボタン。いわゆる基本の「本文セット」で配置できます。このような「標準的なレイアウトパターン」を複数持っておくことが、ワイヤーを高速で引いていくために必須の技能になります。

15-set

疲れてきたので(笑)トップページを完全にトレースすることを放棄して、とりあえずフッターを置き、アートボードの高さを整えてこのページの作業を終えます。

16-footer

この画面を下敷きにして、次の画面を作りましょう。アートボードを選択した状態で、「Option+ドラッグ」で画面を複製できます。この「画面複製の速さ」こそがXDの気持ちよさの真髄と言って良いでしょう!!既に作成した画面のパーツを、別画面(=別のアートボード)にドラッグ&ドロップで再利用もできるんです!

17-home

不要な要素を削除して、記事ページの要素配置を続けていきますが、ここで複数画面で共通パーツとなるヘッダー・フッターを「シンボル」にしておきましょう。共通化したいパーツを全部選択して「シンボルを作成」を選択します。

※Tips: ここでシンボル幅をアートボード幅と一致させるために、「白塗りで境界線なし、幅1280pxの矩形」を最背面に配置し、それをシンボルに含めると、位置合わせがしやすくなります。

18-symbol

こうしてシンボル化したパーツは、1箇所を(シンボルを選択=緑枠がついている状態で)編集すると、そのシンボルを使用しているすべての画面で変更が即時反映され、非常に便利です!たとえばワイヤーの状態から、ヘッダーデザインだけ確定した場合、このヘッダーシンボルをデザインJPGで上書きすれば、一発で全画面のヘッダーを更新できます。

19-symbolupdate

ということで、粛々とコンテンツエリアの要素を配置していきます。ここまで、「テキスト」「円」「四角形」しか使っていませんが、ワイヤーフレーム作成にはこのくらいで十分です。リアルな写真配置が重要な場合などは写真を貼り込んでいきますが、「下手なデザイン」に見えないようにするには、デザイン的な要素(装飾やダミー画像)を一切省いてノイズを少なくし、「あくまで情報要素配置の確認用です(`・ω・´)」というスタンスを貫くのが重要です。

20-article

ここまで来ると、パーツの再利用でがしがしページを生産していくことができるので、作業速度がものすごく上がっていきます。汎用パーツを使い回して、主要なページはどんどんプロトタイプを作っていくことができるでしょう(あるタイミングで「パーツ集」の画面を作っておくと、ワイヤー量産も早くなるし結果後工程でも使うのでおすすめです)。基本の幅やサイズのルールを決めておくと、デザイン・コーディング工程でもだいたい縮尺感が揃うので、ボリュームと見た目のバランスを確認しながら、コンテンツ設計を進めることができます。

さらに。

今時のWebサイトは当然のようにレスポンシブですから、スマホ側のワイヤーも用意していきましょう。「アートボード追加」モード(Tab+A)からiPhone6をクリックすると、いま作業していた画面の隣にスマホ用のアートボードが配置されます。

23-sp.png

PC側から要素をコピーし、スマホでは非表示にする要素などを削って画面を作っていきます。テキストなどの要素を、PC用のアートボードからドラッグ&ドロップで配置できるのが非常に迅速!ドラッグでスマホ側に移して、文字サイズと要素幅を整えれば、たいがいのレスポンシブ対応スマホレイアウトはすぐに組めちゃいます。

24-spdrag

XDは一つのファイルに複数の画面=アートボードをまとめることができ、こうして同一画面のPC/スマホ画面を並べて管理できるのも便利なところです。

25-sp

さて。

画面数が揃ってきたら、次は遷移の確認です。もちろんXDは自身「プロトタイプ」機能を有していて、それがウリの一つでもあるのですが、私は画面遷移設定の慣れとコメント機能の柔軟さから、わざわざpng出力してInVisionに貼る(笑)手順を選んでいます。

Command+Eで全アートボードをPNGで吐き出し…

21-export.png

InVisionにインポートしてリンクを通します。シンボル化している箇所は、InVisionのHotspotテンプレート機能を使うと、共通箇所にリンクが張れるので爆速で遷移設定ができます。

22-invision.png

こうして作成したプロトタイプを利用して、主要メンバーの端末での見え感の確認や、導線の置き方をシミュレーションし、情報設計を調整してからデザイン工程に入っていきます。

こうした「模写」の活動は、着眼点によってはむしろ「デザイン」の勉強にもなりますが、(縮尺を正確にトレースし出すと、デザイン面の検討事項が増える)、細かいところをデフォルメして情報要素だけ置いていくことを短時間で重ねると、UI/UX/IAのトレーニングになります。手元で「手描き」してからXDで清書することもオススメです。速度と見栄えがバランスするちょうどよい感じのデフォルメをするには、やはり日頃から多くの優れたWebデザインを見て、「縮尺感」を把握しておくことが重要です。多くのサイトを模写することは、縮尺感を体で覚えることにつながります。

Adobe XDの身上は、その「軽さ」と「速さ」。シンプルゆえの使いやすさを活かして、快適な設計(design)業務を!!

★本記事で紹介したXDファイルはDropboxに置いておきました

【参考記事】

コメントを残す