2020.05.03私はWEBディレクター的な立ち位置で、新規webサイトの立ち上げやリニューアルなどを行っています。今回はこのXDの使い方などについて書いていきたいと思います。XDとはXDはいろんな使い方ができます。webサイトのレイアウトラフを制作する、webサイトのデザインをする、プレゼン資料を作る、プロトタイプを作る...などなど。Adobeのイラストレーターやフォトショップより機能は限られているけど、画面やコンテンツ配置の設計に特化しているソフトだと思います。操作が簡単で、動作が軽いため私もサイトのレイアウトを作るときにはいつも使用しています。XDの画面説明XDの画面は大きく4つに分かれます。表示調整部分モード切り替え1.アートボードXDを新規作成すると、中央にアートボードが作成されます。X(375×812px)のテンプレートが最初から用意されているので、ワンクリックでそれぞれの画面幅に合わせたアートボードを作ることができます。2.操作ボタン類ラフを作るために四角や丸などを描いていくんですが、その操作を行うのが左側のボタンです。アイコンでだいたい何ができるかは想像できるかと思いますが、Photoshopなどと比べて数が少ないことが特徴ですね。逆に初めて触る人でも迷わずに操作ができるということでもあります。3.表示の調整2で描いた図形などを細かく調整するのが画面右側の部分です。幅、高さ、回転、テキスト左寄せ・中央寄せ、色、背景、シャドウ、繰り返しなど細かく調整できます。4.モードの切り替え今回は説明しませんが、XDはラフやデザインを作るだけでなく、実際の画面で見たときの操作や画面遷移なども設計することができます(プロトタイプの作成)。プロトタイプのモードにすると、このボタンをクリックすると、この画面に移動する...などを決めて、プレビューすることも可能です。XDは、ラフ〜デザイン〜プロトタイプと実装前の設計工程を一手に担うことができるツールということですね。描画領域を伸ばす描画する領域を伸ばすと点線が出てきますが、これは1080pxを示すものです。1920×1080pxのモニタが主流なので、基本的に動かす必要はないかなと思います。テキストなど限られてはいますが、WEBはあまり複雑な要素は表現しないため十分ですね。右側のエリアで図形の調整を行います。色やサイズなどを変更できます。小技...知っておくとほんのちょっとだけ便利になります。色を選択する時#999999とか連続する数値(文字)の場合は、「9」と入力するだけでOKです。他にも#afafafとかの場合も「af」と入力すると#afafafとなります。↓↑で10pxずつ変更することができます。リピートグリッドXDだけの便利機能です。図形や文字をたくさん複製したい時、たまにあります。XDではリピートグリッドを使って大量生産できます。それぞれの間隔も調整可能です。一つを変更すると全て変更することができます。四角などの図形には画像を放り込むことができ、勝手にサイズ調整してくれます。リピートグリッドの図形に画像をドラッグ&ドロップで放り込むと全てに適応されます。2枚を選択して入れると交互に表示されます。パーツテンプレートを使うWEBサイトは、だいたい同じようなパーツで構成されます。ハンバーガーメニュー、SNSアイコン、ヘッダーメニュー、ボタン、矢印などなど。これらをいちいち描いていたら、とても無駄な時間を過ごしてしまいますので、よく使うと思われるパーツをまとめたテンプレートがありますので、そこからコピペしてきましょう!↓これがあれば何も問題ありません。https://www.behance.net/gallery/67284971/Wires-jp...むしろレイアウトラフの段階では、これらを使うことすらないこともあります。この段階でどこまでやるかの考え方次第ですね。僕は基本的な図形とテキストだけで構成することがほとんどです。デザイナーの邪魔になる可能性もあるので...。画面の中の基準を作ろう新規作成したXDは真っ白な状態です。どこを基準に配置しようか迷わないためにグリッドを作っておきましょう。¥で表示/非表示ができます。これを表示しておくと、画像のサイズであったり、配置であったりをきれいに整理して描くことができます。ガイドの幅や余白なども設定できるので、よく使うテンプレートの幅などに合わせておくととても便利です。僕がレイアウトを作る段階で注意しているのは、以下のこと。色をつけない(基本グレー)。レイアウトは(あまり)深く考えすぎない。見出しや本文の文字サイズは統一する。この時点で色とレイアウトをがっちりと固めてしまうと、デザインの邪魔になる可能性があると思っています(デザイナーにもよるが...)。僕の微妙な色彩センスよりか、この辺りはお任せしても良いかなと思います。あとは見やすさ、コンテンツの切れ目、何が何か誤解の無いようにするという意味で下の2つは考えています。いろんなやり方あると思うので、それぞれですね。最後に今回は超基本的な操作方法を書きましたが、これだけできれば十分でしょうね。今度はプロトタイプなどもかけたら良いなと思っています。X-T30コメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイトΔホームWEBプロフィール2016/1~2017/12まで世界一周していました。当ブログでは、旅行情報を主に書いています。宿情報グルメ旅ハックWEBお問合せホーム検索トップサイドバータイトルとURLをコピーしました。