Sky Coffee

概要

• 作品名 sky-coffee（Webサイトのデザイン模写）
• 担当範囲 コーディングのみ
• 制作期間 3日間
• 見本（デザイン元） Figmaデザインカンプより

制作の背景・目的

実際のWeb制作の現場で主流となっている「Figmaで作成されたデザインカンプを、ズレなく正確にWebサイトへ落とし込むスキル」を磨き、自身のコーディングの再現性を証明するために制作しました。ただ見た目を真似るだけでなく、プロが作ったデザインの意図（余白やフォントのバランス）をコードでどう表現するかを学ぶためのチャレンジです。

工夫した点・こだわったポイント

• カンプへの忠実な再現（ピクセルパーフェクトの意識） Figma上で指定されているフォントサイズ、行間、余白（マージン）、画像の配置などを正確に読み取り、デザインの雰囲気を1ミリも崩さないよう細部まで徹底してコーディングしました。
• 効率的なコーディングによる短納期対応 全体の構造を事前にしっかりと設計してから書き始めることで、迷う時間を減らし、デザインカンプからの実装をわずか3日間というスピードでバグなく完成させました。

苦労した点と解決策

Figmaのデザインをブラウザ上に配置する際、画面の横幅が変わったとき（PCの画面サイズの違いなど）に、デザインのバランスが崩れてしまう点に苦労しました。要素の幅を固定値ではなくパーセンテージや相対単位を適切に用いて指定することで、どのようなモニター環境で見てもデザインの美しさとレイアウトが維持されるように調整・解決しました。

提供できる価値

この制作を通じて、デザイナーが作った意図を正確に汲み取り、それを忠実にWebサイトへと実装する「デザインカンプ再現力」が身につきました。さらに私は動画編集スキルもあるため、例えば「サイトのトップに配置するイメージ動画」の編集や、カフェの雰囲気を伝えるプロモーション映像の制作までワンストップで対応可能です。デザインの再現だけでなく、Webと動画を掛け合わせた集客力のあるサイト構築をご提案いたします。