Webにおけるデザインのコツ

オリアプ作成される際に、デザインについてご質問受けることが多かったので、以下の要点をおさえるだけでUI/UXが向上するであろう…小技をまとめた記事を記載します！！

画像について

いろいろなサイトがありますが、最近AdobeStockは無料で使える素材が結構増えたのでおススメです！

AdobeStock

https://stock.adobe.com/jp/

以下のプルダウンメニューで「無料素材」の項目を選んで探すと素材が手に入ります！

1日にダウンロードできる上限・素材が限られるなどはありますが、AdobeStockだと広告が入らないので個人的には使いやすいです！

また、AdobeStockだと「制作者」で絞ることができるので、イラスト画像などを使いたい方は特に、便利だと思います！

以下の箇所から制作者に飛ぶことができます！

制作者を揃えてイラスト画像を選ぶことで、デザインに統一感が出やすくなります！

制作者に飛んだ画面は以下の通りです。

数日かけて、少しずつダウンロードするのが少し手間ですが…。

以下は、僕が制作者を揃えて作成したデザインの例です！

他にも無料で素材をダウンロードできる有名どころのリンクを張っておきます！（広告が入ります…）

・Photo AC

https://www.photo-ac.com/

FontAwesome

https://fontawesome.com/

画像ではないですが、一部のアイコンが無料で手に入ります！

また、Reactでコードとして埋め込むことができるので、便利です！！

FigmaではSVGで先にダウンロードしてデザインに埋め込んでおけば、デザイン通りに仕上げることができます！

詳細な使用方法は省略しますが、以下のようなイメージです。

・赤枠…Reactのコード

・青枠…SVGでダウンロード可能

メールのアイコンを「お問い合わせ」に使ったり、ログインボタンの横にログインのアイコンを付けたりするだけで、デザイン性がぐっと上がるのでおススメです！

配色について

色を選ぶときにどうやってカラーを選定すればよいかわからない方には、以下のようなサイトがおすすめです。

ColorHunt

https://colorhunt.co/

色合いなどを参考にできるサイトです！また、カラーコードも記載されているので、そのままデザインに利用してもよいと思います！

原色は避ける

自分で色を選定する場合にも、原色を避けると素人っぽさがなくなります！

例）

・原色を避けた色

・原色っぽい色

コントラスト比を考慮する（コントラストチェッカ－）

https://www.acquia.com/jp/products/monsido/tools/color-contrast-checker

背景と文字色のバランスを見て、人が見やすい配色になっているかをチェックしてくれるサイトです！

コントラスト比はGoogleのSEOにも影響が出るようなので、抑えておいた方が良いポイントかと思います！

・NG例

・OK例

抑えておくと良く見えるデザインルール

デザインにも基本ルールがあり、オリアプで押さえておくと良くなるかもと思ったルールをいくつかご紹介します！

文字色は黒ベース、背景は白が無難

基本の文字色は黒ベースにするのが良いと思います！

いろいろなサイトを見ても基本文字は黒ベースになっていることが多いです。

文字色が白、背景が黒だと同じデザインでもユーザーの離脱率が上がってしまうという統計データが出ています！

またちょっとしたコツですが、文字のカラーコードを#000000ではなく、少し灰色がかった色にするとコントラストが強すぎず読みやすいです！(#222222～#333333ぐらい？)

ちょっとこれは余談で、ShiftBのサイトの文字色も見てみましたが、#333333になってました！どおりで見やすいわけだ…！！笑

行間・スペースを確保

文章の行間を「1.75～2倍」にするだけで、文字の見やすさが格段に変わるのでおススメです！

また、セクションごとのスペースなども、確保した方が見やすさがアップします！(デザインにもよりますが、PCデザインだと100～140pxぐらい？)

フォントサイズ・フォント選定

デフォルトのフォントサイズは、「14~16px」が一般的に使われているので、見やすいデザインになると思います！(ユーザー層によって多少大きくするなどの必要あり)

また、フォントの選定は、変わったフォントを取り入れたくなりますが、文章にすると読みにくくなるので、読みやすいフォントがおすすめです。よくいろいろなサイトで使われているのは、「Noto Sans」あたりが無難で使いやすいです！

変わったフォントを取り入れたい場合は、見出しや目立たせたいキーワードのみなどにすると、アクセントになってよさそうです！！

最後に

あくまでメインはReact, TypeScript, Next.jsを使ってオリアプを完成させることです！！

デザインに時間をかけすぎない方が良いと思いますが、悩んでいる方も多そうでしたので、一部でも取り入れるだけでUI/UXが向上するであろうコツを紹介させていただきました！！

どなたかの参考になれば幸いです！！🙌