ポートフォリオ 
webサイト

URL:https://maple-nk.com/

製作期間:1ヶ月半(2024.1~更新中)

使用ソフト:VScode/Photoshop

対応機種:PC(レスポンシブ対応化中)

ターゲット:各社採用担当様

担当:立案/デザイン/コーディング/公開


デザインについて

  1. 私らしさを出すために、ヘッダーにはカエデの葉の画像を設置しました。画像はフリー素材をPhotoshopでイラスト風に加工。ページ全体の色は葉の色に合わせました。
  2. ヘッダーはページ上部に固定し、いつでも見たいページにジャンプできるよう設定
  3. PC版では、見たい作品の画像にカーソルを合わせると作品名と製作期間が表示されるようにしました。
    また、その作品でしようしたソフトがすぐ分かるように作品画像の下にソフトのアイコンを表示
  4. 作品の閲覧途中でページを変えられるようにボタンを設置
  5. 名前を直筆にすることで、より私らしさがでるようにしました。
  6. スキルは今の現状を正しく伝えたかったため、★で曖昧に表現するのではなく、文で説明を加えました。
    また、一目で分かるようにアプリのアイコンを表示するようにしました。

高校生から今までの作品をまとめ、私についてを記載したポートフォリオです。web制作、adobeソフトの使い方を学ぶために、全ページ1から作成しました。

初期デザイン

初めは飽きがこないように作品に合わせて各ページの背景やフォント、色使いを変えようとしました。しかし、見ている途中で頻繁に変化があると疲れてしまい見にくくなってしまったため、見やすさ重視で作品ページは全ページ統一しました。