主なデザインツールとしてadobeのPhotoshopやIllustratorを使ってきたのですが、一昨年ぐらいからちょこちょこXDを触り始めました。最初はもっぱらワイヤーフレームを作るツールという感じでしたが、去年の秋頃にそろそろ本格的にXDメインでデザインしようかなと考えるようになりました。その理由として軽さ、直感的に操作できる簡単さ、デザイン公開の楽さなどがあります。中でも軽さには、長年photoshopを使っている身としては驚き!!!でした。こんな風にXDの魅力について語るのも楽しいのですが、今回は「初めてのXDでデザインしてみよう!」というお題なので残念ながら割愛します。現在(2020年2月)のところXDは無料版があるので、まずはダウンロードしてみましょう。ダウンロードページ※ダウンロードするにはadobeでアカウントを作る必要があります。リピートグリッドとガイドできることXDとは?そもそもXDとはどういう物なのか、何ができるのかをまとめていきます。XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。・共有(公開)になります。XDを開いてみても「デザイン」「プロトタイプ」「共有」のタブがあって、もう本当にストレート。これは作業順でもあるので、まずは「デザイン」画面(初期設定ですでに開いています)での操作から始めてみましょう。取説をじっくり読むタイプ、すぐに使ってみるタイプという分類なら迷わず後者の私。XDは直感的な操作性に優れているので、取説なんて必要ないかもしれません。いえ、基本操作の知識は必要ですよね。adobe製品を初めて使う人におすすめなのは、無料のスターターキットを使うこと。これを見るとXDの操作や何が出来るのかが何となくわかります。スターターキットのダウンロードPhotoshopなどのAdobe製品を触ったことがある人なら、ここは飛ばしてもらって大丈夫です。あとは、チュートリアルビデオを見るのもおすすめです。XDチュートリアルXDは、何となくわかった程度で始めることができます。作っていくうちに慣れていきます。そこがXDの最大の魅力だと思います。簡単で使いやすい物しか、結局は残りませんよね。始めてみましょう今回はPC用の短いランディングページを作成します。XDを開くと最初にiPhone、iPad、Webなどアートボードを選ぶことができます。今回はWeb1920を選びます。写真のマスクと文字入力まずはメインビジュアルを作りたいので、左上から長方形を作ります。サイズは横1920px×縦1000pxにします。この時そのまま図形を広げてもいいですが、右側のプロパティインスペクターでも数値入力ができます。この長方形に入れたい写真をドラッグして挿入します。作った長方形の形に写真が切り抜かれます(マスクされる)。これは写真を切った訳ではなくマスク状態なので、写真をダブルクリックすると写真を移動したり、縦横比率を合わせたままサイズを変えたりもできます。次はこの画像に文字を載せたいと思います。JOURNEY」と入力してみましょう。文字サイズなどプロパティインスペクタで整えたあと、写真に合わせて縦横を中央揃えにします。写真と文字を同時選択した後、右上に、IllustratorやPhotoshopでおなじみの中央揃えマークがあるのでどちらもクリック。これで写真サイズに合わせた中央揃えになりました。テキスト入力にはテキストボックスも使えます。左側のテキストツール「T」の状態で四角を作るようにマウスを動かし、その枠内にテキストを入力します。メインカラム内に収めたい時や、中央揃えの時に便利です。リピートグリッドとガイド次はXDの便利ツールNO.1「リピートグリッド」を使います。その前にガイドを引いておきましょう。今回はレイアウトグリッドを使います。右側のプロパティインスペクターに「グリッド」という項目があるのでそこをチェック。幅や間隔などはその下の数値で変更できます。ガイドはこのレイアウトグリッドと、Photoshopなどでおなじみのガイド(XDでの呼び名はカスタムアートボードガイド)が使用できます。方眼グリッドもあるのでうまく使い分けてください。リピートグリッドは名前通り、繰り返せるものの作成に便利です。1つのパターン(今回は画像と下のテキスト)を作って右上の「リピートグリッド」をクリック。すると枠線が緑色に変わって、右と下にハンドルが表示されます。そこを伸ばすと1つのパターンが繰り返されます。解除したい場合は右上の「グリッドのグループ解除」を押します。画像の挿入はファイルからドラッグします。便利なのは複数の場合。順番通りに勝手に枠内に入ります(画像は自動調整してくれます)テキストも同じように挿入できます。テキストファイルを用意してデータを入れ、改行で区切ります。固定ヘッダー、スライドショー、ヘッダーのプルダウン、ボタンのhover指定などもご紹介できたらと思います。XDはアップデートがとても盛んに行われており、便利なプラグインもたくさんあります。そのあたりもおいおいご紹介しますね。いいね!(株)ファーストネットジャパンのブログClose。