Mia's

アイスクリームショップ(架空サイト)

mia's website

アメリカ合衆国西部、カリフォルニア州の田舎町で農場を営むハンクさんが経営する無添加アイスクリームのお店「Mia’s」の日本への認知と新規顧客獲得に向けての日本版の紹介サイト。日本での車や大型商業施設での期間限定移動販売の宣伝も兼ねている。

URL

https://mias.asami-site22.com

サイトの目的

サービスの認知と新規クライアントの獲得

ターゲット

健康思考、ナチュラル思考の人々、子供からお年寄りまで幅広い世代

デザインに関して

背景の淡い暖色はMia’sの持ち味のナチュラルさ、親しみやすさを意識しています。ロゴと見出しの色は食品を扱うため、清潔さをイメージした青色を使用しました。インパクトを持たせることと、アイスクリーム店だということをサイトを見た瞬間認識できるようファーストビューにアイスクリーム工場をイメージした動きのあるイメージを制作しました。ナビゲーションの文字は工業的な雰囲気のものを選び、引き立て合うようにしました。

コーディングに関して

ファーストビューは、Figmaで作った元のデザインのイメージをより近く再現するため、canvasとjavaScriptで制作しています。文章の文字の大きさやメニュー表示を画面幅に合わせて柔軟に変化させたりなど、レスポンシブ対応に気を配りました。

使用ツール

Figma / Photoshop /Illustrator / Dreamweaver

制作箇所

企画、デザイン、コーディング、イラストレーション

制作期間

2ヶ月

デザイン

コーディング前のデザイン見本です