migliore

概要

本作品はHello Mentorというオンラインスクールの課題として制作した、架空インテリアショップ「MIGLIORE」のWebサイトです。

デザインカンプをもとにコーディングを行いました。ページ数は少ないものの、初めてJavaScriptを「ライブラリ」という形で導入しました。
また、店舗情報としてGoogle Mapの埋め込みも実装しています。

本課題では、デザインカンプを再現する基礎に加えて、必要に応じて外部ライブラリを選定し、公式ドキュメントを読みながら実装できる力を身につけることを目的に制作しました。

FVにSplideを採用

課題の要件にはスライドショー実装は含まれていませんでしたが、デザインを見た際にFVで活用できると判断し、スクールで学んだSplideを採用しました。
公式ドキュメントを読みながら設定を調整

JavaScriptはドットインストールで基礎学習をしていましたが、ライブラリ特有の書き方が必要だったため、公式ドキュメントを参照しながらオプションを調整して実装しました。
JS側のオプション設計への理解

CSSで見た目を作る感覚とは異なり、Splide側のオプションで挙動やレイアウトを決める必要があり、役割分担を意識しながら実装しました。
Google Mapの埋め込み

iframeで地図を埋め込み、レスポンシブでも崩れないように比率（aspect-ratio）を使って調整しました。

初めて外部ライブラリを使ったことで、「知らない仕様でも公式ドキュメントを読みながら実装を進める」経験ができました。

また、課題の要件を満たすだけでなく、デザインを見て必要な表現を自分で考え、追加提案して実装できたことは大きな収穫でした。
Google Mapの埋め込みも含め、実務で扱うことの多い要素を一通り経験できました。