Androidアプリエンジニアの小久保です。最近、iOSとAndroidアプリの製作依頼が増えてきました。
んで、アプリデザイン観点で思ったことなんですが、アプリ製作で重要かつ一番面倒大変なのが画面設計だなーと。Webサイトと違って画面遷移が多いのよ。UXがどうのこうの言う前に、単純に画面が多すぎて担当やクライアント間での認識合わせがしづらい。
アプリの画面設計で面倒な点は下記2点。
- 画面遷移や操作感は実際に動いたものを見ないと担当間で認識にズレが生じる
- PhotoshopやCacooなどでワイヤーフレームを共有しても、画面遷移の感覚がなかなか頭に入ってこない。
忙しくて偉そうにしてる幹部レベルだと実際ほとんど見てくんない
で、プロトタイピングやろうって話になります。が、少し前のプロトタイピングの本なんかを見ると、紙ベースでワイヤーフレームを描いて、一人の担当者が指をさして紙上のボタンをクリック、もう一人が別の紙をスライドさせて画面遷移を演出する。そう言う紙ベースプロトタイプテストやろうとか書いてあるわけ。
だるいですよね？（言っちゃった）
そもそも遠方のクライアント様向けにはこの手法は使えないし、近場にいたとしても僕の8年のエンジニア＆デザイナー人生の中でこれをやってる人を見たことないです。紙に書くって「いかにも簡単な手法です」顔で言うけど雑に書いてもめっちゃめんどいから！ 大学時代に紙芝居とかやってた僕が言うんだから間違いない。
なので何かいいツールないかなーと思ってたのですがありました。Adobe XDです。
Adobe XDとは何か
アプリやWebサイトの無料のデザインツールです。 →ダウンロードはこちらから
こんな感じで、各画面ごとにデザインを行えます。
各ステークホルダーとの認識合わせのツールに使えたり、エンジニアの画面仕様書としても最適です。UIキットが強力で、Androidっぽい部品、iOSっぽい部品、Facebookっぽい部品など、色々な部品が各所で出されてるので、部品を使えば爆速でそれっぽいデザインができます。
また、一番重要なのが、Webブラウザ上でプロトタイプを共有できること。Webブラウザ上で見れると言うことは、しちめんどくさい幹部連中ステークホルダーにソフトのインストールを強要することなく、プロトタイプを見てもらえるということです。また、単なるスライドショーレベルのプロトタイプではなく、各ボタンクリック時の遷移先まで制御できます。これが無料なのはすごすぎる。詳しくみていきましょう。
Adobe XDのプロトタイプ機能がすごい
プロトタイプの作り方がとても簡単
各画面を作ったら、あとはどこを押したらどの画面に行くかの設定です。紙ベースプロトタイプではそこを人が担うというだるい感じでした。Adobe XDだとボタンと画面を矢印で結ぶだけ。
んで実際にプロトタイプで見ると、
ポチッと押したらほら、画面が切り替わった。簡単でしょ？
画面遷移が多くなれば矢印は多くなりますが、人力でやるよりはるかに楽。フリップ芸じゃあるまいし、この場合はこの紙、あの場合はあの紙、みたいにモタモタやってたら、ばりめんどくさい幹部連中ステークホルダーに呆れられてしまいます。そんなことをせずとも、Adobe XDでプロトタイプは簡単に作成できます。
プロトタイプの共有で認識合わせがスムーズに
で、プロトタイプが作成できたとしても、特定のソフトをインストールしなければ見れない、とかだったら効率は落ちます。デザイナーがプロトタイプツールを持っていたとしても、エンジニアがそのツールを持っていなければその説明コストは膨大なものになります。幹部はエクセルしか持っていないかもしれません。
そんな時に役に立つのが、Adobe XDの共有機能です。
共有機能を使うと作ったプロトタイプをWeb上に公開できます。ブラウザとネットさえあれば見れるので、どんな人とでもレビューができます。
公開方法もとっても簡単。
「リンクを作成」ボタンをポチッと押せば
専用のURLが割り振られて、ブラウザで見れるようになる
もちろんボタンクリックで遷移もちゃんとできます
さらに、ログインしなくてもこんな風に各画面にコメントができます。
誰でもコメントできる、誰でも見れる、ということは、わざわざプロトタイプツールを皆が導入しなくても、レビューが可能ということです。さらにボタンクリックの画面遷移までその場で行えるのですから、レビュー効率のアップは計り知れないです。これでいつも忙しいとか言って帰ってこないで最終的に納期前にちゃぶ台返ししかしない幹部連中ステークホルダーに効率よく見てもらうことが可能です。なんたってこれスマホからでも見れますからね。確認できない理由がないでしょ。
このようにAdobe XDを使えば、チーム間、クライアント間のコミュニケーションコストを劇的に削減することができます。単に操作が簡単とか、綺麗にできるということ以外に、チームとしての効率を考えればAdobe XDは最適なツールと言えます。是非、導入を検討してみてください。無料ですよ？
ちなみに弊社ではプロジェクトによりますが、極力Adobe XDを使って事前にプロトタイプをご確認していただきながら作業を行なっています。そのため、納品時に「えー！ うちが作りたかったのと全然違う！」みたいなことはあまり起きません。そういう意味でも、弊社にご発注いただくメリットがあるかもしれません。（ステマ）
恒例のステマをしたところで、本日は以上！
