ホームページ制作

企業のホームページ担当者必見!見やすいサイト作りの為の基本ルール

自社のホームページからしっかり情報発信したい!お問い合わせの件数も増えて欲しい!多くの人はそんな思いでホームページを作成していると思います。

しかし、あなたの会社のホームページはしっかりと整理されていますか?
そして閲覧者にとって見やすいデザインでしょうか?

見やすいサイトを作ろうとして、他社のサイトを参考にするのももちろんアリなのですが、それだけでは失敗する可能性があります。

見やすくユーザーにとって分かりやすい企業のホームページを作るためには、デザイン以外にも様々な知識が必要だからです。

 

そこで今日は以下の情報をお届けしたいと思います。

  • 見やすいホームページを作る上での基本的な考え方
  • 見やすいデザインにするための具体的なテクニック
  • よりホームページを見やすくするための調査方法
    など…

それでは、ご覧ください!

 

見やすいデザインにするための大枠を考よう

見やすいデザインを考える上では、まずは大枠で基本的な考え方を理解している必要があります。まずは、ホームページを見やすくする上で守らなければいけない基本的な考え方を理解していきましょう!

 

ホームページの目的を決める

WEBデザインと聞くと、華やかなイメージばかりが先行してしまい、つい『かっこいいサイト』を作ろうとしてしまいがちです。

そのため、様々な制作実例の中から、なんとなくフィーリングに合いそうなデザインを見つけてみては真似をして作ったりする人も多いのではないでしょうか。

その結果…
思うように成果が上がらない…。

これは当然と言えば当然のことです。なぜなら『デザイン』という外側の要素だけに注力してしまって、肝心の中身が伴っていないからなんですね。

ホームページには必ず目的が必要で、その目的を叶えるものであることがホームページの第一条件です。
目的をしっかり定義しないままデザインだけを始めてしまうと、情報の統一感が無くなり、何がなんだか分からないホームページになってしまいます。その結果見にくいホームページになってしまうのです。

 

ホームページの目的
企業ホームページの「目的」が曖昧だとコストも時間もムダになる企業のホームページを制作する際、目的が曖昧なまま進めていくともったいないことになります。せっかく時間もコストもかけてホームページを作るなら、目的を明確にし、訪問者から反応の得られるものを設計していきましょう。企業のホームページの目的を定めるためのステップを解説した記事です。...

 

 

ホームページ全体の構成もしっかり決める

作りながら後からページを追加していくと、
下手に増改築した住宅のようにいびつなホームページが出来上がってしまいます。

ページに統一性は無いし、
メニューボタンはやたら多いし、
目的のページたどり着けない…。

ああーーー!!
このサイト見にくい!(怒)

 

こんな風に閲覧者に思われないように、
ホームページの全体像を先に作ってしまいましょう。

全体像を作るテクニックとして『サイトマップを作成する』という手法があります。サイトマップとはホームページがどんなページ構成をしているのかを視覚的に表したものです。

↑こんな感じです。
プロは大体こういった図を作成してホームページ全体の構成をしっかり落とし込んでから実際のデザインに取り掛かります。まずはサイトマップを作成することが、ホームページ作りの第一歩目となります。

 

 

ページそれぞれの設計も考える

ホームページ全体の構成が決まったら、二番目に必要なのは、各ページの設計です。

この設計を考える前にWEBサイトのデザインからいきなり入ってしまう人がいますが、これはよくある失敗の素です。細かいデザインだけにこだわるあまりに全体の構図が訳わからなくなる、なんてことにつながりかねません。

実はこの『設計』も広い意味ではデザインです。『設計』があるからこそ、見やすさが生まれます。

『設計』無しで『イラスト』とか『バナー』とか『ヘッダービジュアル』とかを作っちゃうことは、家を設計図無しでいきなり作り始めるのと一緒です。ガタガタの家ができそうで怖いですよね(笑)。

そこでデザインのプロと呼ばれる人たちはサイトをデザインする前に、まずは『ワイヤーフレーム』と呼ばれる設計書を作成します。

↑こんな感じの簡単なもので結構です。

 

ワイヤーフレームでは以下のような要素を記載していきます。

  • 文章
  • 写真
  • 機能(次のページに行くためのボタンや、SNSシェアボタンなど)

実際に写真や文章を載せる必要は無く、あくまで全体の設計を考えるためのものです。分かりやすくするために骨組みを先に決めると割り切って、シンプルに作成しましょう。

よく練られた設計×デザイン
この相乗効果で見やすいホームページが出来上がります。

ホームページを閲覧する人の目線に立って、「この構成で見やすいかな」「ボタンの配置は分かりやすいかな」などと様々に吟味しながら、設計を進めていきましょう。

 

 

スマホなどでもしっかり見やすく表示されるように

せっかく気合いを入れて作ったページでも、スマートフォンに対応していなかったらこの ご時世では『見にくいサイト』のレッテルを貼られてしまうでしょう。

というのも、最近のスマートフォンユーザーとパソコンのユーザー数の割合を比較した場合、閲覧されるサイトの種類によってはその比率は3:7とも2:8とも言われていて、スマホがかなりの割合を占めてきています。(実際僕が運営している別のブログサイトは8割がスマホからのアクセスです)

したがって、PCで表示されるページをかっこよく作ったとしても、肝心のスマホにしっかり対応してなかったら…

文字ちっさ!

見にくい!

あかんわ、このホームページ

 などと思われかねません。

制作の際にはしっかりと各端末(PCとかスマホとか)に対応されたデザインになるように作成しましょう。

 

レスポンシブデザインが便利!

最近のWordpressのテーマ(Wordpressでホームページを作る場合の雛形のようなもの)や、簡単にホームページを作れるサービスであるWix・ペライチなどは、
レスポンシブデザイン(どんな端末からアクセスしても最適なページを表示してくれる)機能がついたものが多く出ています。ホームページ作りをより素早く行いたいのであれば、レスポンシブデザインはオススメですね。

 

 

各ページのテイストを統一する

さっきまで見ていたページがアースカラーをたくさん使ったオーガニックな感じのおしゃれなページだったのに、違うページへのボタンをクリックしたらギャル仕様な感じのイケイケギラギラのページが現れた。

極端な例ですがこんな場合、「あれれ?違う会社のページに来ちゃったのかな?」とサイトを見に来た人を困惑させてしまします。

複数ページに渡るホームページの場合、それぞれのページが同じホームページであることをしっかりと認識してもらうために、デザイン的な統一を図る必要があります。

フォント、色、素材、全てに言えることですが、後からデザイン上のルールを策定するより先にルールを作ってしまった方が作業も楽だし統一感も出ます。

 

①使用するフォント(文字の統一)

トップページはゴシックが多用されているのに、会社概要のページに行ったら明朝体がたくさん使われていた!なんてことが無いようにしましょう。

もちろん多少フォントを使い分けすることはデザイン上ありです。
しかし、あんまり色んな種類のフォントを使いすぎたり、相性の悪いフォントを使うと見にくさ倍増!

逆にフォントのテイストをしっかり整えるだけで、グッと見やすいホームページに近づきます。文字へのこだわりは意外とバカにできないのです。

 

②使用する色の統一

色も基本的に全ページに渡ってある程度の統一感を持たせる必要があります。
あまり多くの色を使い過ぎず、相性の良い色を3色ほど選ぶのが初期段階では適切なカラーリングです。

基本的な色の割合は、
ベースカラー75%、
メインカラー25%、
アクセントカラー5%と言われています。
この事を頭に入れながら色んなサイトを見ると、こんな割合で作られているから面白いです。ぜひ色んなサイトをチェックしてみてください。
また、相性の悪い色を使ってしまうと見にくさがアップしてしまいます。相性の悪い色使いの例を示しますね。これは色の明るさの組み合わせが正しい場合と間違っている場合の違いです。

これは明るさについての相性の悪さを説明したものですが、これ意外にも『色相(色の種類)』『彩度(色の鮮やかさ)』などによっても相性の違いがあります。

バナーなどのビジュアルだけでなく、ボックスに使う色や、見出しの色、アンダーラインに引く色など、色として統一すべきポイントはたくさんあります、

 

③使用する画像やイラストの統一

ホームページを作成する際には、様々な写真やイラスト素材を使うことがあるかと思います
ある時はカメラマンに撮ってもらった写真素材、またある時は素材サイトからダウンロードした写真、といったようになかなか全てを一箇所の素材元から利用することが難しいこともあります。

そんな時に気をつけたいのが、素材のテイストをある程度揃えること。
多少遊びがあるのは良いことなのですが、あんまり無目的に素材のテイストがバラバラだと、非常に見にくい印象を与えます。

よくある素材選びの間違い!

  • 一部の写真はプロに撮ってもらってその他の写真は素材サイトのものを使ってみたけど全然テイストが合わない
  • 異なる素材サイトから別々に素材を取得した結果テイストが合わない

同じ作家さんのものや、同じ素材サイトのものを使用したり、写真は全部カメラマンに任せるなどすると、テイストのブレは起こりにくくなります。

それが難しい場合は、「この素材同士はテイストが合ってるかなー」と常に確認しながら写真やイラストを使うようにしましょう。

 

 

より見やすいHP作りのための具体的なテクニック

前半では、見やすいホームページを作る際の気をつけるべきことを大まかに解説しました。
後半はさらに突っ込んで、より見やすいホームページづくりのためのテクニックをご紹介します。

 

日本人が見慣れたレイアウトに合わせる

もちろん攻めたデザインをしたっていいんですよ。ええ、僕だってたまにはイケイケなものを作りたくなります。

海外のサイト集なんかを見ていると、めっちゃカッコいいデザインとかもあるし、Wordpressのテーマにもなかなか日本では見ないようなデザインがあったりします。
アーティスト肌な人ほど、冒険したくなる…!!! 分かります、分かりますとも。

が、しかし!
あんまりいつも人々が見慣れていないレイアウトで作成しても、単純に見にくくなってしまうだけ。

『サイトの目的をしっかり叶えられる』
ことがデザインの第一条件であると前半でお伝えしました。

特殊なデザインを用いることが、目的を叶えるために必要な要素であるなら、そうしてもいいでしょう。しかし、特殊なデザインを使う必要が無いのであれば、わざわざそんなデザインにする必要はありません。

もしあなたがホームページ作りに関して初心者であるなら、最初から冒険するのは難しいかもしれません。ターゲットとするのが日本人であれば、日本人の人が見やすいように全体のレイアウトを考えましょう。

 

メニューボタンは多すぎないように

たまに見かけるのが、やたらとメニューボタンが多いホームページです。
主要なページへと遷移してくれるメニューボタンは、ホームページにおいて大事な要素。
しかし、このメニューボタンが多すぎると混乱を招いてしまいます。

メニューボタンは多くても7つまで、
5つ以下だとよりシンプルな印象を与えます。

どうしてもたくさんのページをメニュー上に表現したい場合は、サブメニューとして作成するなどして概念的なまとまりをつけると良いですね。

 

スマホはメニューがどこにあるかがすぐ分かる事が大事

スマホでホームページを閲覧する場合、「あれれ?メニューボタンどこいった?」と探すことはありませんか?

そんな状況を回避するために、最近のホームページのスマホ表示時には、『TOPへ戻る』などのボタンがついていてすぐにメニューがある上部に戻ることができるサイトも多く見られます。

またメニューをヘッダー部分に表示せずに、ハンバーガーメニューと呼ばれるメニュー専用の箇所に格納したり、その部分がページを下にスクロールしても追従してくる仕様にするなど、様々な工夫が見られますね。

どんな方法を取るかはホームページの目的にもよりますが、重要なのはユーザーを迷わせないことです。

 

 

お問い合わせボタンなどは他のボタンと分ける

『お問い合わせはこちら』『資料請求はこちら』などのボタンが、他のメニューと独立して目立つように配置されているのを見たことは無いでしょうか?

ホームページを閲覧しにくるユーザーは、基本的にはあなたのホームページに興味を持ってくれている人です。そんな人は「お問い合わせはどこかな」「資料請求したいな」などと考えている可能性が十分にあります。

例えばあなたが、子どもに習い事をさせたい場合、サイトがこんな感じだとちょっと分かりにくく感じるかもしれません。


そこで以下のように、お問い合わせボタンだけ独立して表示させると…お問い合わせボタンが分かりやすくなりましたね。
閲覧者にとって一番気になるであろうページ、またホームページを運営する側としても一番見て欲しいページへのボタンを目立たせておくことは、使いやすさ・見やすさにつながります。

 

適切なボタンデザインを選ぶ

メニュー部分だけでなく、『もっと見る』ボタンなど、次のページへ行くためのボタンがホームページには存在します。

ボタンの表現には様々なものがありますが、どれも絶対正解というわけではありません。
ホームページのデザインにマッチしていて、且つ「これを押せば次のページに行けるんだな」とはっきり分かっていれば良いだけです。

ここでは様々なボタン表現を紹介します。
よりホームページ全体として見やすく、そして使いやすくなるようなボタンのデザインを選びましょう。

 

①シンプルな囲いボタン

②矢印付きボタン

③ボタンらしい立体ボタン

④ホバー時(カーソルを当てた時)に色が変わるボタン

 

対象に合わせた文字サイズを選ぶ

あなたのホームページを見てくれる人は誰でしょうか?若くて意識高い系のビジネスマンでしょうか?それとも、行楽シーズンに町内会で行く旅行先を探している比較的高齢の方でしょうか?
ホームページで意外と忘れがちなのは『文字のサイズ感』。文字のサイズ感はホームページを見る人に合わせる必要があります。

ホームページを見る人が高齢であることが予想されているにも関わらず、ページに表示されている文字が小さかったとしたら…

よ、読めない…

と、こんな印象を与えてしまいます。

ホームページを作る際には、ホームページを見る人は誰か?を常に意識しながら文字のサイズにまで気をつける必要があります。

文字サイズはどれぐらいが最適?

Googleも読みやすい文字サイズを定めています。
それに従うと16pxが良いサイズとなります(ちなみに今ご覧いただいている本文のサイズが16px)。ちょっとおしゃれなブログサイトとかだと14pxを使っていたりもしますが、見る人によっては見にくいかもしれません。常に見る人の立場に立ちながら、文字サイズを決めていきましょう。

 

 

改行・箇条書き・スペースを意識して使う

ホームページは読むものではありません。見るものです。人は視覚的に情報の必要性を判断し、必要だと思った箇所のみを読みます。

あなたも新聞や雑誌を読む時はそうですよね?多くの人は小説をじっくり読むようにホームページの文章を読んでくれるわけではありません。

したがって、ホームページの文章は視覚的に整理されている必要があります。

 

【ダラダラ書かれた文章の例】

 

【適切な箇所で改行を入れた例】

 

【さらに箇条書きを用いて整理された例】

 

 

より良いホームページ作りのために

今まで見やすいホームページ作りについて解説してきましたが、もっとホームページを見やすくする方法があります。それは『他人に聞いてみる』こと。

自分や、もしくは自社内だけで制作をしていると、つい自己満足に偏ったものが出来上がりがちです。そうならないように他者の目線をしっかり入れることが重要となります。

 

自社のサイトが見やすいか顧客や他人に聞いてみる

担当者やその上司のレベルで確認を終えてしまい、満足に浸ってしまう…。
一生懸命自社で作成したサイトであればあるほど、そんな風になりがちです。

そんな状態に陥らないために、勇気を出して他人に聞いてみましょう。
WEBサイトが対象とするターゲット像に近い人に「このサイト見やすいですか?」「このサイトが最も伝えたいことが伝わってきますか?」などと質問してみるといいでしょう。
デザインの狙いが正しかったのかを知る良いきっかけになります。

また他部署の人にアンケートを一斉メールで流して意見を募ったり、社員の家族に聞いてみるのも1つの手です。あなたのホームページづくりに関係が無い人たちは意見が偏っていないので、思わぬアイデアをもたらしてくれることがあります。

 

無料で使える便利なアンケートフォーム

「一斉にアンケートを取りたいんだけど、便利な方法はないかな…?」
そんな風に思った事はありませんか?

実は、あります。
しかも無料で。

Googleフォームと呼ばれる、Google社が開発し無料で提供しているものです。
アンケートページを簡単に作成することができて、しかも回答結果が自動的にスプレッドシートと呼ばれるエクセルシートのようなものに書き込まれる仕様の超便利なヤツです!

【Googleフォーム】
https://www.google.com/intl/ja_jp/forms/about/

例えば社内スタッフ100人にこのGoogleフォームで作ったアンケートを一斉配信し、その100人が返事をくれた場合、自動的にアンケート結果が表になって現れます。

より多くの人からの意見が欲しい場合は、利用してみる価値アリですね!

 

 

データから読み取る

データは様々な事を教えてくれます。
ちょっと上級編になるのですが、データからページデザインの良し悪しを類推することができます。

例えば、Googleアナリティクスという解析機能をサイトに導入すれば、サイト訪問者数や滞在時間、直帰率(最初に訪れたページから違うページに遷移することなく、そのままサイトを離れた人の割合)など、様々なデータを確認することができます。

Googleアナリティクス
https://analytics.google.com/analytics/web/?hl=ja#/

特定のページアクセス数を確認したら、思うようにそのページが閲覧されていないと分かったとします。その場合「最初のページが分かりにくいから、他のページを見る気を無くした」「次のページに行くためのボタンの配置が分かりづらい」と課題を類推することが可能です。(※『類推』と表現したのは、他にも課題がある可能性があるため。デザインだけが課題ではない場合もあります)

ホームページは作成よりも運用が大事です。作っておしまいではなく、意見やデータを取り入れながら、より良いサイトに更新していきましょう。

 

 

まとめ

これまで見やすいホームページの作り方を解説してきました。

①ホームページの目的を定める
②構成や設計をあらかじめ作成する
③文字、色、素材に統一感を持たせる
④スマホ表示にも対応させる

まずはこれだけでも十分に見やすいホームページが作成できるでしょう。
その上で、より細かな『ボタンの配置』や『文字サイズ』などにこだわればいいかと思います。

そして見直しをする際には、他者の意見やデータを参考にして、自分たちだけの主観で判断しないこと!これを守っていれば、徐々に効果の高いホームページに育っていくはずです。

あなたのホームページが成功することを祈っています!

 

 

ABOUT ME
マエダソウイチロウ
マエダソウイチロウ
WEBマーケティングユニットmusubuのグラフィック&ウェブデザイン担当。我が子と遊ぶのが好きすぎて、「どっちが子どもか分からん」とよく言われる。「お腹すいた」が口癖なので、街で見かけたら好物のカレーを奢ってあげてください。