カフェWebサイト
コーディング制作

カフェのWebサイトを想定したデザインをもとに、HTML/CSS/JavaScriptを用いてコーディングを行いました。レイアウト再現だけでなく、構造設計やレスポンシブ対応を意識して制作しています。

カフェWebサイトを表示したPCモックアップ カフェWebサイトを表示したスマートフォンモックアップ
種別
Webサイト コーディング課題
制作期間
7日
使用スキル
HTML/CSS/JavaScript
担当範囲
マークアップ / レイアウト実装
目的
デザインの再現性と実装スキルの習得
ターゲット
20〜40代 / カフェ・ライフスタイル関心層
媒体
Webサイト
訴求軸
世界観 / リラックス感 / 居心地の良さ
KPI
滞在時間向上 / 回遊性向上

制作意図

本サイトでは、カフェの落ち着いた雰囲気と居心地の良さを伝えるため、ビジュアルを活かした構成と余白設計を重視しました。コーディングにおいては、デザインの印象を損なわないよう細かな余白・配置・バランスを意識して再現しています。

制作時に意識したポイント

サイト再現にあたり、特に意識して工夫した点は以下です。

  • Point 01

    デザイン再現性

    余白・フォントサイズ・配置を忠実に再現。

  • Point 02

    レイアウト構造

    セクションごとに整理し、読みやすい構造を実装。

  • Point 03

    視認性

    テキストと背景のコントラストを意識。

  • Point 04

    シンプルな構造設計

    保守性を考慮し、シンプルで分かりやすいHTML構造に。

想定効果

  • 滞在時間の向上
  • ブランドイメージの伝達
  • 回遊性の向上

学び

デザインを再現するだけでなく、構造的に組み立てることで再現性と保守性が両立できることを学びました。

制作における強み

デザイン意図を理解した上で、再現性の高いコーディングが可能です。

お問い合わせ

※ デザインスクール課題として制作した
オリジナル作品です。