Webサイトの制作に入る前にまず「どのようなイメージのサイトにしたいか」考えますよね。サイトで伝えたい印象は様々あるかと思いますが、サイト訪問者にアピールする際に「時間」というアクセントを加えてみても面白いかもしれません。
本記事では、夜(夕方から深夜まで)の時間を感じさせるWebサイトをいくつかご紹介します。

夜の時間を感じさせるWebサイト

Latte.

https://www.latte-tokyo.com/
「スモークカラー×翳り」で夕方のような印象。写真は日の翳りを感じさせるものが多く、またぼやけている絵や写真を挿入することによって、夕方にまどろんでいるような雰囲気が全体に漂っています。

KATSUAKI UTSUNOMIYA – PORTFOLIO ’23

https://katsuakiutsunomiya.com/
ジャズが聞こえてきそうな大人の雰囲気が魅力的なサイト。流れていくかのような動きと文字の配置、最小限の色使いと余白の使い方が美しいです。ワインのラベルのようなフォントもまた見事に調和しています。

deep2031オンラインショップ

https://deep2031.com/
トップページの動画は日没直前の海、しかも天気は曇りという暗い印象。この動画のインパクトが大変強く、その後のコンテンツにも深い海をイメージさせます。やはり動画の威力はすごい。

おおきなぞうとあっちゃんの星

https://www.robot.co.jp/special/okina_zo/
女の子が大きな像に乗っているイラストから始まり、スクロールしていくと宇宙に中へと入っていきます。点つなぎのフォントやイラストが子供の落書きのようで可愛らしいですね。

Wanderful Chalet

https://wanderful.index.studio/fr/
壮大な星空と雪山の写真が印象的。ダークカラー背景の中で黄色の月と家のモチーフがアクセントとなっています。また独特なフォントや手書きのような曲線がベッドの中で絵本を読んでいるような、夢を見ているような印象を与えています。

NEW VIEW

https://newview.design/
パーティーライトを思わせる色使いは、ありそうでなかなかない。たまに現れる立体的な格子・歪んだ格子の背景は現実世界ではない、異次元空間を想像させます。

Solana Summer Camp Hackathon

https://solana.com/summercamp
「黒背景×ネオンカラー×ポップなイラスト」から現代若者の勢いと爆発力を感じるのは私だけでしょうか?審査員等によって選ばれたプロジェクトに賞金が与えられることを宣伝しているこのサイト。マウスオーバーすると揺れる審査員たちがクセになります。

Codesphere

https://codesphere.com/
まるで宇宙空間にいるかのようなサイト。蛍光色のグラデーションは近未来のテクノロジーを思わせます。

Dogstudio.

https://dogstudio.co/
狼の3Dグラフィックの美しさにただただ圧倒され、何度もスクロールしてしまいます。深夜の森を思わせるサウンドと相まって完璧な世界観を作り上げています。

夜の時間を感じさせるエッセンス

ご紹介させていただいたサイトを観察すると、もたらせたい時間のトーンの写真や動画を用いる方法が多く取られています。 また、深い色調や光の表現、暗いトーンなどを用いて、日が沈んだ後の暗さや夜の雰囲気を表現しています。
光るエフェクト、動くパーティクルなどを用いた「星」をイメージさせる光の演出が取り入れられることでも夜の空間を演出できます。

このようなサイトは、印象的なサイトになるので、特殊なテーマがある商品や、映画や音楽などのエンターテイメント関連のサイトで採用されることが多くあります。ただし、暗い色調や光の表現など適切なバランスが必要で、ユーザービリティを損なわないように設計することも重要になります。

今回、夜っぽい雰囲気のサイトをいくつか紹介しましたが、どれも全体的な統一感や独自の世界観を作り上げており、サイトコンテンツ内容のイメージ向上に役立っているようです。Web制作アイディアの引き出しの一つとして取り入れても良いかもしれません。