アクセス（Access）講座一覧｜フロンティアリンク
Access/Excel/VBA/Webプログラミングの1日速習講座

色には固有のイメージがあるというお話をこれまでにしてきました。

※これまでお話ししてきました各色のイメージは、以下をご覧ください。
●白色
●黒色
●青色
●緑色
●赤色
●灰色
●紫色
●茶色

今回は、色のイメージを訪問者に覚えてもらう方法についてお話したいと思います。

最も効果的な方法は、Webサイト全体で同じ色を使用することです。
同じ色を様々な場所で使用することで、色の印象を伝えやすくなりWebサイト自体を記憶してもらうことに繋がります。

Webサイトを構成するパーツの中で、特に以下のパーツで伝えたい色を使用することが効果的です。

・グローバルナビゲーションボタン
・アイコン
・見出し
・小さなデザインパーツ
・バナー画像

実際のWebサイトをいくつか見ていきましょう。

@basic

ロゴの青色をWebサイト全体に使用して、青色以外の面積が少ない配色です。上記にてご紹介した、伝えたい色のイメージを伝えるため使用すると効果的なWebパーツが、すべて同じ青に統一されてWebサイト全体がすっきりし、コーポレートカラーの青色のイメージを強く伝える構成となっています。

三和サインワークス株式会社

コーポレートカラーの非常に鮮やかな赤色をメインのテーマカラーにしたWebサイトです。非常に鮮やかな色を伝えたい色に設定することはあまり多くありません。というのも、上記のパーツの面積を多くとりすぎてしまうとWebサイトが騒がしくなることがあるからです。従って今回は、ヘッダーのグローバルナビゲーションやサブナビゲーションなど重要な箇所のみを目立たせ、他は小さなデザインパーツのみに絞ってテーマカラーを使用することで、にぎやかになりすぎず、かつコーポレートカラーを上手く伝えている構成になっています。
また、今回のようなLEDサインの商品を扱う会社ならば、鮮やかなコーポレートカラーをWebサイトのテーマカラーに設定してもなんら違和感は感じさせず、また他の会社があまり使用していない色を伝えたい色に設定できるという強みがあるため、Webサイトの他社との差別化につながりますね。

情報量が多いWebサイトで情報を整理する方法として、サブメニューごとに色を変えることで、訪問者にわかりやすくカテゴリーを表示させる方法があります。しかし色自体のイメージを前面にアピールするためには、この方法では逆に本来伝えたい色の効果を弱めてしまいますので、Webサイトを機能的に見せたいのか、それともブランドイメージをアピールしたいのかを見極めたうえで、使用する配色を考えることが重要です。

今回は色のイメージを訪問者に伝える方法として、同じ色を繰り返して使用することの重要性についてお話しました。
ひとつのコツとしましては、伝えたい色で配色したヘッダー部分を全ページ共通にするなどして、訪問者がどのページを閲覧していても、伝えたい色やロゴなどがつねに視界の中に入っている状態をまず作るように心がけるべきです。
皆様のお役に立てば幸いです。

（担当：斉藤 万幾子）

前回のWeb系コラムでは、Webサイト制作における「現状分析」を行うための3つの方法についてご紹介しました。現状分析を適切に行うことで、解決すべき課題が明らかになり、具体的にこうしたい、ああしたいという希望が出てくると思います。
そこで、今回はそれらを踏まえて「企画」の段階で考えるべきポイントについて見ていきたいと思います。

「企画」段階の目的は、Webサイトに盛り込むコンテンツを決定することです。そのための準備として、最初に自社と来訪者のWebサイトに対する目的を列挙して、次にその両方が達成されるようなコンテンツを絞り込みながら考えていきます。

自社のWebサイトに対する目的の作成方法は、まずシンプルな目的を設定します。例えば「商品を売りたい」「店舗に来てもらいたい」などです。
次にこれを数値化します。「店舗への来訪者件数を月に100件達成したい」のように、具体的な数値を目的の中に設定することでWebサイト制作に関わる多くの人が共通の具体的な目標に向けて動きやすくなり、またWebサイトの運営段階に入った場合のフィードバックを受けやすいというメリットがあります。

来訪者によるWebサイトの目的を作成する場合、前段階で作成したターゲットとすべき来訪者の情報（詳細は前回のWeb系コラムをご参照ください）が重要になります。これらを元に来訪者が自社に何を求めているのか、という視点で考えられるものをすべて列挙していきます。

ここでWeb制作においても有用な、一般的によく使われるアイデアを出すための手法について簡単に触れておきます。
・ブレーンストーミング
　集団で制限のない自由なアイデアを発想する手法です。
・KJ法
　ブレーンストーミングなどで発想されたアイデアを整理する方法として有効な手段です。
・チェックリスト法
　既存のアイデアに対する発想の転換を狙う手法により、さらに斬新なアイデアを生み出したい場合に有効です。

自社と来訪者の目的のアイデアが揃ったら、最後にWebサイトのコンテンツとして採用するアイデアの取捨選択を行います。前段階で作成したコンセプトや予算の制約（詳細は前回のWeb系コラムをご参照ください）を考慮して、お互いの目的が達成されそうなアイデアを選択します。この作業の中で、選択されたアイデアをコンテンツとして管理し、カテゴリに分けて整理しておくと、次の作業がスムーズになります。この時、可能な限り多くのコンテンツ、カテゴリを掲載すればいいというわけではないことに注意が必要です。コンテンツやカテゴリの数が多くなるほど、情報が探しにくくなるというリスクがある点は覚えておきましょう。

そこで注目しておきたい概念がIA（インフォメーション・アーキテクチャ）です。インフォメーション・アーキテクチャとは、90年代後半に提唱された「複雑な情報をわかりやすく提示しよう」という考え方です。現在インフォメーション・アーキテクチャを考慮した「来訪者が迷わないためのWebの情報設計」をしていきましょうという流れがあり、ページ数やカテゴリ数が多いWebサイトにおいては特に重要な考え方となります。

インフォメーション・アーキテクチャのポイントは以下です。
①カテゴリの名前は誰でもわかるような名前を付ける。
②表記を統一する。（最初のページは「トップページ」や「ホーム」など複数の呼び名がある場合、1つに統一する）
③重要な情報はページ上部へ置く。逆に重要でない情報は上部から除く。
④類似の情報はグループにしてまとめる。
⑤ナビゲーションやリンクは、すぐわかるようなデザインにする。
⑥サイトマップや検索ボタンを設置して、目的の明確なユーザーやWebサイト内で迷ったユーザーにすぐ対応できるようにする。

欲しい情報を得るのに3クリックで辿り着けるのが、ストレスのないWebサイトの情報設計とされています。使いやすいカテゴリ分けを考える際には上のポイントを、ぜひ参考にしてみてください。

今回は「企画」の段階で考えるべきポイントについてご紹介しました。次回は「制作」の段階についてお話ししたいと思います。
皆様のお役に立てば幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは、Webサイト制作に関する全体のワークフローについてご紹介しました。今回は、Webサイト制作における最初の段階で実施する「現状分析」について見ていきたいと思います。

現状分析の段階では、最初に「情報収集」を実施します。そこで、今回は主に3つの方法として「1.他社と自社のWebサイト比較」、「2.アクセス解析」、「3.検索サイトからのキーワードチェック」をご紹介します。

1.他社と自社のWebサイトを比較する
同業他社のWebサイトや、異なる業界でも似たようなお客様をターゲットとするWebサイトと、自社のWebサイトを比較することで、Webサイトの構成を考える際に具体的なイメージを持ちやすくなります。

2.アクセス解析をする
アクセス解析とは、自社Webサイトにアクセスする人の動向を知ることです。有名な無料のアクセス解析ツールには、Webサイトに組み込み使用するGoogle analyticsがあります。
アクセス解析を行うことで、アクセスした人の何％が成約（商品の購入などに至ること）しているか、何時何曜日にアクセス数が上がっているかを情報として取得できます。他にも、検索サイト経由で表示されたページ以外は閲覧せずにWebサイトを去った来訪者の割合などもわかります。

また、ある来訪者が目的と思われるページにたどり着くまでに迷うことがないかをチェックすることも重要なポイントです。現状のWebサイトのレイアウトやデザインがわかりやすいかどうか、ユーザービリティに関するチェックを行い、問題点を発見したら次の「課題の設定」へ反映させます。

Webサイトの来訪者の情報は、「現状分析」の次の段階となる「企画」で効果的な戦略を考える際にも有用です。
例えばalexa.com（Webサイトがどれだけの人に見られているかが確認できるWebサイト）で調べると、Yahoo! JAPANにアクセスした人が一日当たり約15分間Webサイトに滞在し、20%弱の割合の来訪者は検索サイトからたどり着いたページ以外に進むことなく去るという情報（掲載日現在）を簡単に確認することができ便利です。

3.キーワードチェック
キーワードチェックとは、来訪者がYahoo! JAPANやGoogleなどの検索サイトで何らかのキーワードによって自社サイトを調べる場合に、きちんと表示されるようにWebサイトが設計されているかをアクセス解析ツールなどを使用して確認することです。
例えば、何のキーワードでWebサイトを検索して来訪したのか、主力となる商品を検索サイトで調べた場合、競合と自社のWebサイトの順位の差があるかどうか、などを調べます。検索結果の順位はWebサイトを閲覧してもらうために大切な指標の1つですが、最も重要なのは目的を持ってWebサイトにアクセスした人に「成約してもらう」(アクションをおこしたもらう)ことです。
必ずしも検索サイト上の順位と実際の成約率は一致しないことに注意が必要です。Webサイトの運営段階では、1000人の来訪者がくれば何%の割合で成約する、という数値が出てきますので、成約率（コンバージョン率と呼ばれます）を増やすために、Google adwordsなどを利用してWeb上に広告を掲載し、来訪者を増やす方法もあります。

上記3つの方法で情報を収集する以外にも、ユーザーに今のWebサイトの使い心地を尋ねる方法があります。「情報を探していた際、どこかでつまづいた点はないか」、「Webサイトを開いた時にどういった印象を受けるか」といった問題点の有無や検証には、実際に尋ねる方が早い場合もあります。直接アンケートなどを取る場合は、「来訪者が、どのような時に、何を求めてWebサイトに来るのか」が最も重要な情報になります。従って、この情報を適切に聞き出せるような質問を準備すると良いでしょう。

「情報収集」の次の作業となる「課題の設定」は、「情報収集」で取得した情報を分析して解決すべき課題を明確にします。「課題の設定」には通常のマーケティングの手法を存分に活かすことが可能ですので、ここでは詳細な説明は省きますが、「情報収集」から「課題の設定」へつなげて何らかの対応策を打つことで、Webサイトを改善し続けるための良いサイクルを生み出すことができるでしょう。

今回は「現状分析」を行う3つの方法をご紹介しました。次回は「企画」の段階についてお話ししたいと思います。
皆様のお役に立てば幸いです。

（担当：斉藤　万幾子）

色の持つ効果についてのシリーズ第八回目のWeb系コラムでは、好みが分かれやすい紫色を使用する際のポイントについて見てきました。今回は複数の色を使用する際のポイントと具体例について説明したいと思います。

複数の色を使用することで、Webサイトの印象が活発で華やかになります。
本コラムにおける複数の色を使用するとは、複数の色相を使用することです。言い換えますと、赤色と薄い赤色とピンク色という似たような色の組み合わせではなく、赤色と緑色と青色という異なる色の組み合わせのことを言います。

ただし漠然と複数の色を取り入れるだけでは、かえって雑多な印象になりかねない点に注意が必要です。色にはそれぞれ異なるイメージがあることを、これまでの色に関するシリーズでお話してきました。扱う色が増えれば増えるほど、配色としてまとめることが難しくなります。
扱う色を増やすポイントは、まずロゴの色などからテーマカラーを決めます。そしてそのテーマカラーを邪魔しない程度に複数の色の面積を選択し、調整は明るさや鮮やかさを揃えることで行います。複数の色が占める面積が多すぎると、配色が雑多なイメージになる一因となりますので、テーマカラーの面積と同じかそれ以下に複数の色の面積を控えることが、うまくまとめる1つのコツになります。Webページ全体を見た時、複数の色を扱う領域と扱わない領域をそれぞれ作ることで配色のメリハリが生まれますので、より整ったイメージを出すために効果的です。

複数の色の使用例を以下から見ていきましょう。

SOUWAI

ロゴの二色を中心に、野菜の鮮やかな複数の色が映える配色です。ロゴの色にやや彩度を落とした純日本的なイメージを与える色が使われているため、メイン画像の野菜それぞれの色が強いインパクトとなり、楽しいにぎやかな印象が生まれています。

大森家政専門学校

上部のグローバルナビゲーションや中央下のコース案内部分にあるような高彩度の明るい色を使うことによって、活発で楽しい印象が生まれています。中央下のコース案内部分では複数の色が使用されていますが、同一の場所に配置されているため全体としても配色がすっきりとしている点がポイントです。また、余白を広く取ることで高彩度の色のイメージを各色同士が妨げないような工夫がされています。

MJS

Webページを開いた瞬間に目に飛び込んでくる5つの配色は、それぞれが高彩度高明度という非常にインパクトの強い色が使用されています。目立たせたい5つの配色以外は白と灰色の無彩色が基本となっているため、複数の色を扱っている場所と扱っていない場所の区切りが明確です。どこを見るべきかという視線誘導が上手くなされている配色となっています。

（担当：斉藤　万幾子）

色の持つ効果についてのシリーズ第七回目のWeb系コラムでは、マイナスのイメージを持つ黒を使用する際のポイントについて見てきました。今回は紫色を使用する際のポイントと具体例について説明したいと思います。

紫色は多くのブラウザで訪問済みリンクの規定色となっており、意外によく使用されている色ですが、実際は好みがかなり分かれる色です。聖徳太子の冠位十二階の最高位の色にあるように、紫色は古くから高貴な人を象徴する色として使用されてきました。赤と青の両方を合わせ持つ紫は、神秘的でミステリアスなイメージを彷彿とさせます。女性が使用する化粧品や香水などに紫色が使われていることが多いですが、これは紫色の持つミステリアスなイメージを意図したものです。一方、誠実さや信頼をイメージとして出したいコーポレートサイトなどでは紫色が使用されることは多くありません。
法事等で住職の座る座布団の色にかなり濃い青寄りの紫色が使用されていることから、青寄りの濃い紫色を多く使いすぎますとマイナスのイメージが出る場合もありますので、使用する量には少し注意をしておきましょう。反対に、薄い紫色はラベンダー色として女性に好まれやすく、特に安らぎを印象づけたい場合に使用すると効果的です。

紫色の使用例を以下から見ていきましょう。

ANNASUI

紫色によるミステリアスなイメージが、アナスイの特徴であるオリエンタルで神秘的なイメージと合致しています。ロゴに使用されている紫色はやや青寄りですが、彩度や明度をやや落とす事でマイナスのイメージに成らないようにしています。背景を無彩色である黒で覆う事によって、紫色のイメージがさらに強調されています。画像中央に使用されているバナーも紫色がテーマカラーとなっているため、Webサイト全体の統一感やまとまりが強く感じられます。

MENARD

ヘッダーの一番上や、クリックを促すバナーの一部など要所要所に配置した紫色が、他はほとんどが薄い色のバナーであることによって、しっかりと色のイメージを伝えています。彩度が高い色を多く使用しますと、マイナスのイメージを与えてしまう事がありますので、好みが分かれる色をあえて少量に押さえるという使い方がされています。白の余白を多めに取っていることは、それぞれの色のイメージを混ぜないために効果的な工夫の一つです。

いろみごこち

安らぎを印象づける薄い紫色が特徴的なWebサイトです。心理的な印象をすばやく伝えるには、色による訴求が最も適しています。背景の薄い紫色と、メニューなどに使用される濃い紫色のコントラストによって重要な箇所を目立たせつつも、Webサイト全体はやさしい印象に仕上げています。青寄りの紫色を全体に使用しているため、黄色に近い色のバナーがアクセントになっています。

（担当：斉藤　万幾子）