背景
現状、ページごとにデザインの方向性や実装スタイルがばらついており、サイト全体にツギハギ感がある。
具体的には以下のような状態になっている。
index.html は common.css / output.css / ページ内の inline style が混在しているevent.html は Tailwind CDN ベースのカード UI で、トップや問い合わせページと見た目の文脈がズレているcontact/index.html は最小限のスタイルで iframe を載せており、他ページと比較して情報設計や見た目がかなり異なるindex-landing.html / index-fullscreen.html / modern-design.css / landing-redesign.css など、複数のデザイン方向や試作が並存している
やりたいこと
ブランドのトンマナを整理し、主要ページの見た目と体験を横断で揃える。
- 配色、タイポグラフィ、余白、見出し、ボタン、カード、ナビゲーションの基準を決める
- トップ、イベント、問い合わせ、事例、LP 系ページで共通の見た目を使い回せるようにする
- 場当たり的な inline style やページ固有の調整を減らし、保守しやすい構成に寄せる
対象ページ
design/TechGuide/index.htmldesign/TechGuide/event.htmldesign/TechGuide/examples.htmldesign/TechGuide/contact/index.htmldesign/TechGuide/lp/*
進め方
- 主要ページの現状を棚卸しして、ズレている要素を洗い出す
- ベースとなるトンマナを決める
- 共通で使うスタイルを整理する
- 主要ページへ横断で適用する
- PC / SP で見た目の崩れがないか確認する
完了条件
- 主要ページ間で、色・文字組み・余白・コンポーネントの一貫性がある
- 新規ページや派生ページでも流用しやすいスタイル構成になっている
- ページごとに別サイトのように見える状態が解消されている
背景
現状、ページごとにデザインの方向性や実装スタイルがばらついており、サイト全体にツギハギ感がある。
具体的には以下のような状態になっている。
index.htmlはcommon.css/output.css/ ページ内の inline style が混在しているevent.htmlは Tailwind CDN ベースのカード UI で、トップや問い合わせページと見た目の文脈がズレているcontact/index.htmlは最小限のスタイルで iframe を載せており、他ページと比較して情報設計や見た目がかなり異なるindex-landing.html/index-fullscreen.html/modern-design.css/landing-redesign.cssなど、複数のデザイン方向や試作が並存しているやりたいこと
ブランドのトンマナを整理し、主要ページの見た目と体験を横断で揃える。
対象ページ
design/TechGuide/index.htmldesign/TechGuide/event.htmldesign/TechGuide/examples.htmldesign/TechGuide/contact/index.htmldesign/TechGuide/lp/*進め方
完了条件