Youtube表紙

WebディレクターがAdobe XDでワイヤーフレームを作るために最初に覚えておくこと

こんにちは。株式会社Resの賀川です。主に受託でWeb制作を行なっております。

ワイヤーフレーム何で作るか?

皆さんはWebサイトのワイヤーフレームは何で作成してますか?私は最近はもっぱらAdobe XDで制作しています。

Adobe XDは便利。
ただ機能がめちゃくちゃ豊富なので、どう使ったら良いかわからない。という方も多いと思います。実際に私もAdobe XDの機能を20%くらいしか使いこなせてないです。

それでもAdobe XDはワイヤーフレーム作りに便利なので、今回は最低限これだけ覚えておけばワイヤーフレーム作りに活かせるよっていう使い方をまとめてみました。

↓Adobe XDダウンロードはこちら


準備. Adobe XDを開いてアートボードを一つ作る

まずはアートボード作ってください。Adobe XDを開き、今回は「Web 1920」を選択しました。

スクリーンショット 2020-01-17 16.07.10

すると下記のような画面が出ます。

スクリーンショット 2020-01-17 16.07.21

ここからスタートします。


1. UIキットを利用する

ワイヤーフレームを0から作るのは大変だと思いますが、Adobe XDはさすがでUIキットが用意されています。

スクリーンショット 2020-01-19 5.56.08

一覧やカードのテンプレートがたくさんあります。

下記よりワイヤーフレームのUIキットがダウンロードできます。

「Download kits」よりダウンロードします。

スクリーンショット 2020-01-19 5.55.04

こちらからコピーする事で各パーツを作る事なく利用することができます。


2. アセットに文字スタイルを登録する

次にアセットに文字スタイルを登録します。

文字スタイルとは、H1、H2、doby 等のフォントやサイズのことです。

まずは左のツールバーよりテキストアイコンをクリックし

スクリーンショット 2020-01-17 16.11.42

テキストを追加していきます。取り急ぎこんな感じで追加しました。

スクリーンショット 2020-01-17 16.13.03

次に、それぞれの文字のフォントサイズを変更していきます。フォントサイズを変更したい文字を選択し、

スクリーンショット 2020-01-17 16.13.50

画面右側のプロパティインスペクター内にある、「テキスト」よりフォントサイズを変更します。

スクリーンショット 2020-01-17 16.13.56

今回はフォントサイズを32とします。上の画像で「20」と書かれている箇所を「32」に変更します。

スクリーンショット 2020-01-17 16.16.45

これで、ワークスペース内で選択した文字も変更されていることが確認できます。

スクリーンショット 2020-01-17 16.17.18

同様に「H2」「H3」も変更します。今回は下記の通り変更しました。

・H2:28
・H3:24
※bodyは変更しなくて大丈夫です。

↓のような感じですね。

スクリーンショット 2020-01-17 16.19.16

ここまでが準備です。次に文字スタイルを登録します。

左下にあるアセットをクリックします。

スクリーンショット 2020-01-17 16.21.29

すると、ツールバーの隣にアセット設定の画面が表示されます。

スクリーンショット 2020-01-17 16.22.05

対象の要素を選択し(今回の場合はH1を選択)、文字スタイルの横の「+」をクリックします。

スクリーンショット 2020-01-18 6.02.56

すると文字スタイルが追加されます。

スクリーンショット 2020-01-18 6.04.42

わかりやすいように名前を変更します。

スクリーンショット 2020-01-18 6.05.23

これで、簡単に文字スタイルを設定できるようになりました。


ダウンロード

↓動画作ってみました。




3. コンポーネントを利用する

「ヘッダ」「フッタ」等、複数のページで利用する項目はコンポーネントを利用すると便利です。

コンポーネントの登録は、登録したい要素を選択し、「右クリック」→「コンポーネントにする」で完了です。

スクリーンショット 2020-01-19 6.13.54

コンポーネントを利用することで、文字やレイアウトの変更をする場合に、マスターコンポーネントを変更すれば全てのコンポーネントで変更されるようになるので、作業効率がグンと上がります。

参考:



4. リピートグリッドを利用する

リピートグリッドとは、要素をドラックするだけで繰り返し利用できるようになるめちゃくちゃ便利な機能です。

こちらは見た方が早いと思うので、下記ご確認ください。

note_adobe_3画面収録 2020-01-19 6.22.20.mov

こんな感じです。一覧ページ作るときとかに便利です。

参考:


ツールを駆使して時短しよう!

今回はこちらで以上です。

とりあえず最初はこの4パターンだけでも覚えておけば大丈夫かと。

今回紹介したのは基礎の基礎ですが、Webディレクターが覚えておいて損はない技術かと思います。それでは素敵なAdobe XDライフを!


参考ページ

ワークスペースの基本的な使い方は下記のページが詳しです。




読んでいただきありがとうございます。