top_back
stepup inquiry
design knowhow
research material_function

Design

企業のWebサイト(ホームページ)は、もはや情報提供だけではなく、企業イメージを伝える貴重なツールです。顧客の視点で使いやすさをより考慮して、トップページ等のデザインも重要視してください。

Step_1

イメージキーワードを決める

企業は顧客(顧客予備軍)に対して自社のイメージを販促物等で発信しています。製品広告ではなくイメージ広告に力を入れている企業も少なくありません。企業のWebサイトもイメージキーワードを盛り込んで、新たなサイト制作を試みてください。
もちろん、複数のキーワードが含まれると思いますが、そこからイメージ画像やコピーライテングにも繋げてください。

●イメージキーワード

1 都会的
2 自然環境・安全安心
3 健康的・アクティブ
4 愛情・優しさ
5 厳格・重厚
6 親近感・家庭的
7 日本的・伝統的
8 華麗・艶やかさ
9 夢・幻想的
10 テクノロジー
11 その他

Step_2

基本フォーマットを決める

基本的にはナビボタン(ナビゲーションボタン)の位置が右(左)側・上(下)側・中央の3タイプです。もちろん、コンテンツが多いサイトではナビボタンが左側と上側にある場合があります。その場合は「AB」となります。
また、バナー(企業ロゴ等が入る部分)とナビボタンとイメージ画像等のコンテンツとの比率とバランスでイメージが変わってきます。
まずは、トップページとサブページの基本となるフォーマットを決めててください。サブページには「戻るボタン」等のタイプがありますが、顧客等の訪問する側からみると使い勝手がよくありません。ゆえに、今回のこれから新たに制作する企業用Webサイトの「基本フォーマット」として採用しませんでした。

●Webページデザインの基本フォーマット

A
B
C
フォーマットA フォーマットB フォーマットC

Step_3

ターゲット

●顧客の性別・年齢・職業・趣向等

「イメージキーワード」でも、大きな顧客分類ができているのですが、企業の業種によってはもっと絞り込める「ターゲット」も採用してみてください。また、新規コンテンツや採用情報等のページは必然的にターゲットを絞り込むことができますので、全体的なバランスを配慮しながら検討してみてください。

a サラリーマン・男性
b オフィスレデイ・女性
c 熟年
d 学生
e 主婦
f 子供
g 独身
h 若い夫婦・恋人同士
i 自営業
j その他

 

Step_4

配 色

●メインとベーシックとサブカラー

まずWebサイト用のメインカラーを決めてください。コーポレットカラーをメインカラーにしている場合が多いですが、新規Webサイト用に新カラーを決めるのも一案です。
イメージキーワードやターゲットを考慮したりして、ベーシックカラーも2〜3色ぐらいは決めてください。
ベーシックカラーの他に、表や図等に使用するサブカラーや各ページ(カテゴリー)タイトルのポイントカラーも決めておくと統一感が生まれます。もちろん、メイン・ベーシック・サブカラーの配色を検討しながら決めてください。
時には、各組合せのカラーがイメージ写真等の画像と配色が合わない場合があります。その時は、画像を変更するか全体の配色を再考しながらカラー変更をしてください。
面倒でも、最初にカラーの設定を決めておくと、後で混乱がなく仕上がりも綺麗になります。もし、難しいと感じた時は、カラー設定を少なくしてください。

Step_5

トータルデザイン

●トップページとサブページ

イメージキーワードを決めて、基本フォーマットのトップページとサブページを決めます。企業によっては、ターゲットをもっと絞り込むことができます。次にカラー(配色)を決定してください。最後はトップページに自社の企業コンセプトや理念等のコピーとイメージ画像を加えて、サブページにはバナーのイメージ画像等を決めます。全体の構成が顧客側から見て分かりやすく、自社のイメージに合った内容であれば、Webサイト制作のトータルデザインは完成です。
以下に簡易的な企業コンセプトとトップページとサブページの例を掲載しました。ここからコンセプト内容をもっと具体的に煮詰めていってください。

コンセプト トップページ サブページ
例:HWPの場合
デザイン事務所なので都会的なイメージ。
ターゲットは企業等の制作担当者や責任者。
少し社会(企業や人)に貢献ができて、当事務所もスキルアップができて、少し広告宣伝ができるコンテンツ。
1+B 1+B
例:ナチュラル志向のデザイン 2+A 2+A
例:モダンなデザイン 1+B 1+B
例:若い女性をターゲットにいたデザイン 1+B +c 1+B+c
例:厳格で熟年をターゲットにしたデザイン 7+A+i 7+B+i

 

HWPトップStep upDesignResearchMaterial & FunctionKnowhowInquiry
著作権:デザインオフィスToki