WebディレクターがAdobe XDでワイヤーフレームを作るために最初に覚えておくこと
こんにちは。株式会社Resの賀川です。主に受託でWeb制作を行なっております。
ワイヤーフレーム何で作るか?
皆さんはWebサイトのワイヤーフレームは何で作成してますか?私は最近はもっぱらAdobe XDで制作しています。
Adobe XDは便利。
ただ機能がめちゃくちゃ豊富なので、どう使ったら良いかわからない。という方も多いと思います。実際に私もAdobe XDの機能を20%くらいしか使いこなせてないです。
それでもAdobe XDはワイヤーフレーム作りに便利なので、今回は最低限これだけ覚えておけばワイヤーフレーム作りに活かせるよっていう使い方をまとめてみました。
↓Adobe XDダウンロードはこちら
準備. Adobe XDを開いてアートボードを一つ作る
まずはアートボード作ってください。Adobe XDを開き、今回は「Web 1920」を選択しました。
すると下記のような画面が出ます。
ここからスタートします。
1. UIキットを利用する
ワイヤーフレームを0から作るのは大変だと思いますが、Adobe XDはさすがでUIキットが用意されています。
一覧やカードのテンプレートがたくさんあります。
下記よりワイヤーフレームのUIキットがダウンロードできます。
「Download kits」よりダウンロードします。
こちらからコピーする事で各パーツを作る事なく利用することができます。
2. アセットに文字スタイルを登録する
次にアセットに文字スタイルを登録します。
文字スタイルとは、H1、H2、doby 等のフォントやサイズのことです。
まずは左のツールバーよりテキストアイコンをクリックし
テキストを追加していきます。取り急ぎこんな感じで追加しました。
次に、それぞれの文字のフォントサイズを変更していきます。フォントサイズを変更したい文字を選択し、
画面右側のプロパティインスペクター内にある、「テキスト」よりフォントサイズを変更します。
今回はフォントサイズを32とします。上の画像で「20」と書かれている箇所を「32」に変更します。
これで、ワークスペース内で選択した文字も変更されていることが確認できます。
同様に「H2」「H3」も変更します。今回は下記の通り変更しました。
・H2:28
・H3:24
※bodyは変更しなくて大丈夫です。
↓のような感じですね。
ここまでが準備です。次に文字スタイルを登録します。
左下にあるアセットをクリックします。
すると、ツールバーの隣にアセット設定の画面が表示されます。
対象の要素を選択し(今回の場合はH1を選択)、文字スタイルの横の「+」をクリックします。
すると文字スタイルが追加されます。
わかりやすいように名前を変更します。
これで、簡単に文字スタイルを設定できるようになりました。
↓動画作ってみました。
3. コンポーネントを利用する
「ヘッダ」「フッタ」等、複数のページで利用する項目はコンポーネントを利用すると便利です。
コンポーネントの登録は、登録したい要素を選択し、「右クリック」→「コンポーネントにする」で完了です。
コンポーネントを利用することで、文字やレイアウトの変更をする場合に、マスターコンポーネントを変更すれば全てのコンポーネントで変更されるようになるので、作業効率がグンと上がります。
参考:
4. リピートグリッドを利用する
リピートグリッドとは、要素をドラックするだけで繰り返し利用できるようになるめちゃくちゃ便利な機能です。
こちらは見た方が早いと思うので、下記ご確認ください。
こんな感じです。一覧ページ作るときとかに便利です。
参考:
ツールを駆使して時短しよう!
今回はこちらで以上です。
とりあえず最初はこの4パターンだけでも覚えておけば大丈夫かと。
今回紹介したのは基礎の基礎ですが、Webディレクターが覚えておいて損はない技術かと思います。それでは素敵なAdobe XDライフを!
参考ページ
ワークスペースの基本的な使い方は下記のページが詳しです。
読んでいただきありがとうございます。