課題意識・背景 Why

以前の転職活動時に作成したポートフォリオを見直す中で、技術選定や表現において、現在の実装環境や自分の感覚とのズレを感じるようになりました。 今回の転職活動にあたり、今の自分をより正確に伝えられる形にしたいと考え、ポートフォリオを作り直すことを決めました。

また、前職でプロデューサーとして制作進行に関わった経験から、制作に入る前段で思考や段取りを整理することが、アウトプットの質に大きく影響すると実感しました。 本ポートフォリオでは、その際に得た考え方や視点を、実際のデザイン制作で試すことを意識しています。

目的What

• jQueryからの脱却 以前のコードを一部活かしつつ、現代的な実装へアップデートするため、Vanilla JavaScript（素のJS）とGSAPを用いた書き直しに挑戦しました。
• 未経験のトンマナに挑戦 業務では扱う機会のなかったトンマナにあえて挑戦し、以前から試してみたかった表現をデザインに落とし込みました。
• 生成AIの活用 画像生成、コード調整、文章のリライトなどに取り入れ、思考を加速させるためのツールとしての活用法を模索することを意識しました。
• 実装検証 パララックスやスクロールバー変更など以前から試してみたかった表現を実際に組み込み、表現の引き出しを広げることを意図しました。

制作フロー How

• リファレンス収集 トーンや世界観の方向性を定めるため、他ポートフォリオサイトのリサーチや取り入れたい表現・デザインの収集。
• 構成検討 ページ全体の内容や項目、情報の流れをざっくりと整理。
• 文字のみの台割作成 見た目に引っ張られないよう、テキストベースで情報を固める。
• ワイヤーフレーム作成 テキストの配置や項目の並べ方などを簡単に視覚化。構成が固まった段階で再度リファレンスを見直し、方向性を微調整。
• デザイン制作 方向性や構成がしっかりと固まった状態で、デザインの制作に着手。
• 静的コーディング まずは動きのないHTML・CSSのみでのコーディング。ローカルPCに開発環境を作成して行いました。
• 動きをつける JavaScriptを使用し、必要な動きを追加。ページの閲覧を邪魔せず、寂しくもならずの塩梅を意識。
• WordPress構築 WordPress構築およびフルスクラッチでのテーマ調整、実績管理するためカスタム投稿の作成。
• 内容入力 案件の登録やテキストの入力を行い、最終調整。

感想・気づき Insight

制作前に工程とスケジュールをしっかりと固めたことで、制作途中で迷う場面が少なく、軸のぶれないアウトプットを作ることができました。前段整理の重要性を、実制作を通して改めて確認することができたと感じています。
また、進め方や前段の整理方法、JavaScriptの実装を通して新しく得た知識などを整理しなおしてまとめることができた点も大きな収穫でした。今回の制作で得た学びは、今後の実務でも十分に活かせると感じています。