06-6777-3688
BLOG

【adobe XD】グラデーションボタン、アセットとレイヤーについての解説。【step2】

公開日:2020年3月6日/最終更新日:2021年2月26日

こんにちは。
月イチ(もっと?)ぐらいの頻度でアップデートしている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表示、プロトタイプ画面や共有画面までご紹介できたらと思います。

→STEP3へ

web 作成、1 度はこんなことありませんか?

最後まで記事を読んでくださりありがとうございます!

ここまで読んでくださった方々の中には、Web 制作を行っている方、企業や個人の宣伝として web で宣伝されている方など たくさんいらっしゃるかと思います。

しかし、個人で web 作成をされている方、企業として web 作成をされている方、
お問合せページに使いにくさをかんじてませんか?

たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?

あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?

そんな方のお悩みを解決するツールが、、
EasyMail という完全無料のメールフォームです!

弊社では EasyMail というオープンソースメールフォーム CMS を展開しております!

今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などな どお客様の声をふんだんに反映したものになっております!


大事なことなのでもう一度言いますが、完全無料です!

詳しくは弊社の EasyMail 特設ページをご覧ください!

https://www.ezy-mail.jp/

 

株式会社ファーストネットジャパンでは、 1998年の創業から培ってきた知見・経験を基に、良質かつユーザー第一のWEBサイトを制作 して参りました。

弊社はDX推進のためのコンサルティングも行っております。
社内業務の効率化を上げたいとお考えの企業様はぜひご相談ください。

また、コンサルだけでなく、ホームページ制作。リスティン グ広告・SNS広告・メールマーケティングを利用した集客のお手伝いも承っておりますので、 まずはお気軽にお問合せください。

お見積り、外注のご相談はこちらをクリック

お気軽にご相談ください

成果の出るホームページのご提案をさせていただきます。
集客や売り上げに直結するノウハウなどもございます。まずは一度お問い合わせください。

最新の制作実績

弊社サービス