就活成功に導いたポートフォリオサイトの紹介

**就職活動・転職活動に備えてポートフォリオサイトを作成**したので経緯や内容・工夫点をご紹介します。

**簡単に実践できてサイトの質を向上させることができる工夫点**も複数紹介しているので，参考になる方も多いと思います！

完成したサイト・ソースコードがこちら↓

https://portfolio-nuxt-inky.vercel.app/

https://github.com/Jun-T-git/portfolio-nuxt

# 前提
- 制作者は**学生**
- **就職活動**で**スキルや過去の実績をアピール**することを目的に制作を開始
- 就活が終了した現在も**副業探し**や**転職活動**を見据えてアップデート中
- 勉強のために触ったことのない**Nuxt.js**を使用

# 方針
自身のことや過去の実績について知ってもらうことが一番の目的であるため…
- サイト自体の機能を盛り盛りにしてスキルをアピールするというより，**伝えたいことが十分に伝わるようなUI**を作成することを優先したい


とはいえスキルもアピールしたいため…
- **目的から離れすぎない範囲でフロントエンドに機能**をつける
- **サイトパフォーマンス**に気を配る

# 表示項目
下記項目を表示することにしました。

- 簡単なプロフィール（Profile）
- 過去の制作物(Works)
- プログラミング言語やフレームワーク等のスキル・経験（Skills）
- GitHubやQiitaの情報（Activities）

詳細プロフィールや経歴なども載せるか悩みましたが，個人情報を載せすぎるのも少し怖いので今回は載せないことにしました。

# 内容・工夫点
項目ごとにご紹介します。

## Profile
サイトトップに以下の要素を表示します。
- 名前
- GitHubアカウントへのリンク
- GitHub Contribution

象徴的な画像やアイコン，キャッチコピーなどがほしいところですが，今のところはありません…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/672fc701-c509-962f-fcfb-2a1419a5822f.png)

### 複数のGitHub Contributionの表示
GitHubのContribution（いわゆる草）は過去にどの程度開発をしているのか評価するうえで重要な指標のひとつになり得ます。

しかし，GitHubのアカウントを複数使い分けている場合（会社用・個人用など），その全てを見に行くのは少し面倒です。（就活の際に人事の方がそこまでしてくれるか怪しい）

そこで，**GitHub APIを使うことで会社用と個人用の２つのアカウントのContributionをまとめて表示**させてみました。

実装方法については以前まとめたので興味がある人はぜひ↓

https://qiita.com/Jun-T/items/92357939c06141c13e59

（この機能はオリジナリティや技術的なアピールにもなりそうなので結構気に入っています笑）

### GitHub Contributionの表示/非表示切り替えボタン
仕事でどの程度開発しているのか知りたいという場合もありそうなので（その逆も），画像右下のボタンからContributionの表示/非表示切り替えができるようにしました。

この機能は**UIデザイン**の観点から以下の工夫をしており，**説明文なしでも直感的に操作できる**と思います。
- 単なるボタンではなく**トグルボタンを使用**することで**ON/OFFを切り替えるためのUIであることを分かりやすく**する 
- **色・アイコン画像をContribution表示と統一**することで**切り替え操作の対象を分かりやすく**する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/8cec3b5b-9993-8e79-2b5f-134fd9f79a69.png)

ちなみにこのトグルボタンはbutton,img,divを組み合わせ，CSSでtransitionをつけることで半ば強引に実現しています笑

## Works

制作物について，以下の情報を表示
- 名前
- 概要
- 技術やアピールポイント等のキーワード
- 制作日
- サイト・ソースコードのリンク

最大4件の表示しか想定していないため，現時点では静的に実装しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/caed50f6-3779-e316-1155-149faa7cb647.png)

## Skills
スキルについて，主に以下の情報を静的に表示
- 名前
- レベル
- （ロゴ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/7b6fb5d9-8a91-0867-b1f2-640d0071f04c.png)

**アピールポイントを明確にする**ためにメインでアピールしたいスキルを8つに絞り，それらには**ロゴやレベル**（そのスキルに対する自信）も併せて表示しました。

サブのスキルには大きなアピールになりそうにないスキル（GitやTailwindcss等）やメインと比較してアピールの優先度が低いスキル（分野が少し違う，経験が少ない等）を記載しています。

また，実務経験の有無を問われることも多いため，メインのスキルは**実務経験あり(緑)となし（オレンジ）で色分け**しました。

懸念点として，ロゴの周りのゲージの基準が分かりにくい気もしますが，学生の私には経験年数のような数値で測れるような指標がないため，今はこのままにしています。
（週1ぐらいで開発している時期もあれば毎日開発している時期もあるので…）

ちなみに，Tailwindcssで頑張ってhoverアクションをつけたので是非PCでご確認ください…！

## Activities
各種**公開APIを利用**し，以下の情報を**動的に**表示
- GitHubのリポジトリ
- Qiitaの投稿

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/26152ca6-1ab6-f2ba-031e-c43a32c8f778.png)

### RESTとGraphQL

GitHub APIは**GraphQL**，Qiita APIは**REST**と，**あえて異なる方式のAPIを採用**しているため，少しは技術的なアピールになればと期待しています…

Qiita APIについても以前まとめたのでぜひ↓

https://qiita.com/Jun-T/items/882be5c6d59f0e29c6c7

## サイト全体

### サイトパフォーマンス
LighthouseやPageSpeed Insights等の分析ツールを活用しながら問題点を一つ一つ潰していくという方法で，**高いサイトパフォーマンス**を実現しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/8e6fb829-e0fb-9a0a-b9a2-f28efca8405f.png)

#### SSG(Static Site Generation)
今回制作するサイトは，更新頻度が低く，リアルタイムな情報更新も求められないため，ビルド時に静的ページを生成する**SSG(Static Site Generation)による高速化**が期待できます。

ただし，サイトトップに表示しているGitHubのContributionは毎日更新されてほしいため，**GitHub Actionsを用いて毎日定時に自動ビルド**されるよう設定しています。

#### 表示データの制限（ページネーション）
基本的には，表示するものが多いとそれだけ時間がかかります。
また，無駄なスクロールも増えるためユーザビリティ的にも良いとはいえません。

以上の理由から，GitHubのリポジトリやQiitaの投稿などの**初期表示数を制限し，「Show More」ボタン押下によって表示数を増やす**という仕様にしています。

#### CLS対策
一部データの読み込みが遅れることなどが原因でレイアウトがずれる場合があります。

これは，ユーザの誤クリック等を招くため，**CLS(Cumulative Layout Shift)という表示の安定性を測る指標**に悪影響を与えます。

一般的にはデータの読み込みが完了するまで**スケルトンやプレースホルダと呼ばれる代わりの要素を表示させる**ことで対策されたりしますが，今回は元々画像以外で読み込みが遅れるということがほとんどなかったため，**imgタグのheight,width属性を設定する**だけで対策できました。

#### PWA対応
PWA（Progressive Web Apps）に対応することでネイティブアプリのようにホーム画面に追加し，ブラウザとは別タブで開くことができるようになります。

また，Service Workerのキャッシュによりオフラインでも閲覧可能になったり，オンラインでの読み込みが高速化されたりといったメリットもあります。
（今回は対応しませんが通知機能なども実装可能になります！）

実装方法割愛しますが，画像用意して設定の記述を少し加えるだけなのですぐできました！

![IMG_5912.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/93258748-de64-d825-5b4b-d54d3ab80211.png)

#### Accesibility向上
少しパフォーマンスとはずれますが，LighthouseやPageSpeed InsightsのAccesibility欄を参考にしながら**Accesibility向上**に努めました。

具体的には，**imgタグのalt属性，buttonやaタグのaria-label**等を設定することで，テキスト読み上げ機能などにも対応しました。

また，**色のコントラスト**を一定以上に保つことで，**誰にとっても見やすいWebサイト**を実現しました。

### OGP設定
TwitterやQiitaなどでリンクを貼った際の，サイトタイトルや説明，画像などの表示設定です。

ポートフォリオサイトの目的を考えると，**検索からではなくシェアから訪れる**場合がほとんどであるため，地味ですが重要です。

今回は以下の画像のように設定しておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/a49496d3-28b7-9eaa-1b39-4cebe3c54bd8.png)

# 今後の課題・展望
- スマホ表示時のパフォーマンス向上（画像出し分けとか）
- テキスト圧縮（やろうとしたけどなぜかできてない…）
- 画像最適化（今回は効果薄そうだからやってない）
- ナイトモードの実装
- SEO対策（検索での流入を求めてないからやってない）

# おわりに

技術的に難しいことはあまりしていませんが，**目的に対して一貫性のある**良いものができたと考えています。

気になったところやアドバイスがあればコメントいただけると嬉しいです！

就活は終わっちゃいましたが，副業は探しているので[Twitter](https://twitter.com/prrr_343)のDMなどでお声がけいただけると嬉しいです！

完成したサイト・ソースコード↓

https://portfolio-nuxt-inky.vercel.app/

https://github.com/Jun-T-git/portfolio-nuxt