3Dイラストが大きく表示されたファーストビューがインパクトのある演出になっていて、サイトを開いてまず目に飛び込んでくることでユーザのワクワク感が高まるような効果的な構成をしっかりと考えられています。3Dイラストにカーソルを合わせると様々な箇所で「Click!」の表示が現れてサイトメニューが展開される仕組みになっており、クリックすると下層ページに遷移して詳しく内容が閲覧できます。直感的に操作ができる構成でわかりやすく、しっかりとユーザ視点が考えられた設計です。トップページでは全体に紙吹雪が舞っていたり、随所でイラストが動いていたりと、楽しく閲覧できる仕掛けが実装されていて、非常にクオリティの高いサイトに仕上がっています。
カテゴリ
基本情報
etcに関連するデザイン
- 「Gare Centrale de Montréal」のホームページデザイン解説
カナダにあるモントリオール中央駅のサイトです。メインビジュアルは3枚並んだフラットなテイストのイラストで、それぞれが駅の周辺情報・ショップガイド・運行情報への入り口となっており、マウスオーバーするとキャプションが下からせりあがってくる仕組み...
- 「Oui Will™」のホームページデザイン解説
ファーストビューでは画面のほとんどを覆うブラックのベタとその上にシンプルに書かれたキャッチコピーがまず目を引き、その下にわずかに見切れている動画に興味を引かれてスクロールをすると、視差効果で動画が現れる構成です。画面をスクロールするとブラッ...
- 「My Austria Bucket List」のホームページデザイン解説
ファーストビューでは画面全体をレッドのラインで囲んだ中央にサイトロゴが浮かび上がり、鮮やかな色がまず目に入ります。ベージュのテクスチャと柔らかい丸みを帯びたフォントが柔らかいイメージを与え、手書きのイラストや随所に盛り込まれたアニメーション...
サービスサイトに関連するデザイン
- 「TRIPPIN」のホームページデザイン解説
海外の旅行をメインにしたコミュニティプラットフォームサイトで、隙間なく並べられた角丸長方形のサムネイルにはヒートマップ風にドットが重ねられており、記事ページに移動すると同じ色のピンがマップに重ねられています。画面左2/3がマップ、残りのエリ...
- 「Gare Centrale de Montréal」のホームページデザイン解説
カナダにあるモントリオール中央駅のサイトです。メインビジュアルは3枚並んだフラットなテイストのイラストで、それぞれが駅の周辺情報・ショップガイド・運行情報への入り口となっており、マウスオーバーするとキャプションが下からせりあがってくる仕組み...
- 「stimmt」のホームページデザイン解説
オランダのデザイン会社のサイトです。ファーストビューではダークな画面に流線型のグラフィックが浮かび上がり、その上にホワイトのフォントでメッセージが重ねられた画面が目を引きます。モノトーン中心の配色に鮮やかなピンクが映え、スタイリッシュな中に...
カラフルを使ったデザイン
- 「社会福祉法人たんぽぽ会 虹の丘保育園(公式ホームページ)」のホームページデザイン解説
ベージュをベースにしたカラフルなサイトです。虹の丘保育園の名前にちなみ、虹の出ているかわいいイラストが描かれています。ファーストビューの右から左へ、虹の丘保育園の外観をスライドしています。グローバルナビにて保育園の概要、保育方針などを案内し...
- 「サニーサイド|大阪狭山市・大阪府堺市」のホームページデザイン解説
ベージュをベースにした、カラフルな動物のイラストを用いたサイトです。ファーストビューには、サニーサイドの保育園で元気に遊ぶ子どもたちが写っています。グローバルナビにて保育園の概要、「保護者の声」などを案内しています。トップページの中央で、「...
- 「社会福祉法人新星会 双葉保育園(公式ホームページ)」のホームページデザイン解説
ベージュをベースにしたカラフルなサイトです。ファーストビューには、双葉保育園の外観が写っています。グローバルナビにて保育園の概要、交通アクセスなどを案内しています。イラストの付いたブルーのバナーから、双葉保育園が実施している年間行事を見るこ...
フラットなホームページのデザイン
- 「Wolf & Whale」のホームページデザイン解説
ニューヨークのデザイン事務所のコーポレートサイトです。サイトにアクセスするとまず鮮やかなブルーのベタが画面全体を横切り、画面が切り替わるとグレーをベースとしたモノトーンの色使いの中にわずかに使われたブルーの文字でデザインされた画面が目を引き...
- 「京都みなみ会館」のホームページデザイン解説
ファーストビュー画像はコンセプトメッセージが常時表記されたまま、左右スクロールによって切り替えることができるデザインです。同様の内容はその下の上映作品一覧紹介でも確認が可能です。さらに進む上映スケジュールが掲載されています。残席状況が丸、三...
- 「株式会社アリシア」のホームページデザイン解説
鮮やかなイエローのバックに、段ボールをかぶった人物の写真とキャッチコピーが大きく表示され、何のサイトだろう?と強く興味を惹きつけます。コンセプトを読んだ後に画面をスクロールすると視差効果で4コマ漫画のように写真が切り替わり、1枚目の人物の意...