・スマホ版トップページ(前半)
コンテンツ内容はPC版と同じため、割愛させて頂き、意識したポイントをお伝えさせて頂きます。
【文字サイズ】
ターゲット層を考え文字サイズを大きめにしてほしいとのことでしたので、通常文章の文字サイズを14ptにしているところ、18ptに設定しております。
【ボタン】
スマホ版では画面が小さくなってしまうため、ボタンはデバイス幅いっぱいに広げるようにしています。
はじめまして、宮田と申します!
ご依頼内容を拝見し、トップページのご提案をさせて頂きました。
ご検討の程、宜しくお願い致します。
・PC版トップページ
【ヘッダー】
このサイトのゴールを「ネットショップに飛んでもらい売り上げに繋げる」と想定し、ヘッダーにもネットショップへのボタンを設置致しました。
【ファーストビュー】
アクセントカラーはロゴマークの色である黄土色、ベースカラーはプロダクトを拝見して薄いグレーとしました。
黄土色で上品さを表せるようにアクセントで使用し、背景色はシンプルはグレーにすることで、写真も文字も読み易さを意識しました。
キービジュアルは、シンプルかつスタイリッシュな商品パッケージを見せて、ユーザーに興味や購買意欲を与えたいと思い、整列させて見せることにしました。
背景は、栄養食品と言うことを表すため、ビタミンカラーであるオレンジがかった黄色を使用。
キャッチコピーは、会社の想いを拝見して考えたものを入れております。
こちらはいつでも変更できますので、お気軽にお申し付けください。
【私たちについて】
ワイヤーを拝見し、信頼感を得るため会社の想いをきちんと伝える事を重要視していると感じました。
そこで、ここは大きく余白を取ることで特別感とゆとりを与え、大事なセクションであることをユーザーにも感じでもらえるよう作成しました。
写真は、ターゲット世代の男女にしました。女性のみでも良かったのですが、4割男性がいると伺い、そこは除外しない方が良いのかなと感じたためです。
また、女性がターゲットだとしても、旦那様にもおすすめする事を想定し、40代くらいの男女の写真が良いのではないかと考えました。
【4つの約束】
こちらは、サイトデザインが単調にならないよう動きをつけるため、写真を左右に振りました。
1枚目、4枚目の写真は、内容を拝見してイメージしたものを探して入れております。
デザインにアクセントをつけるため、promise01~04のあしらいを入れております。
【事業内容】
こちらが直接の商品購買への流入を見込めるコンテンツであるため、他のコンテンツと差別化するため背景色を変えています。
商品は、今後増えることを想定し、スライダーにしております。
今後商品が増えた場合は「商品一覧ページ」を作成し、そちらに誘導する形が良いかと思いました。
ネットショップへの誘導は、ユーザーへの流入を誘うためバナーを作成しました。
【会社概要、お問い合わせ、フッター】
シンプルに、読み易さや分かりやすさを意識して作成致しました。
メンバーからのコメント
・スマホ版トップページ(後半)
投稿できる長さを超えてしまったため、2枚に分割させて頂きました。
以上になります!
修正などあれば、お気軽にお知らせください。
ご検討の程、宜しくお願い致します。