No.023 geversduin

geversduinのWebサイト

geversduin

オランダのキャンプ場、geversduinのキャンペーンサイト。

選んだポイント

トレンドから、横スクロールのWebサイトを選択。

ファーストビューの印象

フラットデザインの可愛らしいイラストが特徴のキャンペーンサイト。

Begin de reisボタンのクリックをトリガーに、キャンピングカーが横スクロールにて走る。ワクワクするデザイン。

レイアウト

フルスクリーン

レスポンシブ対応

あり
ブレイクポイント：420px,500px,576px,600px,620px,769px,782px,800px,992px,1000px,1120px

 

フォント

見出し：Tiempos Headline
本文：Quick sand

メニュー

PC：なし
SP：なし

カラー

ベースカラー：#2A8C84　青緑
メインカラー：#FFFFFF　ホワイト
アクセントカラー：#FFDAC7　薄オレンジ
サブカラー1：#15284E　暗青緑

ほか

感想、参考になった部分

冬キャンプのキャンペーンサイト。降りしきる雪のエフェクトと彩度の低い寒色のグラデーションが、ログハウスとキャンピングカー内の暖かさを引き立たせる。

JavaScriptにて動きを制御。画面を下にスクロールしていくことがキャンピングカーを走らせる操作に繋がる。スクロール距離は操作の大小に関わらず固定で、一定距離を走行→情報の表示を繰り返す。情報を表示するエリアを一箇所に固定することで、動きがあるサイトながら視線があちこちに動いて疲れないようになっていたり、スクロールを促す表示、円形ゲージで現在の進行度がひと目で分かる等、安心して操作ができるための配慮がなされていると感じた。

愉快な音楽、リズミカルに揺れるキャンピングカーの楽しげな雰囲気、フォントのジャンプ率が、映画の導入部のスタッフロールを想起させた。右に走っていくと、画面内の時間が朝→昼→夕→夜と変化し、ループするかを問うボタンが最後に表示される。

キャンプ場geversduinのメインサイトは別にある。こちらのサイトは若干の操作しづらさがあるが、そういった快適な使用感や整理された情報を提供するということは諦め、楽しく操作し、行動を促すことを目的としている。

可愛らしいデザインと楽しい操作感から、子供がアクセスし、家族に「行ってみようよ」と促すシーンも想像された。

 

No.023geversduin|Webサイト100選