【卒業課題制作】　STUDIOでデザイン通りにコーディング

Rena.m
WEBマーケター・WEBデザイナー

■課題
WANNABE Academy WEBデザインコースの卒業課題として、STUDIOを使用し、指定デザインを忠実に実装しました。
成果物URL： https://preview.studio.site/live/XKOk16Zka4/1


■制作物
架空の果樹園「信州園（SHINSHU-EN）」LP制作

■使用ツール
STUDIO

■行ったこと

  • STUDIOでの実装（デザイン再現）

  • セクション構成の組み立て

  • 文字・画像・ボタンの配置

  • PC／スマホの表示調整（レスポンシブ対応）

■かかった時間
25時間

苦労したこと

動画学習を見ながら手探りで制作し、崩れた箇所は都度原因を切り分けて調整しました。制作途中で段落やレイアウトが崩れたり、CTAボタンや装飾の動きが意図通りにならなかったりして修正に時間がかかりました。特にスマホ表示はPCで問題がなくても崩れることがあり、余白・文字サイズ・配置のバランスを何度も見直しました。微調整を重ねたことで、崩れの原因を特定して修正する手順と、スマホでも読みやすく整える感覚が身につきました。

課題を通して学んだこと

STUDIOでは見た目の再現だけでなく、後から崩れにくいようにレイアウトを組むことが重要だと学びました。制作の早い段階からPC／スマホの表示を往復して確認し、余白・文字サイズ・要素の順番を整えながら仕上げる進め方が有効だと実感しました。