架空のコーヒーショップ「ももの木コーヒー」のホームページ制作を行いました。
桃の名所である福島県桑折町を拠点としたコーヒーショップを想定し、実店舗で豊かな自然の中でコーヒーが楽しめるほか、ECサイトでは豆の販売を行っているという設定にしました。
（ちなみに福島は私の地元です。桑折町ではないですが… 桑折町は桃の産地でもありますが、桑折の桃はみずみずしくて本当においしいです。）
| テーマ | コーヒーショップ「ももの木コーヒー」のホームページ |
| ターゲット | 20～50代女性、夫婦、カップル |
| 作業時間 | 約50時間 |
ロゴのイラストはお店の名前にちなんで、桃の上に女の子が座ってコーヒーを飲んでいる絵にしました。文字のフォントは「クラフト明朝」（フリーフォント）を使用しています。
全体のフォントには「Zen Maru Gothic」（数字のみNoto Sans）を使用しました。
メインビジュアルは一部の角を丸くして柔らかさを出しつつ、窓から覗くようなイメージを持たせています。
ゆらゆらと変形する画像は、流体シェイプを作れるジェネレーター「blob animation」を使用して作成しました。（blob animation、現在は使えないようです……）
コーヒーのゆらめく水面やふわふわと上がる湯気などの動きをイメージして動かしています。
Instagramと店舗情報、地図です。
フッターには営業時間と定休日を記載し、どのページからもいつ営業しているかを確認できるようにしています。
背景には自然の写真を使い、お店の魅力である「自然の中でコーヒーを飲める」ということを印象づけるようにしました。
商品紹介ページは、カードのようなイメージで作りました。味に関する情報を、各項目5段階で示しています。（コーヒーに詳しくないので、コーヒーのことを調べるのに一番時間がかかりました……。）
「風味で選ぶ」等のボタンは、cssのみで動くように、フォームなどで使われるcheckboxの挙動を応用して作りました。
グッズの部分のモックアップはPhotoshopで制作しました。
このサイトを作った段階ではJQuery未習得だったので、できることが限られていて歯がゆい反面、CSSのみでできることをたくさん学べたと思います。JQueryを使用した要素が「ふわっ」と浮き上がる挙動がこのサイトに合いそうなので、いつか実装できたら嬉しいです。
| 企画 | テーマ決定、コンセプト立案、ターゲット設定など |
| ロゴ・アイコンデザイン | ロゴおよびアプリアイコンのデザイン・イラスト作成（Illustrator） |
| サイトデザイン | サイト全体のデザイン（Illustrator ） |
| コーディング | サイト全体のコーディング（HTML・CSS） |
