--- title: SharePoint で見栄えの良い FAQ ページを作る方法【折りたたみ式＆3段組スタイル】 description: 社内ポータルやチームサイトで「よくある質問（FAQ）」ページは、情報共有の要です。今回は、SharePoint の標準機能だけで実現できる、見た目も使いやすさも考慮した FAQ ページの作成方法を 2 パターン紹介します。 --- [Microsoft 365 に関するお役立ち情報 ](https://www.sg-plus.jp/blog) # [SharePoint で見栄えの良い FAQ ページを作る方法【折りたたみ式＆3段組スタイル】](https://www.sg-plus.jp/blog/20250509) 作成者: [かず](https://www.sg-plus.jp/blog/author/かず)｜2025/07/04 社内ポータルサイトやチーム向けの情報共有サイトで、「よくある質問（FAQ）」ページは非常に重要なコンテンツのひとつです。 しかし、単に質問と回答を並べるだけでは、見づらかったり、探しづらかったりして、逆にユーザーの手間を増やしてしまうこともあります。そこで本記事では、**SharePoint の標準機能だけで実現できる、見た目も使いやすさも考慮した FAQ ページの作成方法を 2 パターン紹介**します。 1. ページ内で完結する「折りたたみ式（アコーディオン型）」FAQ 2. カテゴリ別に質問を並べて、詳細はポップアップで表示する「3段組スタイル」FAQ どちらの方法も **SharePoint リスト**を活用することで、更新の効率化や情報の一元管理が可能です。各スタイルの作り方だけでなく、それぞれの**メリット・デメリットや活用シーンも具体的に解説**していますので、社内 FAQ の改善を検討している方はぜひ参考にしてみてください。     ●この記事の目次 1. [FAQ ページ作成の基本：SharePoint リストを活用しよう](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor1) 1-1. [FAQ リストの構成について](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor1-1) 2. [方法①：折りたたみセクションを使った FAQ（アコーディオンスタイル）](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor2) 2-1. [特徴](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor2-1) 2-2. [作成ステップ](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor2-2) 2-3. [メリットとデメリット](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor2-3) 3. [方法②：3 段組セクションを活用したスタイル（カテゴリ別リンク形式）](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor3) 3-1. [特徴](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor3-1) 3-2. [作成ステップ](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor3-2) 3-3. [メリットとデメリット](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor3-3) 4. [どちらを選ぶべき？](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor4) 5. [SharePoint に関するご相談はSGプラスまで](https://www.sg-plus.jp/blog/20250509?hs_amp=true#anchor5)     ## FAQ ページ作成の基本：SharePoint リストを活用しよう まず、どちらの方法でもベースとなるのが「SharePoint リスト」です。事前にリストを用意しましょう。   ### **FAQ リストの構成について** リストをベースに情報を管理する場合は、以下のような列を用意します。 | **列名** | **内部名** | **種類** | **用途** | | --- | --- | --- | --- | | 質問 | title（デフォルト値） | 一行テキスト | 実際の質問内容 | | 回答内容 | answer | 複数行テキスト | 回答内容 | | カテゴリ | category | 選択肢 | 質問の分類（例：システム、人事） | | 表示順 | display | 数値 | 並び順の制御（任意） | 回答内容の「列」で複数行テキストのオプションで「リッチテキスト」を適用すると、リンクや画像を入れることも可能です。   作成リスト（例）： このリストを活用して、ページ上に FAQ を動的に表示していきます。 また、ページに反映する際、選択するデザインによって表示用のビューを作成する必要があります。   リストの作成方法やビューについての説明は、下記のブログで詳しく解説しています。ご参照ください。  [【SharePoint】リストを作成して情報整理！効率的に情報を共有しよう](https://www.sg-plus.jp/blog/20230725)  [【SharePoint】ビューを活用して見やすいリストを作成しよう](https://www.sg-plus.jp/blog/20230801)     ## 方法①：折りたたみセクションを使った FAQ（アコーディオンスタイル） ### 特徴 -  質問と回答内容が同時に展開される UI - ページ内で完結 - ユーザーにとってスムーズな閲覧体験 ### 作成ステップ 1.  ページを新規作成し、セクションを追加します。「＋」をマウスオーバーをすると「＋セクション」（図中①）と変わりますのでクリックします。次に「1 段組み」（図中②）をクリックします。 2. セクションの「編集」（図中③）をクリックします。右側に表示された「このセクションを折りたたみ可能にする」を「オン」（図中④）にします。オンにしますと、下に折りたたみのオプションが表示されるので、必要に応じて設定を変更してください。 ※ページを開いた時に、折りたたみを閉じて表示したい場合は、オプションの一番下「既定の表示」を「折りたたみ済み」に変更しましょう。デフォルトでは「展開済み」になっています。 3. web パーツを追加します。セクションの中の「＋」（図中⑤）をクリックし、「リスト」（図中⑥）を選択します。 4. リストを呼び出します。作成したリスト（図中⑦）がパーツ上に表示されるので選択します。 5. 呼び出したリストの表示を整えるため「編集」（図中⑧）クリックします。右側に表示された設定画面から「表示する」の下部（図中⑨）をクリックし作成したビュー（※）を選択します。必要に応じて「サイズ」や「コマンドバー」「すべて表示」ボタンなどの設定します。最後に「適用」（図中⑩）クリックすれば完了です。 （※）カテゴリごとにフィルターされたビューを事前に作成しておいてください。 詳しくは下記のブログをご参照ください。  [【SharePoint】ビューを活用して見やすいリストを作成しよう](https://www.sg-plus.jp/blog/20230801) 6. 上記の 1 ～ 5 の工程を繰り返すことで、カテゴリごとの折りたたみ FAQ ページが完成します。 ※上級者向きですが、JSON で書式設定したリストビューを埋め込めば、折りたたみ機能をリスト側で制御することも可能です。   ### メリットとデメリット | **項目** | **メリット** | **デメリット** | | --- | --- | --- | | 閲覧性 | ページ内で完結し直感的 | 質問数が多くなると縦長になりやすい | | デザイン | アコーディオンで動きがあり、見栄えが良い | 回答内容の書式設定の工夫が必要 | | 更新性 | リストに追加するだけでOK | 検索性はやや低い（ページ上でのフィルターや絞り込みに不向き） | | モバイル対応 | 1 カラムで扱いやすく、スマホでも見やすい | 折りたたみ操作が面倒に感じるユーザーもいる |     ## 方法②：3 段組セクションを活用したスタイル（カテゴリ別リンク形式） ### 特徴 - 質問一覧をカテゴリ別に分けてリンク表示 - 詳細はリストアイテム詳細で確認 - 質問数が多い場合やカテゴリ分けが明確な場合に適している   ### 作成ステップ 1. ページを新規作成し、セクションを追加します。「＋」をマウスオーバーをすると「＋セクション」（図中①）と変わりますのでクリックします。次に「3 段組み」（図中②）をクリックします。 2. 各段組みに Web パーツ「リスト」を追加します。セクションの中の「＋」（図中③）をクリックし、「リスト」（図中④）を選択します。 3. リストを呼び出します。作成したリスト（図中⑦）がパーツ上に表示されるので選択します。 4. 呼び出したリストの表示を整えるため「編集」（図中⑥）クリックします。右側に表示された設定画面から「表示する」の下部（図中⑦）をクリックし作成したビュー（※）を選択します。ここの場合は、「システム（質問のみ）」を選択します。必要に応じて「サイズ」や「コマンドバー」「すべて表示」ボタンなどの設定します。最後に「適用」（図中⑧）クリックします。最後にリストのタイトルはカテゴリの名前に上書き変更（図中⑨）しましょう。 （※）カテゴリごとにフィルターされたビューを事前に作成しておいてください。 詳しくは下記のブログをご参照ください。  [【SharePoint】ビューを活用して見やすいリストを作成しよう](https://www.sg-plus.jp/blog/20230801) 5. 質問をクリックするとポップアップ表示で、リストアイテムが表示されるため「回答内容」が確認できます。   ### メリットとデメリット | **項目** | **メリット** | **デメリット** | | --- | --- | --- | | 閲覧性 | カテゴリ別に整理でき、一覧性が高い | クリックしないと回答内容が見れない | | デザイン | 質問のみの表示なので見やすい | 長い質問だと行が揃わず見栄えが悪くなる | | 拡張性 | 質問が増えてもリストだけ更新すればOK | ポップアップ表示がクラッシク UI | | 検索性 | リスト連携でフィルター・検索が活用できる | 最初の設計に手間がかかる （分類・リストのビュー作成） |       ## どちらを選ぶべき？ | **特徴** | **折りたたみ式** | **3 段組スタイル** | | --- | --- | --- | | 表示の一体感 | ◎ | ◯ | | 質問数が多い場合 | △ | ◎ | | モバイルでの見やすさ | ◯ | △ | | カテゴリ別整理 | △ | ◎ | | デザイン自由度 | ◯ | ◎ | | 更新のしやすさ | ◎ （リストベースで自動） | ◎ （リストベースで自動） |       ## SharePoint に関するご相談はSGプラスまで SharePoint で FAQ ページを作成する際は、「どのような情報を、どのように届けたいか」によって最適なスタイルが変わります。 例えば、**質問数が少なく、1ページ内で完結させたい場合**は「折りたたみ式（アコーディオン）」が向いています。ユーザーはクリックだけで回答をすぐ確認でき、スクロールしながら直感的に閲覧できます。モバイル端末でも操作がシンプルなため、スマホ中心の利用環境にも適しています。 一方で、**FAQ の件数が多く、カテゴリ別に整理したい場合**は「3 段組スタイル」が効果的です。質問をカテゴリごとに一覧表示し、それぞれの詳細をポップアップ表示することで、情報の整理・拡張性・更新性が格段に向上します。リストを活用することで、担当者が非エンジニアでも簡単に更新可能です。 どちらの方法でも、「SharePoint リスト」をベースにすることで、FAQ コンテンツの一元管理や将来的な再利用（例：検索、フィルター、Power Automate 連携など）が可能になります。 **おすすめの選び方：** ✔ スマートでシンプルに見せたい → 折りたたみ式 ✔ 情報量が多くカテゴリ別に整理したい → 3段組リンク型 ✔ 複数の用途やユーザー層がある場合 → 両方を併用するのも効果的 自社のサイト構成やユーザーの閲覧傾向に合わせて、最適な FAQ ページのスタイルを選択してみてください。 SGプラス株式会社では、ポータルサイトのカスタマイズ、Web パーツを活用したさまざまなニーズにもお応えできます。お気軽に弊社にご相談ください。 Microsoft 365 の専門コンサルタントが丁寧にご説明いたします。 SharePoint の関連ブログ一覧は [こちら](https://www.sg-plus.jp/blog/tag/sharepoint) 関連サービス：[SharePoint ポータルサイト構築支援サービス](https://www.sg-plus.jp/sharepoint_portal) [完全な記事を表示](https://www.sg-plus.jp/blog/20250509) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "かず" }, "dateModified" : "2025-10-07T01:04:30.378Z", "datePublished" : "2025-07-04T06:28:45Z", "headline" : "SharePoint で見栄えの良い FAQ ページを作る方法【折りたたみ式＆3段組スタイル】", "image" : { "@type" : "ImageObject", "height" : 1384, "url" : "https://22462390.fs1.hubspotusercontent-na1.net/hubfs/22462390/blog_20250509.jpg", "width" : 2000 }, "mainEntityOfPage" : "https://www.sg-plus.jp/blog/20250509", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "Blog" } } ```