「はじめてホームページを作成しようと思うんだけどどのようなデザインにするのか悩んでいる・・・」
「ホームページ制作を依頼しようにも、どこまでデザインにこだわっていいのか分からない」
ホームページのデザインって悩みますよね。そして、このページを読んでくれているあなたは、ホームページのデザインに悩んでいらっしゃるのだと思います。
ホームページは今後、会社の顔となるページになりますから、とことんこだわって出来るだけ予算をつぎ込んで誰に見せても恥ずかしくないデザイン映えするホームページを製作したい・・・そう考える気持ちもわかります。
でもちょっとまってください!
ホームページにそこまでデザインは必要ですか?特に創業期の会社などに多いですが、ものすごく洗練されたお金をかけて製作しているようなホームページって、逆に不信感を抱きませんか?華やかなデザインのホームページを持っている会社をみると、悪い意味で「一体この会社は何をしている会社なのだろうか」と思いませんか?
ホームページは会社の顔となるページです。だからこそ、こだわりたい気持ちもわかりますが、デザインにこだわりすぎるとかえって悪目立ちしてしまうこともあります。
そこで今回は、会社の創業期などで、はじめて開設するホームページのデザインで注意しなくてはならないポイントを3つお伝えします。
それだけではなく、ホームページのリニューアル期においても、ホームページのデザインに悩んでいる方の助けとなるようなデザインの選び方、デザインに迷った時の対処法についても解説していきますのでこの記事を読んでまるっと解決してください(古いホームページをリニューアルしたいと考えている方も、デザインの参考にしていただけるかと思います)。
それでは行きます!
目次
ホームページのデザインで大事なのはわかりやすさ
ホームページの目的は「会社のことを知ってもらう」です。
ホームページ(ここでは、コーポレートサイト)は「会社のことを知ってもらう」「会社の事業について知ってもらう」ことを目的として制作されます。
だからこそ、余計なデザインは必要ありません。デザインよりも「わかりやすさ」を意識する必要があります。
(もちろん一部業種ではデザインが大事で、デザインがそのまま収益に直結するケースもあります。その際は対外的に与える印象としてのデザインをしっかりと検討しなければなりません)
デザインを主目的にしてしまうと、ビジュアル的なイメージに引っ張られてしまうこともあり、ホームページで伝えたいこと、その目的や役割がハッキリとしないことが多いです。
結果、方向性がブレて使い勝手の悪いホームページが出来上がってしまいます。
ホームページのデザインで意識するのはわかりやすさ
ではホームページとして、どのような「わかりやすさ」を意識すればいいのか?
「会社のことを知ってもらう」「会社の事業について知ってもらう」「ステークホルダー(利害関係社)に会社について理解してもらう」これが一般的なホームページ(コーポレートサイト)の主目的になります。
だから、ビジュアル的なデザインに意識を向けるよりも「会社について知ってもらう」「会社の情報がきちんと整理されている」そうした「わかりやすさ」を突き詰めて考えてホームページを制作する必要があります。
つまりトップページを見ただけでも「何の事業を行っている会社なのか?」一目でわかるようなわかりやすさを意識して制作していかなければなりません。
このホームページとしての役割をしっかりとおさえて、ホームページを見た人に向けて「会社のことを知ってもらう」という目的を達成することに目を向けなければなりません。
ホームページのわかりやすさを決めるデザインの3つのポイント
では具体的にどんなデザインがホームページでいう「わかりやすさ」に繋がるのか。
ホームページのデザイン的なわかりやすさを求めるには、デザイン上、どんなことに気を配るべきなのか、何に気をつけて制作、または制作依頼すればいいのか。
わかりやすいデザインのホームページとは具体的にどんなホームページのことなのか、そんな「わかりやすさ」を決定づける3つのポイントについてこれから解説していきます。
1:操作性の良さ
ホームページでいうわかりやすいデザインとは何か、そのまず1つ目の要素ですがそれは「操作性のよさ」です。
ホームページデザインでいう、わかりやすさとはビジュアル的なデザインよりも「操作性の良さ」が全面に押し出されているホームページだし、ホームページの使い勝手のことだと思ってください。
ホームページに訪問してくれる人が、どこにアクセスすれば、自分が求めている情報があるのかがハッキリとわかりやすく示されているホームページです。
だから、どこに何があるのか分からず、情報がきちんと整理されていない・・・、さらには求めている情報になかなか辿り着けない・・・そのようなストレスを与えるホームページはNGだと思ってください。
ビジュアル面を意識しすぎるあまりに、この「操作性の良さ」が犠牲になっているホームページは多いです。
一部業種などデザインを全面に押し出さなければならないホームページ以外は、操作性の良さがホームページの「わかりやすさ」につながり、すぐに求めている情報にアクセスできる操作性の良さこそがホームページには必要になると思ってください。
操作性の良いホームページデザインのポイント
ではホームページの操作性を良くし、わかりやすいデザインにするためには具体的に何が必要なのか?どんな施策を施せばいいのかについて以下から解説していきたいと思います。
1:ページの読み込み速度(レスポンス)の速さ
2:ナビゲーション位置のわかりやすさ(アクセスのしやすさ)
3:リンクの有無のわかりやすさ
最低限、これら3つのポイントを抑えてください。逆に言えば、この3つのポイントをしっかりとおさえるだけで非常にわかりやすく、使い勝手の良い、つまりは操作性の良いホームページが出来上がります。
ビジュアル的なデザインを意識するあまりに、極端にページの読み込みが遅かったり、まるで迷路のように情報が入り組んでいて、知りたい情報になかなかアクセスできないホームページは、ユーザーにストレスを与える上に、ホームページとしては失格、まるで意味がないと思ってください(もちろん、あえてアクセスしにくくしているといったような狙いがあれば別ですが、ほとんどのWEBサイトはそうなっていません)。
ホームページの役割は自社のことを知ってもらうことです。ビジュアルよりも何よりも自社の情報を正確に伝えるホームページを目指してください。
2:レスポンシブデザインの対応可否
現在では、レスポンシブデザインに対応しているかもとても大事です。
レスポンシブデザインとは、パソコン、スマートフォン、タブレットといったユーザーが扱う端末の画面幅に応じて、自動的にホームページの表示サイズを変えるデザインのことを言います。
以前はスマホはスマホといったように、端末ごとにページデザインを変えたサイトを作る方法が主流でしたが(よく役場の公的なホームページを開くと携帯端末専用画面への誘導画面が表示されることがあります。「専用サイトを開きますか?」のような画面が出てくると思いますが、まさしくそれです、いって挟むだけでストレスに感じませんか?)、今現在は端末に応じて自動的に画面表示を整形してくれるレスポンシブデザインのホームページが主流となっています。
ユーザーの閲覧環境に応じて(それぞれのデバイスに応じて)、最適化され画面上に自動的に表示されるのです。
まだスマホが普及していない少し古い時代にサイトを作成した(といっても15年くらい前)ホームページになると昔のままのホームページで、スマートフォンから閲覧しても、タブレットから閲覧しても、パソコンで見ている画面と同じサイズで表示され、非常に閲覧しにくいサイトであることが多いです。
そんなサイトを見つけると、「文字ちっさ」「読みにくっ」・・・って思いませんか?
以前はパソコンからの閲覧が標準でしたが、今は個人での閲覧は特にスマホでの閲覧が主流になっていますので、小さな端末からアクセスしても快適に閲覧できるように、スマホに対応したサイトを作成する必要があります。
画面に表示されたままの状態では文字が小さく、読みにくく、クリックもしにくい・・・ピンチ操作をしなければ、文字が読めない。これだけでユーザーにストレスを与えてしまいます。
そうではなく、スマートフォン、タブレット、パソコンなどの端末に応じて自動的に表示が最適化され、文字も最適なサイズに表示され、なおかつクリックをしやすい・・・面倒なピンチ操作の必要がなく、スイスイ情報を読み込める・・・そんなサイトを製作してください。
それが「わかりやすさ」につながります。
3:自社のイメージの反映
以上の2つをおさえた上で自社のイメージをきちんと反映できているのかについても目を向けてください。
ホームページを制作する目的は「自社のことを知ってもらうこと」「自社の事業について知ってもらうこと」にありますから、わかりやすさとはそれすなわち、自社のイメージがきちんと伝わっているか否かでもあり大事な要素であるからです。
誰でも自由に閲覧できるホームページは会社の印象に大きく影響を与えますし、ステークホルダー(利害関係者)から見た場合の判断材料にもなりますからしっかりと会社のイメージ反映したホームページを作成することが肝心です。
とはいえ、何度も言うように必ずしもデザイン性に富んだ洗練されたホームページにする必要はありません。
これは3つの要素を意識するだけで大丈夫です。
次の3つのことを意識するだけで自社の与えるイメージは大きく変わってきます。
何度も言いますが、ポイントはたった3つだけです。
1:ホームページの配色
2:ホームページのフォント
3:ホームページの画像や動画
「配色」「フォント(字形)」「画像」この3つを変えるだけで、ホームページで与える印象が大きく変わってきます(別のものに見えます)。
以下でそれぞれについて詳しく解説します。
1:ホームページの配色
まず1つ目の要素はホームページで使われる「色」です。
「配色」次第でホームページの印象はまるで違うものになります。
ホームページに使われる色があまり多すぎると、雑多な印象を与えてしまいますので、メインとなる色は大体3色程度、それもできれば同系色でまとめると色の統一感が出て、すっきりとしたイメージになります。
洋服などの装いでも同型色で、かつ3色程度でまとめると、全体的にまとまった印象を他人に与えることができますが、それと同じで、同系色でまとめると落ち着いた印象を与えることができます。
ですからまずはメインとなるコーポレートカラーを決めてしまい、その周辺の色を使ってホームページの色合いを全体的に調整していくといいと思います。
たったそれだけで自社のホームページを見た人が抱く印象を変化させることができます。
必ずしも同系色にこだわる必要はない
ただしそれぞれが異なる配色であっても、わたしたちが普段見慣れているものであれば、色がバラバラなのに不思議とまとまった印象を見る人に与えることもできます。
これはいろんなところで例に挙げられることが多いのですが、代表的なのは「国旗」です。
イタリア、オランダ、ガーナ共和国、ドイツ、フランス、これらはそれぞれが異なった同系色ではない色使いをしていますが、どこかまとまりのある印象を見るものに与えてくれます。
やはり同様に、大体3色程度でまとめられているとすっきりとした印象になります。もちろん、なかには4色以上使われている国旗もありますが・・・やはり雑多な印象になりがちです。
ホームページを見た人に、どのような印象を与えたいのか、そこから逆算して、さまざまなホームページを見て、気に入ったホームページをリストアップ、その後共通している色使いやホームページ全体の雰囲気を抽出していくと、なんとなく自社が与えたい印象を探し出すことができますので、コーポレートからーが決まっていない方は、ぜひやってみてください。
2:ホームページのフォント
意外だと思われる方も多いのですが、ホームページで使われるフォントによってもホームページの印象は大きく変わってきます。
フォントとは「字形」のことですが、ホームページで使われるフォントによっても随分と印象は変わってきます。
例えば代表的な3つのフォントによって与える印象の違いについてわかりやすく解説すると下記の通りになります。
【フォントの種類とフォントによって与える印象の違い】
フォントの種類 | 与える印象 |
---|---|
明朝体 | 全体的に大人っぽい印象。 また真面目さや上品な印象になる。 |
ゴシック体 | まとまりのある印象。 オンライン上では、さまざまなところで使われているフォントのため親近感を与える。 |
行書体 | 伝統的な雰囲気を与える。 和の趣や、少しかたい印象になる。 |
細かくいえばフォントの大きさはもちろん、行と行にとられるスペースの幅の広さによっても印象は大きく変わってきます。
フォントの大きさ
行間の幅
センテンスの長さ
細かくいえばたくさんのことに気を配る必要がありますが、あげはじめたらキリがないので(本当です)ホームページを制作する場合は、最低限「フォント(字形)」と「大きさ」あたりを意識して政策を進めるといいと思います。
3:ホームページの画像や動画
パッと開いた時に画面を通して目に飛び込んでくる画像一つで会社のイメージは大きく変わります。
特に、ページを開いた時に飛び込んでくる画像や動きのある動画次第で随分と企業イメージは変わってきます。
例えば、ビルの画像が使われていると見るものに、よりビジネス的な印象を与えることができます。
だから自社がどのような印象を与えたいのか、どのような会社であると伝えたいのか、どのような事業を行っているのか、それら自社がホームページを通して何を伝えたいのかをイメージできるような画像を選んで、使うようにしてください。
ホームページには画像や動画は必要なの?
画像がなくテキストだらけですと、官公庁のような、おかたいイメージになりますし、画像が多いと軽くポップな印象になります。
基本的には画像の量に応じて、ポップな印象に近づくと思ってください。
ホームページで最も力を入れるべきなのはトップページ
ホームページにはさまざまな情報が掲載されますが、なかでもホームページの入り口となるトップページは力を入れて作成してください。
トップページのデザイン次第で、人に与えるイメージが変わってくるからです。
またホームページの入り口となるトップページが、ウェブサイトの中で一番アクセスが集まるページになりますので、興味を持ってくれた人の心を掴んで離さないページ作成を強く意識して作り込む必要があります。
トップページに詰め込まれている内容がガラガラだと、せっかく他のページの内容がしっかりしているのに、どこか簡素なイメージを抱かせてしまいます。
ページを開いた時に目に飛び込んできた情報でイメージは決まる
ホームページにアクセスした時に真っ先に画面に表示される情報のことをファーストビューと言いますが、このファーストビューは特に大事だと思ってください。
ファーストビューは、ページを開いた時の第一印象のようなものです。
ファーストビューでどんな会社なのかがわかる、どんな事業を行っているのかがわかる、だから、このファーストビューに最も力を注いでください。
さまざまなホームページが乱立している昨今の状況において、ホームページを閲覧するユーザーは、ファーストビューでどんなことを行っている会社なのかを判断します。
だから、ファーストビューが印象的なものになっていないと、そのまま戻るボタンを押してしまったり、ページを閉じてしまって、その先のページを閲覧してくれません。
実際、ファーストビューを強烈なものにするだけで会社やサービス内容について興味を持ってくれるか否かは大きく分かれてきますので、トップページのファーストビューには、どのページよりも力を注いでいくことが大事です(得に駆け出しの創業期のホームページはファーストビューを強く意識してホームページ制作を行ってください)。
デザインにはこだわりすぎない
ここまで読み進めていただいたあなたには、既にご理解していただいているかと思いますが、一般的な企業、もしくは創業間もない企業の場合はホームページのデザインはこだわりすぎない方がいいです。
デザインには答えがない以上、デザインにこだわりすぎてしまうと費用対効果の見合っていないホームページが出来上がってしまいます。
その結果、下記のような問題が生じてきます。
1:時間と費用がかかる
2:操作性が悪くなる
3:自己満足のホームページになる
1:時間と費用がかかる
ホームページ制作にかかる費用は青天井です。
デザインにこだわればこだわるだけ、多くの時間と、それに費用がかかってしまいます。
ホームページの体裁を整えるだけに時間と費用を費やすのであれば、日々の業務に力を入れるべきです。
これからビジネスを成長させていく時期であればなおさらで、ホームページ制作に無駄に時間とお金をかける必要はありません。ホームページをしっかりと作り込むのは、事業の成長と共にで問題ありません。
2年後3年後コア事業が変わっている可能性もありますから、少しづつ手を加えていって、方向性が定まったら、しっかりと作り込む。
ビジネスと一緒でホームページにもそれぞれのフェーズがあります。
まずはざっくりと必要最低限のことを決めてしまって、アップデートを繰り返していってビジネスの成長具合を見ながら(それも必要なタイミングで)適宜変えていくことをお勧めします。
2:操作性が悪くなる
デザインにこだわりすぎると、シンプルに操作性が悪くなります。
まだ創業間もないのに、さまざまなギミックに手を加えたサイトを見かけることもありますが、ブランドがしっかりと確立しているから閲覧するのであって、ブランドが確立できていないのに、ホームページ上で手の込んだアニメーションやエフェクトを加えても、ほとんど意味がありません。
そればかりか読み込み速度が遅くなり、サイト全体が重くなってしまったり、SEO的にも問題があるサイトが出来上がってしまいます。
ビジュアル面のデザインだけにこだわったホームページは、ユーザーからすれば、見たい情報になかなか辿り着けなかったり、ページの読み込み速度が他サイトと比べて極端に悪かったりするので、離脱する原因をつくらせてしまいます。
ホームページはあくまでステークホルダー(利害関係者)が閲覧するものであって、会社のことを知ってもらう、会社の事業を知ってもらう、ここがわかりやすいように注力するべきであることを肝に銘じておきましょう。
3:自己満足のホームページになる
デザインにこだわりすぎると、どこをゴールにしていいのかがわからなくなったりします。
デザインには答えがない以上いろんなところに手を加えたくなって、いつまで経っても完成しない・・・なんてことも起きます(まるで夢と魔法の国です)。
結果、自己満足のページが出来上がってしまい、さまざまなギミックが多用されることでデザイン的には優れているものの、操作性がものすごく悪いサイトが出来上がったりします。
注意してください。
ホームページのデザインに迷った時の対処法
ホームページのデザインに迷ってしまったら、いつも基本に立ち返るようにしてください。
つまり、ホームページを通して何を伝えたいのかです。
おそらく多くの場合は、会社のことを知ってもらう、もしくは会社の事業について知ってもらうことを目的としてホームページを制作するはずです。
ホームページの種類 | 目的 |
---|---|
コーポレートサイト | 会社のことを知ってもらう |
ブランドサイト | ブランドのことを知ってもらう。 ブランドの信頼性や価値観を伝える。 |
サービスサイト | サービスのことを知ってもらう。 サービスを申し込んでもらう。 |
ECサイト | 商品を購入してもらう。 |
リクルートサイト | 人材を獲得する |
ホームページにはそれぞれで役割があります。
デザインに迷い始めたら全てがこの目的に向かっているのかを確認してください。
例えばコーポレートサイトを作成している場合、今、あなたがやっている施策は「会社のことを知ってもらう」ここに向かっているのかを必ず確認するようにしてください。
デザインを意識していると、この本来の目的が曖昧になってしまい、どこに向かっているのかがわからなくなり、結果としてデザインだけは立派な自己満足のホームページになってしまうことがあります。
そうならないためにも、この目的、そしてそれぞれのホームページに求められる役割を意識して進めていってください。
ホームページの種類 | 役割 |
---|---|
コーポレートサイト | 会社の情報が分かりやすく掲載されていること。 |
ブランドサイト | ブランドを確立すること。 |
サービスサイト | サービスをスムーズに提供できること。 |
ECサイト | 商品やサービスをスムーズに提供できること。 |
リクルートサイト | 自社が求める人材を確保すること。 |
以上、デザインに迷ったらこの基本に立ち返るようにしてください。
まとめ
今回の記事ではホームページのデザインでどのようなことに気をつけたらいいのか注意点について大まかに3つのことについて解説してきました。
・ホームページのデザインで大事なのは「わかりやすさ」
・「わかりやすさ」は「使いやすさ」のこと
・イメージは「配色」「フォント(字形)」「画像」で操作できる
・ホームページ制作で最も力をかけるのは「トップページ」と「ファーストビュー」
・デザインで迷ったら「目的」と「役割」を意識する
ホームページは会社の顔となるウェブサイトです。
デザインにこだわりたい気持ちはわかりますし、デザインにこだわったホームページを作成しても良いのですが、いずれにせよ「会社のことを知ってもらう」ここの目的の達成に向けて強く意識してホームページ制作を進めていってみてください。
最後まで読んでいただきありがとうございました!
1:操作性の良さ
2:レスポンシブデザインの対応可否
3:自社のイメージの反映