当ポートフォリオサイト
- 概要
- webサイト新規立ち上げ
- 制作時期
- 2023年9月〜
- 期間
- 約2ヶ月半
-
- 企画/設計 3週間
- デザイン3週間
- コーディング4週間
- ページ数
- 13ページ前後
- 使用ツール
- Photoshop / Illustrater / Figma / VScode
- URL
- https://takagi-moe.com
サイト制作の背景
可能性を見出す姿勢を表現したポートフォリオ
就職活動にあたって、自身の制作物を紹介するポートフォリオサイトを制作しました。サイトのメインテーマは私が大切にしている「もっと良くなる」というマインドを取り入れ、現状に満足せずさらなる向上を目指す姿勢を表現しました。単に成果物の説明やこだわりだけでなく、制作プロセスとその結果から得た学びに焦点を当て、自身が考える課題点や今後の活かし方についてもご紹介しています。成功体験だけでなく、失敗や課題にも触れることで、自身の成長過程をよりリアルに共有できると考えました。
- my portfolio website
- my portfolio website
設計とデザイン
こだわり抜いたシンプルさ
まっさらな白をバックに、直線的なあしらいと一般的なNoto sansフォントを使用することで清潔感と素朴さを際立たせ、特別な配色やフォントに頼らない洗練された印象を目指しました。質素すぎるイメージにならないよう、ところどころに手書きのイラストを配置したりアクセントカラーに設定した緑色を使用して独自の雰囲気を演出しました。サイトカラーに合わせた写真撮影をディレクションし、事前に構図を考えて世界観に調和したビジュアルとなるよう工夫しました。撮影は自身のお気に入りの場所であるモエレ沼公園で行っています。
こだわり３選
01自身の特性を伝える「ふりかえり」
制作を通しての学びや課題も提示
一般的なポートフォリオでは、制作上のこだわりを説明することやプロジェクトの概要について焦点をあてることが基本となりますが、採用担当の方の目線に立ったとき、制作物そのものだけでなく制作プロセスやプロジェクトを終えた際に得た気づきや学び、そしてこれらを次のステップに活かすための課題点を理解していることが重要だと考えました。それぞれの制作物を紹介しているページで「制作を通して」というセクションを最後に設けて、自身の考えを述べることで自己分析力や向上心を伝えるポートフォリオを目指しました。
02時短で理解してもらう工夫
長い文章には必ず要約を用意
長い文章を読むことは忙しい採用担当者の方にとってストレスとなりうるため、さっと目を通しても内容が掴める要約としてのタイトルをサイト内の全文章セクションに用意しました。またテキストばかりの画面となってしまいがちなので、図解やイラストを活用して視覚的にも理解しやすく、目を引く要素として画面のアクセントになるよう工夫しています。
03開発環境の構築
PHPによるコーディングの効率化
今回の制作では、静的サイトの構築において初めてPHPを取り入れた開発に挑戦しました。作業環境としては、MAMPを使用してローカルサーバーを構築し、Gulpを活用してscssのコンパイルとbrowsersyncのホットリロードを利用して開発を行いました。WordPressを導入する数回のプロジェクト経験を生かし、共通パーツのファイル分類や変数の活用による効率化にスムーズに対応することができました。これにより、サイト運営においてより保守的な制作が可能となりました。
制作を通して
ポートフォリオサイトで、実現したいもの
このポートフォリオサイトの完成に至るまで、100人以上のポートフォリオを見て、さまざまなアプローチで自分自身を売り込む方法について調査しました。コンセプトは違えど、自分の中の光るものを模索し、表現して人の目に見える形にするという点では全員が共通していて、希望する就職先へ向けて発信するツールとして存在していました。もちろん自身もその目的意識があって、ご縁のある会社様につながるよう自分の分身を作る気持ちで制作に臨みましたが、今後自分が歩んでいく人生の重要な分岐点の記録としてこのポートフォリオを残したいという思いもありました。現在の私の全てを込めたこのサイトが、デザイナーとして社会に貢献するためのきっかけとなれば嬉しいです。
