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

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


新卒でも分かる!成果に繋がるWEBサイトの基礎まとめ

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


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

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

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


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


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

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

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

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

1 「KPI」と「KGI」を理解する、2 レイアウトの基礎を理解する、3 配色の基礎を理解する、4 フォントの基礎を理解する、5 成功事例をたくさん見る
それでは、この5つのステップについてご説明をしたい。


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


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

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

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


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


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


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

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

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

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


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


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

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

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


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

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

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

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

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


麦とホップ「氷」のキャンペーンページ
「スッキリ見せたい=商品パッケージのトーンに合わせる」

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

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

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


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

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

参考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


あとがき


デザインは奥が深い。

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

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

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

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


A8.netが技術スタッフを募集中

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)