私がポートフォリオに込めるたった 1 つの意味

## 意味

私はポートフォリオに次のような意味を込めています：

> 株式会社 ●● (人名) の ●● (人名) というサービスを世に知らしめる or 売り込む

## こんな感じのを作った

https://portfolio.fairy-select.com/

## きっかけ

一般的に、転職活動は相手の会社に自分をアピールしたり、それによって内定を獲得したりする活動のことを言います。私の場合は、転職活動がいつしか「自分という商品で相手に営業をかけて成約を取る」という感覚に変わっていました。  
だとすれば、

> 会社の商品を相手に売る状況と同じだよね？

と。そしてそれと同時に、

> 職種関係なく営業力（商品の良さを伝える力）は必要なんだ

と気づいてしまったのです。

私は転職活動において、「会社」は「自分」のことであり、「商品」は「自分」のことであると考えています。  
つまり、「自分という会社の自分という商品を売り込む」ことになります。

商品を伝える方法には以下の要素があります（あくまで私の解釈です）：

- トーク（その場のノリ）
- 資料（事前準備）

自分はトークが平均以下なので、資料を作りこむ方に注力しようと思いました。  
そして、会社のウェブサイトみたいにいい感じのものを作りたいと思い、自分バージョンを作りました。

## ポートフォリオに載せたもの

会社では、会社のホームページが存在して、概要・ソリューション・ブログ・採用情報などが載っています。
私は以下の表のようにポートフォリオに置き換えました。

| 会社                     | ポートフォリオ                         |
| ------------------------ | -------------------------------------- |
| 会社概要                 | 自分の生い立ち・職務経歴               |
| ソリューション・対応事例 | スキル・資格・今まで作ったもの         |
| （テック）ブログ         | 日記・ブログ                           |
| 採用情報                 | 連絡先・自分が受けられる仕事の内容など |

また、表にはありませんがプライバシーポリシーも必須です。プライバシーポリシーはブログでよく使われているものを参考に、英語・日本語ともに記載しました。

## どんなツールを使ったか

### フロントエンド・デザイン

フロントエンドやデザインの経験が特に薄かったので、静的サイトジェネレータとそこにある良さげなデザインをもとに、少しアレンジすることにしました。  
そして、採用したのが [Hugo](https://gohugo.io/) です。

https://gohugo.io/

[Jamstack のサイトジェネレータ一覧](https://jamstack.org/generators/) で比較しましたが、決め手になったのは以下の点です：

- 自分が興味ある Golang で作られている
- テンプレートが豊富で、ポートフォリオ向けのデザインも何種類かある
- ビルドが速く、制作体験が良い

テンプレートは [toha](https://themes.gohugo.io/themes/toha/) を選択しました。

https://themes.gohugo.io/themes/toha/

実際、作っている間が一番楽しく、初版の完成までまったく飽きることがありませんでした。  
自分の期待通り、いい感じに仕上がったので、企業さんとの面談では多くの方から「フロント得意なんですか？」と言っていただき、これはうれしい誤算（？）でした。

### サイト名・スローガン

サイト名は会社でいう社名にあたります。  
私の場合は紆余曲折あり、自分のことをうまく言い表す単語を並べました。

スローガンは、自分が仕事で大事にしていることをシンプルに 1 文にまとめます。

### ロゴ

ロゴは会社においてトレードマークとなるため、自分のサイトにもロゴを用意する必要がありました。  
でも、デザインは苦手なので、どこか自動生成してくれるサイトが無いか探した結果、見つけたのが [Brandmark Logo Maker](https://brandmark.io/) でした。

https://brandmark.io/

このサイトでは、社名・スローガン・キーワード・カラースタイルを選択することで、条件に合ったロゴのデザインを自動生成し、何種類か提示してくれます。  
いいものが見つからない場合は納得いくまで生成をやり直します。

ロゴが決まったら、ロゴの入っているデザインテンプレートを購入します。
プランが以下のように 3 つあるのですが、私はデザイナープランを選択しました。

- ベーシックプラン：PNG 画像のみ、$25
- デザイナープラン：デザインテンプレート一式、$65
- エンタープライズプラン：デザイナープランの一式＋Brandmark 社デザインチームによるコンセプト作成（最大 10 個）、$175

デザインテンプレート一式には以下のものが付いてきました。

- ロゴ画像
- デザインガイドライン
- モックアップ（製品にロゴを印刷したときのイメージ画像）
- プロフィールアイコン
- 名刺デザイン
- MS Word の文書デザイン
- Facebook/Instagram 用素材
- プレゼン用スライドデザイン (MS PowerPoint)
- 請求書

Brandmark Logo Maker で作ったロゴの著作権は購入者に属し、商用・個人問わず自由に使用することができます。  
また、1 度購入してしまえば、ロゴの修正は何度でも可能です。

## 工夫したところ

ポートフォリオのデザインはほぼ工夫していません。どちらかというと、メンテナンス・更新を楽に行うための工夫を行いました。

### ビルド後にテストを実行する

サイトを何度か更新していた時に、画像が 0 バイトになったり、ブログが 404 になってしまうなどのインシデントがあったりしたため、以下のようなテストをビルド後に実施しています：

- ビルド後の画像で 0 バイトのものが存在しない
- ブログページ（プライバシーポリシー）のページが正常に表示されることを E2E でテストする

この結果、サイトの稼働率が相対的にアップしました（具体的に計測はしていませんが）。

### テンプレートのリポジトリにプルリクを出す

テンプレートを一度導入してしまえば自由にカスタマイズできるのですが、これはみんなが必要、と思ったものについてはプルリクエストを出して対応しました。  
これにより、リポジトリ更新への対応工数が大幅に削減されました。

今まで出したプルリクエストたち

https://github.com/hugo-toha/toha/pulls?q=is%3Apr+author%3A%40me

### ブログ記事だけ別のリポジトリに分離する

Hugo においては、ブログ記事も同じリポジトリに格納します。そのため、ブログをちょくちょく更新する場合、コミットログに「ブログを更新」がたくさん並んで見にくくなるという問題がありました。  
そこで、ブログのディレクトリだけ別のリポジトリに移動させて、ブログのリポジトリにプッシュされたらポートフォリオのリポジトリでビルド・デプロイする仕組みを用意しました。

## あとがき

いまではサイトを更新することが楽しみになりました。