「STUDIOで作ったサイトが、更新するたびに崩れる」「同じボタンを何度も作り直している」「どこを修正すれば良いか分からない」――その原因は、構造設計(再利用設計)が不足していることにあります。STUDIOは自社で更新できるのが強みですが、構造設計をしないと、更新のたびに崩れたり、修正箇所が分からなくなったりします。本記事では、更新で崩れない「STUDIO構造設計」の方法を解説します。構造設計の無料相談「どう設計すれば崩れないか」から「更新しやすい構造」まで、30分でSTUDIOの構造を設計します。無料相談を予約する崩れる原因は"再利用設計"不足STUDIOで作ったサイトが更新で崩れる原因は、セクションやコンポーネントを再利用する設計ができていないことです。崩れるパターンパターン1: 同じボタンを何度も作っているトップページ、サービス紹介、事例ページで、それぞれ別々にCTAボタンを作成1箇所のボタンを修正すると、他のページのボタンも手動で修正が必要→ 修正漏れが発生し、デザインが統一されないパターン2: ヘッダー・フッターを各ページにコピペヘッダー・フッターを各ページにコピー&ペーストヘッダーのナビゲーションを変更すると、全ページで手動修正が必要→ 修正に時間がかかるパターン3: セクションの命名がバラバラ「section1」「section2」「section3」という曖昧な名前どのセクションが何を表しているか分からない→ 更新担当者が「どこを修正すれば良いか」迷うコンポーネント化の設計思想STUDIOでは、コンポーネント(再利用可能なパーツ)を作ることで、1箇所修正すれば全ページに反映されます。コンポーネント化すべきパーツパーツ1: CTAボタン「無料相談を予約する」ボタン全ページで使われるコンポーネント化すれば、1箇所修正で全ページのボタンが変わるパーツ2: 見出しH2見出し(フォント、サイズ、色)全ページで統一されているコンポーネント化すれば、デザインの統一が保たれるパーツ3: カード事例カード(写真、タイトル、説明文)社員紹介カード(写真、名前、職種、メッセージ)コンポーネント化すれば、追加・削除が簡単パーツ4: ヘッダー・フッター全ページ共通コンポーネント化すれば、1箇所修正で全ページに反映コンポーネント化の例例1: CTAボタンのコンポーネント化コンポーネント化前:トップページ、サービス紹介、事例ページで、それぞれ別々にボタンを作成ボタンの色を変更する場合、3箇所を手動で修正コンポーネント化後:「btn-cta」というコンポーネントを作成全ページで「btn-cta」を使用ボタンの色を変更する場合、コンポーネントを1箇所修正すれば、全ページに反映例2: 事例カードのコンポーネント化コンポーネント化前:事例ページで、各事例を個別に作成事例を追加する場合、レイアウトを手動で再現コンポーネント化後:「card-case」というコンポーネントを作成事例を追加する場合、コンポーネントを複製し、中身(写真、タイトル、説明文)だけ変更レイアウトは統一されるセクションの命名ルールSTUDIOでは、セクション(ページを構成する大きなまとまり)に分かりやすい名前をつけることで、更新担当者が「どこを修正すれば良いか」がすぐに分かります。命名ルールの例ルール1: 役割を明確にする❌ 「section1」「section2」「section3」✅ 「section-fv」「section-service」「section-case」ルール2: プレフィックスを統一セクション:「section-○○」コンポーネント:「btn-○○」「card-○○」→ 一目で種類が分かるルール3: 英語表記で統一❌ 「セクション-サービス」✅ 「section-service」→ 特殊文字を避け、STUDIOの動作を安定させる命名の例トップページのセクション:section-header(ヘッダー)section-fv(ファーストビュー)section-service(サービス紹介)section-case(事例紹介)section-cta(CTA)section-footer(フッター)サービス紹介ページのセクション:section-header(ヘッダー)section-hero(ページタイトル)section-service-detail(サービス詳細)section-pricing(料金)section-cta(CTA)section-footer(フッター)更新しやすい構造の作り方STUDIOで更新しやすい構造を作るには、更新担当者が迷わない設計が必要です。更新しやすい構造の3原則原則1: コンポーネントを活用CTAボタン、見出し、カードはコンポーネント化1箇所修正で全ページに反映原則2: セクション名を分かりやすく「section-fv」「section-service」など、役割が分かる名前更新担当者が「どこを修正すれば良いか」が一目で分かる原則3: 更新マニュアルを作る「お知らせの追加方法」「求人情報の変更方法」「社員紹介の追加方法」→ 30分で更新できるようにする更新マニュアルの例例: お知らせの追加方法【お知らせの追加方法】1. STUDIOにログイン2. 「お知らせ」ページを開く3. 「section-news」を選択4. 「card-news」コンポーネントを複製5. 以下を変更: - 日付:2024/01/15 - タイトル:新サービス開始のお知らせ - 本文:〜〜〜6. 保存して公開構造テンプレSTUDIOの構造設計を、以下のテンプレートで管理します。構造設計テンプレート【セクション一覧】ページセクション名役割備考全ページsection-headerヘッダー全ページ共通全ページsection-footerフッター全ページ共通トップページsection-fvファーストビュー-トップページsection-serviceサービス紹介-トップページsection-case事例紹介-トップページsection-ctaCTA-サービス紹介section-heroページタイトル-サービス紹介section-service-detailサービス詳細-サービス紹介section-pricing料金-事例ページsection-heroページタイトル-事例ページsection-case-list事例一覧card-caseを使用【コンポーネント一覧】コンポーネント名種類役割使用箇所btn-ctaボタン無料相談を予約全ページbtn-secondaryボタン資料ダウンロード一部ページcard-caseカード事例紹介事例ページcard-newsカードお知らせお知らせページcard-staffカード社員紹介採用ページ無料ダウンロードSTUDIO構造設計テンプレート(Excel)構造設計のチェックリストSTUDIOの構造設計が適切か、以下のチェックリストで確認します。構造設計チェックリストチェック1: コンポーネント化[ ] CTAボタンはコンポーネント化されているか[ ] 見出し(H2)はコンポーネント化されているか[ ] カード(事例、社員紹介)はコンポーネント化されているか[ ] ヘッダー・フッターはコンポーネント化されているかチェック2: 命名ルール[ ] セクション名は役割が分かるか(「section-fv」など)[ ] コンポーネント名は種類が分かるか(「btn-cta」など)[ ] プレフィックスが統一されているか(「section-○○」「btn-○○」)チェック3: 更新しやすさ[ ] 更新担当者が「どこを修正すれば良いか」が分かるか[ ] 更新マニュアルが用意されているか[ ] 30分以内に更新できるかチェック4: 崩れにくさ[ ] コンポーネントを複製しても崩れないか[ ] セクションを追加しても崩れないか[ ] テキストを変更してもレイアウトが崩れないか「更新で崩れない構造」を一緒に設計しませんか?e-Familyの無料相談では、コンポーネント化から命名ルール、更新マニュアルまで、30分でSTUDIOの構造を設計します。無料相談を予約するまとめ: 構造設計が運用を決めるSTUDIOで更新しやすいサイトを作るには、構造設計(再利用設計)が必要です。崩れる原因は"再利用設計"不足:同じパーツを何度も作る、ヘッダー・フッターをコピペ、命名がバラバラコンポーネント化の設計思想:CTAボタン、見出し、カード、ヘッダー・フッターをコンポーネント化セクションの命名ルール:役割を明確にする、プレフィックスを統一、英語表記で統一更新しやすい構造の作り方:コンポーネント活用、分かりやすい命名、更新マニュアル構造テンプレ:セクション一覧、コンポーネント一覧構造設計チェックリスト:コンポーネント化、命名ルール、更新しやすさ、崩れにくさ構造設計をしっかり行うことで、「更新で崩れる」「修正箇所が分からない」という失敗を防げます。e-Familyでは、無料相談でSTUDIOの構造設計を一緒に行い、最短で更新しやすいサイトを作ります。まずはお気軽にご相談ください。次に読むべき記事STUDIO制作プロセス(最短手順) (L5-1)STUDIO運用設計(更新できる) (L5-4)STUDIOのSEO設計 (L5-3)CTA設計:無料相談予約を増やす配置と文言 (L3-2)STUDIOで実装する設計 (S5)無料ダウンロード資料STUDIO構造設計テンプレート(Excel)この記事を書いた人e-Family / STUDIO制作・採用ページ専門中小企業の「問い合わせが来ない」「応募が来ない」を、サイト設計で解決します。