「Clorets」のホームページデザイン解説

ファーストビューで大きく掲載されたホワイト一色で統一された工具類の写真が、ユーザの興味を刺激するような演出になっていて、サイトの導入として効果的な演出です。スクロールしていくと、サムネイル画像を用いて商品を紹介しており、見やすい構成がしっか...

グレーをベースに、ブルーやブラックをアクセントにしたサイトです。ファーストビューでは、空気のキレイな海上の画像が使われています。グローバルナビにてダイキンの企業情報、サポートなどを案内しています。サポートとして「個人のお客様」と「法人のお客...

グレーをベースにレッドをアクセントにしたサイトです。ファーストビューには、シャワーのイラストが描かれています。グローバルナビにてノーリツの商品情報、アフターサポートなどを案内しています。トップページの中央に、「おふろ部」や「毎日グリル部」を...

ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...

ファーストビューでは円形のオブジェクトが画面上を浮遊しているような表現が展開されていて、ポップで可愛らしい演出になっています。円形のオブジェクトはカーソルの動きに反応した様々なモーションが加えられていて、スクロールした先では画像領域に変化し...

素早いテンポで切り替わるムービーがファーストビュー上に大きな領域で展開されており、インパクトのある演出になっています。スクロールしていくと大きくテキストが表示されて背景色も徐々に切り替わり、ファーストビューから大きな変化があって面白い表現が...

グレーをベースにグリーンをアクセントにしたサイトです。ファーストビューでは、北海道大学 人間知×脳×AI研究教育センターのロゴマークが表示されています。トップページの左サイドに、ニュースやイベントなどのメニューが出ています。トップページの中...

深いグリーンをメインカラーとしてサイトが構成されていて、上品で落ち着きのあるイメージが作り上げられています。上部に設置されたナビゲーションメニューは下スクロールで画面外に隠れて、上スクロールですぐに表示される仕組みになっていてスムーズな閲覧...

メインビジュアルに配置したサービスロゴは背景を明るくぼかすことで、ツヤ感のあるロゴデザインと相まってスポットライトが当たっているような効果を演出しています。また同様の効果はナビゲーションバーにも施されていて、メインビジュアルに配置したアイコ...

サイズ違いの画像領域が横に並んだファーストビューがオリジナリティのあるデザインになっています。画像領域では2面同時に画像が切り替わる仕様になっていて、それぞれに別の画像が表示されることで目に止まりやすい構成になっています。上部に設置されたナ...

ホワイトマスクがかかったムービーがファーストビューで展開されて、動きがあることで目を引く演出となっています。上部に設置されたナビゲーションメニューは、下スクロールで画面外に隠れ、上スクロールで瞬時に現れる仕組みで、スムーズな閲覧が可能な設計...

鮮やかなブルー系のグラデーションカラーを用いて、ぼんやりとした波のような表現が展開されたファーストビューが美しく、見入ってしまうような演出によってサイトの導入として効果的な役割となっています。スクロールした先で表示される写真にはスクロールと...