作品を見る

【使用ツール】

Claude（AI）/ Gemini（AI）

【使用技術】

HTML / CSS / JavaScript
Google Fonts（Cormorant Garamond・Noto Serif JP・Space Mono）
Unsplash（フリー画像素材）

【作品概要】

バーのワンページWebサイト。
平日はサラリーマン、土日は若者という2つのターゲットに向けて、それぞれに響くコピーとデザインで構成。
Unsplashのフリー素材を活用し、店の雰囲気をビジュアルで伝えることを意識した。

【工夫した点】

ダークトーン×ゴールドで「高級感」と「親しみやすさ」を両立
平日週末でターゲットを分けたコピーライティング CSSアニメーションのみでヒーローの演出を実装 欧文フォントと和文フォントを組み合わせ、バーらしい雰囲気を表現 ヒーロー背景・コンセプト写真
5枚グリッドギャラリーで視覚的な没入感を演出 ギャラリーにホバーズームエフェクトを追加 レスポンシブ対応

【制作時間】

約30分