名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

近年、ホームページ制作においてニュースや制作実績など定期的な運用が必要なページについてはWordPressなどのCMSを採用する企業が増えてきました。CMSを採用することでホームページ全体のデザインに合わせた記事を作成できますが、それだけにテンプレートとなるCMSページのデザインには高い操作性、応用の効くデザインが求められます。
そこで今回はニュースやコラム、制作実績などCMSページのデザインでデザイナーが気をつけるべきポイントを紹介します。

カテゴリやアーカイブの設置位置

CMSページのデザインというと記事一覧や記事詳細の右側に、記事のカテゴリやアーカイブ（投稿日時）の目次が配置されている2カラムのレイアウトを想像する方が多いと思います。この2カラムレイアウトは、一覧または詳細ページのどちらからでも条件を指定して記事を探すことができる操作性の面でメリットが大きく、記事詳細の横幅を狭め、単調になりがちな投稿記事を間伸びさせずコンパクトに表示するデザイン上のメリットもあります。このレイアウトは「CMSといえばこのデザイン」として広く普及しているレイアウトで、それが最大のメリットであると同時に最大のデメリットでもあります。レイアウトとしてはほぼテンプレートとして普及しているレイアウトなので、斬新なデザインで他社との差別化を狙いたい企業や、先進的なイメージを与えたい最新のサービスサイトなどのデザインには向かないかもしれません。

もう一つのレイアウトパターンとして、弊社の「お知らせ・コラム」ページのようにカテゴリを記事の上部にボタンとして設置するホームページも近年増加傾向にあります。このレイアウトでは最初にカテゴリの一覧が目立つよう設置されているので、ユーザーが迷わず目的の記事に辿り着くことができます。デザインとしても1カラムで近代的なすっきりとしたレイアウトにはできますが、記事詳細ページを画面いっぱいでレイアウトすると記事の本文1行当たりの文字数が長くなり読みづらく、クライアントが投稿する必要があるアイキャッチなどの画像も非常に大きなサイズで表示されてしまいます。クライアントが高品質な写真を用意できるかなども含め検討し、レイアウトを中央寄りでコンパクトにするなど、実際に記事が投稿される時のことを想定してデザインを工夫しましょう。

記事一覧ページのデザイン

CMSページなどの定期的に更新を行うコンテンツでは、ユーザーが記事一覧を見て記事にどういった内容が書かれているのか想像できることが大切です。記事のタイトルに加え、アイキャッチ画像の表示や、本文の冒頭を抜粋するかどうか、投稿日時やカテゴリの扱いも検討しましょう。特に仕事の実績を掲載する「制作実績」「施工実績」などのページは写真がメインになり、カテゴリも複数必要になるケースも考えられます。例えば建設会社の施工実績ページでは、新規の建築かそれとも改修なのか「工事内容」カテゴリに加え、工場や店舗など何の施設を建てたのか「建設内容」カテゴリが必要になることもあります。写真がメインのコンテンツなら一覧でも写真を大きく見せるレイアウトに、年末年始休暇など事務的な記事のみの投稿が想定されるページは投稿日時とタイトルのみでコンパクトなレイアウトにするなど、用途に合わせユーザーが目的の記事にすぐ辿り着けるようなデザインを心がけましょう。

記事詳細ページのデザイン

CMSページで内容的にもSEO的にも一番重視されるのが記事詳細ページ、つまり投稿された記事そのものを表示するページです。記事一覧ページにも言えることですが、まずページのデザインを行う前にCMSで表示したい内容をクライアントにヒアリングし、それを取捨選択する必要があります。画像を複数枚掲載したいという要望があれば、それを何枚まで、どのように表示するか考える必要があります。また、物件情報などの住所やアクセスなど基本情報を設定できるようにしたいという要望があれば、どこまでホームページ上に掲載し問い合わせにつなげるかも検討しなければいけません。記事を投稿する広報担当者の更新のしやすさ、ユーザーがどんな情報を求めているかを総合的に考えて基本情報を設定しましょう。
記事作成の際、任意で設定できるh3、h4などの見出しは記事によって文字数に差が出てくることが想定されます。少ない文字数でも多い文字数でもデザイン性があり、ページ内で目を引くデザインを心がけましょう。

今回のまとめ

ホームページを制作したとしても、クライアントが定期的な運用を怠ればホームページは育たずSEOの観点でも成長が見込めません。コラムや制作実績の記事投稿は定期的な運用の主軸であり、CMSページの機能性やデザインは広報担当者のモチベーションにも直結します。ホームページ公開後、良質な記事を投稿する土台として、見やすく操作しやすいCMSページをデザインしましょう。