2019年8月に見つけた「デザインが魅力的なWebサイト」をまとめました。

ポートフォリオサイトやコーポレートサイト、プロダクトサイトなど様々なWebサイトの中から、デザインの参考になるWebサイトを10個ご紹介したいと思います。

OPEN DISH

シェアキッチンサービスのWebサイトです。デザインも優れていますが、サイトにアクセスした人に対してサービスの内容を説明するための情報設計がしっかり行われていて、トップページを少し読んだだけでどんなサービスなのか理解することができます。

可愛らしいイラストと太字のくっきりとしたタイポグラフィを組み合わせたデザインは親しみやすいデザインを作り上げることができますね。

Juraj Molnár

デザイナーやエンジニアとして活躍されているクリエイターのポートフォリオサイトです。シンプルなデザインですが、アニメーションの使い方、要素の配置、タイポグラフィによってとてもスタイリッシュなデザインに仕上げられています。

画面いっぱいに表示される巨大なテキストは最近よく見られるデザインの1つで、インパクトを生み出してメリハリのついたデザインを作ることができますね。

unshift

東京を拠点に活躍されているフロントエンドエンジニアの方のポートフォリオサイトです。3Dグラフィックを使ったアニメーションをトップページに配置することで、サイトに訪れた人を一気に世界観に引き込むようなデザインになっています。

サイトのデザイン自体も素晴らしいですが、Twitterのヘッダー画像にもWebサイトと同じデザインの画像を設定しているなど、ブランディングもしっかりと行われており、とても参考になります。

Osom Studio

デザイン自体はとてもシンプルですが、統一された配色、見出しのタイポグラフィ、オリジナルマウスカーソル、ホバーアニメーションなどの組み合わせによってとても魅力的な雰囲気を生み出しているWebサイトです。

ファーストビューの3Dのイラストがシネマグラフのように動いていて、とても可愛らしいですね。

Tane

こちらは動画制作に特化したクリエイティブエージェンシーのWebサイトです。動画制作を扱っているということもあり、トップページにノングリッドデザインで配置された制作事例の1つ1つが動画で並べられているのがとても印象的です。

RaNa extractive, inc.

サイトの背景にふわふわとした円形が浮かんでいるようなデザインが特徴的なWebサイトです。スクロールしていくと、その図形がサイトのコンテンツの1つに変化するなどサイトに訪れた人を楽しませるようなデザインが素晴らしいですね。

書道教室「華」

「和」と「スタイリッシュ」が上手く組み合わさって作られている書道教室のWebサイトです。

見出しには明朝体、本文にはゴシック体という風に異なる書体のフォントを組み合わせることで、和風の魅力的な美しさと、モダンなスタイリッシュさが同時に表現されています。

株式会社スピッカート

大阪のデザイン事務所のWebサイトです。ミニマルデザインによる洗練された印象を取り入れながらも、所々にイラストを使用することで「親しみやすさ」も同時に感じさせるデザインに仕上げられています。

画面遷移の時のキャラクターが走っているアニメーションがとても可愛らしく、何度も画面を行き来してしまいました。

SHIBUYA QWS

様々なフォントサイズのテキストを配置することによって、独特の世界観が作り上げられているWebサイトです。

左下にタイトルを固定表示したり、縦書きのテキストと横書きのテキストが組合わせられていたり、テキストの枠が白塗りされていたりなど、あえてパターンから外れることによってオリジナリティが生み出されています。

Kanarys

ページの所々に配置されている図形にも使われている青・ピンク・黄色の配色がポップで可愛らしい雰囲気を作り上げているWebサイト。画面いっぱいに表示されるテキストを使ったローディングアニメーションもとても印象的です。

その他の参考になるWebサイト

今回ご紹介したような、デザインの参考になるおすすめのWebサイトをギャラリー形式でまとめています。コンテンツは随時更新しているので、ぜひチェックしてみてください。

おすすめの記事