![見出し画像](https://assets.st-note.com/production/uploads/images/23447040/rectangle_large_type_2_279c4186d06ed02551017624c7014c6b.jpg?width=1200)
初めてモバイルアプリのデザインに携わって学んだ3つのこと
この記事は、2017年6月22日に執筆し、加筆・修正を加えたものです。
こんにちは。デザイナーの田村(@tamu0505y) です。
先月リリースされた、CrowdWorks for Client 発注者アプリは、初めてモバイルアプリに携わる機会となりました。無事にリリースできましたが、最初は勝手が分からず、試行錯誤したことを覚えています。
この記事では、モバイルアプリのデザイン経験の無い方を対象にして、試行錯誤の中で学んだことをご紹介します。
1. 最初はガイドラインを読み込む
プロジェクトに参画したとき、既にワイヤーフレームまでは、だいたいできあがっていました。
あとは、各コンポーネントのサイズやレイアウト、配色を調整するだけなので、そんなに大変ではないだろうと思っていました。
実際には、そんなに簡単な話ではありませんでした。ワイヤーフレームが揃っていても、「こういう時はどうする?」「このエラーが起こったときはどんな表示になる?」というパターンがあり、その度に基準が分からなかったからです。
そこで最初は、iOS・Androidの各ガイドラインを読み込むところから始めました。
iOSでは「Human Interface Guidelines」が、Androidでは「Material Design」がそれぞれ公開されています。
Human Interface Guidelines
Material Design
ガイドラインをしっかり読み込むことで、「どんな思想に基づいてデザインすればいいのか」「各OS毎にどんなコンポーネントが用意されていて、いつ使えばいいのか」が分かるようになります。
2. デザインパターンを知る
モバイルアプリの「デザインパターン」を、ひととおり勉強すると、楽になるということも分かりました。
デザインパターンとは、よく起こる問題とその解決策をまとめて、誰もが使える解決法としてインデックス化したものです。デザインパターンとして、普遍的な解決方法を学ぶことは、デザイナーにどのようなメリットをもたらすのか。
それは、アプリのUIデザインを考えるときに、毎回ゼロの状態から考える必要がなくなる。言い換えると、「車輪の再発明をせずに済む」ことだと思います。
例えば「複数のデータを一覧性を持たせつつ表示したい」という場合や「現在地を見失わないようにナビゲーション設計をしたい」という場合。もしも、デザインパターンを知らなければ、ゼロの状態から設計しなければなりません。
デザインパターンを知っていれば、先人の知見を流用できるので、細部の仕様に多くのリソースを割けるようになります。
3. 他のアプリを触ってみること
なんだかんだで、一番参考になったのは、実際に他のアプリを調査して得られた体験でした。
ガイドラインやデザインパターンでは、実際のアプリの細やかなインタラクションまで理解できません。
わたしも、当初はなるべくガイドラインに従うのが良いと考えていました。しかし、実際にデザインしていると、文脈によってはうまくいかない時がありました。そこで、ガイドラインはあくまで指針として活用しつつ、柔軟にデザインを考えることも重要なのだと分かりました。
今回のアプリでも、メインの機能はメッセージですが、よくある機能1つとっても、アプリによって細やいインタラクションには違いがあります。
実際に他のアプリを観察してみることで、携わっているアプリにとって、適切なアプローチが見つかるのではないでしょうか。
おわりに
クラウドワークスといえば、まだまだWebサービスとしてのイメージが強いと思いますが、アプリ(iOS / Android)も現在進行形で開発が進んでいます。
そのため、クラウドワークスでは「Webサービスもアプリも両方好きだ!」という幅広い興味をお持ちのデザイナーを募集しております。
それでは、最後まで読んでいただきありがとうございました。
あなたの幸運を全力で祈ります!