Webディレクターの最強愛用ツールがAdobe XDだった件

142 view

1年ぶりの登場となってしまいました。ディレクターのTatsuyaです。ディレクターと名乗って約1年、様々な案件に関わることができました。

ディレクター業務の中で、最も難しいことのひとつが、「クライアントとのイメージ共有」です。デザインはもちろんですが、デザインに入る前のワイヤーフレームの段階でイメージの齟齬も生まれやすいと思います。これまでワイヤーフレームといえば、Excelだったり、Cacooだったり、はたまた手書きだったり、試行錯誤して作成していました。

そんな私も含め、世の中の悩めるディレクターのために開発されたと言っても過言ではないのが「Adobe XD」!今回は、私なりのAdobe XDの使い方を紹介しましょう。

Adobe XDとは?

Adobe XDとは?と言われると表現が難しいですね。デザインソフトというとPhotoshopやIllustratiorをイメージしてしまうので、デザインツールという表現が正しいでしょうか。
サイトデザイン(UIデザイン)だけでなく、UXデザインにも特化したツールと言えます。

Adobe XDは、2016年6月にベータ版がリリースされました。このときの正式名称は「Adobe Experience Design CC」。ただ、このときはMac OS版のみ。Windows版の配信は2016年12月でした。それから様々な機能追加を経て、2017年10月に「Adobe XD CC」として正式リリース。いまもマイナーアップデートが続く、現在進行で成長中のソフトだといえます。

Adobe XDで簡単ワイヤーフレーム作成!!

Adobe XDの使い方は、公式サイトや、いろいろなブログ記事で紹介されているので、ここでは、ワイヤーフレーム作成に重点を置いて、私なりのAdobe XDの使い方を説明しますね。

アートボードの設定

Adobe XDを起動すると、まずは初期のアートボードの選択画面が出てきます。Webサイトのワイヤーフレームを作成する場合、「Web1920」を選択すればよいと思うのですが、これだと左右幅が大きく、コンテンツ幅を1000pxとして設計する場合には余白が無駄です。ここでは、カスタムサイズ1200×3000にしておきましょう。

右側にある W と H の数値を変更することであとからサイズを変えることができます。
次にグリッド設定。おすすめはマス目の50pxです。(微調整するなら25px)

これでワイヤーフレームを作る準備ができました。それでは、実際の作業を見ていきましょう。

画像を挿入

簡単です。ドラッグ&ドロップするだけです。あとは拡大縮小して、サイズを決めます。グリッドにスナップするので、座標指定が楽にできます。

テキストを挿入

左側のツールの「T」のアイコンをクリックします。テキスト挿入は2種類の方法があります。

1.アートボード上で1回クリック(ポイントテキスト)
テキストボックスの下だけに◯が付きます。これをドラッグすると、ボックスの大きさにあわせてテキストサイズが拡大縮小します。

2.アートボード上でドラッグ(エリア内テキスト)
テキストボックスの上下左右四隅に◯が付き、自由にテキストボックスを拡大縮小できます。このとき、テキストサイズは変わりません。

使い勝手の良い方を選びましょう。ちなみに、これは任意に切り替えられます。


個人的には、エリア内テキストの方が扱いやすいです。

メインビジュアルを作ろう

簡単3ステップで、メインビジュアルっぽいものを作ることができます。

Step.1 四角形を作る
ツールバーから長方形ツールを選択し、幅1200px、高さ500pxの長方形を作ります。

Step.2 画像を挿入する
先ほどのように、アートボードに画像をドラッグ&ドロップするのではなく、作成した長方形の中にドロップします。
すると、あら便利。長方形の大きさに合わせて、トリミングしてくれます。

Step.3 フィルター風のレイヤーを重ねる
いま作成した背景付きの長方形の上に、さらに同サイズの長方形を作ります。
ぴったり重ねて、右側の設定にある「塗り」をクリックして、適当に#333333を指定しましょう。
さらに、「背景のぼかし」にチェックをいれます。「量」はとりあえずゼロ、「明るさ」を-40、「不透明度」を30%にすると、暗めのフィルターがかかったメインビジュアルの出来上がり!

この方法は、セクションの背景などにも応用できますので、ビジュアルがイメージできて、メリハリのあるワイヤーフレームをつくることができます。

セクションタイトル

セクション部分を作っていきましょう。
セクションタイトルは使いまわしが効くよう、エリア内テキストで幅1,000pxにして中央揃えにしておきます。ちなみに、日本語タイトル+英語タイトルを併記したセクションタイトルをよく使うのですが、あくまでワイヤーなので、ここはお好みで。

この2つのテキストボックスを囲うようにドラッグし、右クリックで「グループ化」しておくと、複製するときに非常に楽です。なお、複製はAltを押しながらドラッグすると簡単にできます。

お知らせのセクション

「お知らせ」のようなWordPressの投稿ループパターンってだいたい一緒ですよね。一度作っておくと使い回しができます。

こんな感じ。これで、例によってグループ化して、Adobe XDの真骨頂、「リピートグリッド」の出番です。

ドゥララララァアアァ!って言いながら複製します。(Diggy-MO’風に)
はい出来上がり。

ボタンを作ろう

下層へ誘導するボタンもよく使いますので、1パターン作っておきましょう。幅300pxでベタ塗りの長方形を作り、その上にテキストボックスを重ねるだけです。テキストボックスも幅300pxにしておき、中央揃えにしておくと、使い回すときに便利です。

書き出し!

一段落着いたら保存するのを忘れずに。Adobe XDはAdobe製品の中では比較的軽い方ですが、処理落ちすることもあるので気をつけましょう。
最後に、左上のハンバーガーメニューから「書き出し」を選択します。このとき、アートボードが選択されていることを確認してください、アートボードの左上にある、アートボードの名称をクリックして、アートボードがアクティブ(青い枠が出た状態)であればOKです。
「形式」はPNGかPDFをよく使います。PDFはなかなかサイズが大きいので、社内やクライアントに送付するときは圧縮することをおすすめします。
「書き出し設定」は「デザイン」で。書き出し先を必ず確認して、間違っても他の案件のワイヤーフレームに上書きしないよう、気をつけてください。

完成!!

今回のブログ用に、簡単に作成したものを出力してみました。

慣れれば15分位で、それなりのクオリティでワイヤーフレームが作成できます。作り込めば、ほぼデザインじゃん!ってなる程、綺麗なワイヤーが出来上がります。

Adobe XDで素敵なワイヤーフレームを作って、提案を有利に進めましょう!!

それではまた。

WRITER

Tatsuya KAWAHARA

制作部 / Web Coder , Web Director Tatsuya KAWAHARA

1988年8月生まれ。 社内唯一のAB型。

大学卒業後、飲食店店長、自動車販売営業を経て、未経験で入社する。

制作部配属後、新オフィスの制作、オフィスチェアの制作、デスクの制作を任される。

最近、Web制作とWebディレクターを始める。

TAGS