実際にホームページ制作に入ります

情報を整理してサイトマップを作成しよう

サイトマップとは

サイトマップという言葉は、2つの意味で使われます。1つは、WEBサイトの中で、各ページへのリンクを一覧にした目次のような役割を果たすページのことです。もう1つは、ホームページ構築を進めていくためにサイト構造を一覧にした設計図であり、構造設計書ともいいます。ここで説明するのは後者のサイトマップです。

ホームページの構築は、家などを建築するのと似ています。よい家を建てるには、線密に練られた設計図が欠かせません。どこに玄関を作るのか、リビングや寝室の位置をどうするのかなど、設計しておく必要があります。これはホームページにおいても同様です。

また、ホームページには更新やページ追加がつきものです。完成後、どのような更新運営を行っていくのかまでを考えたサイトマップを作っておくことが大切です。

情報の分類と整理

ホームページの構築を制作会社に委託する場合は、サイトマップの作成も制作会社側で行うことが多いですが、サイトマップの構成や作り方については学んでおいたほうがよいでしょう。ここでは、もっとも基本的な形である階層構造のサイトマップの作り方を紹介します。

まずは、階層のいちばん上にトップページを置きます。そして、WEBサイトに掲載するすべての情報を、1ページに掲載できるボリュームに分けます。次に、それらのページを種類や性格ごとに分類して、グループにまとめます。さらに、類似したグループどうしをまとめていきます。

この作業を繰り返して、もっとも大きなグループになったものをトップページ直下の第1階層に配置します。以下、第2階層、第3階層…と配置します。

ユーザーがホームページの構造を理解しやすい設計にするために、あまり奥深い階層構造にならないように注意しましょう。

掲載しなければならない情報

サイトマップの作成は、ホームページに掲載する情報を考え、見直す機会でもあります。ユーザーはどんな情報を必要としているのかを基本として、ホームページの目的を果たすため、そして健全な運営をしていくために、それぞれ何が必要不可欠で、何があれば望ましいのかを考えましょう。

多くのホームページに共通する目的達成に必要な情報としては、商品やサービスの紹介があります。実際に販売もしているホームページなら、購入方法や購入条件などの情報も必要です。加えて、ホームページの運営者情報も欠かせません。ユーザーにとっては、運営者がどんな会社や人なのかという情報は、そこでのサービスを受けるかどうかの大きな判断材料になります。何かを購入する場合はもちろん、情報入手のためだけに訪問した場合であっても、その情報をどんな会社や人が発信しているのかによって、信ぴょう性が大きく変わってくるものです。

シンプルにいえば、ユーザーの立場で考えたときに「その情報がなければ、自分がそのホームページに期待したことができない」と感じたものは、必ず掲載しなければならない情報ということになります。

導線を考える

導線とは、文字どおり導く線のことです。ユーザーが訪れる最初のページからホームページの目的を果たすためのページまで、どう遷移してもらうかを考えて道筋を設計します。

たとえば、通販サイトであれば、最初に訪問したページ（ランディングページ）から、商品を選んで購入する申し込みページや、申し込み完了を示す購入感謝画面のページまでの誘導を考えます。

下手な導線ではユーザーの混乱や不信を招き、購入前に出ていかれてしまう（離脱）恐れがあります。ホームページの目的を達成するまでの間に、ユーザーが必要とする情報と見たいと思うタイミングを想定し、必要なときにすぐに見られるように用意しておくことが大切です。

画面設計書を作成しよう

画面設計とは

ホームページ全体の構造を設計するサイトマップを構造設計書とも呼ぶのに対して、各ページのどの位置にどんな情報を表示させるかを設計したものを画面設計書といいます。情報を置く場所を線で囲んで指定することからワイヤーフレームと呼ぶこともあります。

ワイヤーフレームは手書きでもよいのですが、確定まで何度も修正を加えていくことが多いので、デジタルデータで作るのがおすすめです。

画面設計に織り込む要素は、コンテンツそのものと、ナビゲーションと呼ばれるリンク要素です。ページ内で伝えたいことをしっかりと伝えられるコンテンツ配置をすると同時に、その次のページへとわかりやすく自然に誘導できるリンクの配置が重要になります。

どのように見られるのかを考える

画面設計を行ううえで意識しておきたいのが、ユーザーがページをどのように見るかということです。ユーザーの視線の動きは、基本的に「左から右へ」そして「上から下へ」と流れます。

「左から右」というのは、ホームページに書かれている文字が横書きで、左から右へと書かれているからです。ホームページに限らず、本や雑誌でも横書きであれば、右のページをめくって読み進んでいくことになります。また、ホームページを閲覧するためのブラウザは「戻る」ボタンが左向きの矢印、「進む」ボタンが右向きの矢印です。「進んでいく方向は右」というのが、ユーザーの自然な感覚なのです。

「上から下」というのも、人間の自然な感覚です。ブラウザにもページの上部から表示されます。ただし、長いページの場合、最初に画面に表示されるのはページ上部の一部だけで、その下はスクロールしないと見られないということに注意しなければなりません。

スクロールなしで最初に見える範囲を、ファーストビューといいます。ユーザーによっては、その下にページが続いていることに気付かず、スクロールせずにリンクをたどって別のページへと移動してしまうことがあります。見てもらいたい要素は、ファーストビューで表示される上部に配置するようにしましょう。

人間の心理や認知方法

画面設計をするうえでは、人間の心理や認知特性についても知っておきたいところです。人間の認知のしかたには、次のような特性があります。

● 大きな文字で書かれていることは気に留めて認識するが、小さな文字で書かれていることは読まないことが多い
● 赤文字で書かれていることは重要だと認識する
● ページの下部よりも、上部に書かれていることのほうが認識しやすい
● 文章よりも写真に目を引かれる。風景の写真よりも人間の（とくに顔がしっかりわかる）写真のほうが目を引き、印象に残りやすい
● 静止画像よりも動画のほうが強い印象を受ける
● 文章よりも箇条書きのほうが理解しやすい

ユーザーの印象に残り、ホームページの目的を達成できるようにユーザーを導いていくためには、人間の心理や認知方法を知り、それをうまく利用した画面設計にすることが大切です。

スマートフォンやタブレットの画面設計

現在では、パソコンだけではなく、スマートフォンやタブレット向けの画面設計もしなければなりません。

作成方法は2通りあります。1つは、パソコンサイトとスマートフォンサイトをそれぞれ別に構築する方法です。もう1つは、レスポンシブデザインと呼ばれる方法です。同じコンテンツデータをパソコン、スマートフォン、タブレットそれぞれに適したサイズやレイアウトで表示させます。元データ1つを変更すれば端末に合わせて反映されるので、の方法で制作されるケースが増えています。

文書の校正と動作確認をしよう

校正と動作確認をする意味

校正作業は、誤字脱字がないか、意味が通じにくいところはないか、読みやすい文章になっているかなど、文章の品質を担保するために行います。伝えたいことをしっかり伝えるには適切な文章が必要ですし、文章の品質の高さはユーザーからの信頼を得るための重要な要素です。

一方、動作確認はホームページがしっかりと機能するか、とくにリンクやフォームなどのシステム部分についてテストを行います。これらに問題がある場合の影響は、文章の誤りよりも切実です。最悪の場合、ホームページが使えないという状況にもなりかねません。

校正も動作確認も、地味で根気のいる作業ですが、大事な作業であることを理解しましょう。

文章作成の注意点とガイドライン

ホームページの品質を左右する要素として、デザインや写真、文章が挙げられます。とくに文章については、ぱっと見ではわからないものの、読み進めていくうちに品質の低いページが散見されると、ホームページそのものの品質が疑われてしまいます。さらには、ホームページの運営者に対する信頼も失われてしまうことになりかねません。

誤字脱字は論外として、文章に拙いために読みづらく、意味がよくわからなかったりするホームページも少なくないようです。主語が抜けているようなケースもあります。これらについての対策は、文章力を上達させるしかありません。いわゆる5W1Hといった文章作成の基本を学んでおきましょう。

また、文章作成のガイドラインも必要です。とくに、文章作成を複数人で行っている場合には、同じものを表す用語でも「WEBサイト」「ウェブサイト」「ホームページ」のように表記のゆれが発生してしまいます。そこで、「ホームページ」に表記を統一するといった共通ルールを定めておくのです。ほかにも、「1つのセンテンスは150文字以内に収める」などの決まりをガイドラインとしてまとめます。

ガイドラインにのっとった文章作成と厳格な校正作業によって、WEBサイトの品質を保ちましょう。

校正の方法と注意点

校正の作業は、できるだけ印刷して行うほうが望ましいです。理由として、紙に印刷されたものはパソコンの画面より見やすく、目に優しいことが挙げられます。また、紙であれば修正指示などを直接書き込めるというメリットもあります。修正指示を赤入れした紙は、制作会社に宅配便で送ったり、スキャンしてPDFデータで送信したりします。PDFの場合も制作会社側では印刷して紙の状態に戻したほうが修正しやすく、修正が完了した箇所を書き込んでチェックしていけますので、再確認の際に便利です。

校正の精度を上げるには、目で追うだけではなく音読することも大切です。また、校正作業は一度だけではなく、二度三度と繰り返しましょう。それぞれ別の人が行うようにすれば、格段に精度が向上します。

校正をするときの心構えも大切です。「しっかりとした文章のようだし、そんなに間違いはないはず」などと決めつけるのではなく、「1ページにつき3つくらいは、必ず間違いがあるものだ」という心構えで行うことで、集中力にも差が出てきます。

「文章に問題がないことを確認するため」ではなく、「誤りを見つけ、よりよい文章にするため」の校正にしましょう。

動作確認の方法

リンクが正しく張られていることを確認するテストでは、回数は膨大になりますが、リンクをクリックまたはタップして確認します。

一方、問い合わせフォームや買い物カゴなどシステム的に作られた箇所については、入力項目がたくさんあったり、ユーザーによって使い方が違うケースがあります。そこで、テストケースと呼ばれるユーザーのさまざまな使い方をあらかじめ想定し、それらすべてのパターンについてテストを実施します。つまり、事前にどのようなテストケースを用意しておくかによって、確認できる範囲と精度が変わります。なお、問い合わせフォームのようにメールが送信されるものについては、制作会社側だけでなくクライアント側での動作確認も必須です。

また、ブラウザチェックと呼ばれる、種類とバージョンが異なるブラウザでのチェックも行います。パソコンで使う場合、スマートフォンやタブレットで使う場合の、それぞれについて確認が必要です。

https://www.tochigi-realize.com/web-staff/homepage-kousin/
>> ホームページ運営の基本はこまめな更新ですに続きます。