WEBサイト100選

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

サイト一覧 | 青


46.リクルートホールディングス

リクルートホールディングス

企業サイトのため、投資家向けに事業内容を分かりやすく記載しています。情報量が多いため、ピクトグラムや色分けなどで分かりやすくカテゴリー分けされ、ユーザビリティをとても考慮されています。



47.沖縄美ら海水族館

沖縄美ら海水族館

コンテンツ量が多いため、何処からでもアクセスできるよう、画面左にメイン、画面下にサブのナビゲーションが用意されています。また、見せたい項目から大→小とサイズに変化をつけている点も参考になります。



50.たかたこどもクリニック

たかたこどこクリニック

メインカラーに青が利用されていますが、青には信頼感を得る心理効果があります。顧客との信頼が重要視される病院のサイトであることから、その点を考慮し設計されていると思われます。また、トップページには、ナビゲーションの他にもコンテンツ・ローカルナビなどでサイト内のリンクが設置されています。トップページから他のページへの導線を考慮し作成されている点がとても参考になります。



59.関西エアポートエージェンシー

関西エアポートエージェンシー

企業サイトであるため、堅めのサイトを想像していたのですが、トップに戻るボタンが飛行機のアイコンにされているところに遊び心を感じ一気に惹き込まれました。また、空港といえば空→青の連想になりますが、本サイトもメインカラーに青を利用さており、イメージにズレがなく利用者が違和感なく入り込めるサイトです。



74.大泉自動車教習所

大泉自動車教習所

トップ画面が教習所のコースを模したデザインになっていてとても面白いサイトです。SVGアニメーションで動きをつけられており、見ているだけで楽しくなります。また、サイドのナビゲーションについて、重要なものは元から見えており、重要度の低いものはハンバーガーメニューで開閉できるようになっています。ナビゲーションの設定の考え方が参考になります。



78.株式会社キュービックホールディングス

株式会社キュービックホールディングス

社名のキューブにこだわり、サイト内のコンテンツが四角をモチーフにした動きやデザインになっているところに、企業のこだわりや真っ直ぐさが伝わってきます。また、メインとなる企業カラーが青であることも誠実さのイメージを一層深めています。



85.SPACE SHOWER NEWS

SPACE SHOWER NEWS

フルードイメージとブレイクポイントでカラム落ちするようにコーディングされています。ポップな色合いがエンターテイメント色を強めています。



88.SUMMER SONIC

SUMMER SONIC

他の音楽フェスは会場全体の雰囲気を伝える画像をトップに利用されていましたが、こちらのサイトは出演アーティストの画像をトップに利用されています。他のフェスが自然の中で開催されることがアピールポイントでしたが、本音楽フェスは都市型であるため、会場を取り巻く環境よりも出演アーティストに重きを置いていると思われます。



89.ROCK IN JAPAN FESTIVAL

ROCK IN JAPAN FESTIVAL

他の音楽フェスサイトとは異なり、トップページの情報は少なめですが、バナーが多く利用されており、関連リンクは全てバナーにすることで、サイトのスペースをコンパクトにまとめているように感じます。また、トップには動画や開催日までのカウントダウン項目が設置されており、閲覧者が参加したくなるような作りになっています。



97.web 集英社文庫

web 集英社文庫

各ページのコンテンツの横並びが3つになっており、利用者にクリックしてもらえるようなレイアウトにされています。また、バナーが多数ありますが、各書籍への誘導であるため、デザインが多種多様でバナー作りの参考にもなります。