1日1サイトレビュー(2020/05/05)

こんにちは、ウェブデザイン勉強中のじゅんです。「1日1サイトレビュー」の2日になります。早速始めていきたいと思います。

1. ウェブサイト

はくばく - The Kokumotsu Company

2. 概要

大麦、玄米など穀物を加工する食品メーカー　株式会社 はくばく

3. ターゲット

・お米じゃなくて、色んな穀物を利用してみたい人
・穀物についてもっと知りたい人
・食事にこだわりがある人
・育児中ママさん

4. 目的

・穀物のおいしさを知ってもらい、商品を買ってもらう
・新規利用者を増やす

5. 構成

・白、黒で構成、一見シンプルなサイトですが、食欲を増進させる赤を使用することで、印象づけている
・メニュー色はロゴ色の暗い赤になり、より馴染みやすくなる
・メニュー色と同様に、各コンテンツ見出しも赤と暗い赤になり、サイト全体に統一感ある
・各コンテンツ見出しの下に、小さい麦画像が配置、可愛らしさを表現

5.1 メニューバー

・項目が右より、横並び配置
・ホバーより色が変わり、更に押すと赤になり、ドロップダウンメニューが表示。そこに、注目商品がいくつ並ばれている

5.2 メインビジュアル

・波線長方形で囲まれ、ゆったりと動画が流れ、そして最後豊かな食卓シーンで止まる
・左中央ぐらいに「穀物をおいしく、みんなを健康に」という言葉は配置、豊かな食卓シーンとは相性がよく、見た瞬間に「うん、こいう食事を家族に食べさせたい」と思う

5.3 はくばくのこだわり商品

・こだわりという言葉を使用、より注目されやすくなる
・注目商品が中央揃え横並び配置
・ホバーにより色が変わる
・一番下に、配置された赤アイコンが丸くて、押したくなる

5.3 はくばくからのお知らせ

・横並び３つのバナーが、順番中央に来る様になっている
・ロゴとなる色が主に使用、統一感ある

5.4 はくばくレシピ

・おいしそうな出来上がり画像が配置、興味を持たせる
・両端にスプーンとフォーク(イラスト?)が配置、ご飯をしようという感じがした(笑)

5.5 はくばくと穀物

・画面がいっぱいになって、穀物イラストが四隅に配置、可愛らしさを表現
・コンテンツ画像を、穀物形のコンテナに埋め込む

6. カラー

・ベースカラー：白
・メインカラー：濃いグレー
・アクセントカラー：赤

7. フォント

温もりがあるのデザインに仕上げているモリカワ書体：A1ゴシック Mを使用

8. 心得

・目立たせるために、見出しを工夫
・アクセントカラーはロゴから取る事

9. トーレス

・波線長方形なかなかうまくいかず、時間かかりました。波線のひき方について、何かいい方法がある方はいましたら、ぜひ教えていただきたいです。

10. 最後に

ウェブデザインスキルはともかく、日本語表現力も身につくだと思います。明日も頑張ります。
最後まで読んでいただきありがとうございます。