PORTFOLIO KAITO KAWAUCHIYA

motto!

架空サイト こども向け宅配食サービス

#WEB DESIGN

#SCHOOL WORKS

motto!モック画像1

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

motto!モック画像2

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