CMS化で実現する、誰にとっても見やすいサイト作り

サイトの中でNEWSや製品紹介などのフォーマットが決まっているページをCMS（ブログ）化すると、運用が効率的になるだけでなく、フォーマットが揃うので閲覧側もどこに何があるかがわかりやすく、多くのコンテンツを取り扱う場合の導線整理としても優れています。

そのためぜひサイト内のさまざまな場所でCMSの活用をオススメしたいのですが、日記のようなブログをサイトに組み込むことは想定できても、そのほかのどんなページをCMS化すればいいのか、あまりピンとこない…という方がほとんどでしょう。

そこで今回は、サイト内のレシピページをBiND PressでCSM化して運用している、介護食品メーカーの「株式会社フードケア」のサイトを例に、サイトの一部をCMS化して更新性を高め、見やすいサイトを作るノウハウをWebデザイナーが解説します。

▼介護食品メーカーの「株式会社フードケア」さん。

豊富なコンテンツでも迷わずたどり着ける

フードケアさんはコンテンツが非常に多いのですが、サイト全体の導線や見せ方が考えられているので、わかりやすく迷わない設計になっています。商品の特性やターゲットに合った、清潔感もあって好感の持てるデザインもいいですね。また、BiND Pressを用いて作られたレシピページの統制されたレイアウトも、伝わりやすさを高めています。
商品写真や図版も作り込まれていてとても見やすいサイトです

CMS化で見やすく効率的な運用を実現したサイトの好例

ページ数や商品点数の多いサイトで離脱が起きてしまうのは、どこを見れば商品を比較できるかやどこをクリックすれば見たいページに移動できるかがわかりにくい作りになっている場合です。CMS化の利点はフォーマットが決まっているので、作る側も必要な要素が把握しやすく更新時間を短縮でき、閲覧する側も内容を把握しやすいところ。把握しやすければページ数が多いサイトの閲覧も苦ではありません。

レイアウトが決まっているブログは内容を把握しやすい

新・BiNDupのここで設定

新しいBiND Pressは、カテゴリやタグによる分類ができるので、食事系・デザート系、和風・洋風などのタグを入れておくと、今後レシピが増えても閲覧者が探しやすくなるのでおすすめです。各カテゴリやタグのまとめページが自動で作られるので、見やすいレシピページを手間なく充実させられます。

新しいBiND Pressはカテゴリで分類やタグの挿入で記事の分類可能

まとめページを別途作る必要もありません

トーンを合わせてプロの仕上がりへ

サイトの配色も見やすさに影響があります。フードケアさんは全体的にすっきりとしたレイアウトで、オレンジを基調とした中のアクセントのグリーンの使い方もバランスが良く、細部までサイト製作者のこだわりを感じられるサイトです。

色味を揃えるとプロっぽく見える！

欲を言えばデザインの基調にない色が入ってくるとバランスが崩れて見えるため、ページ内のテキストで使われている文字色のトーンを揃えるとさらに印象アップ。

青文字の箇所を全体のトーンに合わせて色変更

新・BiNDupのここで設定

全体のデザインから少し浮いて見えるので、トーンを合わせて「#20317d」あたりや、もっと目立たせたければ明るめの「#20587d 」などがおすすめです。通常、見出しの文字色はDressで指定しますが、こちらの例のように同じ小見出しで文字色を変えたい場合は、ブロックエディタで変更してOKです。

CMS化で、更新者にも閲覧者にも優しいサイト作り

いかがでしょうか？
ただでさえページ数が多いと、知りたい情報にたどり着かないから諦めて離脱してしまう…といったことが起きてしまいがちです。せっかく作ったページが見てもらえないことにならないように、導線の整理とレイアウトの統制を意識すると、誰にとっても見やすいサイトを作ることができます。

今回紹介したサイトを参考に、BiNDupのCMS機能「BiND Press」を使ってぜひ、サイト内のテンプレート化できる箇所のCMS活用にチャレンジしてみてくださいね。
BiNDupについてもう少し詳しく