北九州市小倉南区で Web プログラミング パソコン教室ならささのは

北九州市小倉南区守恒本町2-6-6 GROWTH SI 守恒509号室
モノレール守恒駅から徒歩3分

XDの便利機能⑤-プロトタイプを共有しよう

XD

XDを使うと、作ったプロトタイプを上司やお客様、チームのメンバーと共有することができます。

IllustratorやPhotoshopでも、ファイルを共有することはできるじゃないか!!と思った方。確かにそうです!!
ですが、XDで共有するメリットはとても大きいです。

XDで共有する主なメリット
・URLを伝えるだけで共有することができる
・パスワードを設定することも可能
・コメントを残すことができて、コメントも共有できる

今回は共有する手順を確認しておきましょう!

XDを使ったプロトタイプの共有の手順

まず、共有したいサイトをデザインしておきます。
また、プロトタイプモードで、画面のリンクを設定しておきましょう。
どうやってするの?という方は、こちらのリンクからご覧ください。

リンクの設定の方法はこちら>>

プロトタイプモードにしてみてください。

リンクが設定されている場合は、下の写真のように画面がつながれているはずです!

では次に、共有モードにきりかえます。

右側にあるプロパティインスペクタの「リンクを作成」ボタンを押しましょう。

「リンクを作成中」の文字が表示されますが、少し待っているとリンクが表示されます。

このリンクを伝えた人と、プロトタイプの共有が可能になります。

共有を確認する

せっかく共有の設定を行ったので、確認してみましょう。
表示されたリンクをクリックしましょう。

少し待っていると、ブラウザが表示されて、プロトタイプが表示されます。
画面右側にコメントを記入する欄がありますので、コメント入力できます。

コメントを入力する欄の右側にあるピンのマークをクリックすると、
プロトタイプの中のオブジェクトを選択できるようになります。
選択した後コメントを残せば、どの部分のコメントかわかりやすくなります!

プロトタイプとコメントを一つにまとめることで、作業効率がアップするのはとても魅力があります!
積極的に採用したい機能です。

共有のリンクにパスワードを設定する

さて、共有する際にパスワードを設定することが可能です。
リンクは通常予測できないようなリンクになっていますので、特にパスワードを設定する必要性を感じたことはありませんが、どうしてもセキュリティが不安だ、という方は設定するとよいかもしれません。

リンクを設定する際に、パスワードを設定のチェックを入れると設定することが可能です。

共有設定の際の、表示設定について

共有する際に、表示設定というものがあります。
通常は「デザインビュー」で共有すればOKですが、他のモードでも設定は可能です。

私はデザインビューか開発を使用します。
開発の場合は、CSSなどのコードが見れるので便利だと思います。
(CSSをそのままコピーして使用することはできませんが・・・)

表示設定を開発にすると、さらに書き出し先を設定することができます。
書き出し先は、利用する先、と考えるといいかもしれません。
Webサイトのプロトタイプの場合は、「Web」を選択すればOKです。
リンクを作成、もしくはリンクを更新をクリックしましょう。

リンクができたら、クリックしてプロトタイプを表示しましょう。
画面の右側に、コードのアイコンが表示されます。(デザインビューの時は表示されていませんでした!)
クリックしましょう。

プロトタイプで使っている画像や色、文字のスタイルが表示されます。

そしてプロトタイプの画面の任意の場所を選択してみましょう。
例では「Recipe」の文字を押してみます。

クリックすると、幅や高さが表示されたり、
右側の画面にCSSが表示されます。
すべては使用できませんが、参考しながらコーディングを行うと効率が上がりそうです!

まだまだたくさん共有の機能はありますが、
よく使うものを知っておくだけでも、サイト制作の効率が上がると思いますので、
ぜひ使用してみてくださいね!