サイトレビュー#4 たかしま農園

サイトのジャンル

農業

サイトの目的

・農園や、作っている商品についての情報の発信

ターゲット

・商品(トマトなど)の購入を考えている人

気になったポイント

■メインビジュアルに表示される吹き出し
トマトの販売状況がメインビジュアルですぐに分かるようになっている。(トマトの購入を目的にサイトを訪れる人が多い?)
単にお知らせとして表示するのではなく、トマトのキャラクターのセリフというていで表示しているため、親しみがある。

■メインビジュアルのアニメーション
下からトマトが飛び出してくることで、メインビジュアルの下に何かがあることを予感させる = スクロールを促す効果があると思われる。

■ナビゲーションの位置
ナビゲーションをページの上部に配置するWebサイトが多い中、このサイトではメインビジュアルの下に配置している。
メインビジュアルがしっかり見えるため、ファーストビューの色鮮やかで美味しそうなトマトが印象に残る。
スマホ幅ではメニューが少し見つけにくい気がする。
(※下層ページではヘッダーに表示。SPでは固定されている。)

■「TOMATO」の「O」がハート
所々で、TOMATOの「O」がハートになっている。
見た目に引っ掛かりができて、遊び心を感じる。
また、ハートの形はトマトのイラストなどにも使われていて、サイトのメインモチーフとしても機能している。

■「大事なお知らせ」のアイコンとインタラクション
「たかしま農園ブログ」の中でも、商品の販売に関わる記事には「大事なお知らせ」のアイコンが付く。
商品の情報を求めてサイトを訪れるユーザーが多いため、より目に付きやすくする意図が感じられる。

■商品情報のアイコン
各商品には「販売中」、「販売終了」のアイコンがついている。
気になった商品を購入しようとクリックしたら販売終了していた というような事故を防ぐことができる。

まとめ

イラストやインタラクションがうまく使われていて、トマトの販売状況などについて知りたいユーザーが迷わず情報にアクセスできるよう工夫がされているのが良いと思った。
#1 ていねい通販の分析の時にも思ったけれど、キャラクターやイラスト、インタラクションを使って親しみを出すことで、ただ商品を買うだけでなく、ブランドのファンを増やすことにも繋がりそうだと思った。

デザインメモ

・ある程度ウインドウの幅を狭めると横スクロールが発生するようになっている。(デザイン性を重視する場合はリキッドデザイン?にして、どの幅でもうまく表示されるように細かい調整を行うより、幅を固定してしまった方が良いということもある?)
・イラストをよく使うサイトでは、パターンを使うとサイト内のあしらいやモチーフをうまく利用しつつポップな印象にできる。