![見出し画像](https://assets.st-note.com/production/uploads/images/24819590/rectangle_large_type_2_7605b9ab5fa0a5a7d9ffd0a88a244b3a.jpg?width=1200)
1日1サイトレビュー(2020/05/05)
こんにちは、ウェブデザイン勉強中のじゅんです。「1日1サイトレビュー」の2日になります。早速始めていきたいと思います。
1. ウェブサイト
2. 概要
大麦、玄米など穀物を加工する食品メーカー 株式会社 はくばく
3. ターゲット
・お米じゃなくて、色んな穀物を利用してみたい人
・穀物についてもっと知りたい人
・食事にこだわりがある人
・育児中ママさん
4. 目的
・穀物のおいしさを知ってもらい、商品を買ってもらう
・新規利用者を増やす
5. 構成
・白、黒で構成、一見シンプルなサイトですが、食欲を増進させる赤を使用することで、印象づけている
・メニュー色はロゴ色の暗い赤になり、より馴染みやすくなる
・メニュー色と同様に、各コンテンツ見出しも赤と暗い赤になり、サイト全体に統一感ある
・各コンテンツ見出しの下に、小さい麦画像が配置、可愛らしさを表現
5.1 メニューバー
・項目が右より、横並び配置
・ホバーより色が変わり、更に押すと赤になり、ドロップダウンメニューが表示。そこに、注目商品がいくつ並ばれている
5.2 メインビジュアル
・波線長方形で囲まれ、ゆったりと動画が流れ、そして最後豊かな食卓シーンで止まる
・左中央ぐらいに「穀物をおいしく、みんなを健康に」という言葉は配置、豊かな食卓シーンとは相性がよく、見た瞬間に「うん、こいう食事を家族に食べさせたい」と思う
5.3 はくばくのこだわり商品
・こだわりという言葉を使用、より注目されやすくなる
・注目商品が中央揃え横並び配置
・ホバーにより色が変わる
・一番下に、配置された赤アイコンが丸くて、押したくなる
5.3 はくばくからのお知らせ
・横並び3つのバナーが、順番中央に来る様になっている
・ロゴとなる色が主に使用、統一感ある
5.4 はくばくレシピ
・おいしそうな出来上がり画像が配置、興味を持たせる
・両端にスプーンとフォーク(イラスト?)が配置、ご飯をしようという感じがした(笑)
5.5 はくばくと穀物
・画面がいっぱいになって、穀物イラストが四隅に配置、可愛らしさを表現
・コンテンツ画像を、穀物形のコンテナに埋め込む
6. カラー
・ベースカラー:白
・メインカラー:濃いグレー
・アクセントカラー:赤
7. フォント
温もりがあるのデザインに仕上げているモリカワ書体:A1ゴシック Mを使用
8. 心得
・目立たせるために、見出しを工夫
・アクセントカラーはロゴから取る事
9. トーレス
・波線長方形なかなかうまくいかず、時間かかりました。波線のひき方について、何かいい方法がある方はいましたら、ぜひ教えていただきたいです。
10. 最後に
ウェブデザインスキルはともかく、日本語表現力も身につくだと思います。明日も頑張ります。
最後まで読んでいただきありがとうございます。