【実案件】本ポートフォリオサイト
概要
2022.11 自分のポートフォリオサイト制作しました。
制作期間
2022年11月の1ヶ月間で制作しました。
中身のコンテンツは固まっていたので実工数は0.5人月程度です。
制作目的
自分のWebデザイン・動画編集の制作物を一覧で見せること。
また、このサイトを見た人に仕事を依頼してもらうこと。
制作の背景
以前はRESUMEというポートフォリオサービスに制作物を掲載していました。
しかし、自分の請け負いたい仕事が「Webデザイン」と「動画編集」と大きく2種類あり、
それぞれの応募で見せたい制作物が異なるが、Resumeでは分けて見せることができないことから
自分のWebサイト制作実績作りを兼ねて、自作のポートフォリオサイトを制作することにしました。
制作方針
・最低限実現したいこととしては「RESUME」からの移行なので、
「RESUME」に記載できていた内容は全て載せること（作品・スキル・経歴等）
・Webデザイン関連の制作物と動画編集関連の制作物を分けて見せられるようにすること。
・このサイト自体も制作実績とするので、目的を邪魔しない程度にスキルが伝えられる作りにすること。
ターゲット
・Webデザイン、動画編集の業務を依頼したい事業者
・Webデザイン、動画編集の業務を手伝って欲しい同業者
使用ツール・スキル
・コーディングについてはHTML・CSS・jQueryを使っています。詳細は後述します。
・デザインカンプはXDで作成しています。
・Pointのフラグ・英字の飾り文字についてはIllustoratorで作成しています。
使用素材
・写真素材はAdobe Stockから、イラスト画像はLoosedrawingから利用しています。
またそれらの素材を規約の範囲内で加工をしています。
・問い合わせフォームについてはPHP工房のメールフォーム（MailForm01）を利用しています。
工夫した点（デザイン）
・当初Webデザインと動画編集で完全に2分割を考えていましたが
自己紹介など共通的に見せてたい部分もあるので、2色の色分けで表現しました。
・写真についても採用した2色に近くて自分が好きな世界観の写真を採用しました。
・トップページはLP的に利用したいので、トップページである程度の情報が分かり、
子ページは制作物含めて詳細な情報を見てもらう際に入ってもらう場所としました。
また、問い合わせフォームまでの流れが違和感ない構成にしました。
（単に作品だけを見せるものにはしないようにしました）
・LP的にしたことでトップページの情報量が多くなったので、コンパクトにする工夫として
サービス詳細はあまり多くは開かないと思われるのでモーダルウィンドウにし、
スキルの詳細は個別にも一括でも見れるようアコーディオンメニューを採用しました。
工夫した点（コーディング）
動的な機能としては以下の機能を盛り込んでいます。
jQueryは1/3/4/6/7/8/9で、CSSのanimationで1/2/3/5/9で表現しています。
1. ヘッダーはメインビジュアルを過ぎてから表示
2. メインビジュアル上でのスクロールダウン表示
3. ページトップ（またクリックでジャンプではなくスクロールで戻る）
4. スクロールしていくと各セクションふわっと下から表示
5. ホバー効果
文字やボタンは色変更、画像は拡大、アコーディオンは薄く、Worksは日本語が追加
6. モーダルウィンドウ
7. アコーディオンメニュー（1個ずつでも一括でも開閉できる）
8. モバイル用ハンバーガーメニュー
クリックでバツになり、上からグローバルナビゲーションが降りてくる
9. メインビジュアルのアニメーション
文字が1つずつ上がって表示、その後サブタイトルが上から出てくる
さらにその後タイトルとサブタイトルの位置がずれてグローバルナビゲーションが降りてくる