前回の記事で「Webサイト制作におけるCMSの重要性と選定ポイント」を学んだ、Web制作会社新人社員の「りん」。今回も、分かる人にしか分からない小ネタをはさんでくる上司「はやせ」とともに、クライアントの要求を満たすWebサイトの設計を学んでいきましょう。

クライアントがWebサイトで達成したいゴールはなに?


はやせさーん! この前はありがとうございました!

おかげさまで、最適なCMSをクライアントに選んでもらうことができました!


……ん? (イヤホンを外しつつ)

あー、はいはい。あーそうよかったねー! (音楽聞いていて、何を言われたかイマイチ分かってないけど、なんとなく合わせた)


CMSが決まってクライアントも盛り上がってくれて、実際にWebサイトを作りはじめたい!

ということで進めていくことになったのですが、どう進めていけばいいでしょうか?


今回もまたざっくりとした質問だねー、もう投げっぱなしジャーマンだね。


まあ、Webサイト制作について一番大事なのは、クライアントがWebサイトで何を達成したいかを考えて、それにあわせたゴールを導き出して設計・制作するところ、って感じかな。

その辺は、いろいろやり方があるんだけど……具体的に話しながら設計していってみようか。クライアントは、最終的にWebサイトにどういう効果を期待しているの?


(……投げっぱなしジャーマン? ドイツ人? ……この話は、一旦置いておいて……)

はい、クライアントニーズは以下のようです。


  • 4つある製品ごとに情報発信やアップデートを、短時間で手軽に行いたい
  • 製品の導入事例もたくさんあるので、それを有効に使いたい
  • ニュースリリースなどのお知らせも、タイムリーに掲載したい
  • スタッフなどの顔が見える運営をして、親近感や安心感を顧客に持ってもらいたい
  • 最終的には製品の内容的に電話でのお問い合わせを増やして、売上につなげたい


なるほど。かなり具体的なヒアリングは終わっているんだね。これをもとに構成を考えていこうか。

さて、どういうページが必要になると思う?


えーと……要素としては、こんなかんじでしょうか?


  • トップページ
  • ニュース(お知らせ)
  • 製品ページ
  • 事例ページ
  • お問い合わせ
  • 会社概要


だいたいそうだねー。「スタッフの顔が見える~」は、どうやって実現する?


うーんと……。「顔が見える」ということは、スタッフの写真やその人の言葉が分かると親近感湧きやすいかなーって。

そうなると……、スタッフブログを運営するとかどうですか?


そうそう、中の人がどういう人か、どういった思いを込めて製品を作っているかなど分かると、製品に対して信頼感を持ちやすくなるよね。

製品サイトとしてきっちり説明する場所があった上で、さらにユーザー視点のカジュアルで読みやすいコンテンツを用意するとかね。


なるほどなるほど、では構成をまとめるとこんな感じですね。


ページ構成図


うん。バッチリだね!

それじゃあ、この構成をCMSで実現していくことを考えてみようか。まずその前に、CMSにすることの利点ってなんだっけ?


Webサイト制作者と、実際にコンテンツを更新していく担当者の役割分担がきっちりできて運営しやすい、って感じですよね。

まとめると、こんなところですか。


  • コンテンツ更新とデザイン管理を分離できる
  • HTMLを知らない人でもページを更新できる
  • 記事を更新すると、トップページやアーカイブページなど、導線となるリンクが自動で生成される
  • 制作も運営も楽になり運営コストや制作コストを削減できる
  • コンテンツとページ構造とが分離されているので、レイアウト崩れの防止やSEO対応もやりやすい


うん。Web上での情報発信は、素早く定期的にしていくことが重要だから、クライアントはコンテンツを用意することだけに集中できるのがいいよね。

じゃあ、今回クライアントが選んでくれたWebサービス型のCMS「MovableType.net」を例に、サイト設計をしていってみようか。


はい!


更新頻度・方法に合わせてページを構成していこう


まず、さっきリストアップした構成だけど、この中で時系列に情報を更新していくもの、固定的だけどたまに情報を更新するものに分けてみようか。


クライアントからヒアリングしたことを踏まえて、整理するとこうなりました。


  • トップページ
    ページのほとんどはあまり更新しないけど、ニュースの枠だけは最新の記事数件を自動で表示して欲しい
  • ニュース(お知らせ)
    お知らせがある度に頻繁に更新したい。最新のお知らせから順番に時系列に表示したい
  • 製品ページ
    各製品ごとのニュースも頻繁に更新したい。時系列に情報を表示したい
  • 事例ページ
    事例が増えるたび、時系列に増えていく
  • お問い合わせ
    基本は変わらないけれど、たまに連絡先を変更する場合がある
  • 会社概要
    更新頻度は半年に一回あるかないか
  • スタッフブログ
    頻繁に更新したい


結構更新する箇所が多いサイトになりそうだね。そういう内容であればこんな構造になるかな。

MovableType.netをつかった場合の構成図


  • トップページ
    ウェブサイト>テンプレート
    通常はいじらず、最新情報などが自動的に更新される。
  • ニュース(お知らせ)
    ウェブサイト>ニュースブログ
    ブログ1つで独立。時系列に記事が更新される。
  • 製品ページ
    ウェブサイト>製品ブログ
    ブログ1つで独立。時系列に更新される記事と製品情報のWebページを組み合わせる。
  • 事例ページ
    ウェブサイト>事例ブログ
    ブログ1つで独立。時系列に記事が更新される。
  • お問い合わせ
    ウェブサイト>ウェブページ
  • 会社概要
    ウェブサイト>ウェブページ
  • スタッフブログ
    ウェブサイト>スタッフブログ
    ブログ1つで独立。時系列に記事が更新される。


なるほど。トップページのようにページの一部だけが自動更新されるのか、ブログのように自分で記事を追加して頻繁に更新していくのか、それとも、Webページとして1つのページを自分で随時更新していくのか、など運用にあわせて設計していけばいいのですね。


そうそう。こうやって運用方法にあわせて分けることによって、このあと説明する「役割ごとに適切な権限を付与しての運営」もできるんだよ。


あ、そうだ! 権限について話す前に、スマートフォンに対応する場合は構造にどんな影響がでるんでしょうか?


構造、こうぞう、コウゾウ、kouzou……これは、長くなるから次回ね。




更新頻度の低いページと、随時記事を追加していくブログ形式のページなどWebサイトの更新頻度に合わせて、サイト構造を考えていくポイントがなんとなく分かったりん。スマホ対応については次回ということで、帰宅することにしたのでありました。

次回は、「スマートフォン対応の方法と、サイト運営者の役割ごとの権限設定について」ご紹介します。

執筆者紹介

早瀬将一

シックス・アパートにて、主にWebサービス型CMS「MovableType.net」の製品企画を担当しています。個人活動として、大学時代から音を中心としたインタラクティブ作品を制作。音に限らない作品やソフトウェアも作ってます。詳しくはWebで!