”かわいい”と利便性を両立させた架空ニューレトロカフェサイト制作（喫茶Tink）
概要
架空のニューレトロカフェ「喫茶Tink」の公式サイトを企画・デザイン・コーディングまで一貫して制作しました。
”ファンシーショップのような懐かしくて可愛い世界観”をテーマに、ビジュアル重視のデザイン設計を行っています。
単なる雰囲気重視に留まらず、ユーザーがメニューを選びやすい構造設計も意識しました。
コンセプト
- レトロ×ファンシーの世界観
- キャラクター性のあるブランド演出
- かわいさと使いやすさの両立
制作のこだわり
①オリジナルビジュアル制作
キャラクターイラストをiPadで制作。
ロゴデザインも自作し、ブランドの統一感を構築しました。
商品画像には、商用利用可能な写真素材にロゴをPhotoshopで合成。
全メニュー・全グッズ画像に一つ一つ加工を施し、世界観を統一しています。
②メニュー閲覧の利便性向上
カフェサイトではメニュー情報が限定的な場合も多い中、本サイトでは”全メニューの写真閲覧”を可能に設計。
さらに、メニュー項目（例：クリームソーダ）をクリックすると、ページ上部のビジュアルと説明文が切り替わる仕様にし、直感的に情報を取得できるUIを実装しました。
③世界観を壊さないUI設計
かわいさを重視しつつも、視認性や情報整理を考慮。
装飾過多にならないよう、余白・色バランスを調整しました。
技術面
HTML/CSSを用いてコーディング。
一部インタラクションを実装し、視覚的な楽しさと操作性を両立させています。
