
【adobe XD】初心者向けの使い方。基本操作からデザインしてみよう!【step1】
公開日:2020年2月4日/最終更新日:2021年2月26日主なデザインツールとして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製品を触ったことがある人なら、ここは飛ばしてもらって大丈夫です。
あとは、チュートリアルビデオを見るのもおすすめです。
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はアップデートがとても盛んに行われており、便利なプラグインもたくさんあります。
そのあたりもおいおいご紹介しますね。
web 作成、1 度はこんなことありませんか?
最後まで記事を読んでくださりありがとうございます!
ここまで読んでくださった方々の中には、Web 制作を行っている方、企業や個人の宣伝として web で宣伝されている方など たくさんいらっしゃるかと思います。
しかし、個人で web 作成をされている方、企業として web 作成をされている方、
お問合せページに使いにくさをかんじてませんか?
たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?
あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?
そんな方のお悩みを解決するツールが、、
EasyMail という完全無料のメールフォームです!
弊社では EasyMail というオープンソースメールフォーム CMS を展開しております!
今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などな どお客様の声をふんだんに反映したものになっております!
大事なことなのでもう一度言いますが、完全無料です!
詳しくは弊社の EasyMail 特設ページをご覧ください!
お気軽にご相談ください
成果の出るホームページのご提案をさせていただきます。
集客や売り上げに直結するノウハウなどもございます。まずは一度お問い合わせください。