Design Exploration — Natchan × Liore'
並列5分5分で2店舗を紹介する統合サイトのデザイン案を、01〜90 で通し番号を振って一覧にしました。各カードをクリックすると各案のHTMLが開きます。サムネイルは各案のトップ画面です。
初期8案:並列・主従・予約UIの原型
Classic
現行サイトをほぼ維持し、Liore' を「姉妹店」セクション+ページとして追加。リスク最低だが、円形ロゴを統合メインに使うため Natchan 主…
Portal
2サロンを等価なカードで並べ「選ぶ」導線。デザイントークン共通で店舗ごとのアクセント色を維持。並列感が最も強く、統合目的に合致。
★ 方向性として好評Concept
「余白」を軸にした編集的リニューアル。写真主導ヒーロー+ストーリー構成で、2店舗をひとつの物語の章として提示。最もスタイリッシュだが現行デザインか…
Reserve UI
固定トップバー+下部フローティング予約バーで、ホットペッパーへの導線を最前面に。予約を最優先にしたい運用に向く。
Photo
現行DNAの生成り×オリーブグレーを保ちながら、ヒーローを写真全画面に。2店舗を写真+テキストで左右交互に紹介し、ギャラリーを大型化。
Tabs
CSSのみで Natchan / Liore' をタブ切替。店舗ごとにメニュー・写真・地図を表示し、1ページで完結。構造が既存案と異なる。
Magazine
マストヘッド+分割ヒーロー+グリッドセルで編集的・モダンに。写真セルとテキストセルを組み合わせ、ダークフッターで締める。
Story
全画面スナップスクロールで6スライド。ヒーロー→Natchan→Liore'→メニュー→アクセス→フッターを物語として語る。没入感が高い。
12案:並列5分5分の多彩な骨格
Split
画面を左右2分割し、Natchan と Liore' を同時に対等に表示。2店舗の対比が一目で分かる。並列5分5分の最も直接的表現。
Symmetry
2店舗を完全対称のカラムで配置。写真・ロゴ・タグ・CTAまで同じ構造で並べ、公平な見せ方にする。
Banners
2店舗をフル幅バナーで上下に交互配置。写真を大きく使い、1店舗ずつじっくり紹介しながらも、構成上は対等。
Grid Cards
コンセプトカードを先頭に置き、2店舗のカードを等幅グリッドで配置。余白とカードで整理された構成。
Compare
2店舗のメニュー・料金を横並びのテーブルで比較表示。選ぶための情報が最も整理され、迷うユーザーに最適。
Mobile App
下部固定タブと横長カードで、スマホアプリのような操作感。予約ボタンも下部に常設し、モバイル導線を最優先。
Vertical
ヒーローや店舗名を縦書きで配置した和モダンな構成。書店や美容院の上質感を出しつつ、2店舗を縦書きで対比。
Numbers
サロンを「01」「02」の章として、大きな数字と写真で編集的・物語的に紹介。マガジン的なリズム感。
Slider
2店舗をカルーセルで切り替え表示。ボタンで Natchan / Liore' を行き来でき、ページを短く保てる。
Sidebar
左に固定ナビ、右にコンテンツを配置したデスクトップ寄りの構成。サロン情報を横並びの行で対等に紹介。
Whitespace
写真をほぼ使わず、余白と文字だけで構成。2店舗を「01/02」の章として簡潔に語り、上質で静かな印象。
Condensed
「NATCHAN × LIORE'」の大文字タイポグラフィでブランドを主役に。2店舗を行形式で対等に紹介するモダンでクールな構成。
5案:並列ポータルの雰囲気を変える
Wa Modern
B案の骨格に和モダンな質感を加えたバリエーション。生成りの和紙テクスチャ、縦書きラベル、墨色のアクセントが特徴。Hina Mincho + Not…
★ B案派生(並列方向)Elegant Gold
B案の骨格をベージュ×ゴールドのエレガントな配色で展開。Cormorant Garamond のラテン書体、ヘアラインのゴールドライン、シャネル風…
★ B案派生(並列方向)Mono Modern
B案の骨格を白黒グレーのモノクロームで展開。セクション番号(01/02/03/04)、罫線で区切られたグリッド、黒背景フッター。スタイリッシュ・性…
★ B案派生(並列方向)Natural Sand
B案の骨格を温かみのあるサンド×テラコッタで展開。丸みを帯びたカード・ボタン、Zen Kaku Gothic の親しみやすい本文。アットホームでナ…
★ B案派生(並列方向)Photo Portal
ヒーローを左右2分割し、各サロンの写真を全面に。ギャラリーも2店舗対等に4枚ずつ。現行DNA(#fffef4 / #7b7b6e)を保ちつつ、写真…
★ B案派生(並列方向)10案:レイアウト構造を変える
White Space
純白の余白を最大化し、中央に細い罫線と極小の文字だけを配置する超ミニマル。ヒーローは縦線で区切り、2店舗は細い罫線付きのシンプルカード。しずかな高級感。
★ 並列方向Seasonal
ヒーロー下に、2店舗をフル幅ブロックで交互に並べる「季節の移ろい」型。写真ブロックとテキストブロックを左右交互に配置し、各店舗に異なるトーン(春/…
★ 並列方向Bridge
2店舗を左右対向カラムで向かい合わせ、中央にオーナー紹介を「橋」として架ける。オーナーが2店舗をつなぐ関係性を構造そのもので表現。
★ 並列方向Classic DNA
現行NatchanサイトのデザインDNA(#fffef4 / #7b7b6e / Hina Mincho / 余白)を最も忠実に継承した、固定ナビ…
★ 並列方向Dual Hero
ページ全体を左右2分割し、それぞれに2店舗のヒーローを全面表示。スクロールしなくても両店舗が一目でわかる、最も対等な見せ方。
★ 並列方向Photo Journal
写真誌スタイル。各店舗を「01 / 02」の章立てで、大きな写真とテキストを交互に見開き配置。イメージで選ばせる直感的でエディトリアルな並列。
★ 並列方向Bento
不均等グリッド(ベントー)に写真・店舗・オーナー・メニュー・アクセスをタイル配置。情報をコンパクトに収め、スクロール量を抑えた一目で把握できる並列。
★ 並列方向Warm Wood
木の温もり・クリーム・ブラウンで「おもてなし」感を演出。角丸カード・ソフトシャドウで柔らかな印象。暖かく迎え入れるサロンの雰囲気を表現。
★ 並列方向Swiss Grid
太い罫線で区切られた厳密なグリッド、サンセリフ大文字、英文表記。インデックス番号(01/02)で2店舗を等価に示す、クリーンでプロフェッショナルな並列。
★ 並列方向Evening Dark
墨・ベージュのダークトーンで、大人の夜のサロン感を演出。月をモチーフにしたヒーロー、暗色カードで統一。上質でシックな雰囲気。
★ 並列方向15案:コンセプト・骨組みを変える
Parallax
重ねた写真がスクロールに合わせて動くパララックス演出で、ふたつのサロンの物語を深みで語る。写真バンドとテキストを交互に配置し、没入感を高めた並列型。
★ 並列方向Map Centric
「下高井戸駅から徒歩3分」という立地を主役に、簡略マップにピンを置いて2店舗を導く構成。地図上での距離感で並列性を自然に伝える。
★ 並列方向Timeline
Natchanの創業からLiore'開店までを縦のタイムラインで辿る構成。「同じオーナーが2店舗を営む」ストーリーを時系列で自然に伝える。
★ 並列方向Interview
オーナーへのQ&A形式で、2店舗の違いや使い分けを「対話」として紹介。比較表を回答に組み込み、読ませる・比べさせる両方を満たす。
★ 並列方向Postcard
2店舗を「下高井戸からの便り」に見立てたポストカード風カードで紹介。切手モチーフ・手書き風フォントで、温かく親しみやすい並列。
★ 並列方向Brochure
パンフレットの「ページ」を1セクションずつ綴じた構成。表紙(ヒーロー)→サロン紹介→メニュー→店舗情報と、読む順番を誘導する。
★ 並列方向Storefront
2店舗を「店先(ウィンドウ)」として左右に並べ、写真越しに店内をのぞく体験を再現。お店の雰囲気そのもので選ばせる。
★ 並列方向Infographic
口コミ評価・席数・得意分野・料金を統計や表で視覚化し、「データで比べて選ぶ」を助ける構成。数字が情報の主役。
★ 並列方向Gallery
2店舗の写真を全面に並べたギャラリー主導の構成。ヒーローも2分割、写真タイルのマウスオーバーでタグが現れ、直感的に雰囲気を伝える。
★ 並列方向Accordion
サロン・メニュー・アクセスをアコーディオン(開閉式)に収納し、ページを短く保つ構成。タップで開く操作感で、情報を自分で選んで読む。
★ 並列方向Menu Book
2店舗のメニューを見開きの「ブック」として対向配置し、カタログのように比べ読みする構成。メニュー中心で「何を頼めるか」が一目瞭然。
★ 並列方向Route Guide
「下高井戸駅から徒歩3分」を起点に、各店舗への道のりをルート(経路)として案内する構成。道案内(東口から【爺】を通って…)もそのまま活かせる。
★ 並列方向Color Block
2店舗を異なる色面のブロックとして大きく提示するアート的構成。写真に頼らず色と余白でサロンの個性を表現し、力強く並列させる。
★ 並列方向Picture Frame
2店舗を額縁に入れた「作品」として飾り、展覧会のように見せる構成。プラーク(説明板)風のキャプションで上質で静かなギャラリー感。
★ 並列方向Newspaper
「下高井戸新聞」と銘打った新聞風レイアウト。2店舗を2本のコラムとして対向配置し、読み物としてじっくり伝える。明朝体で上質な紙面感。
★ 並列方向15案:タイポグラフィの動き(文字演出)
Kinetic Type
ヒーローに輪郭だけの大きな文字がゆっくり流れ続ける演出。文字の「動き」そのものを主役にした、静かでリッチなタイポグラフィ・モーション。
★ タイポ動き編Marquee
「Natchan × Liore' — 下高井戸のふたつのサロン」のリボンが画面を横切り続ける。ブランド名を印象づける、リボンのようなリズムの演出。
★ タイポ動き編Scroll Reveal
ヒーローのキャッチコピーが1文字ずつ順番に浮かび上がる。ページの始まりに「言葉」を丁寧に見せる、落ち着いた演出。
★ タイポ動き編Sticky Type
Natchan と Liore' の大きな文字が画面に固定され、スクロールで重なり合う。Playfair Display のイタリックがエディトリ…
★ タイポ動き編Letter Space
キャッチコピーの文字間隔がゆっくり開いていく演出。間(ま)の広がりが「余白」のサロンコンセプトと重なる、抑制の利いた動き。
★ タイポ動き編Type Parallax
輪郭文字がスクロールに合わせて異なる速さで動く。文字と背景の速度差で奥行きを出し、シンプルな構成をリッチに見せる。
★ タイポ動き編Mega Type BG
「NATCHAN」「LIORE'」の巨大な輪郭文字がセクション間を横切る。ブランド名を背景に敷く、インパクトと余白を両立した構成。
★ タイポ動き編Gradient Type
キャッチコピーの文字色にグラデーションがゆっくり流れる。アクセント色(オリーブグレー×サンド)だけで彩る、上品な色の動き。
★ タイポ動き編Stagger Fade
カードやセクションが下から順番に浮かび上がる。余計な装飾を排し、要素がひとつずつ現れるリズムで情報を丁寧に届ける。
★ タイポ動き編Hover Type
ヒーローの2店舗ロゴにカーソルをのせると「Reserve」が現れ、写真がふくらむ。予約への自然な導線を持つ、操作を伴う演出。
★ タイポ動き編Load Anim
ページ表示時にロゴ・ライン・ブランド名が順に現れるローディング演出。最初の一瞬に上質さを感じさせる、しっとりした導入。
★ タイポ動き編Vertical Type
「下高井戸に」「ふたつのサロン」を縦書きで配置し、中央に2店舗のロゴを並べる。和の書体と余白で上質な佇まいを演出。
★ タイポ動き編Counter
口コミ評価(4.86 / 4.79)や駅から徒歩3分などの数字がスクロールでカウントアップ。データで2店舗の信頼を語る、実績を伝える演出。
★ タイポ動き編Rotating
ヒーローの言葉(ふたつのサロン/美と余白/プライベート空間…)が自動で切り替わる。短い言葉を次々に届ける、軽やかな演出。
★ タイポ動き編Scroll Scale
「Natchan × Liore'」の文字がスクロールに合わせて大きく近づいてくる。画面いっぱいに言葉が迫る、ドラマチックで印象的な演出。
★ タイポ動き編10案:AD刷新編(文字ロゴのみ・カタカナ禁止・写真×タイポ)
Editorial Serif
Playfair Display × 和文明朝のエディトリアル。クリーム基調に太罫線と写真のクロップで、Westend / Susanne Kau…
★ AD刷新編Mono Mega Type
Bebas Neue の極太大文字を画面いっぱいに。写真はすべてモノクロ処理で統一し、ALICE / Salon Heleen 系の「文字が主役」…
★ AD刷新編Arch Poster
写真をアーチ型に切り抜き、ポスターのように配置。Cormorant Garamond × 明朝で、Era Residence 系の彫刻的・静謐な美…
★ AD刷新編Ink & Accent
ダークヒーロー → ライト → ダークとセクションごとに明暗を切り替え、朱色の一点アクセントで引き締める。Consider Digital 系の芸…
★ AD刷新編Warm Sand
サンドベージュ×テラコッタの暖色基調。角丸カードと丸いCTAで、Ever Beauty 系の自然で温かく親しみやすいホスピタリティ。試し配色の1つ。
★ AD刷新編・暖色試しDark Gold
墨色の背景にゴールドのアクセント。Cormorant Garamond の大文字タイポと金色の細線で、OMR / NOTHIN' 系のリッチでラグ…
★ AD刷新編・ダーク試しWhite Minimal
純白の背景に極細字セリフと圧倒的な余白。Tillberg / Vero 系の静謐なラグジュアリー。情報を極限まで削ぎ落とし、写真の間合いで上質さを…
★ AD刷新編Tab Switcher
上部のタブで Natchan / Liore' を切り替えて、各店のヒーロー・特徴・メニュー・情報を個別ページ感覚で見せる構造実験。下部に2店舗の…
★ AD刷新編・構造実験Numbered
01〜05の大きな数字を各セクションに配し、長尺ページを「章立て」で読ませる構造。Playfair Display の英数字と明朝の見出しで、P型…
★ AD刷新編・構造実験Scroll Type
ヒーローの店名が1文字ずつ浮かび上がり、スクロールで大きな言葉が立ち上がる。AY〜BMの文字演出を「文字ロゴのみ・統一配色」のルールで再統合し、写…
★ AD刷新編15案:AD刷新2編(クリーム×セリフ洗練 / 配色実験 / 和モダン / 動き構造 / フォトドリブン)
Cream Magazine
Playfair×明朝を大型誌面のように。上部に英字ヘッダー・中央に巨大なTwo Salons・セリフ細部の罫線で、紙の編集誌の上質さ。
★ AD刷新2編Serif Split
Cormorant Garamond の巨大見出しを左に、写真を右に。サロンは写真×セリフの行を交互に重ね、口コミ数値のバンドも配置。
★ AD刷新2編Paper Quiet
極細字のEB Garamondと和文で「紙面」の静けさ。本文のドロップキャップや飾り罫で、書物をめくるような佇まい。
★ AD刷新2編Sage Calm
セージグリーン×クリームの涼やかな配色実験。自然の落ち着きと清潔感で、ふたつのサロンを爽やかに紹介。
★ 配色実験Blush Brown
ブラッシュピンク×ブラウンの柔らかな配色実験。Rosewoodの色調で、女性的で暖かな雰囲気に。
★ 配色実験Highkey Cream
ほぼ白に近いハイキーのクリーム基調。Jostのサンセリフで明るく軽やかに。洗練された「光」の配色。
★ 配色実験Washi Wa
生成りの和紙の風合いと墨色。縦書きのタグラインを添え、Zen Old Mincho で和の余白を。Shippori Minchoの佇まい。
★ 和モダンTategaki
ヒーローと店名・説明を縦書きで配置。写真と縦書き文字が交差する、書物的な和の編集デザイン。
★ 和モダンEnso Wa
円相(えんそう)のモチーフをヘッダーに。円形の写真カードと静かな余白で、禅のごとく澄んだ和の世界。
★ 和モダンH-Scroll
サロンの写真や情報を横スクロールのレールで提示。左右に流れるギャラリーを手でなぞる体験。
★ 動き・構造Sticky Stack
カードがスクロールで積み重なって固定され、ひとつずつ開いていく。サロンを「層」として見せる構造実験。
★ 動き・構造Full Snap
全画面を1章としてスナップで切り替わる。ダークな写真の上に大きな章タイトルを。映画的な導入。
★ 動き・構造Fullbleed
写真を全面に敷いたヒーロー+サロンごとの大判写真ペア。ビジュアルファーストで直感的に世界観を伝える。
★ フォトドリブンPhoto Mosaic
大小さまざまな写真タイルをモザイク状に敷き詰め、ふたつのサロンの空気を写真だけで伝える。
★ フォトドリブンDuet Split
Natchan と Liore' を左右の大写真で同時に見せる分割ヒーロー。ふたつの店が「対」であることを直球に表現。
★ フォトドリブン