現在、オリジナルプロダクトの開発に取り組んでるのですが、
そこで出てくる大きな悩み。
デザインセンスがない・・・
まぁ正直言ってデザインセンスが自分は皆無です。
小学校の紙粘土工作でカエルを作って先生に見せたら
「わ！ゴリラ！？すごいねー」と言われる位には皆無です。
そんな酷すぎる美的感覚の持ち主の自分ですが
オリプロを開発するにあたってデザインは避けては通れません。
なので今回はそんなデザインセンス皆無の自分でも
たった3つのルールを守るだけでデザインがかなり良くなった
という経験談を伝えていきたいと思います。
自分と同じようにデザインに悩んでるって人の参考になると思いますので
ぜひ、最後まで読んでいってください。
ちなみに今回、アプレンティス内のカリキュラムの一環として
デザイン勉強会に参加して学んだことが本記事の内容になってます。
記事読んで面白いな！いいこと学べたな！
と感じた方で興味ある方はぜひ参加してみてください！
なんでデザインって必要なの？
さて、本題に入っていく前になんでデザインが必要なのかって話ですが
ズバリ。
アプリを触ってもらうため
です。
めちゃ簡単にいうと見た目が悪いアプリは
そもそもダウンロードなんてしてもらえないし、
誰も使ってくれないっていう話です。
どんだけ内容がすごくて機能が豊富だったとしても
触ってもらえなければ意味をなしません。
よってまずは触ってもらえるようにデザインが大事となってくるわけです。
まぁ餅は餅屋っていう話があるみたいに
機能面は自分たちエンジニアが頑張って、
デザインはデザイナーに依頼する。
っていうのが一番クオリティ上がるのは間違い無いですが
今回は個人開発の話なのでなるべくコストをかけずに
かつしっかりデザインの質は良くなる。
そんな方法をお伝えてしていこうと思います。
ルール1 デザインはパクれ！
なんか早速怒られそうな見出しですが
まぁぶっちゃけ一番効率よくデザイン良くする方法はこれです。
餅は餅屋って話がさっき出てきましたが
ありがたいことに今の時代にはネットがあります。
そしてこの世の中にはたくさんの会社が
大量の資本と時間を投資して作ってきた
Webサービスやアプリがわんさかあります。
はい、そうです。
つまりネットで公開サービスには
デザインを本業としてる方達が作った
デザインの見本となるものが転がりまくってるわけです。
これを使わない手はないです。
むしろ使わないのは縛りプレイになるレベルだと思ってます。
自分も最初はゼロからデザイン考える方が
オリジナリティ出そうだしそうしよ〜とか思ってやってたんですけど
結果、マジで酷い出来のナニカが出来上がりました・・・
このひどいナニカは後で紹介しますね。
話を戻すと、デザインでご飯食べてる人たちが
真剣に考えて作ったサービスがネットにはたくさん転がってるから
まずはそれを参考にして、デザインを考えてみてください。
これだけで素人が考えるよりも何十倍もいいデザインになります。
あ、ちなみに、キャッチーなんでパクれ！とか言ってますけど
普通にデザインそのまま丸パクりして使ったらダメですからね？
どこまでが良くてどこからが悪いのかって話は
色々とややこしくなるので今回は省きますけど
イメージとしては自分でデザインを考えるのではなく、
世の中にあるデザインから自分のイメージに近いものを探して
そこに付け足したり、削ったりしながら
自分のデザインに近づけていく。
というやり方をしようねという話です。
↓これで探すとめちゃ便利です。
UI Pocket
ルール2 使う色は２色にしろ！
これ、ほんとに大事。
自分がそうだったんですけど
多分素人のデザインがダサくなる要因の第一位って
ごちゃごちゃしてることだと思うんです。
自分ももれなく色使いすぎてキモくなってました。
で、ルール1でいろんなサイト見てると
配色が少ないことに気づけると思います。
もちろん、いろんな色を使ってるサイトもあるんですけど
これはあくまでデザインについてがっつり勉強してる人たちが
これなら使っても大丈夫って判断して使ったものです。
素人が「この色かっこいいから使おー」みたいなノリでやるのとは
雲泥の差があります。
なので素人のうちは徹底して配色を２色に限定する。
この２色というのはメインカラーとアクセントカラーです。
他は全部白と黒もしくは灰色で構成する。
もし、多くしたいとしてもアクセントカラーを２色に増やすだけにするといいです。
で、なんでこれで劇的にデザインが良くなるのかっていうと
冒頭で話した素人のデザインがダサくなる要因のごちゃごちゃしてしまう。
これを配色を２色にすることでシンプルになって
統一感が生まれるのでうまいこと回避することができるんですね。
ルールはシンプルですが、ルール1と組み合わせることで
素人の時に考えたサイトとはまるで別物のデザインになるので
ほんとにこれ試してみてください。
ルール3 フォントを既存のものから変更しろ！
このルールも簡単に適応できる上に効果が抜群です。
素人がデザインをするとフォントにまで頭が回らず
デフォルトのフォントを使用してしまいます。
すると、一昔前のウェブサイトみたいなデザインになってしまうわけです。
なのでフォントは既存のものから変更にするようにしましょう。
とは言っても、じゃあどれにすればいいの？
ってなると思うので自分が使って良かったものを紹介します。
- Noto Sans JP
- Roboto
- ヒラギノ角ゴ ProN
- Open Sans
- 游ゴシック体
- Inter
これらの中から好きなものを組み合わせるといい感じになると思います！
あとはフォントサイズに関しても意識するといいです。
フォントサイズに関してはこのサイトが参考になります↓
アップルヒューマンインターフェースガイドライン
最後にルール守る前と後の比較
ということで3つのルールいかがでしたでしょうか？
これらを守るだけで自分はめちゃくちゃデザインが良くなりました。
どれくらい変わるのかの目安として置いておくので参考にしてください。
ルール適用前↓
ルール適用後
↓
どうです？
ルール適用された後の方が圧倒的にみやすくないですか？
今回はどうぶつの森ポケットのデザインを参考にしながら
配色はメインカラーを#075763、アクセントカラーを#6a5844にしました。
３色目使ってね？と思われたかもしれませんが
今回はどうぶつの森ポケットのデザインを参考にして
ここは色を使った方が判断したため、３色目を使用してます。
たった３つのルールを守るだけで
素人でもこれだけデザインが良くなるのでぜひ試してみてください！
最後まで読んでいただきありがとうございました！