https://youtu.be/lP8XbK5NTrk Webデザインを学んだスクールの卒業制作として制作。デザインからコーディング（レスポンシブ）までを実施。 ＜制作期間＞ 【デザイン】0.5ヶ月 【コーディング】2ヶ月 ＜サイトの内容を決めた経緯＞ せっかくなので実在する店舗のサイトを作ってみたかったためです。近所にサイトを持っていないコーヒースタンドがあることを知り、相談したところ快く制作させていただけることになりました。実際にインタビューを通じ、大切にされている想いやこだわりを伺い、サイトデザインもこだわりもって制作することができました。 ＜サイトの目的、内容＞ 【目的】 コーヒースタンドの認知拡大 ①明るい雰囲気を知ってもらいたいこと、②営業時間があまり知られていないというお悩み解決） 【内容】「当店について」、「メニュー」、「店舗情報」 ＜ターゲット＞ 心の拠り所を探している近隣住民。コーヒー好きな幅広い世代。 ＜こだわりポイント、工夫したポイント＞ 【デザイン】 ・男女関係なく来店しやすいように親しみのもてるデザインを目指しました。 ・ファーストビューのデザインを、PC版とスマホ版で大幅に変更しました。スマホから見る人は、PC版よりも営業時間が気になるだろうと想定し、営業時間がより目立つデザインにしました。 ・店主さんの話す明るい雰囲気と、店の看板にもなっている黄色いコーヒーメーカーから、黄色をメインに使用。 ・店主さんと一対一で話す時には落ち着く「実家」のような雰囲気を、コーヒーを求めてくるお客さん同士で会話が自然に生まれる雰囲気は「シェアハウス」のようだと感じたため、「近所のみんなの家」をイメージしてページのトップに屋根のような形を表現しました。 ・コーヒーの香りがしてきそうな素材、色使いを意識しました。 【コーディング】 ・文字部分は極力画像ではなく文字で制作しました。（コーヒーの丸い跡内に配置した営業時間や、モーダルの中身の文字など。） ・冒頭のアニメーションが終了後に黄色い吹き出しが表示されるよう、アニメーションの表示時間をこだわりました。 ・コーヒーのメニュー紹介部分では、モーダルとスライダーの組み合わせにこだわりました。コース内で紹介されていたcssでつくるモーダルはスライダーとの相性がよくなかったため、jsを使用するものに置き換えて制作。 ・学んだことを極力盛り込みたかったため、table（モーダル内の情報）や擬似要素（メニューの左上の「深煎り」やふきだしの尻尾部分）、地図の埋め込みなどを使用しました。