06-6777-3688
BLOG

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

2020年4月22日

こんにちは。デザイナーの原田です。テレワークで仕事していると、どうしても体を動かす機会が減りますよね。
そんな時は自宅で、簡単な運動をする時間を作ってみませんか?
と言っても大したことではなくて、トイレに立つ度にスクワット20回とか、休憩時間にラジオ体操をするとか。
ちょっとした気分転換にもなるのでお勧めです☆

さて、今日のXDのテーマはプロトタイプモードや共有モードの使い方です。

前回のSTEP2はこちら

XD STEP3

XDの特徴

step1で、XDの特徴についてお話しましたが、

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

これをもう少し詳しく書くと、
・デザインモードでデザインを作る
・プロトタイプモードで、主にアートボード間のリンク導線を作る
・共有モードで、案件を共有(公開)する

XDはただのデザイン作成ツールではなくて、作ったデザインに動きを付けることができます。
そしてそれを共有し、クライアントや他のスタッフにデザインや動きを確認してもらい、コメントなどで簡単にフィードバックを集めることができます。

プロトタイプ作成

前回に続いて、デザインモードでメールフォームをざっくり作りました。

step3 画像1

左上のタブ、プロトタイプをクリックします。
プロトタイプモードは、右側のプロパティインスペクターがデザインモードと違いますね。

さっそくアートボード間のリンクを繋げたいと思います。
まずはどのページがHOMEなのか(一番最初に表示するか)を設定します。
アートボードを選択(左上のアートボード名をクリック)すると薄いグレーの家アイコンが表示するので、それをクリック。
ブルーになってこのページがHOMEに設定されました。

step3 画像2

それが終わるとリンクを設定します。
グローバルナビ(この場合はグレーの四角形)をクリックすると、右向き矢印が出てきます。それをドラッグするとコネクタという線が出てくるので、隣のアートボードまで一気に伸ばします。

step3 画像3

そしてメールフォームのアートボードに移り、ロゴ(この場合は黒の長方形)をクリックして、同じように左のアートボードまでコネクタを伸ばします。
これでグローバルナビのリンクは完成です。

step3 画像4

HOMEのアートボードにはメインカラム内にもリンクボタンがあるので、こちらも同様に右のアートボードまでコネクタを伸ばします。
終わったら右上のプレビューボタンを押して、リンクが正常に効いているのを確認します。

今回はよくあるリンクでしたので、右側のプロパティインスペクターを使用せずに作業が終わりました。
このようにデフォルトである程度の事ができるのがXDの良さだと思います。
右側プロパティインスペクターについては1ページ割けるほどの分量なので、次回以降に詳しくご紹介しますね。

共有

左上の共有を押すと、アートボードが青枠で囲まれていることに気づくかと思います。
この青枠は公開するものという認識です。もし仮に他にもアートボードがあって、それが青枠で囲まれていない場合はそのアートボードは非公開になります。
基本的には全て公開するために作成するかと思いますが、たとえばクライアントにはスマホ用のデザインが不要など出てくるかと思います。あえて非公開にしたい場合の方法は簡単です。プロトタイプモードで、公開になっているアートボードとリンクを繋がなければいいだけです。

公開

さて、いよいよ公開作業です。
XDには公開リンクを作成してくれる機能があるので、いちいちFTPソフトを使ってサーバーと繋ぐ必要がありません。

右側プロパティインスペクターを設定していきます。

step3 画像5

まずはタイトルの下の入力欄にページ名を入力します。これはメタタグ内のtitleと同じで、ブラウザタブに表示される部分です。
次に表示設定ですが、プルダウンには、
・デザインレビュー
・開発
・プレゼンテーション
・ユーザーテスト
・カスタム
とあります。

デザインレビューは、デザインの右側にコメントを書く欄があります。閲覧した人がコメントしたり、そのコメントに返信したりできるので便利です。

今回はこちらを使用します。他の表示設定については、後でご紹介しますね。

パスワード設定は、下の入力欄にパスワードを入れるとパスワードを知っている人しか閲覧できないという機能です。
今回は使用せずに、右下の「リンクを作成」ボタンをクリックします。
すると一番上のリンクを共有のところにURLが発行されます。それをクリックするとブラウザで閲覧できます。

先程付けたリンクでページを送ることも可能ですが、一番下にページ数が表示されているのでそこからページを送ることもできます。ちなみに家アイコンはトップページへ戻るリンクになります。

いずれも直感的にわかりやすいので、特に説明がなくても操作できるのがXDの長所ですね。

step3 画像6

それでは先程、すっ飛ばした表示設定のご紹介に移ります。

・デザインレビュー ・・・ 右側にコメントが書ける
・開発 ・・・ 使用しているカラーやフォント、アセット書き出しなどができます。コーディングする際にとても便利ですね。

step3 画像7

・プレゼンテーション・・・右側のコメント欄が無くなったことで、デザインに集中できます。クライアント用にはこれが一番良いですね。
(前は一番下のナビゲーションリンクが付いてなかったんですが、アップデートしたのかリンクが付くようになってました)
・ユーザーテスト・・・上のプレゼンテーションと何が違うのかと思ったら、下のナビゲーションリンクがありませんでした。
・カスタム・・・これはコメントだったり、フルスクリーンだったりの機能を自分なりにカスタマイズできるようです。

step3 画像8

以上プロトタイプ、共有モードのご紹介でした。
次回はhover表示やスライドショーなどをご紹介したいです。
あと気になるのがプラグイン、それからコーディングする際の良さなどをおいおい記事にできればと思っています。

 

 

お問い合わせ・ご相談はこちらから

https://www.1st-net.jp/contact/

制作会社様の外注先としてもぜひご検討ください。

ファーストネットジャパンの制作実績はこちらをご覧ください。
https://www.1st-net.jp/works/

お気軽にご相談ください

成果の出るホームページのご提案をさせていただきます。
集客や売り上げに直結するノウハウなどもございます。まずは一度お問い合わせください。

最新の制作実績

弊社サービス