motto!
架空サイト こども向け宅配食サービス
#WEB DESIGN
#SCHOOL WORKS

架空の子ども向け宅配食サービスサイトを制作しました。
明るめで柔らかい印象を与えられるようにレイアウトやアニメーションを工夫しました。
JQueryを使用してアニメーションを多く取り入れたサイトとなっております。
※横幅1920pxを想定してコーディングしています。

scroll

ターゲット
30〜40代の主婦の方。
子どもに健康的な食べ物を食べさせてあげたいと思う方々。
課題
子ども向け宅配食サービス『motto!』へ申し込むためのサイトが欲しい。
『motto!』の魅力を伝えたい。
目的
サイトを通じてサービスへ申し込みしてもらう。
宅配食のメリットや『motto!』のメニューが豊富であること、安全性を伝える。
情報設計
イントロ部分で『motto!』とはどんなサービスかを説明し、次にサービスの申し込み方を3ステップで簡潔に説明することで気軽に始められることをアピールします。 そして次にメニューの豊富さ、実際に利用したユーザの声という流れで、画面下部には常に申し込みボタンが表示されるようにしています。 興味を持ってもらう・サービスを知る・申し込むという流れを想定した設計にしています。
デザインプロセス
子ども向けサービスを意識して、可愛らしさを表現したデザインにしました。 イラストを用いたり、写真の明度を調整することで、明るい印象を持ってもらえるように工夫しました 動きのあるようなレイアウトにすることで、ポップなイメージに仕上げています。
制作期間
企画/情報設計/WF
デザイン
コーディング
約16時間
約10時間
約20時間
使用フォント
- Neue Haas Grotesk Display Pro
- Rounded Mplus 1c
英文で"Neue Haas Grotesk Display Pro"、和文で"Rounded Mplus 1c"を使用しています。 丸みのあるフォントを使用することで、可愛らしい印象にしています。
使用ツール
- Adobe Photoshop
- Adobe Illustrator
- Figma
- Visual Studio Code