miq hair & makeup

新潟県上越市にて営業している美容室
「miq hair&makeup」様のランディングページを制作させていただきました。
WordPress、コーディングを担当させていただきました。

スーパーに併設している為、アクセスが便利で駐車上も広々としています。幅広い年代のスタッフが在籍しており、個室もあるので人目を気にせずゆったりとした一時を過ごすことができ、お子様連れでも安心なお店です。

実装・取り組みについて: 最初に提案したデザイン案が白紙となり、リデザインを実施したプロジェクトです。
プロジェクトの途中で、クライアントからスタッフの紹介や声といったコンテンツの追加要望があり、カード型レイアウトの中にコンテンツを増やし、アコーディオンメニューを追加実装しています。
開閉自体はHTMLのdetailsタグとsummaryタグを用いて実装し、JavaScriptで制御。特に、文章量の可変に対応するため、subgridや他のハック的な手法では制御が難しいと判断し、事前にCSSカスタムプロパティを定義し、これをmin-heightと組み合わせることで柔軟なレイアウトの制御を工夫しました。

アニメーションに関しては、CSSによる無限ループスライダーやIntersectionObserverを用いて、各種アニメーションを実装しています。

弊社の制作フローでは約90%の案件がPC版（デスクトップ版）カンプのみ提供されるため、モバイル版のデザインやレスポンシブ対応は私の裁量で行い、柔軟に対応しています。
※掲載のキャプチャは制作時点のものです。公開後の更新により、現行サイトとは一部内容が異なる場合があります。