CrowdWorks Designer Blog | クラウドワークス デザイナーブログ

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

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

f:id:yusuke-tamura:20190923004256j:plain

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

先月リリースされた、CrowdWorks for Client 発注者アプリは、初めてモバイルアプリに携わる機会となりました。

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

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

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

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

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

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

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

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

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

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

2. デザインパターンを知る

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

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

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

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

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

例えば「複数のデータを一覧性を持たせつつ表示したい」という場合や「現在地を見失わないようにナビゲーション設計をしたい」という場合。

もしも、デザインパターンを知らなければ、ゼロの状態から設計しなければなりません。

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

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

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

 

3. 他のアプリを触ってみること

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

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

わたしも、当初はなるべくガイドラインに従うのが良いと考えていました。

しかし、実際にデザインしていると、文脈によってはうまくいかない時がありました。

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

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

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

おわりに

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

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

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

www.wantedly.com