「北海道大学 人間知×脳×AI研究教育センター」のホームページデザイン解説

サイトにアクセスすると画面いっぱいに鮮やかな油彩のテクスチャが表示され、それが徐々にズームアウトすると1枚の絵が描かれているのがわかり、芸術大学らしい演出のファーストビューになっています。丸ゴシックの英文フォントで書かれた見出し、長体をかけ...

サイトにアクセスすると画面を赤いラインが斜めに走り、画面が入れ替わるとモノクロ写真のモチーフと赤いドットが画面いっぱいに散りばめられる、インパクトのあるファーストビューです。メインビジュアルはマウスカーソルの動きに追従して上下左右にわずかに...

ファーストビューでは画面いっぱいにブルーのベタが表示された後画面が切り替わり、大学内の様子がスライドで紹介されます。ゴシック体のフォントのタイトルと大きめのフォントの本文が力強いイメージを感じさせるデザインです。ベタを殆ど使わないモノトーン...

画面中央に大きく配置された企業ロゴと、暗がりの中から浮かび上がるように配置された麺の写真の組み合わせで、画面全体にまず重厚感を与えています。ブラックに近いダークグレーの背景に、麺の色を思わせるベージュのテキストが映え、見出しのアクセントに添...

トップページは柔らかく明滅するオレンジのドットのアニメーションをバックに、グレーとオレンジのフォントで力強く書かれたメッセージと写真で構成されたスライドショーが目を引きます。グレーをベースに、オレンジをアクセントにした鮮やかな色使いですが、...

サイトにアクセスするとまずブラックの背景の上を画面いっぱいに拡大した企業ロゴが走り、画面が反転するとロゴの一部がグラデーションになって背景に固定され、その上にキャッチコピーが重なるファーストビューです。ゆっくりと色が変わるグラデーションのラ...

画面左にタイトルと導入文、右側にスライドショーを配置したシンプルな構成ですが、自然光を感じる明るい色彩の写真を大きく使い、フォントの大小でコントラストをつけたコピーはマージンを大きく取ることで、フレッシュですっきりとした印象を感じさせます。...

角を丸くトリミングしたスライドショーの写真と、画面左のナビゲーション濃いグリーンがマッチして、一目でナチュラルで自然豊かなイメージを与えてくれるファーストビューです。シンプルにグリーンのラインを引いただけの見出しとマージンを大きく取ってすっ...

画面右にナビゲーションメニューを配置し、中央に大きくスライドショーを配置したレイアウトで、次々に台湾料理の写真のアップが入れ替わる様子が食欲をそそります。コンテンツは濃いグリーンの明朝体のテキストを中心にした落ち着いた雰囲気で、料理紹介では...

画面に大きく表示された林業の様子のスライドショーと、ヘッダーの左にぽつんと表示されたシンプルなサイトロゴが、森林の物静かな雰囲気を感じさせるファーストビューです。淡いベージュをベースに、カーキとブラウンをアクセントにした柔らかい色使いもサー...

ファーストビューは窓辺に置かれた日本酒の瓶とワイングラスが画面いっぱいに表示され、同じ構図で光の加減が変化する様子が穏やかな空気感を生み出しています。画面のスクロールとともに写真をわずかにフェードアウトさせることで、閲覧者の視線を自然に引き...

画面いっぱいに表示されたスライドショーでは店舗周辺の地域の風景と、一面に塗られたクリームやまぶされる砂糖のアップで、豊かな自然の中で育てられた製品の魅力をたっぷりと引き出しています。縦書きの明朝体のタイトルやナビゲーションメニューで和のイメ...