【デザイン未経験者必見！】Adobe XDとは
「Adobe XDは、ワイヤーフレーム・アニメーション・プロトタイプ・共同作業などの機能がすべて統合されたウェブデザインツールです。」
ミディアムタイトル
「Adobe XDは、ワイヤーフレーム・アニメーション・プロトタイプ・共同作業などの機能がすべて統合されたウェブデザインツールです。」
※Adobe公式より引用：https://www.adobe.com/jp/products/xd.html
webデザイナーにとって、デザインをするために必要なツールの1つになっています！
この記事では、これからwebデザインに携わりたい方や現在独学でAdobe XDを学んでいるwebデザイナーさんに向けた、Adobe XDの基本的な使い方をご紹介していきます。
【Adobe XD：基本①】パスの切り抜き
初めに、代表的なパスの切り抜き方である「合体」「前面オブジェクトで型抜き」「交差」「中マド」の4つを紹介していきます。
パスの切り抜きは同じAdobe製品であるIllustratorやPhotoshopでは「パスファインダー」と呼ばれているものです。この機能に関してはご存じの方も多いと思いますが、Adobe XDを使いこなすうえで必須の機能なので改めて確認していきましょう。
４つのパスの切り抜き方
前提としてお伝えしたいのが「切り抜き後の配色は背面のオブジェクトの塗りが優先される」ということです。
そのため、塗りたい色が決まっている場合「その色を背面に置く」ということを覚えておくと色変更の手間が省けます。
-
合体
その名の通り「重なり合ったオブジェクトを合体させる」機能です。ショートカットキー・・・win(Ctrl + Alt + U) mac(Command + Option + U)
-
前面オブジェクトで型抜き
「背面のオブジェクトを前面のオブジェクトで削る」機能です。ショートカットキー・・・win(Ctrl + Alt + S) mac(Command + Option + S)
-
交差
「オブジェクト同士が重なっている部分を残す」機能です。ショートカットキー・・・win(Ctrl + Alt + I) mac(Command + Option + I)
-
中マド
交差の逆で「オブジェクトが重なっている部分を削る」機能です。ショートカットキー・・・win(Ctrl + Alt + X) mac(Command + Option + X)
【6STEPで完成】パスの切り抜きを使って簡単なアイコンを作ってみよう！
紹介した4つの切り抜き方 実践編として「虫眼鏡のアイコン」を作って練習してみましょう。
3つのオブジェクトを用意
大小2つの丸と長方形を用意します。
大小２つの丸を重ねる
大小2つの丸を重ねます。
パスで切り抜く
2つの丸がどちらも選択された状態でパスの「前面のオブジェクトで型抜き」か「中マド」をクリックすると、大きい丸が小さい丸で切り抜かれます。
長方形のオブジェクトをつなげる
虫眼鏡の形になるように丸と長方形をつなげます。
合体する
切り抜かれた丸と長方形がどちらも選択された状態で「合体」をクリックします。
45°傾ける
合体後に回転機能を使って45°傾ければ完成です！
【Adobe XD：基本②】リピートグリッド
みなさんはAdobe XDで1つのオブジェクトを何個も繰り返しコピーしたいときはどのようにしていますか？コピペを何度も何度も繰り返して、手数が多くなってしまってはいませんか？
いろいろなwebサイトでよく見かけるサムネ付きの記事一覧をあっという間に制作できちゃうのがAdobe XDのリピートグリッドです！
ここでは、リピートグリッドの使い方をわかりやすく紹介していきます。
【5STEPで完成】リピートグリッドでオブジェクトを量産！
サムネ付きの記事一覧を制作することを想定したリピートグリッドの使い方をご紹介します。
繰り返しコピーしたいオブジェクトを作成 ▶ リピートグリッドを選択
サムネ付きの記事のオブジェクトを1つ作成し、グループ化します。
繰り返しコピーしたいオブジェクトを選択し、画面右側のパネル上部にある「リピートグリッド」をクリックします。選択していたオブジェクトが緑の破線で囲われていればOKです。
横に欲しい数だけ増やす
緑の枠の右側面にツマミがあるので、それをスライドさせるとオブジェクトが横方向に複製されていきます。欲しい数だけ複製したらストップです。今回は3列分複製してみましょう。
下方向にも同じようにツマミをスライドすると「3×2」の記事一覧ができます。
オブジェクトの間隔を整える
オブジェクトの隙間にマウスオーバーするとピンクに光ります。光っている部分をドラッグアンドドロップして好きな幅まで伸ばしていきます。
画像には映っていませんが、数値が表示されていますので幅を等間隔に整えることも可能です。
サムネ画像を一括変更
1番目のサムネに6枚の画像をまとめて「ドラッグアンドドロップ」すると、あっという間に6枚すべてのサムネ画像が変更されました。
これでサムネ付き記事一覧の完成です！
【HTML・CSS未経験者必見！】おすすめサイトまとめ①
最近は、webデザイン未経験からwebデザイナーを夢見る方が急増しています。独学でAdobe XDの使い方を学んでいる方も多いことでしょう。
その際に多くの方が悩むのが下記のような壁です。
- Adobe XDで作ったサイトのデザインカンプをいざHTMLやCSSでコーディングしようにもうまくいかない
- 自分でゼロからコーディングできない
そのようなとき、初心者の方の強い味方になってくれるサイトをご紹介いたします。
【Adobe XD：基本③】ホバーステート
ホバーステートとは、ボタンや画像などにホバー（マウスオーバー）したときの効果をAdobe XD上で再現できる機能です。
※マウスオーバーとは、マウスポインターをオブジェクトに重ねることです。
今回は「ホバーしたら水色に変わる緑のボタン」の制作手順を紹介します。
【9STEPで完成】ホバーステートでボタンを作成！
ボタンを用意
長方形ツールと文字ツールを使って基礎のボタンを作ります。
コンテキストメニュー
作ったボタンを右クリックしてコンテキストメニューを表示します。
コンポーネントにする
コンテキストメニューから「コンポーネントにする」を選択します。
緑の線に囲われたことを確認
コンポーネント選択後、ボタンが緑の線に囲われたら正しく実行されています。
初期設定のステート
緑の枠に囲われているのを確認したら、右のパネルに「初期設定のステート」が表示されます。
「＋」をクリック
「初期設定のステート」の右側にある「＋」をクリックすると、画像のような項目が出てきます。
「ホバーステート」を選択
項目の中から「ホバーステート」を選択します。
ホバー時のボタンの色に変更
「ホバーステート」を選択し、ボタンの色を変更します。
ボタンの色を変更
この色がボタンホバー時の色になります。
動作確認
「初期設定のステート」を選択しなおし、画面右端のプレビューを押して動きを確認してみてください。
完成！
ホバーしたときに色が変われば完成です！
おまけ
使い慣れる為に内側シャドウなどその他の効果も試してみるのもおすすめです！
【初心者必見！CSSのみで完結】おすすめサイトまとめ②
こちらで紹介するサイトは、HTMLとCSSについてとても親切に記載されているデザインソースサイトです。制作するサイトに「このボタンを導入したい」と思ったらすぐにソースをコピペできます。
ボタンデザインが豊富で「Webデザイン未経験でボタンデザインまではできたけど、コーディングに自信がない」という方でもデザインの参考になるはずです！
独学でHTMLやCSSを学んでいる方にとっての救世主になるかもしれません。
サルワカ | 押したくなるボタンデザイン100
tamatuf | CSSで実装するボタンのホバーエフェクトまとめ
【Adobe XD：基本④】グラスモーフィズム
グラスモーフィズムとは、2020年ごろからデザインのトレンドとして注目され始めたwebデザインのスタイルです。すりガラスのような質感と背景が半透明にぼやけるのが特徴で、スタイリッシュな印象のデザインになります。
webデザインを学び始めた方には聞き慣れない言葉かもしれませんが、Adobe XDを使えば思っているよりとても簡単に制作できます！
【5STEPで完成】グラスモーフィズムをAdobe XDで再現！
背景を用意
グラスモーフィズムの効果がわかりやすいようにオブジェクトの輪郭がはっきりしている背景を選びます。
長方形を重ねる
背景の上に「塗り」と「線」が白の長方形を配置します。お好みで「角丸」にしてもいいでしょう。
背景のぼかしを選択
長方形を選択した状態で右のパネルの下の方にある「背景のぼかし」にチェックを入れます。初期設定の数値が表示されていますので、ここからお好みの数値に変更していきます。
お好みの数値を入力
ここでは「量：10」「明るさ：2」「不透明度：0」と設定してみましょう。背景のオブジェクトがぼかされ、すりガラスのような質感になります。
「線」の不透明度を下げる
最後に「線」の不透明度を「20％」にしてお好きな文字を配置すれば完成となります！
【webデザイン未経験者必見！CSSのみで完結】おすすめサイトまとめ③
グラスモーフィズムジェネレータで数値を入力することによって、好みのグラスモーフィズムを制作できるサイトを紹介します。
そのままCSSを書き出してくれるので、コーディング未経験のwebデザイナーでもweb上で簡単にグラスモーフィズムを再現することができます。
いろいろな数値を試してCSSの変化を確認すれば、どのCSSがどのような役割を担っているのか感覚をつかみやすいです。
Glassmorphism CSS Generator |
グラスモーフィズムCSS書き出しサイト①
Glass Morphism | グラスモーフィズムCSS書き出しサイト②
【webデザインを独学で学べる時代】webデザイナー未経験でも大丈夫！オンラインツールやまとめサイトをフル活用しよう
デザイン未経験の方向けに、Adobe XDの基本的な機能の使い方を紹介しました。
これからwebデザインの世界へ飛び込もうとしている方の力に少しでもなれたのなら幸いです。
この記事で紹介したサイト以外にもHTML・CSSのまとめサイト、無料で使えるオンラインサイトはたくさんあります。
最後に筆者自身も大変お世話になっているAdobe公式の「Adobe XD Trail」をご紹介します。
「Adobe XD Trail」は「動画で学ぶ総合学習プログラム」として、Adobe XDの様々な機能を動画で紹介しています。独学でAdobe XDを学ぶ方にとっては勉強方法の1つとして大活躍間違いなしのプログラムです。
また有名webデザイナーのTwitterやInstagramもとても勉強になりますので、ぜひ、検索してみてください。
それではまた、次の記事で。お疲れ様でした！
