ウェブサイトを作るにあたって、まず最初に決定しなければならないのは、「ゴールを決める」という作業です。ゴールというのは、そのウェブサイにアクセスしたユーザーにどのような行動を取ってもらいたいですか？ゴールは、いわゆるウェブサイトの目的ということです。

ゴールがないウェブサイトは「何を伝えたいのかわからない」ということに繋がります。制作前に決めておかなければならない項目は、以下のシートに記載していますので参考にしてください。

︎ コンセプトシート(2枚綴り)

期待するユーザーの一般的な行動

期待する行動の中には、「ブランディングを高める」いわゆる「認知してもらう」というものもありますが、これは、行動ではないので、若干意味合いが異なります。また、ショッピングサイトは購入してもらうことが最大の目標ですから、商品がカートに入った後、決済まで確実に誘導し、売上に完結させることが最も重要です。一度ショッピングカートに入れたにも関わらず、最終決済が行われず、サイト離脱することを「カゴ落ち」と言います。優秀なアクセス解析では、細かい離脱率も計測できますので、いかにサイトの誘導が重要かを知ることが出来ます。

コンバージョンとは

ウェブサイトのゴール(目標)を決めた後は、ウェブサイトをどのように誘導すれば、その目標を達成することができるかを考えて設計します。ユーザーがその期待通りに行動を起こすことをコンバージョンといいます。また、その達成率を「コンバージョン率」といいます。

コンバージョンとは、「転換」などを意味する英単語「Conversion」のことで、Webのマーケティングでは「成果」を意味する言葉です。よく「CV」と略されます。「潜在顧客から見込み顧客への転換点」ということで、Webサイトの訪問者がサイト運営者の望む行動を取ってくれることを意味します。例えば製品・サービスのカタログを閲覧した訪問者がその製品・サービスの資料請求をするという行動を取った時、「コンバージョンに至った」「CVが達成された」と表現します。

出典/ミツエーリンクス

コンバージョンを達成させるために、デザインや設計を考えましょう。

目的・欲求を果たすために

ユーザーは、「知りたい・買いたい」など、何らかの目的や欲求があって、ウェブサイトに来訪しています。そして、以下の行動を介しながら、目的や欲求を果たそうとします。

1. 見る(視覚・イメージ)
2. 読む(視覚・購読・理解)
3. 理解・感情・納得
   (見ると読むの結果)
4. 行動を起こす
   (アクション・問い合わせる・カートに入れる)

ユーザーは、①②③の認識が前提となった上で、④行動に移します。行動に移す前に、まずは見やすく分かりやすく、そして理解しやすいデザインを心がけることが、ユーザーの行動に繋がるのです。

① 「見る」
見やすいウェブサイトとは

ユーザーが、サイトに到着した瞬間、視界に入る「パッと見」の印象は、非常に大事です。「読もう・見よう」とする意思決定は、もはやその瞬間に決まっています。見やすいウェブサイトは、「魅力あるウェブサイト」と直結しますから、魅力あるウェブサイトを作る第3原則は、主に次の通りです。

NGの例

×画像の荒れ

写真が暗すぎる・小さすぎる・よく見えない・解像度が荒れている写真は、使えません。

×ごちゃごちゃ

マロンケーキは、一体いくらでしょう？配色を間違えると、商品がまずく見えたりします。

② 「読む」
読みやすいウェブサイトとは

見る＝は、主に写真や画像であり、読む＝テキスト(文章)は、画像と合わせて理解、納得させる役割があります。読みやすいウェブサイトは、内容を理解しやすく、興味や共感に繋がり、お問い合わせや資料請求への行動に結びつきやすくなるのです。

NGの例

×余白・行間

テキストを読んでもらうには、余白・行間を正しく設定しましょう。近隣のボックスやテキストに接触しないように余白を設けるのが基本です。

「吾輩は猫である」の一節です。左右の文章は、どちらが読みやすいですか？左右のボックスの違いは、どこでしょうか。テキストの大きさ、行間、余白の配慮を心がけましょう。

③ 理解・感情・納得
伝わるウェブサイトとは

見やすさ・読みやすさが前提となり、　的確にユーザーに「伝わっているかどうか」これがウェブサイトの最大最終の役割となります。しっかり伝えることで、ユーザーは情報を知り、感じ取り、行動を起こすというアクションに繋がっていきます。

NGの例

ユーザーを迷子にさせない

ウェブサイトで、非常によくあるのが「ウェブを閲覧中に迷子になってしまう」という点です。

アイコン名を入力

あれれ？今、どこ見てるんだっけ？トップページに戻れない！

ページ数や情報がたくさんあればあるほど、ユーザーはサイト内で迷子になってしまいます。的確な誘導、リンクを掲示することも、優良なウェブサイトの原則です。

現在のページの把握

ユーザーは、情報を知ろうとするがあまり、サイトの中をうろうろと回遊していきます。サイト内を横断していくにつれ、自分自身が今、どのページを見ているのかわからなくなってしまうのです。迷子になると、本当に知りたかった情報、見つけたかった商品にたどり着けないまま、離脱(サイトを離れてしまう)ことがよくあります。

ウェブサイトの最大の基本は、「どのページにいても、すべてのページに辿ることができる」・「トップページに戻れる」設計をします。サイトマップ・ページ内見出し・パンくずリストなどを設け、迷子にさせない工夫を凝らしましょう。

ロゴマーク・ナビゲーション

通常、サイトの左上、もしくは上部センターにロゴマークを配置します。これは、サイトのタイトルとなります。(いわゆる企業名であったり、ショップ名を掲載してあります)。実際知らない人も、多いのですが、ロゴマークはクリックできる仕様になっています。すべてのページから「ロゴマーク」がクリックできるようになっており、ロゴマークを押すことで、トップページに戻れる仕様になっています。

万が一、迷子になったもロゴマークを押すことでトップページに戻れるという仕組みです。フッターにもロゴマークやパンくずリストを配置することで、迷子にさせない工夫を施します。

サイトマップ

すべてのページの階層を一覧にすることで、目的のページへ着地できるように案内を託します。
ソフトバンクサイトマップページ

パンくずリスト

パンくずリストとは、現在見ているページがどの階層ページに着地しているかを目次のように表した追記リンクです。ページ数が多いサイト、階層が深い構成のサイトなどにはパンくずリストが有効です。

例えば、下記の例は、ヤフオクのパンくずリストですが、パソコン階層下のマックの階層下のノート型の階層に着地していることが分かります。パンくずリストを追うこどで、いつでも、上の階層に戻ることができます。

スキルアップを目指して

ホームページが作れるようになったあなたは、綺麗な写真を配置したり、アニメーションを使って動かしたり、ホームページ作りが楽しくなっているのではないでしょうか。今は調べれば調べるほど、いろんな知識を収集することが可能ですし、最近では、様々なツールを使って、実に簡単にウェブサイトを作ることができるようになりました。

幼い頃、図工の時間に粘土で形がない物体や絵の具で絵を描いたりした記憶があるでしょう。

「これはなあに？」「上手に描けたね！」と親や先生が褒めてくれました。趣味の範囲でのものづくりは、あのレベルと同等だということです。料理でいうと、単純にカレーが作れるようになった！ということです。

出来なかったことが出来るようになることはとても嬉しいですし、褒めてもらえるとモチベーションも上がります。難しいHTML言語を覚えるには、まずはモチベーションを保ちつつ「作れる技術」をクリアする。作れる技術を先に習得し、楽しさを実感してから、仕事にしたいと思い始める手順がもっとも理想的です。

プロのデザイナーになるためには「作れる技術」に加え、「考えて作るスキル」が必要です。料理を例に、分かりやすく解説すると、以下のようになります。

「カレーが作れるようになった」→「もっと美味しいカレーが作りたい」というプロセスと同じです。プロの料理人とは、「どのようにカレーを作れば、お金を支払って食べに来てくれるだろうか」ということです。

プロと素人の違い

プロと言われる人は、「その技術で生活を営んでいる人」のことを指します。ですから、知人から頼まれて、ちょっとしたホームページのお手伝いをしてお小遣いを貰ったりしたことがあるレベルの人は、プロではありません。ホームページを作って継続的に報酬や給料を貰うとうことは、依頼や評価をするクライアント(依頼者)や会社が必ず存在するのです。

自己満足感を捨てること。

ホームページを作り始めた人は、たいがい完成の暁に「自己満足感」に陥ります。「どや見てみ。すごいやろ」という感じですね。初めての作品ですから、喜びもひとしおです。それは、誰にでもある心理状態ですし、当たり前のことです。

ここからプロを目指すのであれば、まずその「自己満足感を捨てること」から始まります。いつまでも自己満足感が捨てれない人は、こどもの粘土遊びと変わらないレベルだということです。実際、ある程度作れるようになった頃に、この自己満足感をなかなか脱ぎ捨てられない人が非常に多いのです。自己満レベルから抜けれない人が、軽々しく請け負い制作をすると、趣旨が伝わらないウェブサイトが出来上がってしまいます。「依頼者(クライアント)」と画面の向こうに「顧客(ユーザー)」がいる」ということを認識することが、プロへの第一歩なのです。

マーケティングを学ぶ

実践的なスキルを習得するには、マーケティングの知識は欠かせません。WEB制作会社は、概ねウェブマーケティングやコンサルティング業務も兼ねています。ここでは、クリエイターとして最低限知っていただきたい知識を公開していますので、就職活動、フリーランスへの参考にしていただけたらと思います。

ウェブサイトの価値とは

ウェブサイトは、いくら素晴らしいデザインであっても、できるだけ多くの人に見てもらわないと価値がありません。さらに「売り上げ」に直結するように制作しなければ、依頼者の期待に応えることができません。依頼する人から、その対価として、給料や報酬をもらうことができて初めて仕事となるのです。

依頼者(クライアント)

100万円で、ホームページを作ってください。

クリエイター(制作者)

すごくかっこいいいのが出来ました！公開しました！

依頼者(クライアント)

全然アクセスもないし、問い合わせも来ない。モノが全く売れないよ！

上記のようなケースになるとどうでしょうか？依頼者は明らかに、ホームページの制作費100万円が、無駄になってしまうことになります。かっこいいホームページ＝価値があるという自己満足的な考え方は、素人の思考です。

依頼者の立場になって、どのように作れば、ホームページを通して、売り上げに貢献できるかを考えて設計します。これが、プロの考え方です。ホームページを開設することで、「問い合わせが増えた！商品が売れた！」という結果が出せることを目指しましょう。

見た目がかっこいいホームページが売れる、反響があるとは限りません。結果がすべてです。「頼んでよかった！」「作ってもらって本当によかった！」と、依頼者(クライアント)から愛顧を得ることにより、双方で信頼関係が生まれます。これが、ビジネスとしての真の在り方なのです。

アートとデザインの違い

ここで、最も知っておかなければならないのは、アートとデザインの違いです。この違いをしっかり把握しておかないといけません。特に、ちょっと作れるようになったレベルの人が、ウェブデザインを、「アート」と勘違いして制作してしまう傾向があるので、両者の違いを把握しておきましょう。

アートとは

アートの代表作品

こちらのアートパネルは、かの有名なピカソの作品「ゲルニカ」です。
画像拝借先:Amazon
ピカソゲルニカ有名なアート油絵プリント※ パブロ・ピカソとは

アートは、芸術であり「鑑賞すること」に意味があります。また、その価値を決めるのは人ぞれぞれであり、価値がないと思う人もいれば、すごく価値がある！と思う人もいます。また、アートには「目的意識」がありません。鑑賞することに、意味がありますから「見て知って」そこからの目的は、特に意味がありません。ですから、実にシュールなものが多いですね。それがアートなのです。

アーチスト(芸術家・美術家・演奏家)は、観せたり聴いてもらうことに意味があります。多くは、「わかる人にだけ分かればいい」「分かってもらえなくていい」という概念でもの作りをされていますから、好きな時に描いたり、展示会を開いたりします。その良さがわかる人は、アーチストや芸術品のファンになりますし、それぞれに、コレクター(個人収集家)も存在したりします。逆に「なんでそんなものを集めてるんだろう」「どこがいいんだろう？」と理解に苦しむ人もいます。アートの世界は、深く美しくその価値は勿論、誰にも否定できません。

デザインとは

UIデザイン(ユーザインターフェース)

デザインは、その媒体を「使う人・見る人」がいることを前提に作られます。使う人のことを「ユーザー」と呼ばれることがあります。例えば、水道の蛇口を例に挙げてみましょう。年々、デザインが変化していますが、どんなにデザインが変わっても、「水が出る」この目的を果たさなければ、意味がありません。

どんなにかっこいいデザインであっても、水が出ない水道の蛇口だったら、意味がないですよね。

デザインには、目的がある

デザインには、必ず「目的」があります。水道の蛇口でいうと、「水が出る」ことが蛇口の役割であり、蛇口の最終最大の目標です。ユーザーの目的を果たすために、デザインが設計されます。より使いやすく、シンプルにわかりやすく配慮された形状、使う人の導線が組み込まれてあります。どこをどうすれば、水が出るかが直感で分かるように設計されています。これが、デザインです。

ウェブデザインにも、必ず「最終目的」を定義する必要があります。最終目的を果たしてこそ、デザインとしての価値が生まれ、初めて報酬と直結するのです。

アート的なウェブデザイン

海外には、実にアート寄りのウェブデザインが多く配信されています。見る人の気持ちが癒されたり、特に目的もなく動いたり、カラフルな配色、鑑賞的な写真を多く見せているウェブもたくさんあります。それらは、決して、否定されるものではありません。アート寄りなウェブデザインに価値がないわけではありませんが、仕事として、対価として報酬を受け取ることが前提である以上、常にユーザーがいることを意識し「目標達成」を目指して制作していかなければなりません。

価値を生み出す

特に近年は、無料でウェブサイトを作れるツールやアプリが非常に充実してきました。

• Wix（ウィックス)
• 「ジンドゥ」
• ペライチ
• STUDIO（スタジオ）

シンプルで使いやすく、HTMLの知識がない人でも、直感で操作でき、簡単にウェブサイトが作れます。わざわざ高い制作費用を支払って、人や企業に制作依頼するその意味をクリエイターは常に意識し、価値を生み出さなくてはなりません。対価をいただき、人の手でウェブ制作をする以上、これらのサービスには到底手が届かないデザイン、マーケティング、テクニックを駆使しなければ生き残れない時代なのです。

ウェブサイトを制作するために、必要不可欠なコンセプトシートを無料配布しています。個人・法人問わずどなたでも自由にお使いください。 コンセプトシート(2枚綴り)

コンセプトとは

1. 概念。
2. 企画・広告などで、全体を貫く基本的な観点・考え方。

コンセプトを明確にした上で、戦略やデザインをコンセプトシートに記録していきましょう。

誰に・何を・「どのように」

「誰に」「何を」「伝えるのか」／伝えることの重要性
主軸となる部分が「コンセプト」です。

会社やショップ、オーナーの想いを言葉やビジュアル化し、誰に向けてどのように伝えていくのかを考えていきます。告知するサービスや商品の大まかな内容を記録し、参画メンバーと共有することで、目指す事柄が明確になっていきます。

サイト名・ページタイトル

企画によっては、会社名・サイト名・サイトのタイトル(titleタグ内に記述する内容)は、異なることが多くあります。検索キーワードなどを考慮し、決定していきます。

提供するサービスや商材

ウェブサイトを通じて、顧客に提供するものは何かを明確にします。

提供物は、有形財のものと無形財のものがあります。有形財とは、衣類や雑貨、食品など実際に手にとってみたり食べたりできるものを指します。無形財のものとは、実際に形がないサービスのものを指します。例えば、旅行、美容、スポーツ、などです。

有形財は、ある程度一定した価格(定価)が定められていることが多く、価格競争にある傾向にあります。それに対し、無形財によるサービスは、価格がまちまちであり、価値観が非常に重要になってきます。「なぜ安いのか」「なぜ高いのか」などの理由付けや値段だけでは表せない個人の満足度や人の想いなどをウェブで訴求する必要があります。

ターゲット・ペルソナ

「誰に」対してそのサービスや商品をアピールしていくのかを明確にします。

ターゲットの性別・年齢によって、PRする内容やウェブデザインも大きく異なってきます。ですから、ターゲット設定は、できるだけ詳しく設定しましょう。住居、年収、価値観、暮らしなどできるだけ具体的に架空の人物を想定することを「ペルソナ」といいます。

そのサービスを受けることで、ターゲットが得られる満足感、利益を追求することをベネフィットといいます。その辺りをしっかり考えることで「なぜ、その人にそのサービスが必要なのか」奥底が見えてきます。

ターゲットの真の欲求・悩みと向き合い、ほんとうに提供しなければならない根本的な部分や表現するべきデザインやコンテンツと向き合えることができます。

価値創造

提供するサービスや商品の価値は、どこにあるのか・何なのかを、認識します。ウェブサイトを作成するにあたり、ここが、非常に重要となります。独自資産を、最低でも3つから5つは、書き出しましょう。

その価値・良さを「もっと知りたい」「もっと詳しく聞いてみたい」「サービスを受けてみたい」と感じてもらうよう訴求することがウェブサイトの役割です。