スクリーンサイズとリアルタイムビュー【これからはじめるXD】

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay24です！

昨日はマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニック第2弾についての記事でした。

マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第２弾

今日は、これからはじめるXDシリーズ、第２弾です！

前回の記事はこちらですので、読んでない方はこちらを先に読むことをオススメします！
Adobe XDとは？XDの便利機能を勉強しよう！【これからはじめるXD】

このシリーズは、repeat-grid、auto-animate、drag gestureなど2018年10月のアップデートにて追加された機能を使い、下記プロトタイプを作っていくシリーズです。

今回は基本のスクリーンサイズの選び方とリアルタイムビューについてご紹介していきます。

実際にXDを触りながら記事を読み進めたい方はこちらからXDをダウンロードしておいてください。
公式サイトからXDをダウンロードする画面へ

スクリーンサイズとアートボード

XDを使う際、他のデザインソフトと同じく、アートボードというものにデザインを作っていきます。

この１つ１つの画面がアートボードです。それぞれ名前をつけることができます。

まずは基本中の基本、アートボードの出し方とスクリーンサイズの選び方について簡単にご紹介します。

ポップアップ画面から選ぶ

XDを開くとまずはこのような画面が出てきます。

こちらの上部からスクリーンサイズを選ぶことができます。

また、下矢印を押すと、詳細なデバイスが出てきます。

カスタムサイズで開きたいときは、W,H部分にそれぞれ横幅と縦幅を入力して、enterもしくはアイコンをクリックするとその大きさのアートボードが出てきます。

（幅800px、縦400pxのカスタムアートボード）

ファイル内から選ぶ

デザインファイルを作った後でも、ショートカットキー a (アートボードの「a」です)を押すと、右側のパネルに様々なスクリーンサイズが出てくるので、そこからもお好きなアートボードサイズを選べます。

responsive resize

XDではresponsive resizeという機能があり、これにチェックを入れるとレスポンシブ対応を自動的にしてくれます。

なかなか精度もよく、便利です！

(responsive resizeなしとresponsive resizeありの比較)

これは、デザインを始める前に知っておかなければならない機能ではありませんが、知っておくと後々便利です。

例えば、一度作ったデザインをちょっとリサイズしたいときに使えます。

レスポンシブデザインは小さめのサイズで作ることをオススメします。

小さいスクリーンのデザインを大きめのスクリーンに調整することは制限が少なくなるので、やりやすいです！

ただし、クライアントに確認をとる時はクライアントが持っているサイズだったり、現在使用されている一般的なサイズで見てもらえる方が良いので、この responsive resize 機能が役に立ちます。

リアルタイムビュー

プレビュー

アプリやwebサイト/サービスを作ってる際に便利なのがプレビュー(リアルタイムビュー)です。

画面の右上にある再生ボタンのようなマークをクリックするとリアルタイムビューができます。

このようにデザインを変えるときはもちろん、画面遷移の際のトランジションなどを調整している時にも使えます。

プレビューの撮影

また、このプレビューを撮影することもできます。
プレビューの右上、撮影ボタンをクリックすると、プロトタイプの撮影ができます。

(実際に撮影している様子と撮影できたもの)

普通であれば、撮影専用のツールやアプリなどをダウンロードして、撮影し、そこから編集などをしないといけないのですが、XDを使えばツール内に撮影する機能が同化されているので、そんな手間が必要ありません。

ちなみに、プロトタイプをフレーム付きで簡単に撮影することができるようになるツールを以前ご紹介したので、興味がある方はぜひ。
プロトタイプをフレーム付きで簡単に撮影! Overframe

まとめ

以上、これからはじめるXDシリーズ、第２弾でした！

今回は初歩的なところではありますが、デザインする上で大事だったり、デザインした後にクライアントに見せる際、手間を少なくする機能などをご紹介しました。

次回以降からグリッド、アセット管理などデザインを作るのに使える機能をさらにご紹介してきます。