福祉・障害者支援 / 協会サイトリニューアル

デザイン会社様からのご依頼で、全国に加盟団体を持つ福祉・障害者支援協会のサイトリニューアルに伴うコーディングとWordPress実装を担当しました。Illustrator製のPC版デザインカンプを元に、レスポンシブ対応も含めて実装を進めました。

本記事では、実装時に特にこだわった点や工夫した点をご紹介します。

固定ページのコンテンツを編集可能に

投稿記事だけでなく固定ページのコンテンツも、担当者の方がHTMLやテンプレートを触らずに更新できるようにしたい、という要望がありました。そのため個別のテンプレート（page-XXX.php）は極力使用せず、WordPressの下記の機能を活用して固定ページを制作しました。

• コアブロック（装飾）
• ブロックパターン
• カスタムフィールド
• カスタムブロック

カスタムブロックにはプラグイン「Lazy Blocks」を使用しました。下記は「吹き出しブロック」の管理画面とフロント表示です。任意の数の吹き出しを配置できるようリピーター機能を活用しています。

一方で、Aboutページのコンテンツである「組織概要」では、次のような要望がありました。

• テーブルの形式で、行を追加できるようにしたい（列は固定）
• テーブルのセルにはテキストやリンク、画像などを自由に配置できるようにしたい
• メンバーを紹介するセルには、アコーディオン形式（見出し + 本文）でコンテンツを追加したい
• アコーディオンの本文はテーブル形式で、行を追加できるようにしたい（列は固定）

リピーターを複数入れ子にする必要があり、無料のプラグインでは対応できないため、ここだけスクラッチでカスタムブロックを作成しました。以下は「組織概要」ブロックの管理画面とフロント表示です。

テーブルの行を任意の数だけ追加可能にし、組織変更やメンバーの入れ替えにも対応しやすい構成にしました。また管理画面とフロント表示の見た目がシンクロしているため、編集者にとっても使いやすいブロックとなりました。

プラグインでカスタムブロックを作成しつつ、複雑な箇所のみスクラッチでカスタムブロックを作成することで、全体的なブロック作成にかかるコストを削減することができました。限られた予算の範囲内で制作を完了することができました。

条件分岐と確認画面のあるフォームの実装

「お問い合わせ」と「入会案内」のそれぞれのフォームを実装しました。いずれもセレクトボックスによる条件分岐でフォームの項目が変わり、かつ確認画面のある仕様でした。

条件分岐 + 確認画面を同時に実現できるWordPressのプラグインは見つからなかったため、プラグインと部分的なスクラッチで対応しました。次のように機能に応じて使用技術／ツールを選定しました。

事前にプラグインの組み合わせを検証し、機能ごとに役割を分けることで、実装と保守の見通しを立てやすくしました。結果的に実装をスムーズに進めることができました。

以下はフォームを操作している様子を動画に録画したものです。

最後に

固定ページの多くを、個別テンプレートに頼らずブロックエディタ上で編集できるよう設計しました。

装飾や定型パーツは Lazy Blocks で対応し、入れ子のリピーターが必要な「組織概要」だけスクラッチのカスタムブロックとすることで、開発コストと更新のしやすさのバランスを取っています。

お問い合わせ・入会案内のフォームは、条件分岐と確認画面を同時に満たす必要があり、プラグインと一部の自前実装を組み合わせて対応しました。

組織やメンバーが変わりやすい協会サイトでも、担当者の方が画面のイメージに近い形で更新できるよう意識した事例です。WordPress実装やフォーム周りでお困りの際は、お気軽にご相談ください。