| プロジェクト種別 | スクール課題（デザインカンプからの自主実装・レビュー反映済み） |
|---|---|
| 制作の目的 | 提供されたデザインカンプをもとに、観光キャンペーンLPをコーディングしました。 お手本コードを見る前に自力で実装し、制作後に講師レビューを受けて改善点を反映しました。 画像や装飾が多いページのため、レスポンシブ時の見え方や、フォーム・モーダル・スライダーなどのUI実装に注意して制作しています。 |
| 担当範囲 | ・ HTML / Sass（SCSS） / JavaScriptによる静的コーディング ・ レスポンシブ対応 ・ Swiperを使用したスライダー実装 ・ モーダル実装 ・ フォームUI実装 ・ アコーディオン実装 ・ 講師レビュー後の修正反映 |
| 技術的な工夫 | ・ デザインカンプの再現 装飾や画像が多いデザインのため、余白、重なり、画像位置を確認しながら実装しました。 ・ レスポンシブ対応 スマートフォン、タブレット、PCで表示を確認し、装飾画像やコンテンツが崩れないよう調整しました。 ・ JavaScriptによるUI実装 Swiperによるスライダー、モーダル、アコーディオン、ページトップボタンなど、LP内で必要な動きを実装しました。 ・ フォームUIの実装 入力欄、セレクトボックス、ラジオボタン、チェックボックスなど、複数のフォーム要素をデザインに合わせて実装しました。 ・ レビュー反映 講師レビューで指摘を受けた箇所を修正し、表示崩れや使いにくい箇所の改善を行いました。 |
| サイトURL | https://onomichi.ikki-studio.com |
| 使用ツール | HTML / Sass（SCSS） / JavaScript / Swiper / VSCode |
