Adobe XDでLINEデザインを作ってみた【使い方解説】

2016年7月7日

Adobe XDをそろそろ使えるようになりたいんだが、分かりやすく使い方を解説してほしい！

今回は実際にAdobe XDで「LINEアプリのデザイン」を作る工程を解説しながら、どのように作っていくかを画像を使って説明しよう。

Adobe初のUX/UIデザインツール「Adobe Experience Design CC（以下、Adobe XD CC）」でLINEアプリデザインを作ってみた。

プレビュー版以降のアップデート新機能についての記事を随時更新中！アップデート内容は以下です。

本記事のページ下部にて追加機能をご紹介いたします。

Adobe XD CCってどういうツール？

Adobe XD CCはWebサイトやスマホアプリなどを手軽にデザインするためのツールで使い方も簡単。さらに、デザインした複数のページを簡単につなげて、実際に動いているかのようなプロトタイプを作る事もできるんだ！
Adobe XD CCはそれらを直感的な操作で仕上げる事ができ、軽量で使いやすいUIになっているので、人気がぐんぐん上がっているのだ。

まずは完成形のデザイン

今回はAdobe XD CCで「ドラえもんのLINEグループ」というコンセプトで簡単にデザインしてみた。作業時間だけで言えば「15分」もあればデザインできてしまう。

今回はこのデザインを元にAdobe XD CCの使い方を学んでいこう！

Adobe XD CCのスタート画面の使い方

Adobe XD CCをインストールしたら最初に次の画面が立ち上がり、デバイスから選ぶ形でアートボードのサイズを選ぶ。今回は「iphone 6/7」を選んでいる。もちろん「カスタムサイズ」を選ぶ事で、任意の数値を設定する事も可能。

デザインモードとプロトタイプモード

デバイスを選ぶといよいよデザイン画面が立ち上がり、さきほど選んだ「デバイスサイズ」のアートボードが表示される。

左上に「デザイン」「プロトタイプ」という２つのモードを選ぶ仕組みになっており、最初は「デザイン」タブがアクティブになっている。

「デザイン」はその名のとおりデザインを作る為のモード。アートボードを複数作って複数ページの画面イメージをデザインしていく事ができる。

「プロトタイプ」では複数作成したアートボードをつないで、実際のデバイスで見るように「ボタン」を押せば次の画面へ遷移するような、プロトタイプを簡単に作れるモードだ。

実際にHTMLコーディングする前に、クライアントやチーム内で画面遷移のフローを確認したりする事ができ、プレゼンなどでも活躍するのだ。

デザインモードでデザインしてみる

まずは矢印ツールでアートボードをクリックすると、青い線が入りアートボードがアクティブな状態にして、アピアランスの「塗り」をクリックして背景の色を決める。
もちろんカラーコードも使え、上部の「ベタ塗り」の部分を「グラデーション」に変更する事もできる。

次はヘッダー部分のデザイン。ヘッダー部分の背景を白ベースにするので、画面左の矩形ツールを選び、先ほど同様に「塗り」で背景色を選び、線は無しにしたいので境界線のチェックを外すと、線が無しになる。

矩形はまわりの６点ある白丸部分をドラッグするとリサイズでき、二重丸をドラッグすると矩形を角丸にできる。

「LINE」という文字はテキストで打つ。テキストを打つ時は画面左にあるテキストツールで入力。

すると右側にテキストのプロパティがでるので、フォントとサイズ左右位置などを決める。

次にアイコン類は予めイラストレーターなどで作っておいたものをドラッグアンドドロップで画面上に配置。

（ものにもよるが、アイコンなどの複雑なパスの素材作成は、イラストレーターでデザインしたほうが良いだろう。）

次に人物一覧を作る。これまで同様に円ツールや線ツール、テキストツールを使って一人分のデザインを作る。

リピートグリッド機能の使い方

ここでAdobe XD CC独自の便利機能「リピートグリッド」を紹介しよう。

リストのような同じ形を繰り返すようなデザインを作る際にリピートグリッドを使うと簡単に繰り返し要素をコピーしてくれるという機能だ。

flow05

使い方は簡単、繰り返す要素を選択した状態で「リピートグリッド」ボタンを押す。すると、選択状態のハンドルの形状が横長に変わるので、そのハンドルをドラッグすると、自動的に同じ要素を繰り返してコピーしてくれる。
繰り返した要素の余白の調整も一気に調整してくれる！この機能は重宝するぞ！

また、一度リピートグリッドで複製した要素を選択して、「グリッドをグループ解除」をクリックするとリピート状態が解除されるので、通常のオブジェクトとして扱う事ができる。

簡単マスク機能の使い方

もう一つAdobe XD CCの便利な機能として、簡単な画像マスク機能がある。

flow06

これまた使い方は簡単！先ほど作った人物リストの丸の部分にあらかじめ用意した写真素材を一気にドラッグアンドドロップすると、フォルダ上で並んでいた順番に一気にマスクしてくれる。

画像の上下中央でトリミングされるので、今回のようなデザインの場合は人物の顔が丸の中に収まらないといけないので、あらかじめ上下中央に来るように、写真をトリミングしておくといいだろう。

今回はグリッドリピートでリピートしたもので試しましたが、単体の場合でももちろんマスクしてくれる。

これで最初のページは出来上がりだ。

アートボードの複製

次のページを作る前に、新たなアートボードを準備。

左のツールの一番したのアートボードツールをクリックして、ドラッグで好きなサイズで作成するか、右側のデバイス一覧をクリックすると新たなアートボードが作成できる。

最初に作成したアートボード名をドラッグアンドドロップして、アートボードを複製する事もできる。似たようなページを作成する場合は、このように複製したほうが良いかもしれない。

次のページも同様に各種ツールを使ってデザインしていこう。

プロトタイプの作成

いよいよプロトタイプの作成だ。上部のPrototypeタブをクリックすると画面が切り替わる。

すると先ほど作ったデザインはそのまま、アートボードの横にグレーの「家アイコン」が表示されますので、これをクリックすると、アイコンが青に変わりホームページ（最初のページ）を決める。

クリックして次のページへ遷移する動作を作る。

ボタンとして機能させたい部分をクリックして、青い矢印部分をドラックアンドドロップで、遷移先のアートボードに指定。するとウインドウが現れ、トランジッションで「左にスライド」などのエフェクトを指定する事ができる。

イージングや時間なども指定できるので、適宜選んでどんどん画面遷移を付けていこう。

ボタンとして機能させてたい要素がグループ化されていて選択できない場合は、ダブルクリックしていくと、グループの中を進んでいく事ができる。command + shift + Gでグループ解除する事もできる。（逆にグループ化はcommand + G）これはデザインモードでも同様だ。

プレビューの使い方

ひと通り画面遷移ができあがったら、プロトタイプの完成！最後に右上の再生ボタンを押すと、作成したプロトタイプをプレビュー再生する事ができる。またAdobe XD CC独自の機能として、プレビューをmp4形式で録画する事も可能だ。

flow09

HTMLテストアップ & iframeのHTMLコードを取得

さらにAdobe XD CCでは、右上のアップロードボタンを押すと、プレビューをURL付きでアップロードしてくれる機能もついている。クライントやチームに共有して見てもらうと便利だ。

また、「Webサイトに埋め込むためのタグ発行」がサポートされ、iframeのHTMLコードを取得できるようになったので、自分のテストサーバーにHTMLをアップし、その中にiframeのhtmlコードを貼り付けて見てもらうという方法もいいだろう。

プレゼン時の提案や、お客様の機密情報を取り扱っている場合は、パスワードをかけたテストサイトにアップする必要がある場合などはこの方法もいいだろう。

アップロードしたプロトタイプの管理

アップロードしたプロトタイプは、Creative Cloudに契約していれば、Creative Cloudのパネルから、アセット > ファイル > webで表示からマイアセットで管理できます。不要になったプロトタイプはここで削除したりできる。

ここからは、プレビュー版の初期の頃以降に追加サポートされた機能についての記事。

Photoshopと簡単に連携

2018年3月12日のアップデートで、XDで直接PSDファイルを開くことで、PhotoshopのデザインやアセットをXDで使用できるようになった。

実際に試してみた所、グラデーションや角丸やマスクなど基本的なものはバッチリ再現できている。

現時点で再現できなかった内容として、乗算などの「描画モードの再現」光彩などの「効果」の一部は反映されなかった。スマートフィルタとしてのぼかし（ガウス）はラスタライズされて再現されていたので、ぼかし具合をXD上で戻したりする事はできないようだ。

おそらく色々順次対応するだろう。再現精度が気になる方は、一度確認してみてほしい。

またその他「Sketchファイルの使用」「ドキュメント間でシンボルをコピー」「グループ化された要素のスタイル設定」「スクロール可能なアートボードの機能強化」などがアップデートで強化されたようだ。

アセットパネルの使い方

アセットパネル機能が追加された。アセットパネルとは、再利用したいカラーや文字スタイルを簡単に登録する事ができるもの。カラーや文字スタイルをパネルで編集すると、それがドキュメント全体に反映される。

使い方は、まず上部のバー「表示 > アセット」からパネルを表示する。

次に、アセットパネルに追加したい要素を選択した上で、右クリックメニューを開くと図のように「カラーを追加」「文字スタイルを追加」「シンボルを追加」といったメニューを選択する事で、アセットパネルにそれぞれ登録する事ができる。逆に、それぞれのアセットパネルの内容を適用したい時は、適用先のオブジェクトを選択した状態で、アセットパネルの任意の項目をクリックするだけ。