京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

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

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

2016年7月7日

xd_title

Adobe初のUX/UIデザインツール「Adobe Experience Design CC(以下、Adobe XD)」でLINEアプリデザインを作ってみた。(2016年3月14日にパブリックプレビュー版として無償公開)

2016年6月20日のアップデートに伴い一部記事を修正・追加しました。アップデート内容は以下です。

  • 日本語対応
  • ぼかし機能の追加
  • iframeのHTMLコード書き出し機能の追加
  • 計測機能の追加

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

今回は実際作ったデザインを元にAdobe XDの使い方と、どのようにデザインを進めたかを解説していきたいと思います。

Adobe XD (Experience Design) CCってどういうツール?

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

まずは完成形のデザイン

今回はAdobe XDで「ドラえもんのLINEグループ」というコンセプトで簡単にデザインしました。ドラえもんでよくある議論が繰り広げられています。作業時間だけで言えば15分もあればデザインできます。

今回はこのデザインを元にAdobe XDの使い方を学んでいきましょう!

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

まずAdobe XDのインストールには「Mac OS バージョン 10.10以降」が必要です。
Adobe XDをインストールしたら最初に次の画面が立ち上がり、デバイスから選ぶ形でアートボードのサイズを選びます。今回は「iphone 6」を選びました。もちろん「Custm Size」を選ぶ事で、任意の数値を設定する事も可能です。

Design(デザインモード)とPrototype(プロトタイプモード)

design01b

デバイスを選ぶといよいよデザイン画面が立ち上がります。さきほど選んだデバイスサイズのアートボードが表示されました。左上に「Design(デザイン)」「Prototype(プロトタイプ)」という2つのモードを選ぶ仕組みになっており、最初は「Desgin(デザイン)」タブがアクティブになっています。
「Desgin(デザイン)」はその名のとおりデザインを作る為のモードです。アートボードを複数作って複数ページの画面イメージをデザインしていく事ができます。
「Prototype(プロトタイプ)」では複数作成したアートボードにおいて、実際のデバイスで見るような形でボタンを押せば次の画面へ遷移するようなイメージを簡単に作るモードです。実際にHTMLコーディングする前に、クライアントやチーム内で画面遷移のフローを確認したりする事ができます。

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

まずは矢印ツールでアートボードをクリックすると、青い線が入りアートボードがアクティブな状態にして、「APPEARANCE」のFillをクリックして背景の色を決めます。
色の決め方はタブ形式でいくつかありますが、カラーコードも使えます。

 

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

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

「LINE」という文字はテキストで打ちます。テキストを打つ時は画面左にあるテキストツール入力します。すると右側にTEXTのプロパティがでるので、フォントとサイズ左右位置などを決めます。
現時点では行間などの設定は見当たりませんでした。プレビュー版という事でどんどんアップグレードしてくものと思われます。

次にアイコン類は予めイラストレーターなどで作っておいたものをドラッグアンドドロップで画面上に配置します。
(さすがにアイコンなどの素材作成はイラストレーターでデザインしたほうが良いと思います。)

flow04

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

Repeat Grid機能で、同じ要素を繰り返す

flow05

ここでAdobe XD独自の便利機能として、Repeat Gridを紹介します。リストのような同じ形を繰り返すようなデザインを作る際にRepeat Gridを使うと簡単に繰り返し要素をコピーしてくれるという機能です。

flow05

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

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

簡単マスク機能

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

flow06

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

画像の上下中央でトリミングされるので、今回のようなデザインの場合は人物の顔が丸の中に収まらないといけないので、あらかじめ上下中央に来るように、写真をトリミングしておくといいと思います。今回はRepeat Gridでリピートしたもので試しましたが、単体の場合でももちろんマスクしてくれます。

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

アートボードの複製

flow06

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

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

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

次のページも同様に各種ツールを使ってデザインして行きます。

Prototype(プロトタイプ)の作成

flow07

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

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

flow08

クリックして次のページへ遷移する動作を作ります。ボタンとして機能させたい部分をクリックして、青い矢印部分をドラックアンドドロップで、遷移先のアートボードに指定します。するとウインドウが現れ、Silde Leftなどのエフェクトを指定する事ができます。イージングや時間なども指定できるので、適宜選んでどんどん画面遷移を付けていきます。

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

プレビューの使い方

ひと通り画面遷移ができあがったら、プロトタイプの完成です!最後に右上の再生ボタンを押すと、作成したプロトタイプをプレビュー再生する事ができます。またADOBE XD独自の機能として、プレビューをMOV形式で録画する事もできます。さらにAdobe XDでは、右上のアップロードボタンを押すと、プレビューをURL付きでアップロードしてくれる機能もついてます。クライントやチームに共有して見てもらうと便利です。

あと一歩

しかし、現時点ではアップロードしたデータにパスワードをかける機能は無いので、公開前の内容にセキュリティをかけられないのは、対クライアントの場合使える範囲が限られてくる。

また、個人的にはHTMLで書き出す機能があればと思いましたが、今のところ実装されていないようです。

アップデートにより「Webサイトに埋め込むためのタグ発行」がサポートされ、iframeのHTMLコードを取得できるようになりました。

flow09

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

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


ここからは、追加サポートされた機能についての記事です。

日本語UIサポート

アップデートにより日本語のUIがサポートされるようになりました。英語のままでもなんとなくわかりましたが、より見やすくなりました。今回のアップデートで、ドイツ語・フランス語にも対応したようです。

オブジェクトのぼかしと、背景のぼかし機能の追加

簡単に説明しますと

  • オブジェクトのぼかし:選択中のオブジェクト自体をぼかす
  • 背景のぼかし:選択中のオブジェクトの背面にあるものすべてをぼかす

オブジェクトのぼかし

「オブジェクトのぼかし」は単純に選択しているオブジェクトをぼかすという機能です。今回のデザインでも適用してみます。

まずはドラッグアンドドロップで背景となる写真を持ってきます。その背景画像を選択した状態で「オブジェクトのぼかし」にチェックを入れると数字とスライダーでぼかし具合を調整する事ができるようになりました。これですこしリッチなデザインになりましたね!

bokashi1

背景のぼかし

次の「背景のぼかし」は以前からこの機能がほしいと思っていたので正直驚きました!百聞は一見にしかずですので、図で説明します。

わかりやすくする為に先ほどの背景写真をぼかしの無しの元の状態で配置した上で、その上部にある吹き出しに適用したいと思います。適用したい吹き出しをすべて選択した状態でさきほどの「オブジェクトのぼかし」の横にあるプルダウンマークをクリックすると「背景のぼかし」に切り替える事ができます。あとはスライダーで以下の3つの項目を調整するだけです。

  • ぼかしの量
  • 明るさ
  • 不透明度

bokashi2

これでスリガラスのようなデザインになりました。Photoshopにも是非追加して頂きたい機能です!

iframeのHTMLコード書き出し機能の追加

今まではhtmlに埋め込む機能は無かったのですが、今回のアップデートで、iframeのHTMLコードがコピーできるようになりましたので、やり方を解説します!

ウインドウの右上の共有ボタンを押すと、「リンクを更新」するか「新規リンクか」を選びます。これを新規リンクにすると、以前アップしたバージョンを残す事になります。いくつかのバージョンを残したい人には便利な機能です。

iframe1

どちらを押した場合でも次のウインドウに変わり、そこで「リンク」か「埋め込み」かを選ぶことができます。「埋め込み」を選んだ上で、「コードをコピー」を押すと、iframe内に埋め込んだHTMLコードをコピーする事ができます。

ただしadobeのサーバーにアップされているデータをiframeで読み込んでいるという状態ですので、おそらくCCのアカウントを契約している間は見れますが、CCのアカウントを解約したら見れなくなるはずですので、ご注意を。

iframe2

計測機能の追加

こちらもちょっと便利な機能で、オブジェクトを選択した際に、そのオブジェクトから他のオブジェクトまでの距離を表示してくれるという機能です。

オブジェクトを選択して、Alt/Optionキーを押します。するとアートボードの端から距離が表示され、さらにAlt/Optionキーを押した状態で、他のオブジェクトの上にカーソルを移動すると、そのオブジェクトまでの距離の表示に変わります。

keisoku

これも地味に便利な機能なのでPhotoshopにも追加を希望したいところです!

まとめ

以上がAdobe XDの基本的な使い方です。このように細かいアップデートがどんどん追加されているようです。Adobeも力を入れているツールなので、Adobe XDは今後十分に期待出来るツールであることは間違いなさそうです!


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー