ディレクターズノート-こちら狸穴公園脇ウェブサイト制作所-

第2回まずは現状を把握しよう

埋田:
「あら、いっちゃった・・」
綿鍋:
「ちょっと社長!!
やれやれ・
で、社長の言ってたサイトってどんなん?」
埋田:
「あ、これだ・
へー、確かにきれい。」
綿鍋:
「すごい!なんかアニメみたいに動いてるよ!」
埋田:
「・アニメっていうか、FLASHだね。」
綿鍋:
「えっ?何?FLASHっていうページなの?」
埋田:
「・う、うーん。そうね。
ナビゲーションも、まぁベタだけど分かり易い作りかな」
綿鍋:
「⁠⁠なんか悪い事言ったかなぁ?⁠⁠・ふーん。
で、うちの会社のホームページは・・?」
埋田:
「ああ、たしかココ。」
(あらためて自社のサイトを見る2人)
綿鍋:
「うわ!ちょっと音止めて!あわあわ」
埋田:
「オ、オルゴール・音は困るなぁ。」
綿鍋:
「なんか目がチカチカするよ」
埋田:
「このテキストの色と背景色のチョイス!
読みづらいよ。僕、色弱だからなぁ・。」
綿鍋:
「・文字、流れちゃってるじゃん。これ。
読めたこと無いよ、マジ、イライラする!」
埋田:
「<marquee>タグだ・久しぶりに見たわ、コレ」
綿鍋:
「見る気にならいね、これ」
埋田:
「⁠⁠綿鍋さん程度に)言われてる・・」

ウェブサイトの企画制作業務がスタートしました。コーポレートサイトのリニューアルがミッションです。

このような企画をスタートさせる際、気をつけなければならない事がいくつかあります。

例えばそのひとつとして、⁠要件を正確に定義する」という事が挙げられるでしょう。

2人の目的は「サイトをキレイに見やすくリニューアル」するというたいへん意義深いものですが、一方非常にアバウトなものです。

それでは何をもって「キレイで見やすい」サイトだと定義すれば良いのでしょうか?その基準とは何でしょうか? どのようなサイトが出来上がれば完成なのでしょうか?

ここで、まず2人は、リニューアルのきっかけとなった取引先のサイトを確認しましたが、これは効果的であると言えます。いわゆるベンチマークという作業に相当します。

ベンチマークは本来、測量における用語ですが、ここでは特定のサイトにおいて相対的な評価を測定する為の作業を指します。

複数のサイトを比較しながら閲覧することで、⁠発注者」である社長が何に不満を感じ、その一方で何に魅力を感じてサイトのリニューアルに思い至ったのか知ることができます。そうすることで、リニューアルの際にもっとも大事な改修の方向性も探ることができるでしょう。

綿鍋さんと埋田くんは、直感でなんとなしに眺めているようですが、ベンチマークを行う際には、どんな点を審査するのか事前に決定し、ベンチマークの項目を設けた上で比較するとより効果的です。

2人は「読みやすい/読みづらい⁠⁠、⁠見やすい/見づらい」というサイトの違いを感覚的に探っているようですが、ウェブサイトを評価する項目としては次の様なものが一般的です。

(1)期待する効果とサイトの内容が一致している:○/×
認知向上を目的にしているのに、社名もわからない、というサイトでは読みやすい、読みづらい以前の問題になってしまいます。
(2)デザインに一貫性がある:○/×
ページごとに色やデザインが全く違う、そんなサイトの場合、はたして同じサイトを見ているのかすらも分からず疲れてしまいます。
(3)情報が組織化されている:○/×
同じような情報なのに、全く別のところに掲載されている、などは読み手を混乱させる原因になります。
(4)情報に優先順位がついている:○/×
大事な情報なのに文字が小さい、さほど重要な情報ではないのにとても目立つところに記載してある、というのも不親切ですね。
(5)効率的に目的のページを見られる:○/×
アピールしたい情報なのにやたら深い階層にある…サイトのリリース目的、意図と手段に乖離があるようです。
(6)現在位置の認識が容易である:○/×
サイトの中で迷子になり、同じページへ2度と到達できない、というサイトも困ってしまいますね。

評価機軸を設ける際には、○か×か、YESかNOか二者択一できるもの、あるいは、⁠良い/やや良い/普通/やや悪い/悪い」など、段階的に評価できるものなど、明確に差異を測ることの出来る項目を設定すると良いでしょう。

これらの点を踏まえて、サイトの現状を改めて把握しましょう。そうすることで、改善すべき点と、着地させるべき点が見えてくるはずです。

さて、彼ら2人は冷静に、自分たちの会社のサイトを把握することが出来るでしょうか・

<次回に続きます>

今回のチェックポイント

まずは現状を把握しよう!

実作業に入る前に、気になったウェブサイトを見ながら、次の点をチェックしてみましょう。

  • (1⁠⁠ 期待する効果とサイトの内容が
       一致している
    ⁠○/×)
  • (2⁠⁠ デザインに一貫性がある
    ⁠○/×)
  • (3⁠⁠ 情報が組織化されている
    ⁠○/×)
  • (4⁠⁠ 情報に優先順位がついている
    ⁠○/×)
  • (5⁠⁠ 効率的に目的のページを見られる
    ⁠○/×)
  • (6⁠⁠ 現在位置の認識が容易である
    ⁠○/×)

おすすめ記事

記事・ニュース一覧