サイトのビジュアル分析

DESIGN 2016年4月29日

今回は、既存のサイトひとつ取り上げ、そのサイトの装飾面からいろいろ読み取ってみようと思います。
今回、分析対象サイトとして選ばせていただいたサイトはこちら！

「ヒノヨコ.com」様です。
http://hinoyoko.com/

装飾の分析に入る前に、どのような目的を持ったサイトなのかを簡単に説明します。

サイトの目的

“「より良い親子関係」を築くために、ママパパが「今する大切なこと」を伝えます。”
引用：ヒノヨコ.com 『活動の目的』より

ターゲットは「子育てをはじめる母親」で、「セミナー講師の依頼」「個別相談」のお問い合わせをコンバージョンとしているサイトです。

それでは、ここから装飾面の分析に入っていきます。

メインカラーは温かみのあるオレンジが使用されています。auのサイトと比較してみると、ややパステルよりな感じが見て取れると思います。ヒノヨコ.comのほうは、「やさしい・温かい」などの印象を与え、auのほうは、「友好的・信頼」などの印象を与えます。

次に、テクスチャの使われ方についてです。手作り感を演出するために、様々な場所にテクスチャがふんだんに使用されています。サイト全体の背景や、コンテンツの背景、イラストや見出しにもうっすらとですがテクスチャが引かれています。これだけテクスチャを盛り込むことで、温かいアナログ感を出しています。

ここからは、もう少し細かいところをフォーカスしていきます。

不規則に、濃淡を出すグラデーションがついており、絵の具やペンで文字を書いたときにできる「インクの溜まり」が表現されています。

フォントの下には薄く伸ばした絵の具が引かれており、背景とのコントラスト差を抑えているので、とても目に優しいと感じました。

これだけ、「アナログにこだわっていてすごい！」というのであれば、「実際絵の具で書いてスキャンすればいいじゃん」と思うかもしれませんが、デジタルフォントを用いることで、視認性や美しさ・上品さは残しつつ、手作り感を表現しているのだと思います。

温かさだけでなく、子育ての楽しさや、子どものにぎやかしさも取り入れているところもいいですね！

最後にまとめです。

上記で挙げた内容のとおり、とにかく「細部まで徹底された手作り感」。それで「親子の温かい関係性」を表現しており、それが、「ターゲットユーザー」つまり、子育てをはじめる母親に共感を与えコンバージョンに繋げているのではないか、と考察しました。

※今回の記事は、あくまで私個人の主観による考察です。実際にこのような意図でデザインされたというものではありません。

サイトに温かい印象を出したいとき、手作りっぽさを出したいとき、そんなときの参考にしてみてはいかがでしょうか。

【今回参考にさせていただいたサイト】
ヒノヨコ.com 様：http://hinoyoko.com/

03 posts

たいぽぐらふぃがすきです。