Code-Free Creates

整体院|急ぎの立ち上げでも、修正が一括で反映できる構造で品質を担保

linkhttps://seitai-ishii.com/

課題

運営していたサービスサイトがログイン情報の紛失により管理不能となり、急ぎでの新規サイト立ち上げが必要となった。

訴求したいコンテンツが多岐にわたる一方、制作期間は公開まで1ヶ月厳守という厳しいスケジュールだった。

解決法

Bricksのクラスベース管理とコンポーネント設計を徹底し、反復するレイアウトを再利用可能なコンポーネントとして構築した。

コンテンツの反映スピードを最大化しつつ、修正が全箇所に一括で波及する構造にすることで、短納期での品質確保を実現した。

結果

サイトの規模感に対して、受注から1ヶ月という短期間での公開を実現。

また、Bricksを用いたことでCWVスコアが向上し、パフォーマンススコアでは以下のような高得点が実現できた。

95
パフォーマンススコア(PC)
68
パフォーマンススコア(SP)

実装仕様

制作概要
整体院 / サービスサイト
制作規模
固定ページ6・CPTシングル/アーカイブテンプレート各1
対応スコープ
デザイン, 構築
使用ツール
Bricksビルダー
制作期間
約4週間(受注〜公開)
コンポーネント設計

反復するレイアウトを以下の3種のコンポーネントとして定義し、全ページで再利用する構成にした。
このことでコンテンツの配置が効率化され、また、レイアウト修正も一括で行えるようになったため、校正の迅速化を実現できた。

  • 2カラム 画像+テキスト: クラスの付け替えのみで画像とテキストの左右を入れ替え可能。同一コンポーネントで複数パターンに対応する
  • 番号付きカードレイアウト: 番号・見出し・テキストを含むカード型コンポーネント。施術フローや手順の説明に多用
  • テーブル型グリッドレイアウト: 施術院所在地・サービス価格表など、構造化された情報の表示に使用
クラスベース管理

Bricksのグローバルクラスを使用し、デザインのスタイル定義をクラスに集約。

コンポーネント化されていないデザインパーツには可能な限りクラスを付与し、統一感のあるレイアウトと修正の一括化を実現した。