CrowdWorks Designer Blog

クラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。

初めてモバイルアプリのデザインに携わって学んだ3つのこと

f:id:yusuke-tamura:20170623165456p:plain

こんにちは!デザイナーの田村です。

今回はモバイルアプリの話をさせていただこうと思います。

というのも、先月リリースされた「CrowdWorks for Client 発注者アプリ」は、わたしにとって初めてモバイルアプリに携わる機会となったからです。

しかし、無事にリリースすることはできたものの、最初はとにかく勝手が分からずいろいろと試行錯誤したことを覚えています。

そこでこの記事では、主にモバイルアプリのデザイン経験の無い方を対象にして、上記の試行錯誤の中で学んだ3つのことをご紹介したいと思います。

1.最初はガイドラインを読み込むと良い

わたしが「CrowdWorks for Client 発注者アプリ」のプロジェクトに参画した際、既にワイヤーフレームまではだいたいできあがっていました。

そのため、当初は「後は各コンポーネントのサイズや細かいレイアウト、配色などを調整していくだけなので、そんなに大変ではないだろう」と思っていたのです。

しかし実際にはそんなに簡単な話ではありませんでした。

基本となるワイヤーフレームが揃っていても、実際は「こういう時はどうする?」「このエラーが起こったときはどんな表示になる?」という視覚化されていないパターンがたくさんあり、その度にどうすればいいのかの基準が分からなかったからです。

そこで最初は、iOS・Androidの各ガイドラインを読み込むところから始めました。

iOSでは「Human Interface Guidelines」が、Androidでは「Material Design」がそれぞれ公開されています。

これらのガイドラインをしっかり読み込むことで、「どんな思想に基づいてデザインすればいいのか」「各OS毎にどんなコンポーネントが用意されていて、いつ使えばいいのか」ということが分かるようになります。

ちなみに、原典である英語のサイトへのリンクを載せましたが、実際に読むときは日本語訳されたサイトを参照する方がいいと思います。

英語が得意な方はぜひ原典を読んでみてください。(わたしは英語力が足りなくて無理でした…)

2.デザインパターンを勉強すると楽になる

続いて、モバイルアプリのデザインパターンをひととおり勉強しておくと楽になるということも分かりました。

デザインパターンとは、よく起こる問題とその解決策をまとめて、誰もが使える解決法としてインデックス化したものです。

さて、デザインパターンとして普遍的な解決方法を学ぶことは、デザイナーにどのようなメリットをもたらすのでしょうか?

それは、アプリのUIデザインを考えるときに毎回ゼロの状態から考える必要がなくなる…。

言い換えると「車輪の再発明をせずに済む」ことだと思います。

例えば「複数のデータを一覧性を持たせつつ表示したい」という場合や「現在地を見失わないようにナビゲーション設計をしたい」という場合など、もしもデザインパターンを知らなければゼロの状態からそれらを設計しなければならなくなります。

しかしデザインパターンを知っていれば、先人たちの築いた知見をそのまま流用できるので、オリジナリティの高い細部のビジュアアルデザインなどにより多くのリソースを割けるようになるのです。

わたしもデザインパターンを学んだことで「こういうときはこんなレイアウトにすればいい」という引き出しを持つことができたので、プロジェクトの後半は初めよりも楽にデザインできるようになりました。

ちなみに、モバイルアプリのデザインパターンを学ぶのであれば、オライリーから出版されている「モバイルデザインパターン」という書籍がおすすめです。

(監訳されているのはTHE GUILDの深津貴之さんなのですが、深津さんにはUI BATTLEというイベントでも大変お世話になりました。)

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集

 

わたしはオライリーから出版されているデザイン関連の書籍が好きで収集しているのですが、「オライリー本」の良いところは、Tips集のような本とは違って体系的にまとまっており、辞書のように参照しやすいところだと思っています。

ただ唯一のデメリットは、いずれの本もお値段がなかなか高めなところです!笑

懐が温かいときにでも、ぜひ買って読んでみてください。

3.一番の参考は他のアプリを触ってみること

これまでガイドラインを読み込んだり、デザインパターンの勉強をしたりという方法をご紹介してきました。

しかし、なんだかんだで一番参考になったのは自分の足…ならぬ指で、実際に他のアプリを調査して得られた体験でした。

ガイドラインやデザインパターンの本では、当然ですが実際のアプリの細やかなインタラクションまで詳しく理解することはできません。

わたしも当初はなるべくガイドラインに従うのが良いのではないかと考えていましたが、実際にデザインしていると、文脈によってはガイドラインに忠実に従おうとしてもうまくいかないときがありました。

そこで、ガイドラインはあくまで指針として活用しつつ、柔軟にデザインを考えることも重要なのだと分かりました。

「CrowdWorks for Client 発注者アプリ」でも、現在メインの機能はワーカーとのメッセージなのですが、メッセージというよくある機能1つとってもアプリによって細やかなインタラクションには違いがあるものです。

そのため、実際に他のアプリではどんなレイアウトやなインタラクションを設計しているのかを観察してみることで、今自分が携わっているアプリにとって適切なアプローチが見つかるのではないでしょうか。

おわりに

いかがでしたか?

今回の記事が、以前のわたしと同じような「モバイルアプリのデザインってどうやればいいんだ?」と悩まれている方に少しでもお役に立てれば幸いです。

ちなみにクラウドワークスといえば、まだまだWebサービスとしてのイメージが強いと思いますが、アプリ(iOS / Android)も現在進行形で開発が進んでおり、どんどんパワーアップしています。

そのため、クラウドワークスでは「Webサービスもアプリも両方好きだ!」という幅広い興味をお持ちのデザイナーを募集しております。

もしよかったら、恵比寿にあるオフィスまで気軽に遊びに来てください!

それでは、最後まで読んでいただきありがとうございました。

www.wantedly.com