意味
私はポートフォリオに次のような意味を込めています：
株式会社 ●● (人名) の ●● (人名) というサービスを世に知らしめる or 売り込む
こんな感じのを作った
きっかけ
一般的に、転職活動は相手の会社に自分をアピールしたり、それによって内定を獲得したりする活動のことを言います。私の場合は、転職活動がいつしか「自分という商品で相手に営業をかけて成約を取る」という感覚に変わっていました。
だとすれば、
会社の商品を相手に売る状況と同じだよね？
と。そしてそれと同時に、
職種関係なく営業力（商品の良さを伝える力）は必要なんだ
と気づいてしまったのです。
私は転職活動において、「会社」は「自分」のことであり、「商品」は「自分」のことであると考えています。
つまり、「自分という会社の自分という商品を売り込む」ことになります。
商品を伝える方法には以下の要素があります（あくまで私の解釈です）：
- トーク（その場のノリ）
- 資料（事前準備）
自分はトークが平均以下なので、資料を作りこむ方に注力しようと思いました。
そして、会社のウェブサイトみたいにいい感じのものを作りたいと思い、自分バージョンを作りました。
ポートフォリオに載せたもの
会社では、会社のホームページが存在して、概要・ソリューション・ブログ・採用情報などが載っています。
私は以下の表のようにポートフォリオに置き換えました。
| 会社 | ポートフォリオ |
|---|---|
| 会社概要 | 自分の生い立ち・職務経歴 |
| ソリューション・対応事例 | スキル・資格・今まで作ったもの |
| （テック）ブログ | 日記・ブログ |
| 採用情報 | 連絡先・自分が受けられる仕事の内容など |
また、表にはありませんがプライバシーポリシーも必須です。プライバシーポリシーはブログでよく使われているものを参考に、英語・日本語ともに記載しました。
どんなツールを使ったか
フロントエンド・デザイン
フロントエンドやデザインの経験が特に薄かったので、静的サイトジェネレータとそこにある良さげなデザインをもとに、少しアレンジすることにしました。
そして、採用したのが Hugo です。
Jamstack のサイトジェネレータ一覧 で比較しましたが、決め手になったのは以下の点です：
- 自分が興味ある Golang で作られている
- テンプレートが豊富で、ポートフォリオ向けのデザインも何種類かある
- ビルドが速く、制作体験が良い
テンプレートは toha を選択しました。
実際、作っている間が一番楽しく、初版の完成までまったく飽きることがありませんでした。
自分の期待通り、いい感じに仕上がったので、企業さんとの面談では多くの方から「フロント得意なんですか？」と言っていただき、これはうれしい誤算（？）でした。
サイト名・スローガン
サイト名は会社でいう社名にあたります。
私の場合は紆余曲折あり、自分のことをうまく言い表す単語を並べました。
スローガンは、自分が仕事で大事にしていることをシンプルに 1 文にまとめます。
ロゴ
ロゴは会社においてトレードマークとなるため、自分のサイトにもロゴを用意する必要がありました。
でも、デザインは苦手なので、どこか自動生成してくれるサイトが無いか探した結果、見つけたのが Brandmark Logo Maker でした。
このサイトでは、社名・スローガン・キーワード・カラースタイルを選択することで、条件に合ったロゴのデザインを自動生成し、何種類か提示してくれます。
いいものが見つからない場合は納得いくまで生成をやり直します。
ロゴが決まったら、ロゴの入っているデザインテンプレートを購入します。
プランが以下のように 3 つあるのですが、私はデザイナープランを選択しました。
- ベーシックプラン：PNG 画像のみ、$25
- デザイナープラン：デザインテンプレート一式、$65
- エンタープライズプラン：デザイナープランの一式＋Brandmark 社デザインチームによるコンセプト作成（最大 10 個）、$175
デザインテンプレート一式には以下のものが付いてきました。
- ロゴ画像
- デザインガイドライン
- モックアップ（製品にロゴを印刷したときのイメージ画像）
- プロフィールアイコン
- 名刺デザイン
- MS Word の文書デザイン
- Facebook/Instagram 用素材
- プレゼン用スライドデザイン (MS PowerPoint)
- 請求書
Brandmark Logo Maker で作ったロゴの著作権は購入者に属し、商用・個人問わず自由に使用することができます。
また、1 度購入してしまえば、ロゴの修正は何度でも可能です。
工夫したところ
ポートフォリオのデザインはほぼ工夫していません。どちらかというと、メンテナンス・更新を楽に行うための工夫を行いました。
ビルド後にテストを実行する
サイトを何度か更新していた時に、画像が 0 バイトになったり、ブログが 404 になってしまうなどのインシデントがあったりしたため、以下のようなテストをビルド後に実施しています：
- ビルド後の画像で 0 バイトのものが存在しない
- ブログページ（プライバシーポリシー）のページが正常に表示されることを E2E でテストする
この結果、サイトの稼働率が相対的にアップしました（具体的に計測はしていませんが）。
テンプレートのリポジトリにプルリクを出す
テンプレートを一度導入してしまえば自由にカスタマイズできるのですが、これはみんなが必要、と思ったものについてはプルリクエストを出して対応しました。
これにより、リポジトリ更新への対応工数が大幅に削減されました。
今まで出したプルリクエストたち
ブログ記事だけ別のリポジトリに分離する
Hugo においては、ブログ記事も同じリポジトリに格納します。そのため、ブログをちょくちょく更新する場合、コミットログに「ブログを更新」がたくさん並んで見にくくなるという問題がありました。
そこで、ブログのディレクトリだけ別のリポジトリに移動させて、ブログのリポジトリにプッシュされたらポートフォリオのリポジトリでビルド・デプロイする仕組みを用意しました。
あとがき
いまではサイトを更新することが楽しみになりました。