これまで、基本的なウェブサイト作成の方法について、特にHTMLとCSSの「プログラミング」について見てきました。
しかしウェブサイトを作成していくうえで欠かせな要素は他にもあります。それは「Webデザイン」です。
実際ホームページを作ってみたものの、「何かしっくりこない…。」「かっこよくならない」「イメージと違う」などの問題が生じるかもしれません。
それらの多くは「Webデザイン」について学ぶことによってたいてい解決できます。
「でも、自分はそんなセンスないし…」とお考えのあなた！
確かにセンスの良し悪しには才能も関係しているかもしれませんが、客観的に「センスが良く見える」かどうかにはしっかりした理論があり、それに基づいて作業を行なうなら、「誰でもセンスの良い」ページを作成することができるのです。
もっとも、多くの経験を持つデザイナーの作成したページと見比べると、「まだまだだなー」と感じることはあるかもしれません。 でもそれは当然のことなのです。彼らはデザインに関する知識と才能を総動員して、そのページを作りそれで生活しているのですから・・・。
でもまずはそこまでの高みを目指さずとも、自分の作成しているページを「もっといい感じ」にすることができます。
このブログ記事では連載で「Webデザイン」について扱っていきたいと思いますが、初回は「Webデザイン」を考えるにあたって考えておくべき３つの要素について取り上げます。
良いWebデザインと、そうでないWebデザイン
まずは以下の2つの県の公式ホームページを比較してみましょう。
左側は東京都のもの、右側は山梨県のものです。
どちらのデザインに好印象を持たれたでしょうか？
おそらく多くの方は右側の「山梨県」のサイトを選ばれたのではないでしょうか？
どちらもお役所のホームページですので、多くの制約があることと思います。 そして、実はこの2つのページに載せられている情報量と内容はほとんど同じなのです。
でも東京都のページは「ごちゃごちゃ」した感じに見える一方、山梨県のページは「すっきりしていて綺麗」に見えませんか？
そうです。 同じ情報を載せているとしても少しの工夫でページを見やすく「いい感じ」にすることができるのです。
では、「いい感じ」のページにするために考慮する必要のあるどんなポイントがあるでしょうか？
Point 1：「らしさ」を大切にする
これはつまり、その「会社らしさ」、「そのお店らしさ」をページに反映させるということです。
先ほどの、山梨県のページには、「山梨県らしさ」が出ていると思いませんか？
山梨県と言ったら、富士山周辺の豊かな自然かもしれません。最近はリニアモーターカーの建設も計画されていますので、ページの上部には、富士山とリニアモーターカーを描いていますね。
一方で東京都のページはどうでしょうか？
東京と言ったら、浅草やスカイツリー、東京タワー、高層ビル群、などなど売り込めるイメージは限りなくあるにも関わらず、全くもって東京都らしさが表現されていません。
このように、Webデザインを考慮する際には、ページ自体のデザイン性だけを追求するのではなく、その会社なりお店なりの「らしさ」を見つけ、それを魅力的に見えるように提供することが大切なのです。
Point 2：「調和」を大切にする
これは、ページの中で使用されるフォントや色の全体的な調和のことを指します。
先ほどの東京都のページはなぜ「いい感じ」ではないのでしょうか？
下の画像を見てください。
これらの「項目」ひとつひとつのデザインが「バラバラ」のような気がしませんか？
まったく「調和」がありません。おそらくそれぞれの担当する部署が異なり、それらを一列に並べたために、このようなことになってしまったのでしょう。
このデザインや配色の「調和」のなさが、違和感を感じさせているのです。
一方で、山梨県のページも見てみましょう。
多くの色が用いられ、項目なども多岐にわたるにも関わらず、全体的に色合いが「調和」してるように感じませんか？
くわしく見てみると、それぞれの配色や写真の明るさ等がしっかり調整されていることがわかります。
この「配色」つまり「カラー・コーディネート」に関しては、次の記事から連載で取り上げますね。
Point 3：「ビジネス目標」を忘れない
これは、「ゴール」を常に意識してページを作成する必要があるということです。
その「ゴール」とはGoogleの検索で上位にあるようにして自社のホームページを見てもらうことでしょうか？
いいえ。
確かにそれも重要です。でも、「ページを見てもらう」のは「通過点」にすぎません。
そのページを見たユーザーが「何らかの行動をすること」、それが「ゴール」なのです。
それは、商品を購入してくれることかもしれず、仕事の依頼をしてくれることかもしれません。
いずれにしても、目指すべきホームページのデザインは、そのページ自体でユーザーに感銘を与えることではなく、実際に「買ってみたい」、「行ってみたい」「依頼してみたい」と思わせることなのです。
例えば、ヘアサロンのホームページを作成したとします。 しかし、そのページがどんなに素晴らしくデザイン性が優れていても、そのページを見て実際にヘアサロンにくるお客さんの数が増えないならば、それは意味を持たないのです。
もちろん、これらはWebデザインだけで完成するものではありませんが重要な役割を果たしています。
この点を少しまとめてみましょう。
下の図は、ユーザーがページを見てから、行動を起こすまでの流れと、そこでWebデザインがどのように関係しているかを示したものです。
まずはページを見てもらわないと始まりません。
これはSEO対策とページの内容が関係しており、Webデザインはあまり関係しません。なぜならGoogleの検索では検索順位とタイトル、およびその説明しか出ないからです。
しかし次の、「ページを見たうえでどのような印象を持つか」に関して、Webデザインはかなり影響を与えます。
そして、ここで必ず良い印象や感情をもってもらう必要があります。
感情が動かなければ、人は行動へと動かされないからです。
そして、この部分で「どのような印象・感情」をもってほしいかによってデザインは変わってきます。
例えば、証券会社や保険会社のページであれば「堅実さ」や「信用性」という印象を重視するでしょう。
一方で「保育園」や「子供向け教材の販売」であれば、「分かりやすさ」や「近づきやすさ」を大切にしたいと思うかもしれません。
つまり、適切なWebデザインを行なうことによって、企業側が考えているイメージ・印象をユーザーにも感じてもらうことができるのです。
Webデザインが最大限に力を発揮するのはこの部分です。
よい印象や感情に動かされ、ユーザーは行動します。
つまり、商品を買ってくれたり、仕事を依頼してくれたり、お店を訪ねたりしてくれるのです。
これが「ゴール」つまりビジネス目標です。
この前の段階でユーザーの「感情が動いていれば」、「実際に行動してもらうこと」はそれほど難しいことではありません。
お店の地図があれば来てくれるでしょうし、資料請求や商品購入のボタンが見やすければ、それをクリックしてくれるでしょう。
ここでもWebデザインは効果を発揮します。
まとめ
これまでのところで、Webデザインを行なう際のポイント3つを取り上げました。
１．Point１：「らしさ」を大切にする
２．Point２：「調和」を大切にする
３．Point３：「ビジネス目標」を忘れない
でした。
そして、特に「Point３」の部分では、ビジネス目標を念頭に置きつつ、ページを見てもらったユーザーにどのような印象をもってもらいたいかを考慮した上で、デザインを考える必要があるということでした。
次回はWebデザインの重要な部分である「配色・カラーコーディネート」について解説したいと思います。
お読みくださりありがとうございました。