はじめに

やや技術的な投稿から外れてしまって恐縮ですが、ユーザーとのインターフェース部分はソフトウェアの一番外側という解釈で記事を投稿します。

実際にサイトを作成するときは、類似サイトをベンチマークしてユーザにとってサービス内容とデザイン(特にアイコンの意味合いなど)のギャップが発生しにくいような設計をします。今回はベンチマークは一通りしたうえで、そこに自分なりのオリジナリティを加える時に参考にしているサイトを厳選して紹介します。

デザインに困っている個人開発者さんの役に立てれば幸いです。

画面サイズやブラウザシェアなどを調査するとき

statcounter
サイトを訪問してくれるユーザが利用しているデバイスやブラウザ、画面サイズのイメージをある程度つかんでおくことで、どのようなテストを実施すればいいのかが明瞭になります。すべてのユーザをカバーすることは難しいですが、シェア率の高い順からテストを行うことで、CSS/JSの対応漏れをリリース前に防ぐことができます。

色を探したり配色を決める時

WEB色見本
イソラボ
色に関しては、色彩検定など体系的に学ぶ環境が整っているので理想はそれらの理論を学ぶことですが、いますぐに配色に取り掛からないといけない場合には先人が利用していた配色のルールを拝借することで大外れを防ぐことができます。

フォントを選ぶ時

Google Font
伝わるデザイン(フォントの選び方)
フォントに関しても一冊の本が書けてしまうくらい奥が深い領域ですが、こちらも先人の知恵を借りましょう。