架空のカフェサイト

CAFE AMBROSINI

架空のカフェサイト

PC/タブレット/スマホ対応

こちらの作品はトップページのみです。

説明: 架空のカフェサイト（職業訓練課題）
担当箇所: コンセプト・ロゴ・デザイン・コーディング・写真等全て
制作期間: 3週間
制作意図: 職業訓練校にて架空のカフェのサイト制作の課題です。
レスポンシブでのサイト制作。
「カフェ」以外のテーマは決められておらずコンセプト、店名、ロゴや立地等は自身で考える。
使用ソフト: Dreamweaver / Illustrator / Photoshop / Lightroom
カメラ: SONY XPERIA / SONY α6300（一部）

コンセプト: そのままミラノから東京に持って来たような、日本人に合うアレンジ等をあえてしない本場のイタリアンカフェ。
デザイン: 前回作ったサイトは少しの高級感とシンプルでキレイめな作品だったので今回は男性的でハッキリとしたデザインに挑戦してみようと思い作成しました。
カラー: ミラノ市の紋章にも使われる赤と男性的な表現をする為に2色目は『真っ黒』を選びました。
ミラノのサッカーチームであるACミランも同じ配色である事と、ミラノの自動車メーカーであるアルファロメオの赤色を選択し”イタリア感”や”ミラノ感”を演出しました。
フォント: ヨーロッパの多くの会社の様にセリフ体を選択。
サンセリフ体でゴシック体にするとスターバックスの様なアメリカ風になってしまう為。
欧文に合わせて日本語も”はらい”がある明朝体をセレクトする事で統一感のあるフォント表示に。
画像について: 自分は前職飲食店で勤務していたので、このサイトに使用されている画像は全て（カフェラテ含め）自分が調理、撮影した物です。

サイトの特徴: ハッキリとメリハリの効いたサイトにしようと思ったのでcssやjqueryの動きも「ふわっ」っとではなく「シュッ」と動く（変わる）様にトランジション等早めに設定しました。
気をつけた点: コロナ禍で飲食店を探している訪問者は営業時間が気になると思うのでファーストビューで営業時間が分かるようにしました。
クリック出来る所はマウスをホバーすると色や矢印に動きを加えて分かりやすくしました。
製作中変更した事: サイト自体が奥行き感が無く平たくなってしまったので赤の部分をグラデーションにして立体感を足しました。
グラデーションをやり過ぎると逆にチープになってしまうので色の変化を小さくしました。
製作中「delivery」を足しphotoshopでバナーを制作。バナーが入る事でより既存のサイトの様になりました。
バナーの大きさも「menu」のバナー（ボタン）と大きさを変える事でサイトが単調にならなくなったと思います。