見出し画像

【サイト分析】食材から学び、製菓・製パン・調理・カフェのプロになる | 大阪農業園芸・食テクノロジー専門学校

概要

  • 業界/業種:学校/教育

  • テイスト:ポップ/遊び心がある/親しみ

  • 制作会社:UNIONNET Inc.

第一印象

キャッチーなタイトルが目を引き、人物や食材の切り抜きが大胆にあしらわれていて楽しそうな印象を感じる。人物や食材の切り抜きはふわふわと動き、より手の込んだ賑やかなビジュアルに仕上がっている。サイト全体に適度なアニメーションが実装されていて、遊び心のあるサイトに仕上がっている。

ターゲット/目的

専門学校の紹介サイトで、ランディングページの構成となっている。各コースの紹介と授業内容が主なコンテンツとなっていて、料理のプロを目指す学生がターゲットとなっていることが予測できる。特に在校生へのインタビューが多く載せられていることから、実際の声や顔が見えて安心感がある。それによって、ほかの専門学校と比較している人に対して後押しするような効果が期待できる。

在校生へのインタビューが盛り沢山

使用フォント

  • 日本語:Noto Sans JP(タイトルは不明)

  • 英語:Jost

「食のすべてをプロデュース!」というタイトルは作字で、キャッチコピーとして目を引くように作りこまれている。CTAもフォントは不明だが本文と変化をつけていて、工夫がみられる。

作りこまれたタイトル
本文と異なるCTA見出し

配色

  • ベース:#FFF(白)/#F5F4F4(グレー)

  • メイン:#F46262(ピンク)

このほかにアクセントとして各コースを象徴する3色のカラーが使用されている。

  • 農業・健康:#7EBF4E(緑)

  • 食ビジネス・カフェ経営:#6E92F2(青)

  • 製菓・調理:#F7806A(ピンク)

デザインポイント

  • ファーストビューでは人物や食材の切り抜きがふわふわと動き、また、ぼかしをかけた食材を使用することで遠近感のある奥行きを感じる空間を演出している。

目玉焼きにぼかしをかけることで、手前にあるような感覚が強くなる
  • ファーストビュー下部のイントロダクションでは、アイコンを文章に挟むことで全文を読まなくても直感的に内容が伝えられる効果が期待できる。

ポップで可愛いアイコンでポジティブな印象
  • 文字スライドであったり、写真まわりに食材の切り抜きをちりばめることで、ファーストビューのイメージをサイト全体に引き継いでいる。

食材の切り抜きを活かした表現その1
食材の切り抜きを活かした表現その2
食材の切り抜きを活かした表現その3
  • CTAではホバーすると食材がふわっと出現して、ボタンアイコンが回転する。サイト全体の動きが多めなので、CTAではアニメーションを二重で取り入れて、目立つようにバランスを保っている。

デフォルト
ホバー時

この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?