デザインの重要性を考える ― オリジナルプロダクトの学び
背景
現在参加中のApprenticeshipにて、オリジナルプロダクトの作成に着手しました。
要件定義から設計までを2週間かけて行う中で、改めてデザインの重要性を思い知らされました。
ただ動くだけのプロダクトでは、ユーザーの心を掴むことはできません。
この記事では、「動きそうなデザイン」と「触りたくなるデザイン」の違いについて考えたことを共有しようかなと。
動きそうなデザイン: 悪い例
プロダクト開発の初期、私は次のようなデザインを作っていました。
以前チーム開発で作成したものを流用していたのですが、改めて見てみてもまあ悲惨。
- 無機質なボタン: 装飾に具体的な意図がなく、統一感がない。
- 混乱を生むUI: 配置がバラバラで、どこを操作すれば良いか直感的に分からない。
一見すると「動く」デザインではありましたが、ユーザーにとっては魅力的ではありません。ボタンを押すのが億劫だったり、どの機能を使えばいいのか迷ってしまいます。
触りたくなるデザイン: 良い例
今回の開発を通じて、「触りたくなるデザイン」を実現するために学んだことがいくつかあります。その中で特に重要だったのが、次の3つのポイントです。
-
良いデザインの模倣をためらわない: 限られた時間で質の高いデザインを実現するには、一人の力では限界があります。類似するサイトや既存の優れたデザインから積極的に学び、取り入れることが鍵だと気づきました。
特にデザインを専門的に学んだことのない人がオリジナルで作るデザインははっきり言ってダサいことが多いそうな。良いものはどんどん取り入れましょう。 -
デザインに意味を持たせる: 色彩やボタンの角の丸み一つ一つにも意味を込めることが大切です。例えば、青色は信頼感を与え、丸みを帯びたデザインは親しみやすさを演出します。実際に様々なサイトを見てみても、ほとんどのアイコンやボタンは丸みを帯びてデザインされています。
-
使う色の数を絞る: デザイン全体で使用する色の数を限定することで、統一感が生まれ、視認性が向上します。多くのサイトが3色程度の配色に留めているのは、これが理由です。
改善したデザイン例
改善後のデザインでは、次の点に注力しました。
- 黒と赤を貴重にしていたデザインを白と青系統に設定し直し、信頼感を与える。
- ボタンの角を適度に丸くして、親しみやすさを演出。また類似した役割のボタンの角の大きさを統一。
- 配色を絞り、統一感を持たせる。
これにより、デザインの一つ一つに意味を持たせたことで、ユーザーが「触れてみたい」と感じるプロダクトに進化しました。
学び
デザインは単なる「装飾」ではなく、ユーザーとの「対話」です。良いデザインを模倣する勇気と、一つ一つの要素に意味を持たせる意識が、プロダクトを進化させます。これを意識することで、次の3つの要素が改善されると学びました。(3つ目に関しては今後の課題)
- 使いやすさ: 誰でも直感的に操作できるか。
- 美しさ: 見た目が魅力的であるか。
- 反応性: 操作に対して適切なフィードバックがあるか。
まとめ
プロダクトが「動くだけ」で満足してはいけません。ユーザーが「触りたい」「使いたい」と感じるようなデザインを追求することが、プロダクト成功の鍵だと実感しました。
これからプロダクト開発をする方にとって、この学びが少しでも役立てば嬉しいです。