制作物名
ノスタルジヰ堂(架空カフェ公式サイト)
企画・構成設計・デザイン・コーディング(HTML / CSS)を、すべて一人で担当しています。
本サイトは、店舗の世界観や紙媒体的な体験を重視し、
PC閲覧を前提としたレイアウト・演出設計として制作しています。
特にページめくり表現など、画面サイズと操作方法に強く依存するギミックを採用しているため、
スマートフォン表示では同等の体験再現が難しいと判断しました。
そのため本作品では、「PCでの閲覧体験を最大化する」ことを制作テーマとしています。
| 使用ツール | Photoshop/illustrator/VSコード/Figma |
| 制作時間 | 約60時間 |
| 想定ディスプレイ | PC |
| レスポンシブ | 未対応 |

サイトはこちら:https://portfolio1207ks.shop/Nostalgi-dou
コンセプト
読書×喫茶
外での読書を好む層に「あなただけの読書時間を楽しめる静かな空間」を提供することを意図しています。
| ターゲット | 世界観や雰囲気を大切にする感性豊かな20~30代男女 外での読書や作業を好む層 静かな空間で心を落ち着かせたい人 |
| メインカラー | 青磁色(#80AA9F) |
| サブカラー | 赤褐色(#927E63) |
| 背景 | アイボリー(#F5F0E6) |
| ページ全体の構成 | 物語性を意識し、訪問者がページを通して世界観を体験できるよう設計 |
デザイン意図
制作初期から細部を厳密に決めるのではなく、仮配置を繰り返し全体のバランスを確認し、あしらいの量を調整しながら世界観と空気感を崩さないように設計しました。
その結果、静かさを演出するため動きは最小限に抑え、要素同士の距離感や余白によって、
隠れ家や図書館のような落ち着いた空気感が伝わる構成を目指しています。
カンプ作成
| 使用ツール | Photoshop/illustrator/Figma |
| 制作時間 | 約40時間 |
デザインカンプ

詳しく見たい方はこちら(PDF)
ワイヤーフレーム

詳しく見たい方はこちら(PDF)
ロゴ制作
| 使用ツール | Photoshop/illustrato |
| 制作時間 | 約10時間 |

メインアイコン
基準の色として青磁色を使用
読書カフェというコンセプトのもと、
中心に開いた本を配置し読書感をアピール
両側に蔦のあしらい、頂点にランプを配置することで隠れ家のような安心感を表現しています
ヘッダーアイコン
ヘッダー部分の色と被ってしまわないように焦茶色を使用
コンセプトテーマ自体は変更せず、
コーヒーカップを省略し高さを調整しています


