WEBサイト100選

勉強の一環として、デザインが参考になったサイトや気になったサイトをピックアップしています。何事もまずはその世界のことを知るところからスタートしなければ、と言う事で目指せ100選!!

1番目〜10番目


1.東京銭湯

東京銭湯

レスポンシブ・デザインを利用したサイトです。カラムをふんだんに利用しているところが、整然としていて好みです。また、トレンドのフラットデザインとパステル系の配色がお洒落な雰囲気を醸し出しています。



2.四国松山公式観光Webサイト

四国松山公式観光Webサイト

サイトを開いてすぐに大きな画面で表示される観光地の写真に、訪れてみたいと思わされます。サイトの色合いも風情のある街並みのイメージを意識した配色になっていて、癒しの空間を演出した安心できるとても落ち着いた印象に仕上げられています。また、ページトップにSNSのアイコンを配置した、共有することを考えられた作りになっています。



3.モンブラン・ピクチャーズ

モンブラン・ピクチャーズ

映像にまつわるコンテンツの企画・制作を行っている会社のため、全体的にキャラクターや動きのあるデザインになっています。サイトを見ることで会社の雰囲気をイメージすることができる作りになっていて、また文字での説明が少なく画像で伝わるように配慮されていて分かりやすいです。



4.Allbirds

Allbirds

ウィンドウ幅に合わせてレイアウトが変わります。また、画像によってスクロールの動きが変わるなどとても面白い作りになっています。



5.WABISUKE

WABISUKE

一目見てどのようなサイトか分かるようにトップ全面に画像を配置しています。また、商品である卵を基調に、サイト全体の配色がなされています。



6.ヨコハマハンドメイドマルシェ

ヨコハマハンドメイドマルシェ

サイトの目的(出店者に対する訴求)に合わせたナビゲーションが設定されてます。出店者に対する項目についてはアイコンや色等が他の項目と異なり、ボタンを押すことを促す設計がされているところが参考になります。



7.女子美術大学

女子美術大学

女子大であるため、女性の好みに合わせたサイトの配色になっています。また、マップに説明を加えることで学校の全体像がイメージでき、音楽を加えることで見る人の記憶に残る作りになってます。



8.ROCK HILLS GARDEN

ROCK HILLS GARDEN

縦横に加えて、前後の動きも利用されています。時代に併せたサービスを提供していることからも、サイトのレイアウトもトレンドを取り入れた作りになっています。



9.PKSHA

PKSHA

シングルページデザインと呼ばれる1ページで完結しているwebページです。必要な情報だけを簡潔にまとめていて、シンプルで分かりやすいです。洗練されている感じがします。



10.CAFE de CRIE

CAFE de CRIE

 必要な情報を見やすくカラムで並べられています。一番見せたい新商品の情報がトップページにスクロール表示しています。無駄がなく視線誘導も考慮されていて素晴らしいです。