エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

登録企業の制作実績から作りたいサイトイメージを探せる!
TOP > コラム > 新米WEB担「イマドキのナウいデザインで作りたい!信頼性があってカッコイイサイトを!」【第5話】

新米WEB担「イマドキのナウいデザインで作りたい!信頼性があってカッコイイサイトを!」【第5話】

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/07/06
新米WEB担「イマドキのナウいデザインで作りたい!信頼性があってカッコイイサイトを!」【第5話】

突如、勤め先である「ひまわりシステム」のWEBサイトリニューアル担当になってしまった青木。
最初は業者の選び方もわからず右往左往していたが、上司や同僚に助けられながら無事にWEB制作会社と契約書を交わし、営業部にヒアリングをしてコンテンツ制作に必要な「会社のつよみ」の原稿素材を集めるところまでこぎつけた。

次回は、いよいよデザインに着手するということで期待に胸をふくらませる青木だったが…?

【前回までの話はこちら】
■新米WEB担「よっしゃ!この古臭いホームページとも、やっとおさらばできる!」【第0話】
■新米WEB担「やっぱ今はデザインっしょ!かっこいいサイトにすればPV増えそう!」【第1話】
■新米WEB担「WEB制作会社に違いとかなくね?一番安い会社にしよっと」【第2話】
■新米WEB担「社内根回しが重要!契約までのステップを確認しなきゃ!」【第3話】
■新米WEB担「新規獲得のために必要なページって?サイトマップってどうやって考えるの?!」【第4話】

1.良い感じのデザインのサイトを作りたい

今日は二回目の打ち合わせ。いよいよデザインを決めるということで、ワクワクする気持ちを抑えられない青木だった。

青木

(素材も集まってきたし、幸先良いな!あたしだって、やればできるじゃん!今日はデザインの打ち合わせだっていうし、私のセンスの良さがバレちゃうな~。)

元気一杯、やたらと得意気な青木に対峙するのは、こちらもやる気に満ちあふれて若干鼻息荒めなディレクター梅岡。

梅岡

今日は、デザインの打ち合わせで…

梅岡がまだ言い終わらぬうちに、青木が食い気味に口を開く。

青木

デザインなら!私、いろんなサイトを見て、良い感じのデザインを探してきました!見てくださいっ。

ートパソコン

そう言って見せられたノートパソコンの画面には、TOPページに全画面表示で動画が埋め込まれたサイトやインフォグラフィックを多用した縦長のランディングページ、スクロールするごとに背景が自動で切り替わる動きのあるサイトなどが次つぎと映し出された。

青木

こんな感じで、イマドキのナウいデザインが良いんです!

ところが、それを見ていた梅岡は、さっきまでの鼻息はどこへやら、ぽかーんと画面を見つめたまま動きが止まっている。

青木

(あれ?どうしちゃったの、この人?あ、もしかして、私がハイレベルすぎて、ついてこれなかった系?)

梅岡は、青木の考え方のレベルの低さに呆気に取られていただけだったのだが…。

梅岡

(…これは、俺が基礎からしっかり教えてやらないとダメだな。よしっ、この子羊のようなWEB素人を正しく導いて、良いサイトを作ってやるぜ!)

青木さん!!ありがとうございます!いろんなサイトが出てきたのでびっくりしちゃいました。私の方から、御社に合うデザインをご提案させてもらいますね。

2.デザインを考えるときに重要なのは「ユーザビリティ」

梅岡

デザインって、WEBサイトにおいて非常に重要な要素なんです。なんで重要かというと、お客様がサイトを見てくれるかどうかと直結するからなんです!

青木

(それって、あたりまえじゃん?そんなにアツく言われなくてもわかってるし!)

青木は、自分のレベルについてこれなかった梅岡を(勘違いなのだが)若干見下していた。

青木

あ、はい。当社みたいにデザインが古いと、誰も見てくれないですもんね。

クールなキャリアウーマンを気取って言い放つ青木。

梅岡

…うーん、デザインの古い新しいもそうなんですが、大事なのは、ユーザビリティなんです。

青木

ユーザー…アビリティ…?ファ〇ナルファンタジーの?スキル装着みたいな??

梅岡

…えっと。(これは、かなり重症だな…。)

梅岡は、一つひとつ丁寧に説明を始める。

梅岡

ユーザビリティというのは、そのサイトを利用した結果、ユーザーが有益な情報を得られる満足度を指します。良く耳にする「UIデザイン」と似ていますね。

たとえば、サイトを訪れたユーザーにとって欲しい情報が探しにくければ、検索エンジンに戻って再検索しに行ってしまいますよね。これは、ユーザビリティが低いということです。

逆に、ユーザビリティが高ければ、ユーザーはTOPページから欲しい情報へたどり着くことができます。さらに、そこにある内容に満足すれば、その企業を信頼してくれるようになりますよね。

青木

なるほど!確かに、ネットで調べものをしていてもそんな経験があります。
(カッコイイデザインなら見てもらえると思ってたけど、ユーザビリティってすごく大事じゃん!このディレクター、ちょっと暑苦しいけど、なかなか信頼できそうだな。)

天の声

【解説】(天の声)

今回は、UIデザインについて解説したいと思います。
まず、UIというのはUser Interfaceの略で、機器とそれを使うユーザーとの接点のこと。
製品やシステム、サービスなどさまざまなものを対象に使われる言葉ですが、ここではWEBサイトにおけるUIに限定した話をしていきます。

「デザイン」と聞くと、ついつい、青木さんのように、画像や動画、カラー、フォント、余白など、見た目ばかりに意識が向きがちですが、ターゲットのニーズを踏まえたうえで、ユーザーがストレスなく欲しい情報を得たり問い合わせたりといったアクションを起こせるようにデザインを組んでいくことが重要になってきます。

■UIデザインのポイント

UIデザインに最適化されたWEBサイトを作るにはいくつかのポイントがあります。 デザインを設計する際の時系列で見ていきましょう。

①ターゲットを明確にすること

マーケティングで用いられるペルソナを作り、ターゲット像をはっきりさせます。すると、ターゲットが求めるニーズが浮き彫りになります。

②何を伝えるかを決める

ペルソナが決まったら、自社のバリュープロポジション(第4話の該当箇所にリンク)とターゲットのニーズがクロスする部分を探し、どんなコンテンツを掲載するかを決めます。

③情報を絞る

情報を発信する際には、あれもこれもアピールしたい!という心理から、情報を詰め込み過ぎてしまう傾向があります。これでは、ユーザーはどこを見て良いのかわからなくなってしまうので、要注意です。
情報に優先順位をつけ、優先度の高いものを目立たせたり、優先度の低いものは思い切って載せないといった選択も必要になってくるでしょう。

④ユーザーの目線の動きに合わせて配置する

ユーザーは、画面を見るときに、左上から右下へ視線を動かして読み進めていきます。
また、大きな文字や人の顔などを優先的に見るという傾向もあります。こういった人の特性を把握して、優先順位の高い情報をより閲覧されやすい場所へ配置することを意識しましょう。

■「UI」と「UX」の関係

UXは、User Experienceの略で、ユーザーがあるサービスなどを使ったときに得られる体験や、そこから得られる満足感までを広く指す言葉です。
そのサービスを利用することで、便利になったり、感動を得たり…といった良いユーザー体験を提供するためには、ユーザーとサービスの接点=UIの設計が重要になってきます。

3.ユーザーを想定してデザイン依頼書を埋めてみよう

梅岡から「デザインを決める際にはユーザビリティが重要だ」ということを教わった青木は、梅岡に促されながら、自社サイトを訪れるユーザー像について考えていく。

梅岡

まずは、ひまわりシステムのサイトに来るユーザーを、顧客層、顕在層、潜在層に分けてみましょう。

青木

け、けんざいそう…??

梅岡

(やっぱり知らないか…)ご説明しますね。
顧客層というのは、つまりクライアントのことです。パートナー企業を含む何かしらお付き合いのあるユーザー層を指します。

顕在層というのは、御社の企業名、または、サービス名を知っているユーザーで、まだお付き合いはないというランクの層です。

潜在層というのは、御社の企業名やサービス名は知らないけど、サイトを訪れれば、ユーザーが持っている悩みを御社で解決してあげられるという層になります。

梅岡はここで、ひまわりシステムのRPFを取り出し、広げて見せながら言葉を続ける。

梅岡

今回のリニューアルでは、目的として『新規成約の獲得』や『電話対応の軽減』などがありましたよね?

青木

(あ!この人も谷さんがいつも言ってるように目的に立ち返ってる!)は、はい。そうです。

梅岡

『新規成約の獲得』ということであれば、潜在層や顕在層を獲得していく必要が出てきますので、そのための情報提供やコンバージョンへの導線設計などを柱とするデザイン設計を考えることがカギになります。

青木

(なんか、やっぱり頼れるかも!)…はい!

目をキラキラと輝かせて食い入るように見つめてくる青木を軽くいなしつつ、よどみなく言葉をつむぐ梅岡。

梅岡

一方、『電話対応の軽減』のためには、顧客層の疑問をWEBのみで解決させる必要が出てきます。『よくある質問』などのコンテンツへ顧客層をどう誘導するかがカギになりますね。

今回、両者に優先順位をつけるなら『新規成約の獲得』なので、TOPページを開いたときにファーストビューに当たる上部に、顕在層や潜在層に対して訴求するコンテンツを配置しましょう。

梅岡は、手描きでTOPページのラフ図をさらさらと描きながら説明を続けた。
それをのぞき込みながら、青木もうんうんとうなずいて話についていく。

梅岡

『電話対応の軽減』への対策ですが、これは顧客層向を対象としているので、TOPページに入口を設けなくてもサイト内を回遊してくれる可能性が高いです。なので、メインメニューやTOPページ下部に配置すれば良いでしょう。

あとは、サイトマップに沿ってコンテンツへの入口をもれなく配置すれば、TOPページのフレームはだいたい完成です。

できあがったラフ図を手に取って眺めた青木は、デザインってセンスじゃなくて理屈で決まるものなんだなぁとしみじみ。

梅岡

「デザイン依頼書」があるので、これを埋めていただけますか?

青木

…でざいんいらいしょ、というのもあるんです…ね?

梅岡

はい、コーポレートカラーやデザインイメージの形容詞などを具体的に指定してもらうことで、弊社とひまわりシステムさまでのデザインに関する認識がズレないようにしておくんです。

早速、項目を埋めようとする青木だったが、ロゴの提供についてなど谷と相談しなければ進められない箇所もあったので、書ける部分だけを梅岡と一緒に記入し、完成版は後日メールで送ることにした。

4.デザインの考え方がわかったぞ!

こうして青木と梅岡は、あらかたのデザイン決めの作業を終えた。

梅岡

それでは、デザイン依頼書をいただき次第、こちらでフレームワークを作成してきますので、それをタタキ台にして、細かい部分は次回以降の打ち合わせで詰めていきましょう!

青木

…はい!
(サイトマップも決まったし、デザインも決まりそうだし、だんだん、いい感じになってきた~♪これは、お問い合わせがバシバシくるサイトになる予感!!
早速、谷さんと相談して、デザイン依頼書を完成させるぞー!オーッ!!)

打ち合わせを終えて会社へ戻っていく梅岡を見送った青木は、この後の流れをシミュレーションしてみた。

青木

これが終われば、あとは細かいところを決めるやり取りと、必要な素材の提供と…って、なんだ、今までの繰り返しじゃない?なんか、私一人でもできちゃいそう!
そしたら、谷さんも松田部長もびっくりするだろうなぁ~。お給料、上がっちゃうかなぁっ?

仕事が充実してきたことに喜びを感じつつ、一人勝手に妄想を繰り広げる青木だったが、WEBサイトリニューアルがこれで終わるはずもなく、青木の前にはまだまだ長い茨の道が伸びているのだった。

つづく。

次の話

【第6話】新米WEB担「ししし…CTAボタン?!困ったお客さんはお問い合わせしてくるでしょ!」

前の話

【第4話】新米WEB担「新規獲得のために必要なページって?サイトマップってどうやって考えるの?!」

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング

最新記事