Googleサイトでの目次の設定方法とは？見出しのつけ方もご紹介

Googleサイトを作成したら、目次を作成したいと思ったことはないでしょうか。Googleサイトでは目次は簡単に設定することができます。また目次を設定すると、ユーザーが要約を掴むことができ、必要な箇所にすぐ移動することもできるようになります。それでは参りましょう。

Googleサイトより簡単に・便利に情報を共有できるツール「NotePM」
→NotePMを無料で試してみる

Googleサイトで目次を置くメリット

まずは、Googleサイトで目次を置くメリットについてご紹介します。Googleサイトで目次を置くメリットは次の2つです。

• ユーザビリティが上がる
• 検索クローラーが回遊しやすくなる

詳しく見ていきましょう。

ユーザビリティが上がる

目次をつけることによって記事の内容が一目でわかり、およその要約をつかむことができます。また目次リンク機能がついていれば、読みたい箇所にすぐ移動することができるようになり、ユーザビリティを高めることができます。逆に、どういう内容が書かれているのか、読みたい箇所はどこにあるのかを、最初からいちいち探さなければならないのであれば、ユーザーに大きなストレスになるだけでなく、あきらめて他のページに移ってしまうこともあるでしょう。

検索クローラーが回遊しやすくなる

目次を作ると検索クローラーが回遊し、中身を把握しやすくなります。また、目次を作ると検索結果に目次が表示されることがあります。検索結果ページに掲載されている目次を見たユーザーがホームページを訪れることも期待できます。

Googleサイトより簡単に・便利に情報を共有できるツール「NotePM」
→NotePMを無料で試してみる

Googleサイトで目次を入れるときのポイント

Googleサイトで目次を入れるときのポイントを紹介していきます。目次を作ることは構成を作るということでもあります。目次は可能な限り執筆の前に決めておくと、同じことを何度も書いてしまったり、無駄に長くなったりすることを防ぐことができます。

内容がすぐわかる見出しにする

ユーザーは不必要な記事を読むことを嫌うため、目次だけでおおよその中身をつかめるようにしておきましょう。どんな内容が書いているのかを簡単につかめる目次することで、離脱を防ぐことにつながります。またユーザーが興味をひきそうな見出しにすることで期待感が高まり、ちゃんと記事を読んでもらえる可能性が高まります。

スマートフォンを意識する

最近ではパソコンからアクセスするユーザーよりも、スマートフォンからアクセスするユーザーの方が多くなっています。スマートフォンを意識せず、だらだらと長い見出しをつけてしまうと、画面が文字だらけになってしまい圧迫感を与えてしまうことがあります。スマートフォンでの読みやすさも考えた目次にしましょう。

親と子の関係を意識する

見出しH2と小見出しH3の関係は親と子の関係でなければなりません。関係がねじれてしまっていないか確認してみましょう。関係がねじれているとユーザーは何をいっているのかよくわからなくなってしまい、混乱してしまいます。あくまでも小見出しは見出しを補佐するものです。見出しを作る際には親と子の関係が適切なものになっているか確かめてみましょう。

・誤った例1（質問がH3、回答がH2になっている）
【H2】おすすめは魚市場
【H3】海なし県でどうやって美味しい魚を食べる？
【H3】養殖された淡水魚も美味しい

・誤った例2（H3の方が範疇が広くなっている）
【H2】埼玉県のグルメ
【H3】関東のグルメ
【H3】茨城県のグルメ

・正しい例
【H2】海なし県でどうやって美味しい魚を食べる？
【H3】おすすめは魚市場
【H3】養殖された淡水魚も美味しい

・正しい例
【H2】関東のグルメ
【H3】埼玉県のグルメ
【H3】茨城県のグルメ

Googleサイトにおける目次の挿入方法とは？まずは見出しを作ってから

Googleサイトでの目次の挿入はとても簡単ですが、先に見出しを作っておく必要があります。具体的な手順を紹介します。

見出しを作成する

1.見出しを先に作るために、「挿入」から「テキストボックス」を選択します。

2.テキストボックスの中に目次の文言を入力していきます。

3.タイトル文にしたい場所にカーソルを合わせて、「標準テキスト」の横にあるプルダウンから「題名」を選びます。

4.題名の部分が拡大されて表示されました。

5.同じように「見出し」とにしたい部分にカーソルを合わせて、標準テキストの横のプルダウンから見出し」を選ぶと見出しのサイズに文字が拡大されます。

6.次は「小見出し」にしたい部分にカーソルを合わせ、「小見出し」を選び、文字の大きさを変化させます。同様に全ての部分についても「見出し」「小見出し」を選んで文字の大きさを変化させます。

目次を挿入する

見出しを完成させたら、目次を作成することができます。

1.目次を挿入したい場所にカーセルを合わせ、右の「挿入」から「目次」をクリックします。

2.目次が挿入されました。

3.編集の画面では目次のリンクを使うことができません。リンクを使えるようにするためには、公開する必要があります。右上の「公開」をクリックします。ポップアップのウェブアドレスに好きな文字を入れることができます。ここではowlcompanyとしています。また検索エンジンにサイトを表示したくない場合はチェックを入れておきます。最後に「公開」を押します。

4.実際に公開したサイトを見てみましょう。右上の公開ボタンにプルダウンがついているので、その中から「公開されたサイトを表示」をクリックします。

5.公開されたページの目次をクリックすると、その箇所に飛ぶことが確認できます。

Googleサイトより簡単に・便利に情報を共有できるツール「NotePM」
→NotePMを無料で試してみる

Googleサイトでの目次を編集する方法

目次の内容を変える場合は、見出しの文字を編集するだけで変更することができます。色を変える方法や一部の見出しを表示しない方法についてご紹介します。

目次の色を変える方法

1.目次の横にある「セクションの色」を選びます。

2.今回はスタイル3を選び、背景の色と文字の色を逆転させます。

3.背景の色と文字の色が変わりました。

4.今度は色を別の色にしてみます。右の「テーマ」から任意のものを選びます。今回は「シンプル」の「黒」を選びます。背景が黒、文字が白になりました。さらに複雑な色を選びたい時は、今回チェックした黒の右隣にあるアイコンを押すとさらにたくさんの色から選択することができます。

5.美容室のホームページなどおしゃれな雰囲気にしたい場合は、背景に写真を入れるのもテクニックの一つです。左にある「セクションの色」から「画像」を選び「アップロード」を選択しパソコンに保存されている画像の場所を選びます。Google Driveに画像を保存している場合は、「画像を選択」を選びます。

6.写真を背景にした目次が作成されました。

一部を非表示にする方法

見出しを作成したものの、目次には入れたくない場合もあるでしょう。その場合は、一部非表示にするととても便利です。詳しい方法を見ていきましょう。

1.目次の右隣に現れる目のマークを選択します。

2.編集中の画面では見出しがまだ消えていませんが、公開されたページでは指定した見出しが消された状態になっています。確かめるために右上の「公開」のボタンを再度押して、次に現れる画面でも再度「公開」を押します。公開されたページを表示させると、選んだ部分が消えています。

NotePMはGoogleサイトの代わりに使えます

Googleサイトの運用で課題を感じている皆さま、ぜひ NotePM をお試しください！

NotePM は、マニュアルが簡単に作れて、社内ナレッジを管理できるサービスです。強力な検索機能で、掲示板や社内ポータル・社内FAQとしても便利です。

NotePMの公式サイト：https://notepm.jp/

GoogleサイトとNotePMの違いについてさらに詳しく知りたい方は、ぜひ下記記事をご覧ください。
関連記事：GoogleサイトとNotePMの違いとは？機能や独自性、最適な使い方を比較して解説！

Googleサイトより簡単に・便利に情報を共有できるツール「NotePM」
→NotePMを無料で試してみる

まとめ

Googleサイトの目次機能をつけることは、難しい知識も要らず非常に簡単なため、ぜひ活用してみてください。ユーザビリティが向上したり、検索エンジンに評価されやすくなる可能性があります。本記事を参考にして、より良いサイト作りをしていただければ幸いです。

検索性に優れたマニュアル作成・ナレッジ管理ツール「NotePM」

NotePM（ノートピーエム） は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。

NotePMの特徴

• マニュアル作成、バージョン管理、社外メンバー共有
• 強力な検索機能。PDFやExcelの中身も全文検索
• 社内FAQ・質問箱・社内ポータルとしても活用できる
• 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる

今だけ30日間無料で使えます