WORKS

自身のポートフォリオサイト

Website
2023/1/22〜
URL: https://nozomi-matsuzaki.com

ターゲット

企業の採用担当の方々

目的

転職活動を行うため、今までの経験や仕事に対する想い、自身を表現して知っていただくため

制作担当箇所

デザイン調査・ワイヤーフレーム・デザイン・コーディング

デザイン案

様々なポートフォリオサイトを調査した上で、デザイン案を作成いたしました。

使用カラー

使用フォント

和文フォント:ZEN角ゴシック
欧文フォント:Jost

デザインポイント

  • メインビジュアルにも動きを加え、日々様々なポートフォリオを閲覧されているご担当者の方にまずは印象に残るものに。
  • クリックする箇所を減らしつつも長くなりすぎず、単調にならないようなデザインに。
  • ポートフォリオらしさを残しつつも自分らしさを表した。
  • 私の強い想いが伝わるように全体的な太ゴシックを使用。
  • ヘッダーメニューもスマホにした際もあえてハンバーガーメニューを使用しないことでワンアクション減らした。

デザイン詳細内容

全体構成

まずは、名前を大きく出し、「N」だけは色を変えている理由としては、チームを引っ張っていけるような人材に成長したいという思いを込めました。
また、全体に色をあまり入れない中でここだけ色を入れることで印象に残るようにしました。
そして私が「働く意味」と「想い」を冒頭に載せることで、私のイメージ像を強めて自己紹介を見ていただきたいと考えました。
写真もポートフォリオサイトでは正面からのものをあえて載せない方もいますが、一緒に働くかもしれない「私」の顔を見ることで安心感や期待感を持っていただけるのではないかと考えました。
自己紹介も経歴もぜひ読んでいただけるよう別ページを作成するのではなく、スムーズに読んでいただけるようにしました。

配色&フォント

いくつものポートフォリオサイトをみて感じたのは、やはりシンプルに限るということと余計な要素は入れないことだと思いました。
ただ、シンプルすぎでも面白みがないため、シンプルな要素を使いつつも「もっと見てみよう」と思っていただけるよう各箇所を「並べるだけ」ではなく、プラスαの動きを追加しました。

フォントは太いものを使用して読みやすく、インパクトがあり、特にファーストビューの文字はロゴのようでもあり、男性的とも感じる逞しさのようなものを表現しました。

配色としては、私を象徴する写真や作品のカラーが映えるように、全体的にモノトーンにしました。
アクセントカラーで青を選んだ理由としては挑戦的な性格だけでなく、周りに信頼される人でいたいという思いを込めました。

作品ページ

受託業務を行っている会社のためポートフォリオに掲載できる作品が少ないので、作品を作るまでの過程や考え方等を知っていただくため、以下のように細かく記載しつつもくどくなりすぎない程度の内容を盛り込みました。

使用ツール

Photoshop / Illustrator / XD / Visual Studio Code

制作期間

企画・ワイヤーフレーム:6日
デザイン:1週間
コーディング:2週間
OTHER WORKS