Webデザインの参考になった、魅せる幻想的なWebサイトまとめ

• 作成：2016/09/5
• Webデザイン >

ファーストビューのビジュアルでサイトの印象が決まります。

幻想的なジャンルって意外とないんじゃないかと思い、今回は光の使い方や写真が「幻想的」で「魅せるなぁ」と思える甘美なWebサイトをピックアップしました。旅行・観光サイトなど、非現実的な世界観を出したいときに。

エンジニア速報は Twitter の@commteで配信しています。

情感を出す

ライトアップに使われているグラデーションは紫（高貴・神秘・沈静・重さのイメージ）や緑（安息・癒やし）などの中間色が使われ、写真だけでも神秘的・非現実的な印象を出せます。

また和のおもむきを崩さないように、ボカシが入った縦書きの文字で情感あふれる見え方になっており、コントラストを確保するために写真の情報量が少ない部分に文字を載せてあるので読みやすくなってます。

下鴨神社 糺の森の光の祭

色を訴求したい

メインカラーの割合を多くとることで、サイトのイメージをユーザーの印象に残しやすくなります。

配色を抑え過ぎると平凡になりがちですが、左上ロゴの部分にはテーマカラーの青の補色である赤色が使われておりメリハリがあります。アイキャッチになるし印象にも残りやすい。

ISETAN JAPAN SENSES

こちらは赤一色ですが、文字色・メニューとのコントラストが強く、識別しやすくなってます。明度対比がハッキリしてるので文字に存在感が出てます。

Finesse Design Atelier

情報量の多い背景を使う

放射状に広がる光と背景画像の組み合わせが幻想的なデザイン。暗めのトーンを動的にかぶせることによって情報量の多い写真の上でも文字が見やすくなってます。

KAZ ARAHAMA :: PHOTOGRAPHER

STOOOORM

マーブル模様（大理石）で時間を歪める

一部のグラデーションが変化したり、背景の渦模様がグニャグニャ動き、時間感覚が歪むかのような印象を受けたマガジンサイト。スクロールするたびに下からめくれるようにコンテンツが出現する見せ方がユニークです。

MOUTAKUSANDA!!! magazine

部分的に虹色のマーブル模様が動き、不思議な印象を受けるサイト。要素が紙面での裁ち落としのように画面からはみ出ており躍動感も感じます。

Whitelist

ネオンとグラデーションで楽しく大胆に

楽しさは演出したいけど子供っぽく見せたくない。そんなときは、グラデーションにネオンカラーを取り入れ複数の配色を取り入れることで、楽しく大胆だけど少しセクシーな印象も出せます。ファビコンも透過とグラデーションを用いてあり目が引きつけられますね。

ファビコン

CSSConf US 2016

再読み込みするたびに背景色が変わり、背景画像はbackground-imageをループでアニメーションさせてます。

ファビコン

Loop 2016

情緒的に魅せる

人間の活動が落ち着く夕暮れ時の写真は空想的で情緒豊かに感じ、感性も高まります。

こちらはグローバルナビゲーションの位置を画像の中心に配置してあるユニークな構成。この位置にあるとGNに視線が停止しやすいですね。

アクトフィールド Act field

夕暮時とミニチュアの組み合わせで、非現実・空想的な印象が強まってます。まるで「おとぎの国」のようです。

ミニチュアワンダーランド– Google マップ

KDS 熊本ドライビングスクール

圧迫感をなくす

これだけジオメトリックや背景写真・イラストなどが混在していても、柔らかい配色を使うことで、圧迫感を感じません。

[音注意！] What It Takes To Be Human

STANDBY

コラージュで独特な世界観をだす

素材を糊付けしたようなコラージュを取り入れることで独創的な世界観を演出しています。

水曜日のカンパネラ OFFICIAL SITE

ブラウザ上で３Dを表示するWebGLを使ったサイト。動的に動く3Dは柔らかい配色を使ってあり、テキストの邪魔になりません。

Takumi Hasegawa