生田昌弘の「Web担当者に喝!」

部分最適のページデザインに血道を上げるWeb制作者に喝! テンプレート化を手抜きだと勘違いするな

テンプレート化の先にあるのは、コンテンツの全体最適化と運用効率化、それによるユーザーへのサービス向上だ
[Sponsored]

部分最適やページ単位のデザインに血道を上げるWeb担当者や業者に喝!

テンプレート化はデザインの手抜きではない。

テンプレートがなければ、お客さまに最適化された最新のコンテンツを提供することはできない。

「ページをそれぞれデザインして制作を」とWeb担当者は言うけれど

Webサイトは、それ自体1つのメディアであることに、疑問の余地はない。

それは、ページの集合体ではなく、サービスの集合体でなければならない

あくまでもページは、その内容をお客さまに伝える表示形式に過ぎないのだ。だから、ページ単位の部分最適ではなく、コンテンツ単位の全体最適を模索してほしい。それこそが、お客さまに使いやすく、わかりやすいWebサイト構築のはじめの一歩なのだ。

さらにコンテンツ単位の全体最適は、更新運用の利便性を各段に向上させることにもなる。お客さまに最新の情報を素早く伝えるWebサイトの特性を考えるならば、必須の考え方と言える。

最近では、CMSに興味を持つWeb担当者も増えてきている。

それ自体は好ましいことだが、CMS導入のベースにあるものを再度確認してほしい。それは、「お客さまに最適な情報を素早く提供する」という、サービスの向上を目指して導入するということだ。

そのためには、コンテンツが一元管理されていることは言うまでもないことだが、表示側のテンプレートが明確に定義され、機能していなければ、成し得られないことだということも理解してほしい。

テンプレートは、Webサイトをサービスとして提供するために、必須の考え方であり、なくてはならないものだということを。

テンプレートだと、愛想や味気のないページになるのでは?
Web担当者A
テンプレートがあると自由にページが作れない!
Web担当者B
テンプレートだとかっこいいページが作れない!
Web担当者C

たしかに、そのとおり。しかし、これのどこがダメなのか?

ページ単位できれいなページをお客さまが求めているとでも?

それともただの自己満足ではないのか?

ページごとに御社の要望を細かく承ります!
制作会社A
とにかくデザイン優先のかっこいいページ作りますね!
制作会社B
ページの細部までこだわって作り込みますね!
制作会社C

たしかに、間違ったことは言ってないが、それがどれほど役に立つのか?

Webサイトは、お客さまの問題解決ツールである。

かっこいいことよりも、お客さまの必要なコンテンツが必要な順番で提供されることのほうが重要だ。しかも間違いなく、最新の情報である必要がある。

そのためには、運用更新の利便性も求められる。それを成し得たうえでの話ならば、「かっこいいほうがいい」という論理にも同意する。だが、まずやるべきは、Webサイトが最低限度のサービスとして成り立つための全体最適だ。

何も、Webサイトのすべてをテンプレート化しようというのではない。更新頻度が高い、共通で利用できるパーツが多く存在する、コンテンツがデータベース化できるなど、テンプレート化したほうが有効と思える部分をテンプレート化しようという話だ。

逆に言えば、テンプレート化できる部分が70%以下のWebサイトは、その有効性を再検討すべきなのだ。

もちろん、新製品のキャンペーンサイトや、企業や商品ブランドのブランドサイトは、ここでは除いて考えてほしい。

週刊誌が週刊で発行できる理由は、80%以上がテンプレート化されているからだ。週刊誌よりも、更新頻度が求められるWebサイトを運用すると考えるならば、テンプレート化されていないWebサイトが、いかに運用を想定していないかがよくわかるはずだ。

くれぐれも優先順位を間違えないでほしい。

そもそも「テンプレート」とは何か?

「テンプレート」と聞くと、一般的には雛形や定型書式を想像するだろう。紙メディアの制作におけるテンプレートは、レイアウトのパターンを指す場合が多い。

Webサイト制作においてのテンプレートも、同様にレイアウトのパターンであると定義できる。しかし、紙と決定的に違うのは、運用を想定するかどうかだ。つまり紙は、テンプレートで最初は全ページ制作されても、部分最適で各ページを細かく修正することが可能なのだ。

Webサイト制作現場では、このような紙と同じ部分最適が行われてしまっているため、結局のところ本来あるべきWebサイトのテンプレート導入になりきれていないのが現状だ。

そもそも、なぜ部分最適してはいけないのか。Webサイトは、公開してからがスタートであり、紙は公開(出版)が最終形だからだ。

紙だって、制作している最中は、すべての見出しフォントを一括で変えられたほうが便利だし、共通コンテンツや共通で利用しているロゴや写真がまとめて差し替えられたほうが楽に決まっている。

しかし、紙には終わりがある。

Webサイトには終わりがない。

ここが決定的に違うのだ。だからWebサイトのテンプレートは、部分最適してはいけない。

制作における利便性や、お客さまの理解や使い勝手を担保するだけでなく、Webサイトの運用にも有効な効果を発揮するのがテンプレートだからだ。

さらに、テンプレートを作る際は、見た目やレイアウトだけではなく、コンテンツ(情報)の意味やページ上での役割をふまえて考えなければならない。表面的なグラフィックデザインだけでなく、情報設計の領域までが「Webサイトのデザイン」といえるのだ。

まっとうなテンプレートを設計できる制作者に敬意を!

(制作会社の心の叫び)

Webサイトにおけるテンプレート制作手順

テンプレート自体の考え方は紙と同様で、レイアウトのパターンだと考えれば理解しやすい。

ただし、ユーザー体験シナリオなど、ユーザーニーズの洗い出しや、それに必要なコンテンツの洗い出し、ユーザーごとのコンテンツの提供の順番が確定していることが前提になる。

また、コンテンツの決定にともない、それに最適化されたサイト構造も確定している必要がある。

以下に、テンプレート制作手順を明記しておく。

STEP 1 表示の最小単位「コンポーネント」を作る

タイトルや画像、見出し、キャプション、本文など、文章構造を形成する1つ1つの要素「エレメント」を洗い出し、汎用的に使用するエレメントの組み合わせ「コンポーネント」を必要な量だけ用意する。

エレメント(コンテンツの要素、情報の最小単位)
項目名
サイズ
タイトル
20文字
商品画像
40×100
商品拡大画像
100×200
一覧用画像
30×20
見出し
20文字
キャプション
200文字
本文1
100文字
本文2
1000文字
コンポーネント(エレメントの集合体、表示の最小単位)
コンポーネントA
タイトル
画像
本文テキスト
コンポーネントB
見出し
画像
キャプション
「エレメント」を組み合わせて、「コンポーネント」を作る

STEP 2 必要なテンプレートの種類を検討する

Webサイトの階層に応じて、テンプレート化したほうが有効と思えるページを選定し、必要なテンプレートの種類を検討する。

テンプレートa
テンプレートb
テンプレートc
どのテンプレートを使用するか、「決まり」を定める

STEP 3 各種テンプレートに表示されるコンテンツを検討する

事前に洗い出したコンテンツから、各種テンプレートに表示されるコンテンツを検討する。

テンプレートa
テンプレートb
テンプレートc
大分類(大項目)
カテゴリ(中項目)
ページ(小項目)
コンテンツ(小小項目)
内容(ユーザシナリオから抽出)
知識コンテンツ
購入
購入前に必要な事柄
購入前に必要な基礎知識を掲載し、知識がないユーザーの疑問・不安を解消する。
・車を買う前に知っておくこと、調べておくことを伝える
・重量税や保険(自賠責保険など)の説明ページへ誘導
・保険の重要性を事例をふまえて紹介する
・消耗しやすい箇所のポイント、長く乗るためにメンテナンスした方が良い箇所などを掲載する
・中古車を購入してもメーカーにユーザー登録すれば、リコール情報があった場合に連絡が行く事を伝える
購入費用
新車と中古車の違い
購入する際に変わる費用
購入までの流れ
イニシャルコスト
車両価格以外にどんなコストが発生するのかを伝える。
・整備費など中古車購入にかかるイニシャルコスト
初期費用が何によって変わってくるのかを伝える。
査定
賢い売り方
どうすれば高値で売却できるのかを紹介する。
*****の買取と下取りについての考え方を掲載し、車の価値を明確にしたほうがお客様にメリットがあることを伝える。
買い取り実績、オークション成約率がNO.1であり、高価買取ができる理由を掲載する。
・全国150ヶ所のオークションメンバーであり、日本全国のオークション金額を知っているから買取額が高い
・販売経路が確保されているため、買取額が高い
残債分をなくしてからローンを組む「すっきりローン」のページへ誘導する。
お客様の声
車を売却したお客様の声を掲載する。
購入
車両検索
新車に近い車を探す
年式が新しく走行距離が少ない新車に近い中古車を数多く保有していることを伝え、新車よりも安く購入できることを案内する。
・現行モデルの車の一覧
・新古車のリスト
・ワンオーナー車の一覧
・新車と中古車の差額
カタログページに新車と同じ金額で買える外車やワンランク上のグレードの車へ遷移できるルートを作る。
用途・シーンで探す
生活環境・シーン
子供がいても使いやすい車の条件、運転しやすい車のタイプなどを明示し、生活環境から車を探せるようにする。
車を使うシーンから最適なスペックや機能を掲載する。
各用途ごとに最適なる車の条件、タイプなどを明示し、条件にあう車両の一覧を掲載する。
生活環境、ライフステージに関する情報を掲載する。
・急に都心から地方転勤が決まった
・家庭を持った
査定(乗り換え)
集客
検索エンジンで「車査定」や「車売却」などを検索したユーザー(車の売却が目的と考えられるユーザー)を集客する。
サービス
出張査定サービスを紹介するコンテンツを用意し、スケジューリングなどのやりとりの方法をユーザーが選択できるようにする。(電話かメールを選択)
買ったときの条件(ローンなど)を顧客情報として保持し、お客様が後から閲覧できるようにする。
査定申し込み
査定のお申し込みフォームへスムーズに誘導する。
売却に関する相談を受け付けており、本体価格以外も相談に乗れることを伝える。
乗り換え提案
予算を指定して探す
査定日時、査定金額をマイページで閲覧できるようにし、その金額内で乗り換え可能な車の一覧ページへ誘導する。
金額の範囲内で購入できる車のリストを掲載する。
テンプレートごとに必要なコンテンツを決める

STEP 4 洗い出したコンテンツから共通項目を見つけ出す

事前に洗い出したコンテンツから、複数のページで表示される共通項目を洗い出す。洗い出す共通項目のパターンは、以下のとおり。

  1. 共通情報パターン
    • a-1. 表示形式もコンテンツ内容も同一(ヘッダーなど)
    • a-2. 表示形式は同一だがコンテンツ内容が違う(パンくずナビなど)
    • a-3. 表示形式は違うがコンテンツ内容は同じ(リスト表示など)

    情報が、一元管理される必要がある。部分最適ができないと考えたほうがよい部分になる。

    テンプレートの肝になる部分であり、この部分が大量にある場合は、CMS導入の検討指針の1つともいえる。

    Webサイト主管部署 担当者
ID
画面項目
編集項目
1
ホテル名
テキスト
2
ホテル紹介テキスト
テキスト
3
ホテル画像
画像
4
地域
テキスト
5
郵便番号、住所
テキスト
6
電話番号
テキスト
7
FAX番号
テキスト
8
受付時間
テキスト
9
URL
テキスト
10
お問い合わせフォーム
URL
CMS管理画面で登録
表示タイプ1
表示タイプ2
表示タイプ3
表示タイプ4
表示タイプ5
    共通情報パターンが多い場合、CMSが有効に機能する
  2. 共通表示形式パターン

    ユーザーから見て、同様な形式で確認できると好ましい情報(商品詳細、リストの表示など)。

  3. 自由表示形式パターン

    そのページ独自の情報で、同じフォーマットで別のページに現れないし、共通化した情報として、今後も使用する予定がない。

    フォーマット化が難しいだけでなく、フォーマット化しても、あまり意味を持たない情報(キャンペーン情報などの期間限定の情報、専用サービス情報など)。

STEP 3で制作したコンテンツリストをもとに、STEP 4洗い出したabを中心にテンプレートを制作する。STEP 4cに関しては、たとえば、「自由テンプレート」として用意することも検討する。

STEP 5 コンポーネントを積み上げてテンプレートを作成する

作成したコンポーネントを積み上げて、テンプレートを作成する。

テンプレート(コンポーネントの集合体)
テンプレートa
ヘッダー
パンくずナビ
コンポーネントD
コンポーネントB
コンポーネントE
フッター
テンプレートb
ヘッダー
パンくずナビ
コンポーネントA
コンポーネントC
コンポーネントB
フッター
テンプレートc
ヘッダー
パンくずナビ
コンポーネントA
コンポーネントC
コンポーネントB
フッター
コンポーネントを積み上げて、STEP 2で決定した種類のテンプレート作成する

Webサイトにおけるテンプレートとは、情報の最小単位である「エレメント」を管理でき、運用可能な表示の最小単位にまとめた「コンポーネント」の集合体であり、このレイアウトを示したものである。

また、「コンポーネント」は繰り返しと表示・非表示だけに制限すれば、テンプレートにおけるレイアウトやグラフィックデザインは、あるレベルで担保される。

本日のまとめ

テンプレートとは、お客さまに素早く、正確にコンテンツを提供するための手法でなければならない。

それこそが、Webサイトの効果的な運用を行うということ!

「お客さまに最適化されたテンプレートによる運用」でなければ、Webサイトで成果を出すことはできない。

すべては、お客さまの問題解決のために!

[Sponsored]
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]