06-6777-3688
BLOG

【adobe XD】プロトタイプモードや共有モードの使い方を解説。【step3】

公開日:2020年4月22日/最終更新日:2021年2月26日

こんにちは。デザイナーの原田です。テレワークで仕事していると、どうしても体を動かす機会が減りますよね。
そんな時は自宅で、簡単な運動をする時間を作ってみませんか?
と言っても大したことではなくて、トイレに立つ度にスクワット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表示やスライドショーなどをご紹介したいです。
あと気になるのがプラグイン、それからコーディングする際の良さなどをおいおい記事にできればと思っています。

 

web 作成、1 度はこんなことありませんか?

最後まで記事を読んでくださりありがとうございます!

ここまで読んでくださった方々の中には、Web 制作を行っている方、企業や個人の宣伝として web で宣伝されている方など たくさんいらっしゃるかと思います。

しかし、個人で web 作成をされている方、企業として web 作成をされている方、
お問合せページに使いにくさをかんじてませんか?

たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?

あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?

そんな方のお悩みを解決するツールが、、
EasyMail という完全無料のメールフォームです!

弊社では EasyMail というオープンソースメールフォーム CMS を展開しております!

今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などな どお客様の声をふんだんに反映したものになっております!


大事なことなのでもう一度言いますが、完全無料です!

詳しくは弊社の EasyMail 特設ページをご覧ください!

https://www.ezy-mail.jp/

 

株式会社ファーストネットジャパンでは、 1998年の創業から培ってきた知見・経験を基に、良質かつユーザー第一のWEBサイトを制作 して参りました。

弊社はDX推進のためのコンサルティングも行っております。
社内業務の効率化を上げたいとお考えの企業様はぜひご相談ください。

また、コンサルだけでなく、ホームページ制作。リスティン グ広告・SNS広告・メールマーケティングを利用した集客のお手伝いも承っておりますので、 まずはお気軽にお問合せください。

お見積り、外注のご相談はこちらをクリック

お気軽にご相談ください

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

最新の制作実績

弊社サービス