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

2020年4月20日 16:23

この記事は、2017年6月22日に執筆し、加筆・修正を加えたものです。

こんにちは。デザイナーの田村（@tamu0505y）です。

先月リリースされた、CrowdWorks for Client 発注者アプリは、初めてモバイルアプリに携わる機会となりました。無事にリリースできましたが、最初は勝手が分からず、試行錯誤したことを覚えています。

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

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

プロジェクトに参画したとき、既にワイヤーフレームまでは、だいたいできあがっていました。

あとは、各コンポーネントのサイズやレイアウト、配色を調整するだけなので、そんなに大変ではないだろうと思っていました。

実際には、そんなに簡単な話ではありませんでした。ワイヤーフレームが揃っていても、「こういう時はどうする？」「このエラーが起こったときはどんな表示になる？」というパターンがあり、その度に基準が分からなかったからです。

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

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

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

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

デザインパターンとは、よく起こる問題とその解決策をまとめて、誰もが使える解決法としてインデックス化したものです。デザインパターンとして、普遍的な解決方法を学ぶことは、デザイナーにどのようなメリットをもたらすのか。

それは、アプリのUIデザインを考えるときに、毎回ゼロの状態から考える必要がなくなる。言い換えると、「車輪の再発明をせずに済む」ことだと思います。

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

デザインパターンを知っていれば、先人の知見を流用できるので、細部の仕様に多くのリソースを割けるようになります。

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

ガイドラインやデザインパターンでは、実際のアプリの細やかなインタラクションまで理解できません。

わたしも、当初はなるべくガイドラインに従うのが良いと考えていました。しかし、実際にデザインしていると、文脈によってはうまくいかない時がありました。そこで、ガイドラインはあくまで指針として活用しつつ、柔軟にデザインを考えることも重要なのだと分かりました。

今回のアプリでも、メインの機能はメッセージですが、よくある機能1つとっても、アプリによって細やいインタラクションには違いがあります。

実際に他のアプリを観察してみることで、携わっているアプリにとって、適切なアプローチが見つかるのではないでしょうか。

クラウドワークスといえば、まだまだWebサービスとしてのイメージが強いと思いますが、アプリ（iOS / Android）も現在進行形で開発が進んでいます。

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

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

あなたの幸運を全力で祈ります!