06-6777-3688

BLOG

初めてのXDでデザインしてみよう!【step2】

2020年3月6日

こんにちは。世間はコロナウィルスの話題でもちきりですね。
そんな中、月イチ(もっと?)ぐらいの頻度でアップデートしているXD。
前に出来なかったことが出来るようになっていたり、助かることも多いです。
そういう情報もどんどんお知らせできればと思いつつ、まずは今日のテーマをご紹介します。

前回のSTEP1はこちら

XD STEP2

前回の続き

グラデーションボタン

前回に引き続き、デザインを仕上げていきます。リピートグリッドの下にお問い合わせフォームへ飛ぶリンクボタンを作成しましょう。
左側□ツールをクリックし、任意の場所にざっくり長方形を作ります。今回はw400px×h80pxにします。
角丸はIllustratarと同様で、長方形の中の丸を内側に移動させると簡単にできます。

step2_画像1

使ってみた感想ですが、XDとIllustratarは互換性が高いです。ショートカットも同じ物が多いので、イラレ使用者にはとっつきやすいでしょう。

さてグラデーションですが、右側のプロパティインスペクターに塗りという項目があります。
こちらをクリックすると小窓が開きます。初期状態は「べた塗り」なのですがこちらのプルダウンには「線形グラデーション」と「円形グラデーション」があります。
今回は線形グラデーションにして、任意の色で作成します。今回は#01C18Dから#0083B4に。
ちなみにグラデーションの方向は長方形内のハンドルで変更できます。
長方形の上に「CONTACT」とテキスト入力すればボタンの完成です。

step2_画像2

デザイン完成

手順の関係で最後になってしまいましたが、まずはヘッダーを作ります。
ロゴを右上に置き、その横にお問い合わせフォームに飛ぶリンク用のアイコンを置きます。
そのまま駆け足ですがフッターを作ります。背景色#0089B1の長方形を作り、その上にコピーライトをテキスト入力してデザインが完成しました。

完成デザイン

アセットとレイヤー

ところでXDの画面には左下に3つのボタンがあります。上から「アセット」「レイヤー」「プラグイン」ボタンです。
ブラグイン以外は再度ボタンを押すと内容が折りたためるようになっています。

まずはアセットから。こちら、見たまんまです。
よく使う色や文字スタイルを追加できます。アートボードをたくさん作る場合に便利な機能です。
一番下のコンポーネントについては一旦置いておいて、次にレイヤーの説明に移ります。

step2_画像3

コンポーネントと固定ヘッダー

今までレイヤーについては気にせずざっくり作っていました。
photoshopで作成する際はレイヤー管理が大変でしたが、XDでは逆にレイヤーを触ると階層がどんどん下に潜る感じで少し扱いづらいです。
このあたりもイラレと似ていますね。

今回はヘッダーを固定したいのと、こちらはメールフォームとの共通部分になりますのでコンポーネント(共通コンテンツ)にしたいと思います。

ヘッダーはロゴとメールアイコンのみですのでこれらを選択してグループ化します。レイヤーに「header」とリネームした後、右側のコンポーネントの+を押します。
※これは先程のアセット内にあったコンポーネントと同じ。ちなみにwindowsでは右クリック内のメニューにもコンポーネントが出てきます。ショートカットキーはCtrl+K(macはcommand + K)。
するとコンポーネントの右側にマスターという文字が追加されます。コンポーネントの修正はこのマスターで変更すると、他ページで使用しているコンポーネントも一気に変更します。

step2_画像4

そしてこのヘッダーを固定にしたいと思います。これは一瞬です。右側の「スクロール時に位置を固定」にチェックするだけ。
右上の再生ボタンのような▶マークを押してください。これはデスクトッププレビューといって、どのような表示になるかがプレビューできます。

 

 

XDはデザイン作成だけでなく動きまで見ることができるので、コーダーへの指示やクライアントのプレゼンに最適なソフトです。

メールフォームページ

新規アートボード

ページ遷移の作業をしたいのでメールフォーム画面をデザインします。
左側のメモっぽいアイコンを押すと右側にサイズがずらっと出てきます。今回も1920pxで作りたいので、Web 1920をクリック。右隣に新規アートボードが作成されます。

step2_画像5

左側をアセット表示にすると、コンポーネントにさっき作ったheaderが入っています。
それを新規アートボードにドラッグしてみましょう。位置を合わせて右側を見ると、コンポーネント(インスタンス)となっています。これはマスターのコピー的な意味合いがあります。
このインスタンスとマスターとの違いは、こちらを編集してもマスターに影響がないことです。
仮にインスタンスの背景色をグレーからブルーに変更してみます。その後、マスターの方で色を変更してもインスタンスには反映しません。
次にマスターの背景色の横幅を広げてみると、インスタンスの方も横幅が伸びます。つまりインスタンスの方は背景色の情報のみがマスターと違うということです。

step2_画像6

今回はこのあたりで終わりたいと思います。
次回はボタンのhover表示、プロトタイプ画面や共有画面までご紹介できたらと思います。