2020年7月に見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。
優れたデザインのWebサイトからインスピレーションを得て、自身のデザイン制作に役立ててみてください。
INDEX
MAISON CACAO
ミニマルデザインで作られた、チョコレートを扱うブランドのホームページです。
スクロールすると、表示されている要素に合わせてマウスカーソルが変化したり、紙をめくるように商品紹介が表示されたり、見ているだけで楽しくなってきます。
シェフのおいしいつながり
流体シェイプのような、様々な色の図形がデザインパーツとして使用されているWebサイトです。
色使いやタイポグラフィ、余白の取り方など参考にしたい点がたくさんあります。
ポmagazine
イラストがたくさん使われている、可愛らしいデザインのWebメディアです。
SNSでのシェア数に応じて、「噂の広まり」ゲージが変化するようになっていたり、遊び心がたくさん詰まった楽しいデザインが魅力的です。
メゾンメルカリ
スプリットスクリーンをアレンジしたような、左側に画像、右側にコンテンツエリアという形でレイアウトされたメルカリのWebページです。
このように、PCで表示した場合のコンテンツエリアの横幅を広げすぎないことで、スマホとPCの表示を揃えることができるというメリットもあります。
BAKE THE ONLINE
こちらはお菓子ブランド「ベイク」のオンラインショップです。商品の魅力的な画像をメインにデザインされていて、余計な装飾を加えないことによってその写真がさらに引き立つようにデザインされています。
商品の詳細ページには、商品情報が細かく書かれていて、オンラインで購入する場合でも商品をしっかり理解した上で購入することができます。
TNER（トナー）
画面の左右どちらにもメニューが配置されているという珍しいデザインのWebサイトです。
メニューの数が多い場合には、サイドメニューなどに格納してしまいがちですが、常時表示されるようにしておくと使いやすさが増しますね。
The A-Z of AI
AからZのキーワードを元にAIに関する知識を発信しているサイトです。コンテンツのアイデアも斬新で面白いですが、それを引き立てるような魅力的なデザインも素晴らしいです。
色使いやイラストの使い方、画面遷移のアニメーション、タイポグラフィなどあらゆるエッセンスが凝縮されています。
ECLEAR warm
こちらはUSBフットウォーマーや、USBブランケットなどのプロダクトページです。
電化製品のようなジャンルの場合、写真が中心のデザインになりがちですが、このページではイラストをふんだんに使って商品が紹介されています。
まずは商品自体に興味を持ってもらうことが重要なので、特にこれまでに無かったような商品の場合はこのようにイメージをしっかりと伝えられるようなデザインにしておいた方が良い場合もありそうです。
ザ・メープルマニア
こちらは少しレトロな雰囲気のイラストを中心にデザインされているWebサイトです。
イラストの雰囲気に合わせて、背景の素材やタイポグラフィ、細部の装飾など統一感のあるデザインでまとめられています。
Trend-on
遊園地のような雰囲気のデザインが楽しい気分にしてくれるWebサイトです。
情報の見せ方も、「気持ちから選ぶ」という項目があったり、遊び心に溢れています。デザインに合わせてコンテンツの見せ方も工夫することは大切ですね。
CHISOU
こちらは、奈良県立大学の「CHISOU」というプログラムに関するWebサイトです。
オレンジを中心にしたポップなデザインを採用しながらも、大学のプログラムということでしっかりとした印象も加えられている点が参考になります。
WELD SUPPLY CO.
PCで表示すると、画面全体がグリットで区切られて、1つ1つがリンクやボタンになっているという斬新なデザインのWebサイトです。
スクロール無しでデザインされているページは、使いづらいと感じることが多いのですが、このサイトはとても分かりやすく情報が表示されているため、スクロールする場合と変わらないユーザビリティを保つことができています。
その他の参考になるWebサイト
今回ご紹介したような、デザインの参考になるおすすめのWebサイトをギャラリー形式でまとめています。コンテンツは随時更新しているので、ぜひチェックしてみてください。
