WEBサイトのデザインを作る

この記事を読むのに必要な時間は約4分です。

このページで分かること

1 WEBデザインの重要性
- 1.1 テーマカラーを決める
- 1.2 サイトのテイスト（雰囲気）を決める
2 WEBデザイナーおすすめホームページ制作

WEBデザインの重要性

それでは、ホームページの顔やイメージとなるデザインを作りましょう。
色はとても大切な要素ですので、慎重に決めましょう。

また、販売する商品や提供するサービス・お店の雰囲気などに合わせたデザインにすることで、一体感や統一感がでます。

テーマカラーを決める

メインで使用するてーまカラーを決めます。
ロゴがある場合はロゴのカラーに合わせるのがおすすめです。

ロゴがない場合は、実際の店舗の雰囲気や販売する商品のパッケージのカラーなど統一感のある色を選ぶのがポイントです。

赤	情熱をあらわす色です。また、存在感が強いのでインパクトのあるサイトに仕上がります。落ち着いたワインレッドなどを使用すると高級感のあるデザインになります。
ピンク系	濃いピンクだと明るく元気なイメージになります。薄いピンクは優しい女性的な雰囲気になるので、エステ・美容系・幼稚園・病院のホームページなどでよく使用されます。
橙・オレンジ系	明るく活発的なイメージになるので、幼稚園のサイトなどでもよく利用されます。また、ポップな雰囲気を出したいときにはとてもおすすめです。
青・ネイビー・紺系	クールなイメージや固いイメージを出しやすいカラーです。会社サイトや病院・歯科などのホームページでよく使われています。薄めのブルーにすると、青空のような爽やかなイメージに仕上がります。
緑	森林のイメージから癒し系のサイトによく利用されます。緑は総合的なイメージを持っているので、ポータルサイト・役所などにもぴったりのカラーです。深緑・抹茶色など濃いめや暗めのグリーンにすると、和風テイストになります。
紫	濃い目の紫は華やかで高貴なイメージに仕上がります。また、紫は独特な雰囲気を出すのが得意なので、ミステリアスなイメージに仕上げる場合にも向いています。紫とゴールドの組み合わせでも高級感のあるデザインが演出できます。
茶・ベージュ系	落ち着いた雰囲気のデザインに仕上がります。濃いめの茶色は高級感を出すのも得意です。また、木をイメージしたナチュラルな雰囲気に仕上げるのにもおすすめです。暖色系なので、赤やオレンジとの相性もよく、温かみのあるデザインにも向いています。
白	色は純白や清潔感のあるサイトにぴったりです。どんなカラーとも相性が良いので、あわせる色によってまったく違った雰囲気のデザインになります。
黒・グレー系	黒とグレーは、落ち着いた雰囲気・高級感を出すのに効果的です。また、どんな色とも相性が良くバランスがとりやすいので、とても使いやすいカラーです。ただし、黒は使い方によっては暗いイメージや怪しいイメージになるので、スタイリッシュ、シャープ、シンプルなどのデザインや高級感のあるデザインになるように注意が必要です。

サイトのテイスト（雰囲気）を決める

ホームページの内容によってどのようなテイストのサイトにするかを決定します。

会社サイトなら固めで清潔感・信頼感のあるテイスト。
女性向けのエステサロンなら、丸みのある綺麗で優しい雰囲気のテイスト。

などホームページのテイストや雰囲気によって、ユーザーに与えるイメージは大きく変わってきます。
提供する内容やサービスにあったテイストに仕上げるのがポイントです。

高級感のあるサイト	ワインレッド・ネイビー・黒などの濃いめのカラーを使用すると高級感がでます。細部に陰影を使ったり、アクセントにゴールドカラーなどを利用すると高級感ができます。文字は明朝体がおすすめです。
シンプルなサイト	使用するカラーは多くなりすぎないように注意してください。全体的に空間や余白をうまくデザインすることが大切です。シンプルすぎても単調でつまらないデザインになってしまうので、ところどころに遊び心があると楽しいサイトに仕上がります。文字はゴシック系がおすすめです。
スタイリッシュなサイト	細かい部分まで気を使ってハイセンスな洗練されたデザインに仕上げるのがポイントです。アートやファッション・美容室などのおしゃれなサイトを参考にしてみてください。文字はゴシック系がおすすめです。
ポップなサイト	ビタミンカラーと呼ばれるビビットな赤色・青色・黄色・緑色などを使用して明るく元気なイメージで仕上げるのがおすすめです。文字は太めで手書き風やポップ体が合いやすいです。
優しく柔らかいサイト	薄めのカラーを使用して、全体的にやわらかい雰囲気に仕上げるのがおすすめです。角丸デザインなどを使って、丸みのあるデザインに仕上げても優しい感じがでます。文字は丸ゴシックなどがおすすめです。