ナイトカフェ「ハリネズミの夜」
(架空カフェ)
(架空カフェ)

WEB
デザイン
コーディング
担当部分:デザイン・コーディング
制作期間:約1ヶ月
(デザイン:約10日、コーディング:約20日)
使用ツール:
Photoshop / Illustrator / AdobeXD
Clip Studio Paint(一部)
HTML/CSS/JavaScript(jquery) Visual Studio Code
制作期間:約1ヶ月
(デザイン:約10日、コーディング:約20日)
使用ツール:
Photoshop / Illustrator / AdobeXD
Clip Studio Paint(一部)
HTML/CSS/JavaScript(jquery) Visual Studio Code
概要
職業訓練校の最終課題として作成。
デザインカンプからコーディングまで、全て一人で行いました。
デザインカンプからコーディングまで、全て一人で行いました。
デザインカンプ
Clip Studio Paintで作成したもの
apngアニメーション(素材はIllustratorで作成)
Next >>
WORKS
つくったもの
- ALL
- WEB
- DTP

WEB
デザイン
コーディング
ナイトカフェ「ハリネズミの夜」(架空カフェ)

WEB
デザイン
コーディング
ポートフォリオサイト(このサイト)

WEB
コーディング
トレース
ENGBODY(架空ジム)

WEB
コーディング
トレース
Wed Design Conference (架空セミナー)

WEB
コーディング
トレース
START(架空企業)

WEB
課題
コーディング
トレース
Kissa(架空カフェ)

WEB
課題
コーディング
トレース
Codera(架空プログラミング塾)

WEB
課題
コーディング
トレース
Healthem(架空企業)

WEB
課題
コーディング
トレース
Bloom(架空フラワーアレンジメント教室)

WEB
課題
コーディング
トレース
Marine Coffee(架空カフェ)

DTP
課題
はがき
Illustrator
観葉植物専門店(架空)
広告はがき
広告はがき

DTP
課題
チラシ
Illustrator
食器イベント(架空)
来場促進用配布チラシ
来場促進用配布チラシ

DTP
課題
チラシ
Illustrator
ふれあい動物園(架空)
来場促進用チラシ
来場促進用チラシ

DTP
課題
はがき
Illustrator
眼鏡店(架空)
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード

DTP
課題
はがき
Photoshop
結婚式の招待状(架空)

DTP
課題
フライヤー
Photoshop
Kunii Chihiro写真展(架空)
フライヤー
フライヤー

DTP
課題
チラシ
Photoshop
椅子の展覧会(架空)
来場促進用配布チラシ
来場促進用配布チラシ

DTP
課題
はがき
Photoshop
レストラン(架空)
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード

WEB
デザイン
コーディング
ナイトカフェ「ハリネズミの夜」(架空カフェ)

WEB
デザイン
コーディング
ポートフォリオサイト(このサイト)

コーディング
トレース
ENGBODY(架空ジム)

コーディング
トレース
Wed Design Conference (架空セミナー)

コーディング
トレース
START(架空企業)

課題
コーディング
トレース
Kissa(架空カフェ)

課題
コーディング
トレース
Codera(架空プログラミング塾)

課題
コーディング
トレース
Healthem(架空企業)

課題
コーディング
トレース
Bloom(架空フラワーアレンジメント教室)

課題
コーディング
トレース
Marine Coffee(架空カフェ)

DTP
課題
はがき
Illustrator
観葉植物専門店(架空)
広告はがき
広告はがき

DTP
課題
チラシ
Illustrator
食器イベント(架空)
来場促進用配布チラシ
来場促進用配布チラシ

DTP
課題
チラシ
Illustrator
ふれあい動物園(架空)
来場促進用チラシ
来場促進用チラシ

DTP
課題
はがき
Illustrator
眼鏡店(架空)
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード

DTP
課題
はがき
Photoshop
結婚式の招待状(架空)

DTP
課題
フライヤー
Photoshop
Kunii Chihiro写真展(架空)
フライヤー
フライヤー

DTP
課題
チラシ
Photoshop
椅子の展覧会(架空)
来場促進用配布チラシ
来場促進用配布チラシ

DTP
課題
はがき
Photoshop
レストラン(架空)
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード
夜営業のカフェということで、「夜」をイメージして星を散りばめたり、メニューにはハリネズミと夜をコンセプトとした料理の画像を作成しました。
初めてロード画面を導入しました。また、apng画像を導入することで、一部アニメーションを実装。サイトを見ている方に楽しんでいただける設計を目指しました。
サイト全体に奥行きを感じさせるため、初めてパララックスを導入しました。パララックスの扱いが非常に難しく、思ったよりも平坦なサイトになってしまったので、今後は奥行きのあるデザインを考えていきたいと感じました。
デザインカンプはAdobe XD、写真素材はフリー素材をお借りして一部Photoshopで加工。ハリネズミなどのサイトパーツはIllustratorで作成、メニューの画像一部はClip Studio Paint Proで一から描き上げました。