シンプルなデザインを実現するために必要なもの

こんにちは、今日もデザインしてますか？

ぼくはフロントエンドエンジニアなので、実際に業務でデザインツールを利用してUIを制作することはないのですが、現在個人開発でデザイン制作を行なっています。
そこで、Figmaという無料で使えて最高にクールなツールを使用しています。（Sketchは初めて使った時よくわからなかったけど、Figmaはエンジニアでもめちゃくちゃ使いやすく、フロントエンドのcomponentをデザインに落とし込めるので非常に相性がいいと感じます）

個人でサービスを作りたいエンジニアの方は多いと思います。
モダンでいけてるサービスでも、デザインが💩だと誰も使ってくれません。

そこで、僕が実際に手を動かしてインフーフェースを制作した際に、大事だと感じたポイントまとめました。

ユーザーの目標を明確にして、理解する

まず、ユーザーはなんのためにサイトに訪れたのでしょうか？

何か検索したい　→　Google
呟きたい　→　Twitter
おしゃれな写真を探したい　→　Pinterest　

のような感じでユーザーがサイトに訪問する際には、多くの場合目的を持っているはずです。その目的に最短ルートでたどり着けるように導線を導いてあげることが大事なのではないでしょうか。
導線を増やしてユーザーが困惑してしまうのを防ぐといいのではないでしょうか。

慣れ親しんだインターフェースを真似る

既存の慣れ親しんだUIで作成することでユーザーの認知的負荷を下げることが期待できます。自分のスマートフォンに入っているメッセンジャーアプリやSNSのUIを確認するととてもよく似たデザインなはずです。
今までにない新しいサービスとインターフェース(tiktokがそうかな)であれば話は別かもしれませんが、現存するサービスと似たものを作る際はバンバン真似るべきだと感じました。真似ることは悪いことでも恥じることでもなく、ユーザーのためです。

シンプルだとUIが破綻しにくい

エンジニアの僕はインターフェース作成に長けていません。
というか、Figmaがいくら使いやすいとはいえ、できることならプロのデザイナーさんにお願いしたいところです。
作業がめんどくさいので、できるだけ再利用できるcomponentやカラーを使用します。最初はただめんどくさいからと思ってそう作業していたのですが、これが功をそうして素人の僕でもデザインの破綻が起こりませんでした（現在15ページほどのデザインですがね><）
気をつけたことは以下だけです。

・marginは極力数を増やさない（5パターンですみました）
・フォームはラジオボタンやチェックボックスを使用せず、全て統一
・彩度あるものはメインカラー1色以外使わない（SNSアイコンは例外）

たったこれだけで、シンプルで破綻しづらいUIができました。今後機能追加などで後発のデザインが増えないように気をつけます。

削ぎ落とすことを恐れない

シンプルなデザインになると、空白が多く、色数が少ないのを不安に感じる方がいると思います。デザイナーさんが空白の美しさを意識してデザインしたものをクライアントが確認すると、隙間あるなら情報いれてほしいとか言われるアレです><
ぼくは実生活でもモノを増やすことが嫌いなタイプです。できることならホリエモンさんみたいにスーツケースひとつでホテルで暮らしたいです。
ぼくの場合は、削ぎ落とすことに不安というより、簡略化を望んだ結果、この形になった。に近いかもしれません。
1画面中にタップできるボタンを増やし、選択肢を増やすことなどはユーザーの迷いを生むことになるので、1ページ1アクションくらいシンプルを目指したいところです。

以上がぼくが実際に手を動かし、シンプルなデザインをする為に大切だと感じたことでした。

コードもLess-is-moreを心がけたいですね🤣