フロントエンドエンジニアのコンコンタです。
当サイトは自分でデザインからコーディングまで手掛けています。
デザイン制作ではAdobe XDを使用しています。
比較的新しいソフトなのでまだ利用人口が少ないようですが、Illustrator、Photoshopに比べてWebデザインは格段にやりやすく重宝しています。
この記事では、当サイト「コンコンクリエート」のデザインデータを使用してXDでのデザイン制作の流れをご紹介していきます。
はじめに
Webデザインの大まかな話は別の記事で
デザインソフトの選び方や、デザイン作業全体の流れについてはこちらの記事をご覧ください。
XDでの作業に絞って解説
この記事では、Photoshopでの写真加工、Illustratorでのアイコン等作成には触れません。
部品は作成済みとして、XDの作業に絞って解説していきます。
また、キー操作などの細かい手順についても触れません。
操作方法については、記事に出ている用語をヒントにして適時ググってください。
PC用のアートボードを作る
まずはアートボードを作る
プロジェクトを作成したら、最初にやるのがアートボード作成
XDでは１つのファイルでサイトの全ページ分のスマホとPC用デザインを全て作成します。
まずはPC用デザインのアートボートを作成します。
PC用の横幅は1920pxで
PC用デザインの横幅はユーザーが使うディスプレイや、ブラウザのウィンドウサイズによって変動します。
まずは大きくデザインし、ウィンドウサイズが小さくなった時にどう縮小していくか考えるのが良いでしょう。
縦幅は随時変えながら作るので、横幅1920px 縦幅1080px程度でアートボードを作成します。
Web用のプリセットを使用しても良い
PC用のヘッダー&フッターを作ろう
まずは共通部分から
全ページで共通のヘッダーやフッターがあるのなら、まずはそこから作りましょう。
事前に練ってある構想に従い四角形や、作成済みの部品などを配置していきます。
ナビゲーションメニューの文字などの細かい部分は後回しにしても良いです。
全体のレイアウトができてから「やっぱり変えようかな」となる可能性があります。
まずは全体のレイアウトと色合いを確認できるようになることを目指しましょう。
基本的な装飾
角を丸くする、ドロップシャドウ、境界線などのお馴染みのスタイリング機能はXDにももちろんあります。
右側のメニューの中から選択して使いましょう。
横スクロールの見切れなどの表現はクリッピングマスクを使用します。
使った色はアセットに登録
サイトの構想を練る時に大切なのは使う色を何色か大まかに決めておくこと
色数が多くなりすぎるとごちゃごちゃした印象になりますし、作るのも大変です。
デザインを作る際に使った色はアセットに登録しておきましょう。
これ以降、この色を使う場合はアセットから選択して使用するようにしてください。
色を変更する際、アセットの色を変更すれば同じ色の部分全てが同じように変更されるようになります。
レイアウト作成後に色の調整をするのに便利です。
レイヤーを整理しよう
キリのいいタイミングでレイヤーを整理しましょう。
左側のメニューを切り替えることでレイヤーウィンドウが表示されます。
後からどのレイヤーがどのオブジェクトかをパッと見で確認できるように整理しておきます。
サイトの上にあるオブジェクトを上になるようにレイヤーウィンドウを並べ替えするのが基本
オブジェクトを組み合わせて作っている部分はグループ化するとわかりやすくなります。
面倒臭がらずに１つ１つ名前をつけて管理していきましょう。
１ページ完成する頃には膨大なレイヤー数になりますので、要所要所でまとめることが大切です。
コンポーネント機能を使いこなそう
サイトのいろんな場所で使い回すような部品はコンポーネント登録しましょう。
今作ったヘッダーはまさにうってつけです。
ヘッダー全体を登録し、「PC用ヘッダー」とでも名前をつけます。
コンポーネント化しておくことで、別のページを作った時に簡単にコピーを生成できる上、どれか１箇所を修正すれば他に配置したコピーにも修正が反映されるので手直しが非常に楽になります。
使い回すオブジェクトはコンポーネントにした方がXD自体の動作も重くならずに済みますし、レイヤー構成もシンプルになります。
コンテンツ部分を作ろう
サンプルだけどデタラメはダメ
共通部分が完成したら、次はコンテンツ部分を作っていきます。
あくまでデザインなので、コンテンツとなる文章などはテスト用のデータで構いません。
しかし、デタラメな文章を配置すればいいというわけでもありません。
英語と日本語を混ぜたり、文字数が多い場合、少ない場合でデザインの違いを見たりする必要があるので、多様なデータを用意するのが良いです。
「テストデータです。」みたいな単純な文字だけでデザインしてしまうと、実際にサイトを作ったときに思いがけないところが改行されたり、英語を入れたら雰囲気が変わってしまったりするかもしれません。
リピートグリッドを使おう
ブログの記事一覧画面や、ポートフォリオサイトの作品一覧画面をデザインする時に重宝するのがXD特有のリピートグリッド機能
まず１つオブジェクトをデザインし、選択してからCtrl+Rを押すとグリッドの範囲を決めるバーが出現します。
これを広げることでオブジェクトの繰り返しの範囲を決定することができます。
さらに、オブジェクト同士の間の感覚も調整することができ１箇所を変えれば他の間隔全てが自動で同じように調整されます。
Illustrator、Photoshopでは大変だった作業なだけに、この機能は非常にありがたいです。
僕はこれの為にXDを使っていると言っても過言ではありません。
リピートグリッドを編集する
オブジェクトの繰り返しができたら、次は中身を修正していきます。
色味などを見る上でも、繰り返しの内容が全て同じだとデザインを正しく評価できません。
手早く変えられる箇所は変えておきましょう。
まずはサムネイル画像を変えます。操作は簡単
jpg, pngなどの画像ファイルを変えたい画像の上にドラッグ&ドロップするだけです。
便利なことに、２番目の画像を変えると偶数箇所全ての画像が変わってくれます。
３番目も変えれば、１、２、３ １、２、３・・・と言った具合に繰り返しで変わってくれます。
とりあえずパッと見が違う画像を並べて見たい時には非常に便利です。
スマートフォン用デザインを作ろう
横幅は３７５px
PC用のデザインができたら、次はスマートフォン版です。
スマートフォンの横幅は現在主流の３７５pxで作成します。
Illustrator、Photoshopでデザイン制作経験がある方は、スマホ用デザインは２倍の大きさで作るという常識があったと思いますが、XDでは不要です。
デザイン内の画像を２倍、３倍にして切り出す機能がある為、等倍でデザインしてもRetinaディスプレイに対応できます。
２倍デザインに慣れている人はそれで作っても問題はありません。
使えるところは流用する
スマホ用アートボードを新たに作成するとはいえ、PC用のデザインから流用できるポイントは多いはずです。
そのまま使えるものはコピーし、縮小するものは縮めて使いましょう。
スマホ用のコンポーネントも作ろう
スマホ用デザインのフッター、ヘッダーなどはPC用とは別に新たなコンポーネントとして登録しましょう。
PC用のヘッダーを流用してスマホ用を作成する時には注意してください。
PC用のコンポーネントを縮小したりすると配置済みの別のコピーも同じように縮小されてしまいます。
流用する場合は、必ずコンポーネントを解除してから修正を加えましょう。
全体を調整しよう
色味の調整
一通りデザインが完成したら、最後は微調整
引いた視点から色味やレイアウトを確認しましょう。
パッと見で良いと思っても、試しに変更を加えてみるといい結果になるかもしれません。
アセットに登録した色のカラーコードを変えて、違う色のデザインも見てみましょう。
プレビューして細かく調整
ざっくりとしたレイアウトができたらいよいよ微調整
XDには便利なプレビュー機能が付いており、ブラウザやスマートフォンの見た目に近い形でプレビューできます。
プレビューとコーディング用の画像の切り出しについては後編で紹介していきます。
知っておくとコーディング作業が楽になる機能を紹介しているので、ぜひご覧ください。
