画像に加えられたスクロールによって動くモーションが特徴的なサイトになっています。まずページトップでは全画面の画像が使われていて、画像上で下スクロールをすると画像が少しづつズームインする動きが見られます。一連のモーションのあと下部に進むと、中程に設置された画像でも同様に、スクロールで徐々に展開される効果が実装されています。他ではあまり見ない特徴的な動きが印象的で、閲覧ユーザの驚きを演出するとともに興味を抱かせる工夫がしっかりと考えられています。他の項目でも写真を効果的に用いて内容が展開されており、センスの良い洗練されたデザインが見ていて気持ちの良いサイトに仕上がっています。
執筆者
カテゴリ
基本情報
サービスに関連するデザイン
-
「Gare Centrale de Montréal」のホームページデザイン解説カナダにあるモントリオール中央駅のサイトです。メインビジュアルは３枚並んだフラットなテイストのイラストで、それぞれが駅の周辺情報・ショップガイド・運行情報への入り口となっており、マウスオーバーするとキャプションが下からせりあがってくる仕組み...
-
「Oui Will™」のホームページデザイン解説ファーストビューでは画面のほとんどを覆うブラックのベタとその上にシンプルに書かれたキャッチコピーがまず目を引き、その下にわずかに見切れている動画に興味を引かれてスクロールをすると、視差効果で動画が現れる構成です。画面をスクロールするとブラッ...
-
「My Austria Bucket List」のホームページデザイン解説ファーストビューでは画面全体をレッドのラインで囲んだ中央にサイトロゴが浮かび上がり、鮮やかな色がまず目に入ります。ベージュのテクスチャと柔らかい丸みを帯びたフォントが柔らかいイメージを与え、手書きのイラストや随所に盛り込まれたアニメーション...
サービスサイトに関連するデザイン
-
「特別展アリス―へんてこりん、へんてこりんな世界―」のホームページデザイン解説ファーストビューでは画面全体にかすれたスタンプ風のグラフィックが表示され、レトロなイメージをまず与えます。ピンクとグリーンの文字が次々とスライドする上にモノトーンのテキストと写真の切り抜きが配置されたレイアウトは、展示のコンセプトの「へんて...
-
「STOCK market」のホームページデザイン解説画面いっぱいに広がるムービーと、丸みを帯びたゴシック体のキャッチコピーががころんと飛び出してくる、迫力がありつつもどこかほのぼのとしてしまうデザインが特徴です。鮮やかなネイビーをバックにホワイトのフォントのシンプルなデザインの上に写真をラン...
-
「ホホホタケ」のホームページデザイン解説ハナビラタケというキノコの栽培風景やメニューが切り替わるスライドショーの上に、ブランドロゴの「ホホホ」の文字が現れて消える、不思議な感覚を閲覧者に与えるファーストビューです。ホワイトとベージュの背景にブラックのテキストのみというシンプルな色...
ホワイトを使ったデザイン
-
「かみむらスポーツ教室」のホームページデザイン解説サイトを開くと画面幅いっぱいの子供たちのムービーと、丸みを帯びたフォントのロゴにビタミンカラーのアイコンをあしらったロゴマーク、鮮やかなグリーンとオレンジのリンクボタンが目に入り、子供らしい明るく元気なイメージをまず与えてくれます。鮮やかな...
-
「JAXA 有人宇宙技術部門」のホームページデザイン解説ファーストビューでは画面全体に表示された宇宙ステーションの写真のスライドショーと、その上に重ねられた太字のキャッチコピーが、力強いメッセージ性を感じさせます。各コンテンツの見出しは施設名は大きく写真に重ね、トピックスの見出しはやや小さくマー...
-
「となりのひきだし」のホームページデザイン解説トップページに表示されたスライドショーは、引き出しを開ける両手のイラストが鉛筆書き風の素朴なタッチで描かれ、引き出しの中にスライドショーがはめ込まれています。引き出しの横にはクリップでつるされたカード風のサムネイルが表示され、サムネイルをク...
迫力なホームページのデザイン
-
「そうだ、その目だ。」のホームページデザイン解説サイトを開くと画面中央に大きく表示されたモノクロ写真のビジュアルが目に入ります。やや斜体をかけた縦書きのキャッチコピーはサイドにラインが引かれ、画面のスクロールに合わせて入れ替わるビジュアルは、画像をスライスしたようなアニメーションをつける...
-
「AI model」のホームページデザイン解説AIで生成したファッションモデルのサービスを紹介するサイトで、サイトを開くと男女のモデルが並ぶビジュアルが画面いっぱいに表示され、マウスカーソルを動かすとビジュアルが次々と変化し、閲覧者の興味を惹きつけます。画面いっぱいに表示されたアルファ...
-
「立命館先進研究アカデミー」のホームページデザイン解説サイトにアクセスすると画面を赤いラインが斜めに走り、画面が入れ替わるとモノクロ写真のモチーフと赤いドットが画面いっぱいに散りばめられる、インパクトのあるファーストビューです。メインビジュアルはマウスカーソルの動きに追従して上下左右にわずかに...
