スライドショーを全画面表示させたメインビジュアルは両サイドに円形のカテゴリーリンクを配置し、クリックするとトップ・メイクアップ・スキンケアのページが入れ替わる仕様です。ヘッダーメニューは初期状態では背景を非表示にしてメインビジュアルを全面に見せ、画面をスクロールさせると白の半透明の背景が表示されます。写真のキャプションや商品カテゴリーの説明は控えめなフォントサイズで乗せ、マウスオーバーでテキストが口紅に近いレッドにふわりと染まる以外は白地にブラックのテキストで透明感のあるデザインになっています。
執筆者
カテゴリ
基本情報
化粧品・コスメに関連するデザイン
-
「株式会社ヤマサキ」のホームページデザイン解説画面中央に商品写真が大きく表示されてスクロール追従型の固定表示になっており、インパクトのある演出になっています。ユーザに対して商品の認知度を高める効果的な演出がしっかりと考えられています。ファーストビューでは角丸の四角形に統一された大小様々...
-
「ミスパリ オンラインショッピング」のホームページデザイン解説グレーをベースにしたカラフルなサイトです。ファーストビューでは、ミス・パリの新商品を紹介しています。グローバルナビにて化粧品、ダイエット食品やサプリメントなどを案内しています。2カラム構成のトップページで、左サイドにはダイエット食品やサプリ...
-
「富士フイルム ビューティー&ヘルスケア Shop」のホームページデザイン解説ホワイトをベースにグレーをアクセントにしたサイトです。ファーストビューには、富士フイルムのビューティー＆ヘルスケアに関する製品情報を掲載しています。トップページの中央に、ブランドから商品を探せるアイコンが貼ってあります。その他の方法で商品を...
コーポレートサイトに関連するデザイン
-
「東京有明医療大学 OPEN CAMPUS」のホームページデザイン解説ホワイトをベースにネイビーをアクセントにしたサイトです。ファーストビューでは、東京有明医療大学に通う学生達の実習の様子が写っています。3本ラインのメニューボタンにて学習・研究、キャンパスライフなどを案内しています。トップページの中央に、東京...
-
「北海道大学 人間知×脳×AI研究教育センター」のホームページデザイン解説グレーをベースにグリーンをアクセントにしたサイトです。ファーストビューでは、北海道大学 人間知×脳×AI研究教育センターのロゴマークが表示されています。トップページの左サイドに、ニュースやイベントなどのメニューが出ています。トップページの中...
-
「新川電機株式会社」のホームページデザイン解説グレーをベースにブルーをアクセントにしたサイトです。ファーストビューでは、新川電機の社員が働く製造の現場を写しています。グローバルナビにて新川電機の企業情報、事業内容などを案内しています。トップページの中央に、新川電機の得意分野を掲載してい...
ホワイトを使ったデザイン
-
「buddies」のホームページデザイン解説ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...
-
「Tokyo Ueno Wonderer」のホームページデザイン解説ファーストビュー画像領域ではスライドショーで画像が切り替わる表示が展開されていて、印象的な構成になっています。さらに画像はゆっくりとズームアウトしていくモーションが加えられていて、動きがあることで目に止まりやすい効果となっています。また、画...
-
「メイテック」のホームページデザイン解説サイズ違いの画像領域が横に並んだファーストビューがオリジナリティのあるデザインになっています。画像領域では2面同時に画像が切り替わる仕様になっていて、それぞれに別の画像が表示されることで目に止まりやすい構成になっています。上部に設置されたナ...
かっこいいなホームページのデザイン
- 「buddies」のホームページデザイン解説
ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...
-
「FIL – SUMI LIMITED」のホームページデザイン解説ブラックをベースに白抜き文字を使ったサイトです。ファーストビューでは、スタイリッシュなFIL（フィル）のインテリアを紹介しています。全体的に製品はモノクロ画像、阿蘇の自然を写した景色はカラーで写っています。グローバルナビにて、フィルのコンセ...
-
「Shibuya Media Pedia」のホームページデザイン解説グレーをベースにブラックをアクセントにしたサイトです。ファーストビューでは、「OOH360°View&Generator」を使って渋谷を写した高速の動画をあげています。OOH360°View&Generatorはメディアの周辺環境を閲覧した...