Adobe XD Creative Challenge シーズン1 week2 レストラン検索アプリを作る

はじめましての方ははじめまして、いつもお世話になってる方はよいビール飲めてますか?
私はXDUG京都の代表のTsukadaと申します。普段はUIデザイナーぽいことをしています。

Adobe XD Creative Challenge シーズン1」がXDUGとのコラボ企画ということで、皆さんのお役に立てるかドキドキしてますが「XD Creative Challenge Week 2 レストラン検索アプリ」 の参考作品を作らせてもらうことになりました。作ったものに対して、ご紹介と解説していこうと思います。

作ったもの

NICE MEAT DINNER

肉しか掲載しないDINNER検索アプリです。

プロトタイプはこちらです。

XDのファイルのダウンロードはこちらです。

参考作品として作るということで、ステップとお題をクリアしながら自分が追加して作りたい!というものはあえて作りませんでした。すでに色々作っちゃったので我慢した所もあります。

■作りたかったもの

  • 店舗詳細ページ
  • いいねボタン(♥)押したらアニメーション
  • メニュー
  • 検索クリックするとキーボードでてくる

作り過ぎも良くない。

アセットいろいろ

よく使う色はカラーに登録しました。追加したいカラーは選択してプラスボタン押すだけで追加できるって便利。あとは文字スタイル。

今回はあえてコンポーネントを使うことを意識しました。背景に画像を使っているものは設定してると急な画像差し替えもマスターコンポーネントを編集するだけですぐ変えれるから便利です。

アセット
アセット

ローディング

ローディングを作りました。1画面をつくり2画面は複製して作ります。画面で共通すべき点はLoadingする線の名前は同じにして下さい。

  1. Loading-1の左端に20pxの四角を作ります。塗りは白にし透過で0に指定します。
  2. Loading-2は高さは20px、幅は画面幅で透過はせず100に指定します。
  3. Loading-3は右端に20pxの四角を作ります。塗りは白にし透過で0に指定します。
Loading-1のアートボード。
四角つくって透過0にするのがポイント。

プロトタイプの設定はトリガー「時間」「自動アニメーション」イージングはなしにしました。ローディングは0.6秒、ローディングからHomeに行くときは長めの時間の1.2秒にしました。

Homeの各店舗の情報をドラック設定にする

Homeのドラック画面は2情報のみにしました。ベースのレイアウト作ってからリピートグリットにして写真、テキストを流し込みをしました。流し込みしたあと、画面を複製、リピートグリットで作った要素をスライドする左方向にずらしました。プロトタイプの設定はトリガー「ドラック」「自動アニメーション」イージングはなしにしました。設定すると横方向に移動するようになりました。

上と下で横スライドしないといけなかったので3アートボード必要だった。

現在位置のアニメーション

ナビのマップピンをクリックすると現在地周辺ページを作成しました。上から下へストンと落ちるようにイージングに「バウンズ」を使用しました。

音声

マイクボタンを押すと、「ご用件はなんでしょう?」とsiri風の画面を作りました。トリガーは「時間」、アクションは「音声を再生」、声質は「みずき」、音声のテキストボックスにはみずきさんに喋ってもらいたい文章を追加しました。

ついつい女性の声で設定してしまう。

みずきさんに問いかけられたので、回答します。トリガーは「音声」、コマンドに自分が回答する文章を入れます。今回は「お肉がたべたい」を追加しました。答えた後の持続時間はアプリが考えてる風を出したくて1.2秒としました。

お肉がたべたい

実際の動作画面です。

まとめ

参考になるようレイヤー名など整理し、見やすくしてるとは思います。自分がXDを触りだして一番参考になったのは人のデータを見て実践してみたことです。参考になるかドキドキしてますけど、ぜひ御覧ください。

Adobe XD Creative Challenge シーズン1 week2 の締切は 2019/5/31(金)15:00までです!ぜひチャレンジしてみてください。 

Special Thanks!!!

@mt8@miko 美味しいお肉の写真ご提供ありがとうございましたw