見出し画像

website見る練習02

00.選んだサイトはこちら!

01.このサイトを選んだ理由

コーポレートサイト(企業の基本情報を掲載し、「何をしている企業なのか」を知ってもらうためのWebサイト)は、情報量が多いのでどういうレイアウトや中身の区分けをしているのか勉強になると思ったからです。

02.概要

農業、園芸、飼肥原料、住環境など、各事業分野のリーディングカンパニーを目指している複数の企業が集まってできた会社?
それを説明するサイト

03.目的

会社のクリーンなイメージを伝える。事業を的確に言い表す。

04.ターゲット予想

大学や企業、大学生

05.ファーストビュー

・キャッチコピー「新しい種を植えよう。」リード「豊かな実りは、種を植えることからはじまる。いまよりもっと⼼地よい暮らしを育むために、さあ、未来に新しい種を植えよう。」

・大きな写真が時間で入れ替わる「食べる」写真と「育む」写真。
・写真は半分のみ見えて、右のほうに「scroll」というアニメーションがあって下に次にとワクワクさせる

・FVに「ブランド」ボタンと「ニュース」のポップアップがあった。「で?何を作ってんの?何のサービス?」という素早く結果を知りたい人向けに、サイトは情報が多いから核心を突く内容はボタンやポップアップにして、すぐに結果を閲覧できるようになっている

・写真のクリッピングマスクは、ロゴの山のような波打った線と同じ形となっている

06.ナビゲーションメニュー

最近よく見る、ナビゲーションにホバーさせると幕が下りてきてさらに中の階層のナビゲーションが写真付きで大きめに表示されるという表現。最近やたら見る。
ホバーさせると緑に代わる。お問い合わせだけ初めから緑でホバーさせると茶色になりさらに紙飛行機が飛ぶ。これはアニメーション?

07.フォント

英数字:Poppins

Poppinsはその名の通り、ポップでエネルギッシュな印象のフォントです。

デザインに抑揚や賑やかしを出したい時、良い効果を発揮するフォントとなっています。

https://muugmuug.com/design/googlefonts01/

見出し、本文、その他:Noto Sans JP

FV…48px
リード…18px
中見出し…28px
本文…15px
その他…14~19px

08.配色

#168352 緑 メインカラー
#251E1C 黒 文字カラー
#473221 茶 アクセントカラー


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