架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
MONOLITH
バーバーショップ「The Monolith」のための、暗くブルータリストなサイト。8つのヘアカットを並べたドラッグスクロールのギャラリー、ホバーでモノクロからカラーに変わる写真、4つの信条のマニフェスト、そして自作の予約モーダルを備える。
The Monolithは、ブルータリズム建築のような厳しさで精密なグルーミングを売る店で、サイトにも同じ厳しさが求められた。ストック写真も装飾も使わない。React 19のシングルページアプリケーションとして構築し、近所の床屋ではなく高級ブランドとして見えるように位置づけた。
直面した
課題
バーバーショップのサイトの多くは、温かさと親しみやすさに頼り、予約は外部のウィジェットに任せている。The Monolithのアイデンティティはその逆で、厳しさと抑制に向かう。プロジェクトを形づくった課題は3つある。
高級ブランドに見えるほど厳しいデザインにしながら、初めての訪問者が予約できるくらい4つのサービスをはっきり伝える。
8つのヘアカット「フォーム」を並べる横スクロールのギャラリーを、デスクトップではドラッグ、モバイルではスナップスクロールで、カルーセルライブラリを使わずに雑誌のような見せ方で作る。
予約の流れをインターフェースの一部に感じさせる。そのために外部の埋め込みは使わず、サービス選択、日付、時間枠を持つページ内モーダルを自作した。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 自主制作で、クライアントも締切も予算もない。以下の制約は自分たちで選んだもので、デザインが委員会を通る必要もなかった。
- スコープ
- React＋Viteで1ページ・5セクション。コピー、ギャラリー、スタッフ紹介はコードの中にあり、価格や写真を変えるにはコミットが必要だ。この規模の店ならそれで回るが、店主が自分で更新したくなった時点で合わなくなる。
- 未接続
- 予約モーダルはインターフェースだけで、何も受け取らず、どこにも送らない。本当の予約受付は、店がすでに使っているカレンダーと連携させる別の案件になる。
導いた
解決策
暗いモノクロのシングルページReactアプリを、Manifesto、Gallery of Forms、Protocols、Architectsの4セクションで構成した。細部の多くはホバーで現れる。写真に色が戻り、サービスの行には写真が浮かび、チームのカードにはIDタグが表示される。
深いチャコール（#101d22）に、シアンのアクセント（#11a4d4）を一色だけ。書体はすべてSpace Groteskで、字間を空けた大文字で組む。不透明度40%のSVGフラクタルノイズが面に粒子感を与え、ナビゲーションはmix-blend-differenceでどのセクションの上でも読めるようにした。
Viteで構築したReact 19とTypeScriptのシングルページアプリ。各セクションはスムーズスクロールのアンカーで、ギャラリーのドラッグとスナップは手書き、予約モーダルはページ内の自作フォームだ。状態を持たせるのは、必要なコンポーネントだけにした。
制作の
舞台裏
入口は、ホバーするまでモノクロのままの全画面写真だ。グリッド線とコーナーマーカーに囲まれ、近づくと「SYSTEM ONLINE」の一行が現れる。歓迎の言葉は置かず、それが以降のトーンを決めている。
PRECISION、SILENCE、FORM、RITUALの4つの信条に、それぞれ一行ずつ。その中に「We do not cut. We engineer.」がある。ホバーすると枠線がシアンに変わり、幾何学的なアクセントが回転する。
8つのヘアカットのスタディが横一列に並び、デスクトップではドラッグ、モバイルではスワイプで動く。カルーセルライブラリは使っていない。カードはホバーするまで彩度を落としてあり、ホバーでサブタイトルが現れ、クリックで全体が開く。一つひとつのカットを彫刻のように見せている。
SCULPT（$65）、SHEAR（$45）、RAZOR（$55）、RITUAL（$120）を全幅のグリッドに並べ、ID、名前、説明、価格、操作をそれぞれ示す。行にホバーすると背景写真が現れ、プラスのアイコンが90度回る。表のほかの部分には装飾をまったく入れていない。
Silas V.（Lead Architect）、Kaelen（Senior Stylist）、Elara（Color Specialist）がモノクロの肖像で並ぶ。ホバーすると色が戻り、IDタグが現れ、左の枠線がシアンになる。カードには肩書きだけを載せて経歴は書かず、ブランドのほかの部分と揃えた。
得られた
成果
サイトはCloudflare Pagesから静的ファイルとして配信している。デスクトップのスコアはCDNがほぼ手間なく出してくれる数値で、モバイルのスコアにはノイズテクスチャ、全面写真、とても大きなディスプレイ書体の負荷が表れている。監査のための調整は何もせず、公開中のサイトを計測した。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
振り返り
MONOLITHでは、予約で成り立つ商売にブルータリズムが通用するかを試した。選択の多くはバーバーショップの定石に逆らっている。温かい木目の代わりにチャコール、Aboutページの代わりにマニフェスト、ストック写真の代わりにドラッグスクロールのギャラリーを使った。見た目を最も崩しやすいのは予約モーダルだったので、予約ウィジェットを埋め込まず、同じデザインシステムの中で手作りした。完成したサイトは、一般的なバーバーショップのサイトとはまったく似ていない。
こんなサイトを作りたいですか？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。