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