ハローハロー

ご無沙汰しております。
デザイナーの小山です。

梅雨が明けました！
なんだかんだ梅雨明け宣言の前から梅雨明けた感はありましたが、、いよいよ夏到来ですね。
これをお読みの皆様はこの夏何をする予定でしょうか。
実りある夏になると良いですね。

私といえば、最近は花火大会というワードを聞くだけでピリついております。
あーヤダヤダ。
独り身には無縁のイベントでございます。
一度、単身で花火大会に臨んで、世界から隔離された感じを味わいましたので、独り身の皆様は家から花火を見るに留めておくことをオススメします。

閑話休題

今日の話題

これまでのブログでもたまに口にしておりますが、HPは目的によってデザインが変わります。

なにを伝えたいのか、
どこを強調したいのか、

そこになぞらえたデザインにすることで、ユーザに与えたい印象を与えることができます。

そこで今回は内容は近いものの、ターゲットが違う２サイトを引用し、そのあたりに関して少し説明させて頂きたいと思います。

今回題材とするのは以下の２サイトです。
どちらも同じ、この夏限定の脱毛キャンペーンのサイトとなります。
まずはぜひ一度ご覧頂けますと幸いです。

・脱毛キャンペーン・特典 | 美容脱毛サロン ミュゼプラチナム
・グランモアのていねい脱毛 – きちんとキレイになりたい人のための脱毛プラン

この２サイト、見比べると企業として方向性が違うようです。
前者は全国に幅広く展開し、安価で手頃なサービスを強みに展開する企業様、後者は全国に展開はするものの店舗数は少なく、質の高さを強みにサービスを展開する企業様と言った感じです。

同じ脱毛キャンペーンでも強み（＝強調したいところ）が違えばデザインが変わってきます。
例えばこの部分。

メインイメージのデザインについて

ページを開いてまず目に飛び込んでくるメインイメージ。
この画像一つ取っても、①の前者は金額が他の情報と比べてとても大きく表示されてます。金額の安さが売りなのですから、ここは目立たせていきたいわけです。
対して②の後者は金額に色はついているものの、そこまで大きさや文字の太さなどに違いがありません。
サービスの金額、という意味では重要ではあるものの、そこが一番強調したいところではないようです。

それぞれ少し下に行くと、キャンペーン内容の説明になりますが、

レイアウトについて

①の前者は再度金額を強調されています。また３箇所の脱毛ができるとのことで、お得感を強調するようなレイアウトがされております。
②の後者は他店との違いやどういったサービスを展開しているのか、など自社のサービスの説明がされております。質の高さを強調するコンテンツが並んでおります。

フォントについて

後者はご一読頂くと分かる通り、質の高さを伝えるために全体的にテキスト情報が多いです。
そこでお客様の声の部分など、役割が違うテキストごとにフォントを変えて、退屈な印象を避けているようです。
一つのページ内にあまり多くのフォントを入れるのは、読みづらくなる可能性もあるのですが、こちらのサイトでは役割の違いという規則性に基づいてフォントを変えていることもあり、分かりやすさが増しています。

まとめ

ここまで３点ほど説明してまいりましたが、結局伝えたいことは一つです。

HPは目的に応じてデザインが変わる。

HPを作る際はどんな人に何を伝えたいのかが明確であればあるほど、内容に適したデザインの素敵なHPになるかと思います。
デザインを勉強されている方、HPを作ろうと考えている方の何かの際の肥やしにでもなればと思い、説明させて頂きました。

最初にも述べましたが、梅雨明けて夏突入です。
夏バテに気をつけて夏をお楽しみください。

ではでは。