Hasegawa Mariポートフォリオサイト

制作概要 Overview

作品名

ECLAT JOURNAL（洋服ブランドサイト）

対応サイズ

レスポンシブ対応

ターゲット

20代後半～30代の女性

制作期間

2024年2月～　計10時間

制作区分

学校課題

担当

• Coding

使用技術・ツール

• VS Code
• HTML
• CSS(Sass)
• jQuery

補足

※本制作ではコーディングのみを担当しており、ペルソナ設計やコンセプト立案には関与しておりません。

制作の目的 Objective

• ・レスポンシブを学び始めてから1週間のタイミングで、実践的なアウトプットとして。

直面した課題 & 学び Challenges & Insights

jQueryでのモーダル実装

モーダル実装では、構造の複雑さと時間的な制約から、レイアウト整理に苦戦しました。

→div 要素が多用される中で、役割を明確にすることの重要性を実感しました。

→jQuery でモーダルの開閉やスクロール制御を実装する中で、動きと構造の関係性への理解も深まりました。

アイコンの選定と軽量化

アイコン選定では、たくさんのアイコンを探すことが大変でしたが、統一感をもたせながら集めることができました。また適切な拡張子を使うことで軽量化にもこだわることができました。

構造設計と記述効率の両立への課題

繰り返し構造のスタイリングに nth-child や nth-of-type を使い、記述効率を高めることができました。

→レイアウトやクラスが複雑になり、可読性や保守性に課題が残りました。 今後は、効率と構造のバランスを意識して制作していきたいです。