新卒でも分かる！成果に繋がるWEBサイトの基礎まとめ「5つのステップ」

基礎を理解し、事例をたくさん目にして、
成果に繋がるWEBサイトは何かを考える。

4月に入り、新しい社員を迎えられた企業も多いと思う。

WEBや販促担当の新入社員さんには、いきなり現場に入って
大変な思いをしている方もいるかもしれない。
その指導をされる方々は、
もしかしたら、新入社員さん以上に大変かもしれない。

そこで、今回のブログでは、新入社員さんの指導にも使える
「成果に繋がるWEBサイトの基礎」についてご紹介したい。

成果に繋がるWEBサイトを考える5つのステップ

結論から言うと、成果を出すためには、
基礎を理解した上で、様々なWEBサイトを見ることが必要になる。

「そもそも、成果に繋がるWEBサイトとは何か？」

それには、「KPI」と「KGI」を理解する必要があり、
それぞれを理解した上で、実現するためのデザインを考える必要がある。

具体的に、「成果に繋がるWEBサイト」を作るためには、5つのステップが必要になる。


それでは、この5つのステップについてご説明をしたい。

1 「KPI」と「KGI」を理解する

成果に繋がるWEBサイトを構築するためには、
最初に、そのWEBサイトの「KPI」と「KGI」を決定する必要がある。

この2つを決めずにWEB制作した場合、
何をもって「成果」とするのか判断がつかない状態になるからだ。

「KPI」と「KGI」を理解するために、
身近な「ダイエット」に例えて、スライドでご説明したい。
（追記：スマートフォンでは表示されない可能性があります。）


このように「KPI」と「KGI」を設定した後に、デザインを考える。

2 「レイアウト」の基礎を理解する

WEBサイトで成果を達成するために、デザインにおいて、
まず考えるべきは、「直帰率・離脱率を下げる画面設計」である。


上図のように、サッポロビールのWEBサイトは、
「直帰率・離脱率を下げる画面設計」の良い参考になる。
こちらは、過去のブログ記事で詳しくお話をしているので、参考にして頂きたい。
WEBで成果を求められた時に役立つ「コンバージョン率を上げる5つのステップ」

その他、良いまとめサイトがあったので、
レイアウトを学ぶ上での参考サイトとしてご紹介したい。

参考：Web制作者は知っておきたいwebサイトのレイアウト7選
　　　可変グリッドレイアウトなWebデザイン集めてみました

3 「配色」の基礎を理解する

配色によって、WEBサイト・広告のイメージは大きく変わる。

WEBサイトの場合だと、商品パッケージや企業ロゴを
ベースに全体の配色を決定することが非常に多い。

商品パッケージのキーカラーを採用する

「インパクトが欲しい＝商品パッケージのキーカラー以外の色を使わない」

Draft oneのキャンペーンページを見ると、こちらの商品の
パッケージに使われているキーカラーは、「青・赤・金」の３色。

その中で、商品名に使われているのが「青」で、
最も重要かつ印象付けたい色と言える。
そこで、発泡酒の爽快感を表現しつつ、デザインに取り入れるために、
「青い空」として、背景に「青」を配置している。

また、指し色として、「赤」と「金」使いながら、
「青」と「赤」のコントラストを使ってインパクトを出している。

商品パッケージのトーンを採用する

「スッキリ見せたい＝商品パッケージのトーンに合わせる」

次に、麦とホップ「氷」のキャンペーンページを見ると、
こちらの商品のパッケージの背景は、商品イメージに合わせて、
ブルーから水色へのグラデーションになっている。

その爽やかなイメージを踏襲し、
タイトル文字にも薄いブルーのグラデーションを使うことで、
スッキリと情報を伝えている。

他のポイントとしては、爽やかさをより強調するために、
文字のフォントには明朝体を使用している。
また、色幅の狭いグラデーションにすることで
文字の可読性を維持している。


このように、最もシンプルな配色手法は、
商品パーケージやブランドロゴの配色に合わせることである。

その他、配色の基礎を知っておくと、全体のバランスを見たり、
修正指示を出す際に役立つので、そのための参考サイトをご紹介したい。

参考：WEBセーフカラー配色時点
　　　カテゴリー別配色アイデア100

4 「フォント」の基礎を理解する

フォント（書体）によって、文字が持つイメージは大きく変わる。

印刷・デザイン・WEBの業界で、有名な和文フォントメーカーとして、
モリサワとフォントワークスが挙げられる。
価格は高いが、非常に良質なフォントである。

それぞれ、フォントの見本をチェックできるようになっており、
デザイナーに指示を出す際に、参考にしてもらいたい。

　◆モリサワ書体見本・検索　　　◆フォントワークス書体見本・検索

何度もフォントを扱う内に、
その広告イメージに相応しいフォントが分かるようになる。
身近にある、電車広告や雑誌のフォントに着目するのも良い勉強になる。

その他、フォントについてまとめたサイトがあったので、
基礎を学ぶための参考サイトとしてご紹介したい。

参考：フォントの基本的な選び方
　　　基本フォントの特徴

5 「成功事例」をたくさん見る

「良いモノを作るためには、まず真似ることから始めると良い。」

これは、昔から様々な業界で言われていることだが、
WEBデザインでも同じことが言える。

既にあるWEBサイトから学ぶことは非常に多い。
どうすれば成功し、どうなると失敗するのか。
どうすれば自分のイメージに近付き、どうなると離れるのか。

より多くのWEBデザインに触れ、
「成功事例」を見ることは、それだけでも勉強になる。

幸いにも、色々な方々が、
世の中のWEBデザインをまとめてくれている。
更に、その多くは、業界のジャンルや配色などで、
WEBサイトをカテゴライズしてくれているので、そちらもご紹介したい。
是非、より多くのデザインに触れて欲しい。

参考：週刊ウェブデザイン
　　　bookma!
　　　web selection
　　　ikesai.com
　　　Web Design Clip
　　　MUUUUU_CHANG Web DESIGN Showcase
　　　straightline bookmark
　　　WP Design Gallery

あとがき

デザインは奥が深い。

様々な種類のデザインが存在するが、
商業デザインは、成果を出すことが前提だ。
求められるのは、芸術性よりも成果だ。

ただ、人に何かを伝えるという、
デザインの根幹は、同じである。

成果とは、人に何かが伝わった後の結果である。

今回のブログが、新入社員の方々や
販促・プロモーションに関わる方々のお役に
少しでも立てれば幸いである。