1ファイル完結のデモサイトという型

「ホームページを頼みたいけれど、何ができる人か分からない」——デザインの発注には、出来上がるまで中身が見えない不安がつきまといます。だから私たちは、先に動くものを作り置きすることにしました。

外部依存ゼロの単一 HTML

デモサイトはすべて、CSS も JS もインラインの 1 ファイルで完結させます。フォントはシステムフォント。画像は SVG か CSS 描画。どこに置いても動くし、メールに添付しても壊れません。

色はトークンに集約する

業種ごとの横展開を速くするため、色と質感は冒頭の CSS 変数に集めます。

:root {
  --brand: #14615b;   /* 深い緑＝清潔・信頼 */
  --accent: #f08a2c;  /* 暖色 CTA＝行動喚起 */
  --ink: #20302d;
  --cream: #faf6ec;
  --radius: 18px;
}

整体院の緑をラーメン店の朱に差し替えれば、骨格そのままに別の店になる。デザインの再利用単位を「ページ」ではなく「トークン」にするのがこの型の肝です。

提案書で説明するかわりに、動くページを渡す。「こんな感じ」の齟齬が一番のコストだから。

すべて架空ブランドで制作しています。実在の店舗を騙ることはしません。