FAQの開閉デザインを実装担当へ渡す前に｜決めておきたい動作と確認項目

FAQの開閉は、初期状態、同時に開ける数、操作範囲まで伝えると実装の認識をそろえられます。この記事内で触れる架空サンプルと、制作担当へ渡せる仕様メモを紹介します。

FAQの「開く・閉じる」は、見た目だけでなく、初期状態・同時に開ける数・操作方法まで指定すると、デザインと実装の認識をそろえられます。

質問を選ぶと回答が現れる表示を、アコーディオンと呼びます。紙面では常に見える本文が、Webでは操作するまで見えないこともあります。制作会社・広告会社のデザイナーや進行担当者向けに、実際に操作できる架空例から仕様の渡し方を解説します。

「＋を押すと開く」だけでは、実装が決まりません

同じデザインでも、「最初は全部閉じる」「先頭だけ開く」「一つを開くと他を閉じる」「複数を開いたままにする」という違いがあります。回答を見比べたいFAQなら、複数を開ける方が扱いやすい場合もあります。画面を短くすることだけで判断せず、訪問者が何を読み比べるかから決めます。

また、クリックする範囲が小さな＋だけなのか、質問の行全体なのかでも、スマートフォンでの使いやすさは変わります。見た目の開閉マークと、実際に操作できる範囲を別々に伝えるのがポイントです。

次は説明用の架空例です。実際の店舗の案内ではありません。質問の行をクリックまたはタップすると回答が開き、同じ行をもう一度選ぶと閉じます。二つとも開けるので、回答を見比べられます。

サンプル：見学の予約は必要ですか？

見学は事前予約制です。希望日と人数を連絡して、受付からの返答を待つ、という架空の案内です。実案件では、予約方法と受付担当を事業者に確認して記載します。

サンプル：当日は何を持参しますか？

この例では、予約時に案内された資料を持参する設定です。実案件では、持ち物を決める担当者に確認し、予約案内とFAQの内容を一致させます。

これはWordPress標準の「詳細」ブロックで作った例です。HTMLのdetailsとsummaryという要素が使われています。独自スクリプトを追加せずに開閉できますが、テーマや装飾によって見た目は変わるため、納品するサイト上で確かめます。

キーボードではTabキーで質問へ移動し、フォーカスを示す枠が見えるか、Spaceキーで開閉できるかも試します。見た目のマークだけでなく、質問が操作対象として分かり、開閉状態が支援技術に伝わることも検収条件へ含めます。

架空FAQを実装担当へ渡すなら、次のように記入できます。既存のデザイン指示書や検収表に、この項目を追加するだけでも使えます。

架空の実装依頼メモ

「一つだけ開く」方式が必要なら、その理由も添えます。HTML標準には、同じname属性でまとめたdetailsを排他的に開く仕組みがあります。ただし、ここに埋め込んだ例はその属性を使わず、複数を開ける仕様です。WordPressの設定対応や対象ブラウザーも含め、実装担当が確認します。

申込前に必ず読む条件、予約方法、営業時間など、訪問者全員に必要な情報は通常の本文にも示します。FAQは補足を選んで読むための仕組みであり、重要事項を目立たなくするためのものではありません。

少数の短い質問なら、見出しと回答をそのまま並べる方が読みやすいこともあります。全部をアコーディオンへ変える必要はありません。使う理由がある項目だけを選びます。

WordPressで顧客が更新する場合は、質問と回答の入力場所、並べ替え方、追加方法を納品時に説明します。新しい項目が初期仕様を引き継ぐか、長い文章やリンクを入れたときに崩れないかまで、一件追加して確認すると具体的です。

デザイン確認は開いた状態と閉じた状態の両方で行い、公開後も実際の端末で操作します。見た目の確認、操作の確認、管理画面での更新確認を分けると、修正依頼の担当と原因を切り分けやすくなります。

GreenCodingでは、制作会社・広告会社の既存フローに合わせ、FAQの開閉仕様、WordPressでの編集範囲、コーディング、公開前の表示・操作確認を支援します。開閉前後のデザインと、更新する人の想定があれば、必要な工程から相談できます。

最終確認日：2026年9月18日。FAQと実装メモは架空例です。説明は標準HTMLとWordPressコアブロックを前提とし、案件のテーマ、装飾、ブラウザーに合わせて検証します。

支給資料と現在決まっている範囲を確認し、必要な工程、役割分担、実装・検証範囲を整理します。