2018年12月24日

デザイン

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

目次

  1. はじめに
  2. スクリーンサイズとアートボード
  3. リアルタイムビュー
  4. 共有
  5. まとめ

はじめに

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

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

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

1.png (994.0 kB)

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

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

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

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

POINT!

今回は非常に初歩的な内容なので、すでにXDを触ったことがある方は本記事をオススメしませんのでご注意ください。
初心者の方、XDを使ったことがない方にはぜひ見ていただきたい基本機能のご紹介になります。

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

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

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

Screenshot 2018-12-24 at 9.59.52 AM.png (221.8 kB)

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

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

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

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

1.png (80.8 kB)

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

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

2.png (65.4 kB)

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

3.png (11.3 kB)

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

ファイル内から選ぶ

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

4.png (38.9 kB)

responsive resize

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

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

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

5.gif (518.8 kB)

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

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

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

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

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

リアルタイムビュー

プレビュー

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

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

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

プレビューの撮影

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

(実際に撮影している様子と撮影できたもの)
7.gif (2.7 MB)

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

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

まとめ

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

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

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

2

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

CONTACT PAGE TOP