準備1:サイトマップの構想を練る

はじめにサイトの構想を練る

concrete5で作業を始める前に、サイトの構想を練っておくと良いと思います。サイトマップ(設計図)を紙に書いておくとわかりやすいです。

サイトマップを作っておく

画像を例に解説します。「我が家の動物たち」というサイトを作るとして、サイトマップをこんな感じに作ってみました。

  1. 第一階層は、トップページです。HOMEです。
  2. 第二階層は、「ねこ」「いぬ」「うし」「プライバシーポリシー」「連絡先」「検索結果表示ページ」です。このうち、「ねこ」「いぬ」「うし」は、記事ページを持っているのでカテゴリページです。
  3. 第三階層は、記事ページです。各カテゴリページの子ページです。

これは一例です。階層とカテゴリページや記事ページの関係は限定されておりません。自由に決められます。

カテゴリページは自動生成されない

サイトマップにあるのは、どれも等しく「ページ」として存在しています。

つまり、ブログの場合はカテゴリページは自動生成されますが、concrete5では自動生成されるカテゴリページはないのです。

例えば、このサイトマップでカテゴリページとして位置づけた「ねこ」ページには、「ミケちゃん」「ドードーくん」「スージーくん」へのリンクを自分で設置する必要があります。

…と聞くと大変そうに思えますが、ページリストブロックがあるのでリンクの設置は簡単です。「ここのページ以下の階層」を表示する設定にしておけば、後から記事ページを増やしてもちゃんと表示されます。

むしろ、カテゴリページにページリスト以外のコンテンツも入れられるので、カテゴリページの充実を図ることができます。

ナビに表示しない設定のページも作る

サイトマップの一番下に「検索結果表示ページ」を用意しました。これは検索した結果を表示させるためのページです。検索窓はサイト共通のフッターに設置します。

「除く」属性には

  • sitemap.xmlから除く
  • ナビから除く(オートナビブロックで表示されなくする)
  • ページリストから除く
  • 検索インデックスから除く(Googleにインデックスされない)
  • ナビからサブページを除く

があります。検索結果を表示するだけのページをナビに含める必要はないので、ナビから除くという属性をつけます。sitemap.xmlやページリストなどからも除いていいと思います。

ここで作っているサイトマップはサイトの設計図なので、必要なページはすべて含めます。そして「除く」属性が必要なページには属性をつけます。

トピックを決める(必要なら)

ブログならカテゴリ、完結型サイトならトピック(話題)

concrete5はじつはブログも作れます。(でも、ブログならWordPressをおすすめします…)。そしてそのときには、トピックはカテゴリとして使えます。トピックをクリックするとそのトピックの記事が一覧表示されます。

でも完結型のサイトは、カテゴリページで記事一覧を表示します。

なのでもしトピックを使うなら、カテゴリとは別の分け方をしてみるといいと思います。

トピックはトピックツリーというまとまりで管理

ページにトピックを設定するために、トピックツリーを作っておく必要があります。

お菓子屋さんのサイトが画像のようになっているとして…

「こういう条件で記事ページをピックアップしたい」という項目をトピックツリーにして用意します。ツリーはいくつでも。

そして各ページに属性として付けておきます。すると、

  • 「春のお菓子」という特集ページを作り、そのページに「春のお菓子トピックのついたページ」を一覧表示できる
  • 「贈答用のお菓子」という特集ページを作り、そのページに「贈答トピックのついたページ」を一覧表示できる
  • 「50円以下で買えるお菓子」という特集ページを作り、そのページに「¥50以下トピックのついたページ」を一覧表示できる

このようなことができます。

また、トピックツリーを「トピックリストブロック」でページ内に配置しておき、閲覧者が好きなトピックをクリックすると該当ページが一覧表示されるというようにすることもできます。
(例:デモコンテンツのポートフォリオページ

トピックは設定で複数選択可にもできる。トピックツリーはページにいくつでも追加できる

トピックツリーのトピックは、デモコンテンツではひとつしか選択できませんが、設定すれば複数選択も可能になります。

トピックツリーは1ページにいくつでも付けられます。

画像ではプロジェクトトピック(のトピックツリー)がページに追加されていますが、さらに別のトピックツリーを追加することもできます。

タグは『あきらめポイント』かも。

ページにはタグをつけることもできます。

タグブロックを使って、そのタグをページに表示することもできます。

表示するタグを「すべてのページ」に設定してサイト中のタグを表示させ、タグクラウドっぽくすることもできます。

タグブロックに「タグからページリストにリンクして絞り込む」を設定すれば、ページリストに一覧表示することもできます。

でもね、一覧表示したのがどのタグなのかを文字で表示してくれる機能が見当たりませんでした。

検索結果表示ページに設置したタグクラウドっぽいものをよく見ると、絞り込んだタグの輪郭が緑色になってるけど…よーく見ないと気づかないレベル。

で。

これをスマホで見てみると、PCのときみたいにちゃんと機能してくれない。別のタグをクリックしても、そのタグの輪郭色が切り替わらず。残念…

「絞り込んだタグの輪郭じゃなく背景色を替えたい」とかは、どこかのCSSで設定できると思います。でも絞り込んだタグがスマホでうまく表示されないのは、スマホファーストにはマズイよね。

てことで、タグは使わないのが無難だと思います。

concrete5の場合、タグのかわりにトピックツリーを使えば、カテゴリを横断して別のキーワードでページを分類できます。なのでタグが使えなくても、あまり困ることはないと思います。

参考:【クリック増】カテゴリとタグの違いおよびSEOで効果的な使い分け | AdLiticsラボ

まとめ

PCでの作業にとりかかる前に、サイトの構想を練っておくのがおすすめです。

  1. 必要なページを書き出す
  2. カテゴリも決める
  3. サイトマップを作ってみる
  4. トピックツリーを使うかどうか、使うなら考えておく

これくらいやっておけば、後の作業がスムーズになります。