初めてのXDでデザインしてみよう！【step1】

主なデザインツールとしてadobeのPhotoshopやIllustratorを使ってきたのですが、一昨年ぐらいからちょこちょこXDを触り始めました。
最初はもっぱらワイヤーフレームを作るツールという感じでしたが、去年の秋頃にそろそろ本格的にXDメインでデザインしようかなと考えるようになりました。
その理由として軽さ、直感的に操作できる簡単さ、デザイン公開の楽さなどがあります。中でも軽さには、長年photoshopを使っている身としては驚き！！！でした。

こんな風にXDの魅力について語るのも楽しいのですが、今回は「初めてのXDでデザインしてみよう！」というお題なので残念ながら割愛します。
現在(2020年2月）のところXDは無料版があるので、まずはダウンロードしてみましょう。

adobe XD ダウンロードページ
※ダウンロードするにはadobeでアカウントを作る必要があります。

できること

XDとは？

そもそもXDとはどういう物なのか、何ができるのかをまとめていきます。
「Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。」公式サイトより

ざっくり分けると…
・ワイヤーフレームやデザインの作成
・プロトタイプ作成
・共有（公開）
になります。

XDを開いてみても「デザイン」「プロトタイプ」「共有」のタブがあって、もう本当にストレート。そのまんまですよね。
これは作業順でもあるので、まずは「デザイン」画面（初期設定ですでに開いています）での操作から始めてみましょう。

基本操作

取説をじっくり読むタイプ、すぐに使ってみるタイプという分類なら迷わず後者の私。特にXDは直感的な操作性に優れているので、取説なんて必要ないかもしれません。
とはいえ、基本操作の知識は必要ですよね。adobe製品を初めて使う人におすすめなのは、無料のスターターキットを使うこと。
これを見るとXDの操作や何が出来るのかが何となくわかります。

スターターキットのダウンロード
PhotoshopなどのAdobe製品を触ったことがある人なら、ここは飛ばしてもらって大丈夫です。

あとは、チュートリアルビデオを見るのもおすすめです。

Adobe XDチュートリアル

XDは、何となくわかった程度で始めることができます。そして作っていくうちに慣れていきます。
そこがXDの最大の魅力だと思います。簡単で使いやすい物しか、結局は残りませんよね。

まずは始めてみましょう

今回はPC用の短いランディングページを作成します。

XDを開くと最初にiPhone、iPad、Webなどアートボードを選ぶことができます。今回はWeb1920を選びます。

写真のマスクと文字入力

まずはメインビジュアルを作りたいので、左上から長方形を作ります。サイズは横1920px×縦1000pxにします。この時そのまま図形を広げてもいいですが、右側のプロパティインスペクターでも数値入力ができます。
この長方形に入れたい写真をドラッグして挿入します。

作った長方形の形に写真が切り抜かれます（マスクされる）。これは写真を切った訳ではなくマスク状態なので、写真をダブルクリックすると写真を移動したり、縦横比率を合わせたままサイズを変えたりもできます。

次はこの画像に文字を載せたいと思います。
左側のテキストツール「T」をクリックして、写真の上で「MY JOURNEY」と入力してみましょう。
文字サイズなどプロパティインスペクタで整えたあと、写真に合わせて縦横を中央揃えにします。
写真と文字を同時選択した後、右上に、IllustratorやPhotoshopでおなじみの中央揃えマークがあるのでどちらもクリック。
これで写真サイズに合わせた中央揃えになりました。

テキスト入力にはテキストボックスも使えます。左側のテキストツール「T」の状態で四角を作るようにマウスを動かし、その枠内にテキストを入力します。
メインカラム内に収めたい時や、中央揃えの時に便利です。

リピートグリッドとガイド

次はXDの便利ツールNO.1「リピートグリッド」を使います。

その前にガイドを引いておきましょう。今回はレイアウトグリッドを使います。
右側のプロパティインスペクターに「グリッド」という項目があるのでそこをチェック。
幅や間隔などはその下の数値で変更できます。
レイアウトグリッドの表示・非表示のショートカットキーはMac の場合 – ⇧ ⌘ ‘
Windows の場合 – Shift + Ctrl + :です。

ガイドはこのレイアウトグリッドと、Photoshopなどでおなじみのガイド（XDでの呼び名はカスタムアートボードガイド）が使用できます。
方眼グリッドもあるのでうまく使い分けてください。

さて、リピートグリッドは名前通り、繰り返せるものの作成に便利です。1つのパターン（今回は画像と下のテキスト）を作って右上の「リピートグリッド」をクリック。すると枠線が緑色に変わって、右と下にハンドルが表示されます。そこを伸ばすと1つのパターンが繰り返されます。

解除したい場合は右上の「グリッドのグループ解除」を押します。
画像の挿入はファイルからドラッグします。便利なのは複数の場合。順番通りに勝手に枠内に入ります（画像は自動調整してくれます）
テキストも同じように挿入できます。メモ帳など拡張子が .txt のテキストファイルを用意してデータを入れ、改行で区切ります。そして同じようにドラッグ。
（注意点：エンコード方式は UTF-8にすること）

今回はこのあたりまでにしておきます。次回以降、最終的には固定ヘッダー、スライドショー、ヘッダーのプルダウン、ボタンのhover指定などもご紹介できたらと思います。

XDはアップデートがとても盛んに行われており、便利なプラグインもたくさんあります。
そのあたりもおいおいご紹介しますね。

→STEP２へ