S-wander

広告代理店SEが考える成果を出すためのウェブ制作メモ

WEBデザイナーを目指す人に知ってもらいたい WEBデザインの5W1H

   

これからWEBデザイナーを目指したい、またはWEBデザインを勉強中の人たちに向けて、WEBデザインのやり方を説明しようと思います。
やり方と言ってもHTMLやCSS、Javascriptを使ったコーディング、PhotoshopやIllustratorの使い方の話ではありません。そういうのは専門学校なり独学なりですでに習っていると思います。
しかし、それらはデザインを視覚化するための手段に過ぎず、そこに至るまでの根本的なデザイン(設計)のプロセスが必要です。
その辺のことをあまり教わっていないというのを新入社員たちからよく聞くので、今回は学校では教えてくれないWEBデザインについてお話します。

WEBデザインを始めよう

WEBサイトをデザインするにあたり、まずは何から始めますか?
いきなりコーディングやPhotoshopでカンプ作るってことはないですよね。
その前にワイヤーフレームを作る?それともサイトマップの作成から?コンセプトを立てるのが先か?

それよりも先に考えることがあります。

それはWEBサイトの「スタート」と「ゴール」を設定すること。

スタートとゴールとは?

WEBサイトのスタートとは、そもそも誰がどうやってサイトに入ってくるかなどの「流入」のこと。ゴールとは、何のためにサイトを作るのか、何をさせたいのか「サイトの目的」です。

5W1Hを使った設計

これらのスタートとゴールを設計するときによく使われるフレームワークに「5W1H」があります。
5W1Hとは、When(いつ)、Where(どこで)、Who(誰が)、What(何を)、Why(なぜ)、How(どうやって)の6つの言葉の頭文字をとったものです。
これらを意識することでサイトの意義を見失わずに制作を進めることができます。

When いつ

いつそのサイトを見るのか?時間帯ではなく、「~するとき」といった具体的なシチュエーションを想定しておくと良いです。例えば「昼の12時~14時」というより、「昼休みのちょっと暇なときに見る」と想定しておけば、昼休みに自分のデスクで食べる人、外食する人など色々なパターンが見えてくるし、また昼休みがある平日とそもそも仕事がない土日とでアクセス量に違いが出てくることも、サイトを運用してアクセス解析をしなくても、この時点で想定できるのではないでしょうか。

Where どこで

どこでそのサイトを見るのか?自宅か職場からか、外出先か?
職場からなら主にPCを使うでしょうし、音の出るコンテンツはNG。外出先ならスマホからアクセスがメインでしょう。自宅の場合も最近ではスマホが多いかもしれませんね。

Who 誰

誰がそのサイトを見るのか?いわゆるターゲット層。
年齢層、性別、職業、居住地域など。さらに趣味や家族構成、会社での立場など細かく設定をする「ペルソナ」と呼ばれる具体的なユーザー像を設定する場合もあります。ただし。ペルソナ設定は信頼できるデータが手元に十分にない場合、思い込みや想像で設定してしまうと現実のターゲット層と乖離することがあるので、ヘタにやらない方が無難です。

What 何を

目的は何なのか?サイトを見た人に何をさせたいのか?一番大事なところ。
いわゆるKGI(重要目標達成指標)やKPI(重要業績指標)の設定です。
大抵のビジネスの場合、KGIは収益増加が該当すると思います。そしてWEBにおけるKPIは通販サイトであれば単純に売上、CVR、アクセス数などが挙げられます。
この場合間違えてはいけないのが、通販の売上=KGIとは限らないということ。
極端な話、どんなに売り上げてもサイトの維持・運営費で赤字であれば、サイトを閉鎖することがKGI達成の一つの手段になります。
通販以外の利益が目に見えないようなサイトの場合は、収益につながりやすいものを指標にすることが多いです。資料請求やお問合せ、来店予約など。時には集客という意味でクーポンのダウンロード数や地図の載っているページのPVをKPIにすることもあります。
これらの数字を如何に向上させるかが重要になるのではないでしょうか。

Why なぜ

なぜこのサイト(サービス)を見る(利用する)のか?
WEBサイトを載せるということは、何億とあるサイトと肩を並べるということ。
たくさんの競合の中からこのサイト(サービス)を選んでもらう理由はなんでしょうか?
優位性、独自性がないものはすぐに埋もれてしまい、せっかくサイトを作っても見てもらえません。SWOT分析や3C分析などのフレームワークを活用してその会社(サービス)の強み・弱み・特徴などを洗い出してみると良いでしょう。そこそこの規模の企業であればすでにこれらを分析済みだったりするので、直接聞いてみると良いです。

HOW どのように

ユーザーはどうやってサイトを訪れるのか?利用するデバイスの他にも、流入元やリファラー、検索キーワード、広告なども考慮します。
SNSからの流入を考える場合、コンテンツをSNSでシェアしやすい仕組みにするとともに、フォロワーを増やせるコンテンツを企画する必要もあります。
検索流入の場合は、どのキーワードで検索されるかを考えてSEOを意識したページ構成や文章を入れる必要があります。

ここまで考えられたら、おのずとサイトのコンセプト、サイトマップ、レイアウトなどがなんとなく見えてくるのではないでしょうか?

さいごに

実際の業務ではディレクターさんが上記をすべてやってくれて、あなたは指示された通りに作るだけ、ということになるかもしれません。
しかし、なぜディレクターさんがそのような指示を出したのか、その意図を汲み取れるようになれば格段に仕事をしやすくなるし、逆に指示された以上のものを提案してやれば、あなたの評価も上がり、頼れるデザイナーとして仕事の依頼も増えるかもしれませんし、あなたの方がワンランク上のディレクターになれるかもしれません。

この記事は良かったですか?

 - WEB

  関連記事

ショートコードが表示される
記事を抜粋表示したらショートコードまで表示されてしまった [WordPress]

[gallery ids=”10001″&#0 …

真っ白な画面
エラーメッセージ Warning: “continue” targeting switch is equivalent to “break”. が出てWordPress管理画面にログインできない

ある日突然、Wordpressで構築したサイト上に以下のエラーメッセージが表示さ …

「All in One WP Migration」でFTPが接続できない場合の対処方法

「All in One WP Migration」プラグインのFTP setti …

no image
Instagramの写真をRSSでギャラリー表示する方法

最近巷で流行っているInstagram。 Instagramって何?っていうのは …

no image
ハッシュタグを指定してInstagramの写真をブログに表示する。

WordPressサイトのRSSを自分のブログへ表示する方法を応用して、 特定の …

SourceTreeとBitbucketを使ってWordPressテーマをバージョン管理

できるコーダーはバージョン管理をしよう WordPressでサイトを制作するとき …

画像にbnrやbannerといったクラスやファイル名を付けるのは注意

ホームページを作るときにバナー設置スペースや、バナー画像に対してよくクラス名もし …

シェル
シェルとCronを使って簡単自動バックアップ

万が一の時のことを考えてサイトのバックアップは定期的に取らなくてはならないですよ …

no image
Xoopsサイトのサーバー引っ越し

Xoopsで作られた社内サイトがある日突然閲覧できなくなった。 どうやらレンタル …

no image
WordPressサイトのRSSを自分のブログへ表示する方法

RSSを表示したい箇所に以下のコードを挿入。 <?php $RSSpath …