街の鼓動をページに刻む。限定テンプレート『METROPOLIS』が提案する、壮大な「物語」の伝え方
空間を圧倒する「重厚感」と「余白」の美学
『METROPOLIS』のデモ画面を立ち上げた瞬間、まず感じるのは、まるで高級ホテルのエントランスに足を踏み入れたときのような、程よい緊張感と静寂です。
背景色に採用されているのは、単なる黒ではなく、深い奥行きを感じさせる「#121212」のダークトーン。そこに、シャンパンゴールドのような気品あるアクセントカラー（#bfa37e）が重なることで、画面全体に「ラグジュアリー・モダン」な空気が漂います。
特筆すべきは、タイポグラフィの選定です。
- Cormorant Garamond: 伝統的なセリフ体でありながら、極細のウェイトが現代的な洗練さを演出します。
- Noto Serif JP: 日本語の情緒を壊さず、誠実さと品格を伝える明朝体です。
この2つの書体が、広大な余白の中に配置されることで、テキストは単なる「情報」から、空間を構成する「意匠」へと昇華されています。
「パララックス」がもたらす、都市の奥行き
このテンプレートの大きな特徴の一つが、スクロールに合わせて画像が微細に動く「パララックス（視差効果）」です。
ヒーローエリアのダイナミックなスライドショーから始まり、プロジェクト紹介の画像が背後でゆっくりとスライドする。この演出は、平坦なWebサイトの中に「建築的な奥行き」を生み出しています。閲覧者はただスクロールするだけで、流動的で心地よいリズムを感じることでしょう。
また、ヘッダーに採用された差分の設定も、心憎い演出です。背景画像の色味に合わせてロゴやメニューの色が反転し、重なり合うことで、サイト全体に「光と影」のドラマが生まれています。
『METROPOLIS』を乗りこなす。想定される3つの活用シーン
このテンプレートが持つ「壮大さ」と「緻密さ」のバランスは、特に「規模感」と「質」の両立が求められる分野でその真価を発揮します。
建築設計事務所・都市開発プロジェクト
テンプレートのタイトル通り、建築家やデベロッパーには最適の選択肢です。「Flagship Projects」のセクションでは、画像とテキストが左右交互に入れ替わり、大きなプロジェクトの全体像と細かなこだわりを交互に伝えてくれます。モーダルウィンドウによる詳細表示機能を使えば、図面や素材のディテールまでじっくりと見せることが可能です。
ハイエンドなホスピタリティ・ホテル・サロン
「都市のオアシス」を体現するような、ラグジュアリーホテルの紹介や、高級会員制サロンのサイトとしても機能します。ダークトーンの背景は、空間のライティングやインテリアの質感を美しく引き立てます。ニュースリスト（PRESS RELEASE）も、シンプルながら洗練されており、最新のイベント情報をスマートに告知できます。
重厚なプロダクトを扱うクラフトマン
例えば、大型の特注家具、高級オーディオ、あるいは一台の芸術品のような車。そうした「重み」のあるプロダクトを扱うクリエイターにとっても、この『METROPOLIS』は理想的な器です。軽薄なトレンドに流されないその佇まいが、プロダクトに宿る「普遍的な価値」を裏付けてくれるはずです。
あなたの「視点」を投影する。カスタマイズのアイデア
『METROPOLIS』は完成度の高いデフォルト設定を持っていますが、設定エリア（CONFIG）を少し操作するだけで、その表情を自在に変化させることができます。
メタリックな色彩で「質感」を変える
:root で定義されているゴールド（–gold）を書き換えて、サイトの温度感を調整してみましょう。
| スタイル案 | アクセントカラー (–gold) | 印象 |
|---|---|---|
| Platinum | #e5e4e2 | より冷徹で、未来的なプロフェッショナリズム |
| Copper | #b87333 | 伝統やクラフトマンシップを感じさせる、温かみのある風格 |
| Midnight Blue | #191970 | ゴールドを排し、深い青へ。より理性的で誠実な企業イメージ |
ヒーローエリアで「時間」を操る
ヒーローエリアには最大5枚のスライドショーを設定（※初期設定であり変更可能）できます。例えば、同じ風景の「朝・昼・夕・夜」を並べてみる。あるいは「設計図・工事中・完成後」と、プロジェクトの変遷をスライドさせる。パララックス効果と相まって、サイトの入り口で圧倒的な「物語性」を提示することが可能です。
モーダルを「読み物」として充実させる
詳細表示（Modal）のエリアは、画像だけでなく、クライアント名や竣工年（YEAR）、ステータス（STATUS）といったスペック情報を整理して表示できる設計になっています。ここを単なる説明文で終わらせず、プロジェクトの背景にある「想い」を綴るコラムのように活用することで、閲覧者との信頼関係をより深いものにできます。
「信頼」を形にする、整然とした構造
サイトの後半には、会社概要（COMPANY）と連絡先（CONTACT）のセクションが用意されています。グリッドを用いた非常に整然としたレイアウトは、それまでの情緒的な演出を「ビジネスとしての信頼感」へと着地させる重要な役割を担っています。
情報の優先順位が明確であり、スマホ表示でもその美しさが損なわれないレスポンシブ設計は、忙しいビジネスパートナーにとっても心地よい「おもてなし」となります。
Webサイトという実体のない空間に、どうすれば「重力」や「品格」を持たせることができるのか。『METROPOLIS』は、その問いに対する一つの回答です。単に作品を羅列するのではなく、そこに一つの都市を築くような感覚。情報の断片を繋ぎ合わせ、一つの大きなランドマークとして提示すること。
このテンプレートは、あなたが手掛けてきた一つひとつの仕事に、正当な「居場所」と「光」を与えてくれます。あなたのクリエイティビティという名の街が、この『METROPOLIS』という舞台の上で、より鮮やかに、より気高く輝き始めることを願っています。
本テンプレートは、有料noteをご購入いただいた方への限定特典（シークレットテンプレート）として公開しております。
→ 無料HTMLテンプレート「EYANCA」ダウンロードページ
