このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
「その不調は、あなたのせいではありません。」を掲げた、自律神経専門の鍼灸整体院サイト。カードも角丸も影もアクセント色も使わず、墨色と生成りの2階調に1pxの罫だけで全ページを組んでいる。見出しは行送りを詰め、本文は2.27倍まで開くという落差でリズムを作り、写真は1400pxで断ち落とし、テキストは1200pxに収めて密度の差を出した。TOP／初めての方へ（施術の流れ・所要時間と料金・持ち物・院内図・FAQ6問）／料金／症状別4本（自律神経の不調・肩こり頭痛・腰痛・産後の不調）／院長紹介（手紙・3つの約束・年表）／アクセス（院情報・地図・駅からの道順）／ご予約（疑似送信フォーム）／プライバシー／404の全12ページ。写真は35点を用意し、施術・静物・空間・全幅バンドを配分して情報量と余白を釣り合わせた。
一度完成させたものを「チープでAIっぽい」と評価され、基軸から選び直して全面的に作り直した。原因は参考サイトを同業に絞ったことで、母集団の天井がテンプレート級だった点にある。二度目は業種を跨いで基軸を選び、着手前に足切り条件（全セクションの英字ラベル・3等分のカード・中央対称のヒーロー・波形の区切り・パステルの差し色・ピル型ボタン）を明文化してから組んだ。差し色を捨てたことが最も効き、強調は級数と余白と罫だけで作っている。写真に重ねる文字は、帯全体ではなく文字の画素の真下だけを測る方法でコントラストを検証し、白文字で4.99〜8.04を確保した。施術室の配置図・自律神経の日内リズム・院内の動線・駅からの道順は、写真では説明できないため1pxのインラインSVGで描き、装飾ではなく情報として置いている。
同じデザインを STUDIO で再構築
この作品は HTML / CSS / JavaScript で書いた静的サイトである。装飾を持たず1pxの罫と余白だけで組んだデザインが、ノーコードでも成立するかを確かめるため、静的版の実測値（配色・余白・文字サイズ・罫の太さ）をそのまま基準にして、STUDIO 上で同じ画面を組み直した。完全な複製ではなく、下に挙げた差は残っている。
- 移植元：静的 HTML / CSS / JavaScript・全12ページ（GitHub Pages で公開）
- 移植した範囲：TOP と料金の2ページ（全12ページ中）
- STUDIO 版の構成：633ノード（TOP 465／料金 168）＋SPメニュー用モーダル25ノード
- 見出し脇の 2px×64px の縦罫は擬似要素のため、実体のボックス17本に置き直した
- 施術室の配置図（1pxの線画）はインラインSVGが持てないため、等倍で書き出した透過画像に置き換えた
- ページ全体の高さの差：PC(1280px) +0.14% / SP(390px) +0.24%