使い勝手を重視したポートフォリオを作った

ポートフォリオを作りました。

https://www.alphabrend.co.jp

動機

といっても僕は駆け出しエンジニアではなく、10 年以上フリーの Web エンジニアとして活動しています。しかしほとんど昔からのお客様からの仕事をやっており、あまり周りとの繋がりが強くありません。

そのため日々「これじゃだめだ」という気持ちを抱えており、且つもっといろんな事をしてみたいという気持ちもあります。

さらに昨年末に三男が生まれたこともあり、家族を支えるためもっともっと色々なことにチャレンジしたいという気持ちが強まりました。

そんな折、うちは形態は法人ですので一応昔 WordPress で作った適当な会社のサイトがあるのですが、基本的にに放置状態でほとんどこの世に無いも同然の状態で放置されています。まずはこれをちゃんと僕自信の事がわかってもらえ、問い合わせをしてもらえるちゃんとしたポートフォリオとして作り直そうと考えました。

どんなポートフォリオにするか

ではどんなポートフォリオを作れば良いのだろうと考えました。

みんながよく作っているものを思い出してみると、デザインがとてもいい感じのものを作っていたりします。しかし僕はデザインは全くわかりません。いい感じのデザインテンプレートを使っても、それを自分のサイトに合うように改造できる気がしません。

すごくユニークなポートフォリオもあったりします。CLI っぽいものや、ゲームっぽいものなど。でも仕事の窓口としてのポートフォリオとしてはどうでしょうか？　面白いけどエンジニアを探している担当者からすると見づらいのでは？

そんな事を考えているうちに、じゃあ僕のことがわかりやすく、ポートフォリオ内でも迷いにくく、連絡してみたいと思ったらすぐ連絡できる、とにかく可能な限り使い勝手の良い UX にこだわった実用的なポートフォリオにしてみたらどうだろう、と思いました。

別に良い UX について詳しいわけではないのですが、普段から色々とサービスやアプリを作っている関係で、他の人の作っている UX の優れたものをよく見ています。すごいものはできなくても、それなりに使い勝手の良いものであれば僕にも作れるのではと感じたため、その方針で作ることにしました。

何で作るか

どうやって作ろうか悩みました。素の HTML、CSS で作るのもありかなと考えたましたし、Gatsby や Hugo のような静的サイト生成フレームワークを使うのが良いかなとも考えました。

しかしやはり気持ちよく使ってもらいたいと考えると、SPA でぱぱっと画面遷移などできる方が良いと思ったため素の HTML での作成は無しかなと思いました。

Gasyby や Hugo も良いのですが、カスタマイズしたい場合などに覚える事がちょっと多いかもという気がしたため、今回は個人でよく使っている Next.js で作ることに決めました。

理由は、余計なところに考える時間を取られたくなかったため、なるべくもう素の HTML と CSS を書くような感覚で作りたいと思ったためです。Next.js であればページ用のファイルを配置して、ほぼ HTML と同様の jsx をガガッと書いていくだけで作れます。且つ、その上に一部動きを入れたり処理を入れたりすることも非常に簡単です。

ということで今回は下記を使って作りました。

• Next.js
• TypeScript
• Chark UI（デザイン）
• GAS（メール送信）

デザイン

CSS は完全に理解しているためちょろっとした調整は可能ですが、デザインはよくわからないし自分でいい感じのデザインコンポーネントを作るのも嫌いなため、普段は何かしらのフレームワークを使っています。だいたい Bootstrap か Bulma を使っているのですが、今回はちょっと前に Chakra UI の事を目にし、ざっと眺めたところ Next.js で使うのに便利そうだったためそれを使ってみることにしました。

Chakra UI の良かったところ

どのように良さそうかと思ったかというと、まずはサイトを作っていくのに必要なコンポーネントがたくさん用意されていたためです。たとえばボタンなどはこんな感じでシンプルす。

また、拡張したい場合は下記のようにパラメータを追加したり、

<Button colorScheme="teal" size="lg">

且つ全てのコンポーネント共通で利用できるパラメータもかなり網羅されているようです（こういった仕様の関係で、基本的には通常の HTML タグではなく専用のコンポーネントを使っていくようです。とはいえスタイルはだいたい指定できるようですので問題はなさそうです）。

<Box textAlign="right">

Tailwind CSS だけだとデザインのできない人にとっては一つのコンポーネントを作るために大量に書かなければならない CSS 名の列挙を見て「ウッ」となりますし、Bootstrap や Bulma では処理を入れる際に React と無理やり組み合わせる感が大きく不便さを感じます。

Chakra UI はそれの両方を解決する丁度バランスの良いライブラリで、自分にとってはぴったりだと感じました。

PC サイズも小さくて良い

最近の CSS フレームワークはだいたいレスポンシブ対応しており、スマホの場合は横幅 100%、PC の場合は横幅の最大サイズが決まっていたりします。Chakra UI の場合、そのデフォルトの PC での最大サイズが非常に小さかったため気に入りました。

最近はやはりモバイルファーストですので、まずはモバイルで見やすいように作ることが多いです。そのあとに PC サイズを調整しようと思うと、どうしても横幅が大きすぎて調整すべき箇所やカスタマイズしたくなる箇所が増えてしまい、ちゃちゃっと作りたいと思うとそこがわりと負担になってきたりします。ちょっとしたクソアプリを作る場合にはわざわざ最大サイズを小さくするようにカスタマイズすることも多かったです。

そのためスマホサイズとさほど大きな違いのない Chakra UI の PC サイズは、考えることが少なく非常に楽でした。

画面遷移のスピード

個人的には満足できるくらい速くなっていると思います。通常のアプリケーションと違い、基本的には API なども使わない静的ページですので、とにかくパパっと遷移できます。

ローカルで試している時はまあこんなもんかな、と思いましたが、Vercel にデプロイして試すとかなり速くて楽しくなりました。

Static サイトとして作っていたため元々は Netlify にデプロイしていたのですが、とにかく画像の表示が遅く、こりゃ厳しい、と思い Vercel に変えたところかなり改善しました。

（現在は API Routes を使うため Static サイトとしての export はしていません）

使い勝手を良くするためにしたこと

使い勝手を良くするためにしたことをいくつかあげていきます。とはいえ特にすごい事をしているわけではなく、単にサービスとかを作っている方であればみんながよくやっていそうなことだけです。

いつでも問い合わせページへ行けるようにする

ページ下部に sticky な問い合わせボタンを配置してスクロール位置に関係なくクリックできるようにすることで、問い合わせしたいと思ったタイミングでいつでもしていただけるようにしました。

ページの下には次に気になりそうなリンクを配置

例えば仕事で人を探している場合、業務経験を見たあとは、個人でやっている活動などを見たくなるのではないでしょうか？　そういったことを想像し、そのページを見たあとに一番気になりそうなコンテンツのリンクを下部に配置するようにしました。

その下には他のページのリンクを並べています。とにかくページを閲覧した流れでどんどん次の情報を見られる動線を用意しています。まだ要改善の箇所もちょこちょこありますが。

絞り込みをルーティングで行う

業務経歴一覧には、スキルによって絞り込む機能を用意しています。

最初は普通に state を使って実装しようかと思いましたが、Next.js の Dynamic Routes を使って実装しました。

それの何が良いのかと言うと、絞り込んだ情報には一意の URL が与えられるため、そのまま URL をコピーして社内で共有し、「この人どうだろう？」と話し合うことなども可能です。

また、別 URL ではありますが、state を利用しているときと同じで素早く、且つ各カードにはトランジションをつけてみましたので、それもちゃんと動作するため操作的にはページ遷移なしの時と同じ感覚で利用できます。

TypeScript でデータ管理

前述の使い勝手の部分にも絡みますが、今回はデータをすべて TypeScript で管理しています。

DB を使うとどの DB を利用しようかや、DB によってはどのインフラを使おうかなどを考える手間が増え、場合によってはサーバーの管理なども考える必要があり非常に面倒です。また、DB からのデータ読み込みなどを考えるとどうしても読み込み時間が発生してしまいます。そういった部分はどうしても利用者が操作する部分でのスムーズさが失われてしまいます。

また、ポートフォリオで面倒な部分の一つとして、データの追加が段々と面倒になっていくということがあげられます。最終的にメンテナンスをしなくなって放置してしまうことになります。TypeScript であればちゃちゃっと配列などにデータを追加するだけでだいたい終わります。自分にとっての使い勝手も重視しました。

しかも型定義をしているため、入力ミスなども抑えられます。スキル名なども下記のような感じで型になっています（もっといい定義の仕方もあるのかもしれませんが）。

 export type SkillName =
   | 'PHP'
   | 'Laravel'
   | 'MySQL'
   | 'JavaScript'
   ：

データはこんな感じで、workSkills のところの名前を間違えるとエラーになります。

export const works: Work[] = [
  {
    name: '社内向け注文管理システム',
    note: '組織内で利用する各店舗の注文を管理するシステム',
    monthFrom: '2020/9',
    monthTo: '2020/11',
    workSkills: [
      {
        skill: 'PHP',
        version: 7.4,
      },
      {
        skill: 'Laravel',
        version: 8,
      },

読み込みや状態なども考えず、どこからでも import してデータを利用できるため楽です。

まとめ

ということで、ぱっと見の物珍しさや面白さは皆無ですが、個人的には恐らくなるべく実用的且つ使いやすいポートフォリオになったのではないかと思います。

ポートフォリオ
https://www.alphabrend.co.jp

（まあでも文字も少なくコンパクトにしているので、すごく検索には引っかかりにくそうですよね……）

1 年後

12 月になりました。丁度 1 年くらいです。どんな感じだったか。

見てもらえてたか

連絡が来た方と話をしてみるとたまにポートフォリオの話も出てきたので時々は見られていたようです。見てもらえた場合はアピールになってよかったのではないかと思います。

そもそもやはり業務外以外の実績もちら見させてしまうこともできるのでたくさん色々作ってる場合はアピール効果が大きくなるような気がします。自己アピールは面倒なので見てもらえるだけでアピールできるのは楽です。

スキルシート

スキルシート的なものはありますか？　と聞かれた時にこれを見せるだけで OK だったりしました。スキルシート管理なんてしたくないので楽ちんでした。それでもスキルシートを要望される場合は多分その場で断ると思います。

連絡が来るようになったか

時期的なものなのか、この数ヶ月はむちゃくちゃ Twitter から連絡が来ます。逆にいうとポートフォリオ経由で連絡は全然来てないので Twitter でエンジニア探すのが流行ってるのかもしれません。Google 検索から来るということもないので、あくまでも基本的にはアピールの補助としてのポートフォリオになっていそうです。

まとめ２

ということでポートフォリオも見せる意味でも簡単に編集できる意味でも良かったと思いますがあくまで補助ということで、やはり Twitter は仕事（暴論）