OBSIDIAN BUILD
Obsidian Build Co.のために、ラグジュアリーリノベーション企業の時代遅れなオンラインの姿を、注目を集め質の高いコンサルテーション依頼を引き寄せる権威あるブランドプラットフォームへと変えた、プレミアムなデジタルプレゼンスを構築しました。
Obsidian Build Co.はプレミアムな住宅改修とオーダーメイドの商業建築を専門とする、高級リノベーション・構造デザイン会社です。顧客は建築的な精度と彫塑的な素材選びを要求する、物件オーナー・デベロッパー・建築家たちです。目標はシンプルでありながら野心的——Obsidian Buildを市場における究極のプレミアムリノベーションパートナーとして位置づけ、世界最高峰のインテリアアーキテクチャブランドと審美的・商業的に張り合う存在にすることでした。
The
Challenge
このプロジェクトを受ける前、Obsidian Buildのオンラインプレゼンスは間違ったストーリーを語っていました。圧倒的なリノベーション実績を持ちながら、ウェブサイトはそのプレステージをまったく伝えていなかったのです。見込み客はどこにでもある地元の工務店と見分けがつかないサイトにたどり着き、ブランドストーリーも、コンバージョンへの導線も、6桁の契約を後押しする信頼性のシグナルも何もなかった。
汎用テンプレートのサイトはブランドの規模感がなく——最良の実績写真はサムネイルギャラリーに埋没し、「変革の物語」が何も伝わらず、インパクトを完全に失っていた
コンサルテーションへの導線がゼロ——フッターに埋もれたコンタクトフォームを掘り起こすしかなく、興味を持った見込み客を逃し続けていた
信頼性の構造がない——ラグジュアリークライアントが6桁の契約前に必ず求める3つの要素、実績レビュー・チームの顔・透明なプロセスが すべて欠けていた
The
Solution
中心となるデザイン決定は、ウェブサイト自体を「建築物」と同様に扱うこと——構造的で、意図的で、素材的でした。パレットは漆黒（オブシディアン石・高級ダークインテリアを想起させる）を軸に、精密なElectric Blueをアクションシグナルとしてのみ使用。ページは意図的な説得シーケンスとして設計されました：ヒーロー（注目）→ Before/After（証明）→ ポートフォリオ（魅了）→ レビュー（信頼）→ チーム（人間化）→ FAQ（懸念解消）→ CTA（誘導）。
漆黒に近い#0a0a0aを基調に、CTA・インタラクティブ状態に専用のElectric Blue #3B82F6をシグネチャーアクセントとして使用。太字・黒ウェイトの幾何学サンセリフ見出しにwide letter-spacingを加え、建築的なラベル感を演出。ホバーグローステートからスクロール連動のスタガー遅延まで、すべてのマイクロディテールがピクセルレベルでプレミアムブランドを強化しています。
高解像度画像を扱う際のSEOとパフォーマンスを最適化するためにNext.js App Routerを採用しSSRを活用。Framer Motionが物理ベースのスクロール連動アニメーション——入場フェード、グリッドリビールのスタガー、インタラクティブなBefore/After比較スライダー——を担当。Cloudflare Pagesを通じてグローバルエッジネットワークに展開し、世界中でサブ秒の読み込みを実現。
Inside
the Build
全画面シネマティックヒーロー、漆黒に近いキャンバス上に展開。「REDEFINING STRUCTURE」が大型の幾何学タイポグラフィとワイドレタースペーシングで着地し、最初の1秒でブランドの建築的権威を確立。デュアルCTA（View Our Work / Our Studio）が高意欲の訪問者と探索段階の訪問者を即座に分岐させ、スクロールインジケーターが下方のコンテンツ深度を示唆します。
サイト最高のエンゲージメント機能：リアルタイムでプロジェクトの変革を体感できるカスタムビルドのドラッグスライダー。ユーザーは「The Obsidian Kitchen」のビフォー・アフター状態を物理的に操作し、ブランドの実力を主張ではなく体感として受け取ります。この機構はReact + Framer Motionで目的特化で構築され、全デバイスで滑らかな物理演算を実現。
プロジェクトは時系列ではなくデザインタイポロジー別（ミニマリストペントハウス・モダンキッチン・マスタースイート）に整理され、汎用的なボリュームではなく専門性を訴求。各カードはエディトリアルなホバーリビール、カテゴリラベル、ホバーグロウボーダー、スクロール連動のスタガーアニメーションを備え、ページを下るごとに訪問者への報酬となる設計です。
テスティモニアルは付け足しではなく建築的要素として扱われています。各レビューカードにはクライアント名・具体的なプロジェクト名・星評価が記載され、信頼性を実在する検証可能な成果に紐づけています。ポートフォリオの直後に戦略的に配置することで、訪問者が見たばかりの作品を裏付ける構成です。
チームメンバーはプロフェッショナルなポートレート、肩書き、作品自体の精度を反映したミニマリストレイアウトで紹介されています。このセクションは当初の監査で特定された信頼ギャップに対処するための意図的な追加——ラグジュアリークライアントは6桁のプロジェクトを依頼する前に、誰に仕事を任せるのかを知りたいのです。
The
Results
新しいObsidian Buildサイトは見た目が変わっただけでなく、パフォーマンスも変わりました。新サイト経由で来たクライアントは、プロジェクトスコープ・価値観・価格帯への理解が格段に高まっており、営業サイクルを劇的に短縮し、最初から質の高いリードだけを引き付けています。
Final
Reflection
Obsidian Buildプロジェクトは、デザインを視覚的な作業ではなくビジネス戦略として扱った場合に何が起きるかを示す典型例です。このサイトのすべてのピクセルは特定の商業的課題を解決するために配置されました——実力を体感させるBefore/Afterスライダーから、専門家としての地位を確立するタイポロジー別ポートフォリオ、高意欲層と情報収集層の両方を逃さないデュアルCTAシステムまで。結果として生まれたのは、チーム自身と同じくらい懸命に働くデジタルプレゼンスです。Obsidian Buildにとって、ウェブサイトはパンフレットではなく——最も効果的なセールスツールなのです。
こんなサイトを作りたいですか？
埋もれたくないビジネスのために、プレミアムなウェブサイトを作ります。プロジェクトについて教えてください。24時間以内にご連絡します。