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

基本情報

サイト名・企業：たかしま農園

URL：https://www.takashima-nouen.com/

ターゲット予想：キッズ・20～30代前半のファミリー

目的：食・食材にこだわる方や、トマト嫌いの方を持つファミリーにフルーツトマトを知っていただき、購入を促す。

サイト構成：1カラム

デザイン・配色

■カラー

背景色は白にし、フルーツトマトを想起させる「赤・緑」をより際立たせている。

■主要フォント

見出し：独自フォント使用

ロゴと合わせた独自のものを使用することでトーンを統一している。

本文：FOT-筑紫A丸ゴシック Std M / フォントサイズ16px

デジタルフォントの標準的な丸ゴシック体とは一線を画す書体です。現代の感覚で味わい深い丸ゴシック体を設計しました。ふところの広い現代風なデザインではなく、ふところを絞ったデザインの丸ゴシック体です。「漢字」は幾何学的な直線処理ではなく、温かみのある丸みを帯びたラインを意識して設計しています。「かな」はニュートラルなデザインです。
文字を組んだときの書風は格別です。（引用先：Fontworks）

可読性もありながら、温かみのあるフォントを使用し、親しみやすい印象を与えている。

考察・感想

■ページ全体の構成

ファーストビュー→ヘッダー・ナビゲーション→ピックアップ商品→特集コンテンツやニュース→トマト紹介動画→商品紹介→ブログ記事→通販→求人→フッター

■ファーストビュー

キャッチコピー「なんでも甘く濃く作る農園」・メインビジュアル・独自イラストを配置

・主力商品であるフルーツトマトの「真っ赤」とフレッシュさが際立つ写真をメインビジュアルにすることでインパクトを持たせている。また、画像を左寄せ・一部角丸にトリミングさせることでやわらかさ・温かみあるファーストビューになっている。

・農園ロゴとナビゲーションをヘッダー、ファーストビューに置かず、商品のトマトに焦点を当てる構図になっている。

・メイン画像下部にスクロールを促すあしらい（モーション）をつけることでインパクトをそのまま残しつつ、自然にナビゲーションへ誘導している。

・独自のイラストを使用しており、ポップで親しみやすくワクワクするようなものになっている。

■ヘッダー・ナビゲーション

・ナビゲーションの商品と特集部分にホバーさせると写真付きで詳細カテゴリーを表示させる使用になっており、文字で見るよりもより分かりやすい工夫がされている。

■メイン
・各セクションに商品が映える写真と、トーンをあわせた「あしらい」を使用し、最後までワクワク感を継続させる工夫をしている。

・一番推したい部分（商品紹介）のみwidthフルにより目立たせ、インパクトがあり、メリハリのあるデザインにしている。