サイトのビジュアル分析

サイトのビジュアル分析

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

サイト分析_ol-02

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

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

サイトの目的

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

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

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

サイト全体の装飾

①メインカラーは温かみのあるオレンジ

サイト分析_ol-03

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

②手作り感を演出するテクスチャ

サイト分析_テクスチャ

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

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

細部の装飾

①アナログで書いたような見出し

サイト分析_手書き文字

特徴1.ばらつきのあるグラデーション…インクの溜まりを表現

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

特徴2.背面に薄く延ばした絵の具…背景とのコントラスト差を抑える効果

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

特徴3.あえて本物の手書きにしない…手書き感を出しながら、デジタルの視認性もあわせ持つ

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

②楽しさをプラスするイラスト

サイト分析_イラスト

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

細部まで徹底された手作り感

最後にまとめです。

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

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

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

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

 


Previous: React.jsだけで作る!バリデーション付きフォームの作り方! Next: 見やすいデザインの一歩!余白を活かそう!

© 2017 ALL CONNECT Inc. All Rights Reserved.