1. HOME
  2. B'scre8
  3. ホームページのデザインやレイアウトを良くするには?
B'scre8

ホームページのデザインやレイアウトを良くするには?

こんにちは。デザイナーの野尻です。
今回は、ホームページづくりの醍醐味でもある(作り手として)デザインやレイアウトをよくするための基本やコツをいくつか紹介したいと思います。

デザインの基本

ホームページを作り始める前に、大前提として最初にやるべきこと、それはホームページの「目的」を決めることです。
どのようなデザインやコンセプトにするかを決めるためにも、「目的」が必要です。
「目的」の具体的な決め方、考え方はこちらの記事をご参照ください。
そのうえでデザインをよくするためのコツは下記となります。

①シンプルなデザイン

多くのものを伝えたいと思うあまりに一つのページの中にたくさんの情報を入れ過ぎてしまうと、本当に伝えたいことが伝わらないということになりがちです。
伝えたいものを目立たせるためにも適切な情報量をかつシンプルに掲載することが望ましいです。

②Webトレンドを取り入れる

Webの世界は「日進月歩」ならぬ「秒針分歩」といわれるくらい進歩が早く、トレンドとなる技術も移り変わりが激しいのが実情です。
最新のウェブサイトを見て、今Webサイトにどんな表現が使われているかを見ておくと、素敵なデザインにつながります。

レイアウトのコツ

①情報の重要度を考える

ホームページをみるとき、実はユーザーは特定のパターンに沿ってウェブページを見ています。
例えば、ページをみたとき、ユーザーは「左上から右下」に向かって順に情報を見ているという統計があったりします。
これらを事前に理解したうえでレイアウトを考えると、特に重要なものをより効果的に目立たせることができます。
デザインを行う際には、まず提示すべき情報を厳選して優先度をつけて行きます。
ここで重要になってくるのがホームページの「目的」です。
ユーザーがホームページの「目的」を達成してくれるような情報を適切に配置することが肝心です。(ここが一番むずかしいところでもあります)

②様々なデバイスに対応する

まず、モバイル対応は今や標準といえます。
PCやモバイル・タブレットなど、さまざまなデバイスに応じて表示を変えるデザインのことをレスポンシブデザインと呼びます。
しかし一からレスポンシブなホームページを作ろうとすると単純に考えてPC・モバイル・タブレット3通りのデザインが必要となり、単純なページでも意外とコストがかかったりします。
そのような場合、予めレイアウトが完成されたレスポンシブデザインのテンプレートを利用することで、低コストでかっこいいホームページが作れるのでおすすめです。
当社では、テンプレートを用いたサイトリニューアルを「月額ホームページリニューアルサービス」として提供しています!
ご興味がありましたらこちらをご覧ください。

③余白と色調を意識する

重要な情報のまわりには、十分な「余白」を取ることが大事です。
行間や空白で見てほしいキャッチフレーズを大きく目立たせることができます。

また配色選びはとても重要で、色によってイメージが異なります。例えば、赤には「情熱、重要、勇気」のイメージがあり、青には「信頼、誠実、開放感」などのイメージがあります。
注意したいのは、「色に頼り過ぎたデザインとしない」ことです。
コンテンツを色分けしすぎてしまったとき、レインボーなカラーのサイトになってしまい、目がチカチカして見づらいとなってしまうことがよくあります。
原則としては、「色分け」より「色の濃度」で考えたほうが良いデザインとなります。
例えばサイトをそのままモノクロにしても強弱がよくわかるサイトが望ましいです。

簡単ではありますが、ホームページのデザインやレイアウトを良くするためのコツをいくつか紹介させていただきました。