フロントエンドエンジニアのコンコンタです。
当ブログはデザインからコーディングまで全て一人で制作しました。
前編ではAdobe XDを使ったレイアウト制作の流れを大まかに解説しました。
ここでは、レイアウト制作が終わってからコーディングに入るまでの工程を解説します。
プレビューの準備
動きを試せるプロトタイプ
XDにはプロトタイプという便利な仕組みがあります。
ボタンを押した時に別の画面に移動するという流れをプレビュー上で簡単に再現できます。
デザインしたサイトの美しさだけでなく、使いやすさを考慮するなら非常に便利な機能です。
プロトタイプを作成する
作成は簡単。まず、デザインモードからプロトタイプモードに切り替えます。
その後、画面を移動するボタンをクリックし、そこから矢印を遷移先の画面に引っ張るだけ。
プレビュー画面でリンクが再現できます。
一度に全部やろうとせずにプレビューしながらプロトタイプを追加していくのがオススメです。
いざプレビュー
PC版をプレビュー
まずはPC版から。特殊な操作は必要なく、見たいアートボードを選択してからプレビューボタンを押すだけ。
即座にプレビューが開始され、プロトタイプが設定された場所をクリックすれば画面遷移もできます。
プレビューで表示される画面の縦幅は調整可能です。
ここで注意すべきなのは、ブラウザでウェブサイトを見るとアドレスバーやタブなどブラウザのコントローラーの表示領域分縦幅が狭くなることです。
アートボード上のビューポートの青いラインを上下させることでプレビューする際の画面の縦幅を調整できます。
縦画面一杯には設定せず、フルHDならブラウザを考慮して縦900px程度にすると良いでしょう。
モバイル版をプレビュー
XDの素晴らしい機能として、モバイル版のデザインを実機の画面で確認することができます。
iOSであれば特に簡単で、USBケーブルでPCとスマートフォンを接続し、スマートフォン側でもXDのアプリを起動すればそのままプレビューが可能です。
PC側で選択しているアートボードのプレビューがそのままスマートフォンの画面にリアルタイムで表示されるので、実機の画面を見ながらデザインを組み上げることができます。
Androidの場合は作成中のデザインファイルをAdobeのクラウド上にアップロードすれば、スマートフォンのXDアプリで見ることができます。
ただし、スマートフォン側に入っていないフォントは表示できないため、多様なWebフォントを使う予定の場合は少々不便です。
結果を踏まえて微調整
プレビューした結果、見づらい箇所や使いづらかった場所は修正しましょう。
スクロールの長さ、ボタンの押しやすさを検証できるのはPhotoshop、IllustratorにはないXDの強みです。
この時点で友達に見てもらえれば一番良いです。
設定したプロトタイプを一通り動かしてもらい、その様子を観察しましょう。
操作に戸惑っているようであれば、そこが改善ポイントです。
絶対に改善を怠らないように
デザイン制作は悪い部分をコーディング前に発見して、それを改善するために行う作業です。
「ここちょっと変だけど、今からデザイン直すの大変だな」と思っても直しましょう。
デザイン制作はサイト作りの序盤中の序盤の作業。軌道修正はここですべきです。
ここで作ったデザインはそのままサイトが完成した時に自分が受け取る報酬になります。
貰えるアメが大きければこの後のコーディングにも熱が入り、良いものが作れるようになります。
自主制作なら納期はありません。
限界まで自分の理想を突き詰めて行きましょう。
画像を切り出す
サイズの合った画像を用意しよう
デザイン制作は部品の組み合わせなので、当然すでに画像ファイルは用意できています。
それでもデザインファイルから画像を切り出す必要がある場合があります。
それは必要な画像サイズをピッタリ用意するためです。
HTML/CSSで指定すれば、大きい画像を縮小表示することができるので一見「大は小を兼ねる」ように見えます。
ですが、画像のサイズが２倍になると容量は２倍以上重くなるので、サイトの表示速度に大きく影響します。
面倒で手間のかかる作業ですが、適切なサイズの画像ファイルを用意しましょう。
バッチ切り出しマークを付ける
XDの画像切り出しは非常に便利です。
レイヤーウィンドウから、切り出したい画像や図形のレイヤーを選択して書き出しマークをつけましょう。
ファイル→書き出し→バッチ書き出しを選択すると、マークをつけた画像だけを切り出すことができます。
文字を含めた図形を切り出す時には、文字と図形をグループ化してからマークをつけます。
Retina対応の画像書き出し
Retinaディスプレイに対応させるためには、２倍&３倍サイズの画像を用意する必要があります。
このためにIllustrator,Photoshopではアートボードを２倍のサイズにしてデザインを制作したりします。
XDでは画像書き出しの際に、等倍、２倍、３倍サイズの画像を自動で切り出す機能があって非常に便利
ファイル名も自動的に@x2 @x3と末尾につけてくれます。
書き出し→バッチ書き出しを選択
マークをつけた画像が書きだされる
癖は使って覚えよう
バッチ書き出し機能は便利ですが、万能ではありません。
ベクターデータはsvgで、写真はjpg、手描きイラストはpngで書き出したいと思っても分けることができません。
使用できる機能を組み合わせて工夫する必要があります。
まずは、pngにしたい画像だけマークをつけてバッチ書き出し
その後、svgにしたいベクターを選択して選択画像を書き出すなどして対応しましょう。
便利な機能だけに少々お節介に感じる部分がありますが、試行錯誤して使いやすく工夫しましょう。
デザインスペックを作成
デザインスペックとは
デザインファイルを基にしてコーディングをするための資料のことです。
余白が何px取られているのか、使用フォントは何か、フォントサイズはいくつかをわかりやすくするために作成します。
psdや、aiファイルからコーディングをすることもありますが、余白のピクセル数を確認するのは結構面倒
重たいPhotoshopを起動しつつ、テキストエディタと確認用のブラウザを同時に使う必要があるのでスペックの悪いPCだと非常にイライラします。
分業する場合、エンジニアさんがデザインソフトの使い方を覚えなければいけないのも厄介
デザインスペックがあれば、コーディングは随分と楽になります。
XDなら簡単に作成できる
XDにはデザインスペックを作成&共有する機能があって非常に便利です。
「共有」→「開発用に共有」からデザインスペックを公開用のリンクを作成
作ったデータはWeb上で公開されるのでURLさえ渡せば簡単に他の人に共有できます。
共有相手のAdobeアカウントを指定することもできるのでセキュリティ面の不安もありません。
（とはいえ念の為、デザインデータに機密情報は含めない方が無難です。）
書き出して確認
ブラウザを起動して作成されたURLを打ち込めばデザインスペックを確認できます。
プレビュー用に作成したプロトタイプも表示されるので、クリックしたときにどの画面に移動するのかも確認できます。
確認したい要素をクリックすれば、周囲の要素との余白がpx単位で表示されるのが便利
フォント名、フォントサイズも一覧形式で表示されるので確認に細かい操作は必要ありません。
自主制作でもぜひ活用したい機能です。
XDは発展途上
Photoshop、Illustratorに比べてXDは歴史が浅く、所々使いづらい部分もあります。
しかし、アップデートによって急速が強化されており、ここ半年間でも結構使いやすくなりました。
今はまだPhotoshopを使い続けている職場は多いかもしれませんが徐々にXDへ移行しているようです。
今後、Webデザインをやっていきたい方は今のうちからXDの練習をしておくと自分の価値を高められるかもしれません。
練習もかねて、自分のサイトをデザインする際にはXDを活用してみてはいかがでしょうか。
