実際のサイト: https://kurohune-coffee-lp.yusandesignworks.workers.dev/ 架空案件としてコーヒーD2Cブランドをデザイン・実装しました。 コーヒーの深みと「黒船」という力強いコンセプトを、雑誌のエディトリアル（編集）デザインの手法で表現した、コーヒー定期便サービスのランディングページです。 1. デザインコンセプト 「五感で味わう、黒の一杯」 単なるECサイトではなく、コーヒーを淹れる時間そのものの価値を伝えるため、重厚感とクラフト感を両立させたデザインを目指しました。 ビジュアルアイデンティティ: 深煎りの豆を連想させるダークブラウンをベースに、ミルクのようなクリームホワイトを組み合わせ、視認性と高級感を担保。アクセントにテラコッタオレンジを配し、温かみと情熱を表現しました。 タイポグラフィ: 見出しには優雅な「DM Serif Display」を採用し、本文には可読性が高くモダンな「Zen Kaku Gothic New」をセレクト。伝統と現代の融合を意図しています。 2. デザインのこだわり Webの「枠」を感じさせない、雑誌のような自由なレイアウトに挑戦しました。 大胆な余白とタイポグラフィ: 情報の強弱を明確にするため、あえて大きな余白と巨大なタイポグラフィを配置。スクロールするたびにストーリーが展開するような演出を施しています。 テクスチャの質感: 無機質なデジタル感を排除するため、CSSでノイズを重ね、紙のようなザラつきのある質感を再現。ブランドの「クラフト感」を視覚的に訴求しました。 3. 技術的な挑戦 グリッドブレイク & 動的レイアウト: 標準的なグリッドをあえて崩すレイアウトを採用。要素を少しずつずらして配置することで、視線誘導をコントロールし、飽きさせない体験を提供しています。 横スクロールの活用: セクションの一部に横スクロールを組み込み、モバイル・デスクトップ両方での操作性にアクセントを加えました。 CSSインタラクション: スクロール量に合わせたフェードインやパララックス効果を実装し、没入感を高めています。 使用技術・ツール Photoshop・Claude Code 実際のページはこちら https://kurohune-coffee-lp.yusandesignworks.workers.dev/