画像領域が左側に大きく表示されており、大きなエリアと小さなエリア2つに分けられた構成が見やすくユーザの関心を得るデザインになっています。右上にはドロアーで隠されたナビゲーションメニューが固定表示されていて、スムーズな閲覧が可能な設計となっています。クリックするとブラックの背景にホワイトの文字でメリハリの効いたメニューが展開されて、大きな文字でメニューが表示されていることでサイトの内容がわかりやすくしっかりとユーザ視点が考えられています。スクロールした先に現れる「INPUT」の項目ではサムネイル画像が並べられていて見やすく、興味のある情報を選択しやすい構成になっています。下層ページを含めてしっかりと作り込まれており、クオリティの高いサイトです。
執筆者
カテゴリ
基本情報
etcに関連するデザイン
-
「buddies」のホームページデザイン解説ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...
-
「ACSL」のホームページデザイン解説グレーをベースにブルーをアクセントにしたサイトです。ファーストビューでは、様々なケースで活躍するドローンを紹介しています。グローバルナビにて自律制御システム研究所の会社概要、仕事内容やソリューションなどを案内しています。ACSLのソリューシ...
-
「TWKS」のホームページデザイン解説素早いテンポで切り替わるムービーがファーストビュー上に大きな領域で展開されており、インパクトのある演出になっています。スクロールしていくと大きくテキストが表示されて背景色も徐々に切り替わり、ファーストビューから大きな変化があって面白い表現が...
Webメディアに関連するデザイン
-
「君二問フ」のホームページデザイン解説サイトを開くと中央にメッセージが展開されて、サイト導入の演出が凝った構成になっています。一連の流れのあとに「JOIN」のボタンが表示されてクリックするとトップページが表示される仕組みになっており、ユーザの期待感が高まるような演出が施されてい...
-
「Tokyo Ueno Wonderer」のホームページデザイン解説ファーストビュー画像領域ではスライドショーで画像が切り替わる表示が展開されていて、印象的な構成になっています。さらに画像はゆっくりとズームアウトしていくモーションが加えられていて、動きがあることで目に止まりやすい効果となっています。また、画...
-
「Amp」のホームページデザイン解説大きく画像が使われたファーストビューがサイトの導入として効果的な役割となっています。画像上でカーソルを動かすとマウスストーカーが現れて、ぼんやりとした光の表現がサイトの内容を反映したデザインになっていてストレートに関連性を感じる演出です。さ...
グレーを使ったデザイン
-
「TEPRA PRO App “Hello”」のホームページデザイン解説サイトを開くと画面中央に大きくCGグラフィック表示されて、一連のモーションによって商品の概要や特徴が紹介されています。説明的な文章は無く、オブジェクトの動きによって直感的に内容が理解できるデザインが、しっかりとユーザ視点を考えているとともに...
-
「Nissen On-line」のホームページデザイン解説ホワイトをベースにグレーをアクセントにしたサイトです。ファーストビューでは右から左へ、ニッセン通販のセールやキャンペーン情報をスライドさせています。グローバルナビにて、ファッション以外にインテリアや雑貨、美容・レジャー・ワークなどを案内して...
-
「富士フイルム ビューティー&ヘルスケア Shop」のホームページデザイン解説ホワイトをベースにグレーをアクセントにしたサイトです。ファーストビューには、富士フイルムのビューティー＆ヘルスケアに関する製品情報を掲載しています。トップページの中央に、ブランドから商品を探せるアイコンが貼ってあります。その他の方法で商品を...
シンプルなホームページのデザイン
-
「東京有明医療大学 OPEN CAMPUS」のホームページデザイン解説ホワイトをベースにネイビーをアクセントにしたサイトです。ファーストビューでは、東京有明医療大学に通う学生達の実習の様子が写っています。3本ラインのメニューボタンにて学習・研究、キャンパスライフなどを案内しています。トップページの中央に、東京...
-
「北海道大学 人間知×脳×AI研究教育センター」のホームページデザイン解説グレーをベースにグリーンをアクセントにしたサイトです。ファーストビューでは、北海道大学 人間知×脳×AI研究教育センターのロゴマークが表示されています。トップページの左サイドに、ニュースやイベントなどのメニューが出ています。トップページの中...
- 「Tokyo Ueno Wonderer」のホームページデザイン解説
ファーストビュー画像領域ではスライドショーで画像が切り替わる表示が展開されていて、印象的な構成になっています。さらに画像はゆっくりとズームアウトしていくモーションが加えられていて、動きがあることで目に止まりやすい効果となっています。また、画...