いたいかなのポートフォリオ

いまのわたしを形にした

オンラインサロンのデザイナーの方にご協力いただき、ポートフォリオサイトを制作いたしました。

「等身大の自分」というテーマのもと、実績だけでなく、私という人間そのものが伝わるようなサイトを目指しました。思考や好きなものをたくさん反映し、私らしさを大切にしています。

これまではポートフォリオサイトや制作実績をお見せすることが出来ず、自分自身を伝えるための材料が十分ではない状態でした。転職活動を始めるにあたり、採用担当の方々に私という人間を知っていただくには何が必要かを改めて考え、写真・エッセイ・実績など、“今の等身大の自分”をこのサイトにまとめました。

メインビジュアルの動画には、「うまくいかない日々」を“影”で、そして「前へ進もうとする姿勢」を“光”で表現しました。自然体の自分をイメージしたときに浮かんだ、青みがかった色調と陰影が印象的な映像を、過去の撮影データの中からセレクトしています。

キャッチコピーには、フロントエンドエンジニアを目指して学習に取り組む中で見つけた、自分らしさを表現する言葉を選びました。帯には、自身の好きな色を使用しています。

このサイトを通して、私の学びへの姿勢や取り組み方、そして人柄や好みなどを感じていただけたら嬉しいです。

【ホーム】

メインビジュアルに吹き出しのモチーフを配置し、私が思考を巡らせている様子を表現しました。
スライドには、主に自身の身体の一部が写った写真を選定し、視覚的にも“自分らしさ”を表現しています。
アクセシビリティへの配慮として、スライドに再生・停止ボタンを設置しました。
キャッチコピーには、文字が一文字ずつ現れるアニメーションを取り入れ、内面の言葉を文字起こししているような演出にしています。
「わたしについて」では、あえて顔が見えない画像(自分の好きなエッセイ書籍)を使用することで、どんな人物かに興味を持って詳細ページへ進んでいただけるよう工夫しました。
「つくったもの」では、すべての実績を見てもらえるよう、一押しの実績だけをホームに掲載しています。

【わたしについて】

バストアップ、アップ、後ろ姿の3種類の異なる画像を掲載し、自分の姿を多角的に見ていただけるようにしました。
より具体的に人柄を知っていただくために、私の好きなものや生い立ちを紹介しています。生い立ちについては、これまでの人生の歩みが一目でわかるよう、年表形式でまとめました。

【つくったもの】

【つくったもの詳細ページ】

【WordPress】

【全体を通して】

デザイナーの方とのスケジュール調整の際に、認識に齟齬が生じてしまいました。
→今後、期日の伝え方をより明確にし、認識のすり合わせを丁寧に行っていきたいと思います。
メインビジュアルのテキストアニメーションが終了するタイミングで、スライダーのページネーションを表示させる調整に時間がかかってしまいました。
→今後はより多くのWebサイトを参考にしながら、アニメーションのタイミングや順序・演出の感覚を養っていきたいです。
WordPressのテンプレート階層の理解が不十分で、どのテンプレートを使用すればよいか混乱してしまいました。
→テンプレート階層の図を見ながら、自分が制作すべきテンプレートを確認し、解決しました。
サイトをサーバーにアップする際に手順を忘れてしまい、作業に時間がかかってしまいました。
→今後は手順をまとめてメモに残し、忘れてしまってもすぐに思い出せるようにしたいです。

公開日: 2025年4月25日
制作規模: 2名
制作担当: コーディング
制作期間: コーディング : 29.5日
制作時間: 265.5時間（1日あたり：8～9時間）

静的コーディング：121.5時間

動的コーディング：27時間

ワードプレス化：117時間
使用言語: HTML / CSS(SCSS) / JavaScript
開発環境: vite / wp-env
使用ツール: Illustratior / Photoshop / Lightroom Classic / Visual Studio Code / Figma / GitHub
撮影機材: FUJIFILM GFX 50S / Mamiya SEKOR C 80mm F1.9
撮影場所: 神奈川県　新百合ヶ丘 / 三浦郡葉山町 / 大浜海岸

つくったものをすべて見る