概要

自身の経歴や制作物をまとめたポートフォリオサイトを制作しました。コンセプトは「変化」とし、これまでの経験や環境の変化、Webデザインを学ぶ中で考え方やスキルがどのように積み重なってきたかを、サイト全体を通して表現しています。

目的

就職活動をするにあたり、応募書類だけでは伝わりにくい人柄や雰囲気、制作物や制作意図に加え、自分にできることを伝える。

ターゲット

企業の採用担当者の方

情報設計

採短時間で全体像を把握できるよう、トップページでは各セクションの内容を簡潔にまとめ、詳しい情報は下層ページで確認できる設計にしました。特に制作物を重点的に見ていただきたいため、WORKSではホバー時に変化のある動きを加え、自然と作品に目が向くよう工夫しています。各作品の詳細ページには、前後の作品へ移動できる導線や一覧ページへ戻るボタンを設置し、複数の制作物をスムーズに見比べられるようにしました。SKILLSでは、スマートフォンでは縦に並べて一覧しやすく、PCでは横にスクロールする形にすることで、ひとつひとつのスキルが印象に残るようにしています。また、コンセプトである「変化」を表現するため、文字の動きや背景色の切り替えなどを取り入れ、見進めるごとに印象が少しずつ変わる構成としました。

デザイン

全体は落ち着いた色合いを基調とし、情報が整理されて見えることを大切にしました。配色や余白、要素の形にルールを持たせることで、サイト全体に統一感を持たせています。FVやSKILLSに使用しているアルファベットの文字は、サイトの印象をかたちづける要素として取り入れました。配置や重なり方、配色のコントラストによって画面にメリハリをつくり、ページごとに印象が少しずつ変わることで、テーマである「変化」を表現しています。また、スクロールに合わせて内容が切り替わることで、無理なく読み進められる流れを意識しました。必要以上に装飾を加えず、内容が伝わることを大切にしています。

使用フォント

Noto sans JP / Neue Haas Grotesk Display Pro / Didot LT Pro
本文には「Noto Sans JP」を使用し、情報量が多くても読みやすいことを重視しました。英字表記やセクションタイトルには「Neue Haas Grotesk Display Pro」を使用し、全体をすっきりと整理しています。アクセントとなる見出しやロゴには「Didot LT Pro」のイタリック体を使用し、落ち着いた中にも印象に残るポイントをつくりました。

配色

#011735

#F2F0EC

#79879A

#FF383C

#EFEF83

ベージュとネイビーをベースカラーとし、アクセントとして赤や黄色を取り入れました。落ち着きと統一感を保ちながら、要所で視線を引きつけるコントラストを意識した配色設計としています。

使用ツール

Figma / Photoshop / Visual Studio Code

制作期間

企画・WF：約30時間
デザイン：約65時間
コーディング：約100時間