開け第三眼!著者みいの、webサイト分析(お茶HP編)



わたしはお茶が好きです。ジャスミン茶、玄米茶、緑茶、さいきんのヒットはとうもろこしのヒゲ茶!!って訳で今回のHP観察と考察はお茶のHPです。

雑誌の様なレイアウトが美しく目を引く!流儀にこだわらないモダンさを打ち出したHP

お茶・紅茶・茶器のティーイズム


http://www.tea-ism.com/

HP分析

  • 雑誌の様なレイアウトがパッと目を引きました。あまりHPでは無い組み方が、とても綺麗だと思いました。
  • お茶の葉っぱを入れた丸いお皿とブログへのリンクのボタンの丸が同じ形で出来ている為、自然に視線が誘導されました。
  • 大きいブラウザで表示させると右の空間の空きがやはり少し気になりました。大きめのブラウザ用に、body部分のレイアウトは右寄せで背景色を指定したりすると、さらに美しくなりそう。と感じました。

茶道の持つ静粛なイメージと現代性を融合させた綺麗なホームページだと、思いました。横読みだと人間の視点は左上から右下に自然と移動するものだけれど、右寄せはモダンなイメージがでやすいものなのかしら??

上品さの中にほんの少しの遊び心のあるHP

Mothers Inc.

Top

紅茶専門店の紹介ページ

http://www.mothersgroup.jp/

HP分析

  • とてもシンプルなグローバルナビゲーションの作りでありながら、洗練されている印象を受けました。セリフ系文字と淡いベージュのグラデーションで上品さがでているのだと感じました。
  • トップにグリットを使っているのですが、お知らせやTwitterウィジェットの組み込み方が面白いです!グリットの一部の様に扱っています。あまり見かけない使い方な気がします。
  • マウスオーバーすると出てくる日本語表記の吹き出しもとても可愛く、シンプルな中にもカジュアル感のある雰囲気が出ています。また、見る人に優しいです(^^)こういった表記の仕方もあるのだなあ、と思いました。
  • クリックしている部分は黒で表示され、ベージュと黒との色合いがきれいな色合いだと思いました。(カジュアル感はここでも出ている??)

会社のHPなのでシンプルさや上品さがまず目につきますが、写真の使い方や、マウスオーバーすると出てくる吹き出しなどで、遊び心も感じられる作りになっているなあ、と思いました。
会社のカラーによってはこういった表現もアリなんだな、と発見した気分です。

整然とした中にあるこだわったグラフィックパーツで魅せるHP!

お茶百科

日本語Top

http://ocha.tv/
伊藤園が運営している、お茶の事について色々と書かれたHP。レシピやおいしいお茶の入れ方、お茶にまつわることわざなんかも掲載されています。
HP分析

  • グローバルナビゲーション上のヘッダーとのつなぎ目は山を表しているのかな?と思いました。
  • ぱっと見るとシンプルで整然としている印象を受ける。しかし、一つ一つのパーツを見ていくと、イラストが入っていたり、文字も装飾がほどこされていたりしている。
    整然とした印象を受けるのは、「整列」や「反復」の法則がきちんとページ内で使用されているからだと感じました。
  • パーツの一つ一つがこだわってデザインされています。「和」のデザイン、その中でも「親しみも感じさせる」デザインだと感じました。ちりめん紙のようなテクスチャの使用や、いろいろな色の使用、模様、イラストなどがそう感じさせているのだろうと思います。

美しい写真を全面に出し、日本茶の良い点を視覚でも美しく分かり易く伝えたHP!

同じHPの英語版です。

英語Top

http://www.itoen.co.jp/eng/allabout_greentea/index.html

  • こちらは同じサイトの英語ヴァージョンです。全体的に日本語版よりも写真の扱いが大きかったです。外国の方に日本茶を知ってもらうにはこういったビジュアルを全面に出していく方がより、日本茶に興味を持ってもらえるきっかけになるのかな?と感じました。
  • トップのスクロールで葉っぱが外に向けてひらひらと飛んでいく動きが面白かったです。

情報のまとめ方がすごい!と思いました。デザインする。ってこういう事なんでしょうね。。
各パーツ同士がコンクリフトを起こさず、きちんと機能している感じ。。勉強になる部分が沢山ありました。

お茶のHPを沢山見てのまとめ

今回は動きなどで面白いと感じたものよりも、webでよく見かける形をとりながら、その中でどれだけきちんとデザインがされているかどうか?という点に目がいきました。たくさん参考になる部分がありました!限られた制約の中で、どう伝えたい物を視覚を通して明確に伝える事が出来るか考えるのは、自由自在にできるようになれば、きっととってもわくわくする事なんじゃないかと思います!

コメントを残す

メールアドレスが公開されることはありません。