「食品製造メーカーのサイトデザイン（トップページ）」へのチコ｜岡山でデザイン制作さんの提案一覧
チコ｜岡山でデザイン制作さんの提案
-
15
-
9
-
8
-
提案日時 2020年07月05日 15:05 -
提案日時 2020年06月29日 06:31メンバーからのコメント
お世話になっております。
続いてメガメニュー付きのデザインを添付いたします。
よろしくお願いいたします。 -
提案日時 2020年06月29日 06:30メンバーからのコメント
お世話になっております。チコです。
今回は、「食品製造メーカーのサイトデザイン」であること、
「安心・安全であることをPRしたい」こと、
「メインビジュアルで製造工程の一部始終を見せられる」ことから、
製造力よりも衛生管理のアピールに重きを置いてデザインしました。
安心感・信頼感にもいろいろありますが、
今回のデザインはクールでストイックというよりは、
丁寧で実直な温かみのあるデザインを意識しています。
また、メインビジュアルはフルスクリーンレイアウトを採用し、
より動画の印象が強く残るように意識しています。
これが桂林閣様の理想に沿っていれば幸いです。
以下、デザインの個別のポイントとなります。
<レイアウト>
・12カラムのグリッドに沿ってレイアウトしました。
・下層ページがそこそこ多いサイトでしたので、
見栄えよりも機能性を優先したシンプルなレイアウトになっています。
・また、サイトマップを参考に優先度や用途に応じたグループ分けを行い、
元の構成を変えないながらも、利用者が迷わないように工夫しています。
<配色>
・コーポレートカラーを基調とした配色にしました。
・温かみのあるデザインにするため、ベースカラーに薄い黄色も入れています。
焼売の生地の色にも近い色ですので、親和性のある配色だと思いました。
<フォント>
・本文にはNoto Serif CJK JPを使用しています。
・見出しにはDNP 秀英明朝 Pr6を使用しています。
・欧文にはOpen Sansを使用しています。
・いずれもWebフォントとして使用可能です。
(重くなるようであれば本文はデバイスフォントでもいいと思っています。)
<コーディング>
・他のコーダーさんがどこを手間に感じるかが想像しにくかったので、
自分がコーディングするならどうして欲しいかを意識してデザインしました。
・メガメニューなど、ヘッダー部分はちょっと複雑かもしれません。
軽くですが、コードを打って確認したので、一応実装は出来ると思います。
・具体的にはメガメニュー以外の部分は予めpaddingなどで領域を確保しておき、
ホバーで商品案内の背景色 を「transparent → #a40002」に することを想定しています。
・メガメニュー部分はpositionで位置を指定し、
displayやopacityなどで表示・非表示を切り替えることを想定しています。
・もっとスマートな実装方法・表示形式があればweb.ics様にお任せしたいです。
<素材>
・商品画像のみPixtaの有料素材を使用しています。
(この部分は差し替えると思うので素材代は不要だと思います。)
・焼売の箱のイラスト (3,630円 / https://pixta.jp/illustration/55594578)
なるべく柔軟に対応したいと考えています。
私の提案に捉われず、質問や修正も遠慮なくお知らせください。
メンバーからのコメント
お世話になっております。チコです。
時間がありましたので、ブラッシュアップいたしました。
休日・重ねての提案でお手数をおかけしますが、
最初の案と組み合わせたり、修正指示にも生かせると思いますので、
お時間のある時で構わないので一度目を通していただけると幸いです。
<変更点>
・全体的に角丸を小さくしてフォーマルな印象を強めました。
・ヘッダーの電話番号の大きさと字間を調整しました。
・特長2の文章が段落分け出来ていなかったので修正しました。
・商品カテゴリーにボーダーを追加して引き締めました。
・フッターに地図を追加しました。
・メガメニュー部分はそのままです。
なるべく柔軟に対応したいと考えています。
私の提案に捉われず、質問や修正も遠慮なくお知らせください。
よろしくお願いいたします。