photographer

概要

本作品はHello Mentorというオンラインスクールの課題として制作した、架空フォトグラファーのポートフォリオサイトです。

デザインカンプをもとにコーディングを行いました。HTML / CSSの実装は比較的スムーズに進みましたが、 JavaScriptによる実装に多くの時間を要した作品です。

デザインカンプをもとに、HTML/CSSコーディング、JavaScriptによるインタラクション設計・実装を担当しました。

本課題では、デザインカンプの再現に加えて、ユーザー体験を高めるためのインタラクションを自ら設計・実装することを目的に制作しました。課題要件に含まれていないJavaScript実装にも挑戦し、実務に近い思考でのコーディングを意識しています。

ライブラリ選定からの方針転換

当初はカルーセルにSplide、ライトボックスにGLightboxを使用する予定でしたが、両者を連携させたUI構成が難しく、最終的にバニラJavaScriptでの実装へ方針転換しました。
サムネイル連動ギャラリーの実装

Worksセクションでは、矢印ボタンでの画像切り替えに加え、下部のサムネイルクリックでも表示が切り替わるギャラリーを実装しました。
ライトボックスとの同期

選択中の画像からライトボックスを展開し、ライトボックス内でも矢印・キーボード・スワイプ操作で画像切り替えができるようにしています。
スマホファースト

スマートフォンではクリック可能な要素が分かりにくいと考え、拡大表示できる画像には虫眼鏡アイコンを追加し、直感的に操作できるよう工夫しました。
JavaScriptのモジュール分割

実装規模が大きくなったため、ES Modulesを用いて機能ごとにファイルを分割し、可読性と保守性を意識した構成にしています。

課題要件にない機能を実装したことで、ライブラリ選定や実装方針の判断力が身につきました。また、複雑なUIをバニラJavaScriptで実装する中で、状態管理や処理の分離の重要性を強く実感しました。

JavaScriptが大規模になるにつれて、ファイル構成や命名の整理が不可欠であることを学び、以降の制作では設計を意識した実装を行うようになりました。