【制作実績】ポートフォリオ制作過程と解説

【制作実績】ポートフォリオ制作過程と解説

こんにちは!飛田心と申します。

この度、ポートフォリオサイトを制作しました。

今までの制作物、学習内容、経歴等をサイトとして集約しました。計7つの制作物を掲載しています。
制作過程やこだわったポイントについてまとめてみたので是非ご覧ください。

サイト概要

制作したポートフォリオサイトがこちらです。

https://k-tobita.jp/

概要

  • 【担当範囲】 企画、デザイン、実装、アップロード
  • 【制作期間】 8ヶ月
  • 【使用言語】 HTML(EJS) / CSS(SCSS) / JavaScript
  • 【開発環境】 Git, GitHub / webpack + gulp / vscode
  • 【デザインツール】 Figma
  • 【URL】 https://k-tobita.jp/
  • 【リポジトリ】 https://github.com/kokoro-hart/my_portfolio

サイトマップ

サイトマップ

デザイン面では主に作品の魅せ方を工夫

ポートフォリオサイトは「作品の見せ方」がクオリティを左右する要素としてあると思ったので、様々なパターンを試しながらデザインとして落とし込みました。

①トップページは流れるように作品の情報が伝わることを目指す

作品の見せ方は、カラムやグリッドレイアウトなど様々なパターンを試しましたが、初見でのインパクトや作品の数などを考慮して、流れるように制作物全体がわかるような設計を採用。

スクロールしていった際に、トップページ全体で以下のような視線の流れを想定してデザイン・インタラクションに落とし込みました。

②作品ページはビジュアルコンテンツを中心に設計

basic認証付きのサイトを観覧していただくには少々ハードルがあると感じていたため、モックやキャプチャ、動画などを使用して実際にサイトを見なくても大まかな全体像を把握できるように工夫しました。

③ 作品ページごとに配色を変えることで世界観を表現

ベースの配色をシンプルなモノトーン調に保ち、工夫点として制作実績詳細ページでそれぞれのprimaryカラーを使用して世界観を表現。 次々と作品を見たくなるようなサイトを目指しました。

実装面で考慮したこと

①ページの表示速度と非同期遷移

サイトの表示速度、ページ遷移の速度にこだわりました。

画像周りの最適化や、barba.jsというライブラリを使用して非同期遷移を実装しました。
また、様々な書籍や文献を参考にしながら、できる限り高速なサイトを目指しました。
パフォーマンス改善はCVなどに直結してくる部分ですので、これからも手を抜かず常に学習と検証し続けたいです。

Lighthouseスコア - pc
Lighthouseスコア – pc

Lighthouseスコア - sp
Lighthouseスコア – sp

②気持ち良いイージングを目指す

Robert Penner’s Easing Functionsというサイト内のeasingを参考にSass変数にまとめて、試しながら実装しました。 時間を0.6〜1.7sの間で統一しています。その中でボタンやメニューなどのUI周りは、ユーザーに速く反応を返したいので、時間を短くして、 easeOutQuinteaseOutExpoなどを使用しています。

Robert Penner’s Easing Functions

③動きをつける部分のパフォーマンスへの考慮

動きをつける部分は、見えていないときは動かさないようにすることを意識しました。 ループで常に動く箇所は、Intersection Observer APIを使用して画面外だったときには動きを止めるようにしています。これからさらに機能や動きの多くあるサイトを制作するにあたって、細かいところでクオリティを向上させていきたいです。

開発面で苦労した点

慣性スクロールやパララックスを実装する上で出た細かいバグの修正。
barba.jsと他ライブラリの連携。ページ遷移後のmeta情報の書き換えなど苦労した点はありますが、
全体を通して、非常に学びの多いものになりました。

毎日サイトを見る習慣がついた

制作するにあたって個人・エージェンシーのポートフォリオから海外のアワードまで数え切れないほどサイトを見ました。

おかげで毎日サイトを見る習慣がつきました。

先端事例を参考にプロトタイプを作成しながら様々な表現を試していったことで、様々な学びがありました。

ポートフォリオで参考にしたサイト

毎日追っているギャラリーサイト

まとめ: ポートフォリオサイトを作って得られたもの、反省点

今回、一からポートフォフォリオサイトを作ってみてたくさんの学びがありました。

  • 情報設計・デザインを考える機会
  • 実装面でのスキルアップ
  • 毎日いろんなサイトを見る習慣が付いた

自由に興味のある技術に制限なく挑戦できるのは個人制作のメリットでもあるので、定期的にリニューアルしたいです。

反省点としては

完成させるまでにかなり時間をかけてしまったことです。
デザインをこだわりすぎて、何十回と修正して、その度に一から組み直したり。(そのおかげでコーディングスピードは上がりました(笑))

コンテンツの量に対してものすごい時間をかけてしまいました…。

次回からは、とにかく期限を決めて制作します!

この記事が少しでも参考になれば嬉しいです。

最後まで読んでいただきありがとうございました!