今年に入ってからぼちぼち計画していた写真ポートフォリオサイトが、年末になってようやく公開できる状態まで仕上がった。
夏前には完成しているつもりが、サボっていたら冬至になってしまった。寒い。
作ったもの
実際の製作物はこちら ↓
なぜ作ろうと思ったか
今回、ポートフォリオサイトを作ろうと思った目的はふたつ。
- 趣味で撮り溜めた写真を、外に向けて発信するギャラリーを持ちたかった
- Web 開発の最低限のスキルを身につけたかった
まず、登山や写真を趣味にしてから 7 年以上経っているなかで、これまで撮ってきた写真を発信する場というのがあまりなかった。 Instagram や YAMAP に写真の投稿自体してはいるが、それよりも自分のポートフォリオとしての場を持って、そこに作品を並べたいと思っていた。
そんなサイトを作る手段として、今は WIX や STUDIO のようなノーコードでサイト製作ができるプロダクトがたくさんあるので、それを使えば時短になる。 時短にはなるが、今回はもうひとつの目的として、Web 開発のスキルがほとんどない自分にとっては、最低限のスキルを身につけておきたいという願望も同時にあった。
というわけで、写真のポートフォリオサイトを自作することにした。
どうやって作ったか
使用した技術は以下。
- React + Next.js → Web ページ本体
- microCMS → コンテンツ管理（写真・記事）
- Vercel → ホスティング（ドメインはお名前.com で取得。1 年間 380 円。課金したのはここだけ）
いわゆる Jamstack 構成をとっているが、完全ではない（一部ページに SSR を採用）。 アーキテクチャとしては一般的な構成なので、システムの詳細は割愛。
ところで、スキルとして JavaScript の基礎も怪しい自分が、いきなり React に手を出したのは悪手だったと思う（しかも TypeScript で）。 正直、基礎学習を雑にすっとばして雰囲気で実装しているので、まともなフロントエンドエンジニアにソースコードを見せたら卒倒するだろう。
それでもそれっぽいものができてしまうというのは、Web フレームワークのすごいところ。
サイトの構成
今回作ったサイトは見てのとおり、ページ数を最小限に抑えた非常にシンプルな構成にしている。 Next.js の pages/ 配下のソースファイルも 6 つしかない。
トップページ
トップページは、背景画像を 1 枚設定しているだけの単純な構造。 画像データは public ディレクトリに直接設置して、ハードコーディングした。 画面幅に応じて 2 枚の画像が切り替わるようにしている。
ギャラリー
ギャラリーページは、写真をいくつかの代表的なジャンルにわけてピックアップしたショーケース的なページ。
こだわりポイントとしては、読み込む枚数を毎回 20 枚に固定しつつ、シャッフルして表示している。 静的に生成するとビルド時にラインナップが決まってしまうので、サイト訪問時に毎回内容が変わるようにこのページだけ SSR になっている。
ストーリー
ストーリーは、ブログでいうところの記事。いつもは登山を通して撮影も楽しむといったスタイルがメインなので、写真単体ではなく、各登山でどんな風景に出会ったのかというのを、記事形式で文章付きで整理した。
プロフィール
一応ポートフォリオサイトなので、自分のプロフィールページも作った。
よりポートフォリオ色を強めていくなら、ここにフォトコンの入賞歴なども載せていけるといいかもしれない。最近フォトコン応募してないなぁ...
microCMS の API スキーマ
ところで、コンテンツ管理に使用している microCMS にはいくつかの料金プランがあり、hobby プランであれば無料で利用することができる。
個人開発の場合、メンバーは 1 人で済むので、API を 3 個以内に抑えられるかどうかで hobby プランで足りるかどうか判断することになる。
結局、今回はちょっとした工夫をすることで、使用する API を 2 個に抑えることができた。
- 写真 - image : 画像 - caption : リッチエディタ - tags : セレクトフィールド - ストーリー - title : テキストフィールド - text : 内容 - eyecatch : コンテンツ参照 - 写真 - photos : 複数コンテンツ参照 - 写真 - startAt : 日時 - endAt : 日時
ちょっとした工夫というのは、写真をうまく使い回すことでギャラリーとストーリーの両方で共有できるようにした。
ギャラリーページでは、写真のタグで絞り込んで画像を抽出して表示している。 また、ストーリーには複数の写真を紐づけることで、ストーリー側では直接画像フィールドを持たないようにしている。
こうすることで、写真とストーリーの 2 つの API さえあれば、今回のようなサイト構造は実現できる。
今後改善したいこと
画像の高速化
画像の表示には next/image を使っていて、これはパフォーマンスも最適化してくれるという代物なのだが、どうもパフォーマンスが悪い。純粋に、表示が遅い気がする。
img タグをそのまま使ったほうが明らかにパフォーマンスがいいということが起きていて、ちょっとここは勉強が必要。
ギャラリーページの SSG 化
これは真っ先にやらないといけない。 ほぼ静的ページなのに、画像を毎回シャッフルしたいというだけでサーバーサイドでレンダリングしているのは目的と手段がミスマッチしていると思う。 もはや、シャッフルする仕様じゃなくていい気がする。
ストーリー一覧ページの改善
7 年分の記事を単一ページに並べている現状は、年別のアンカーリンクをつけているとはいえ、さすがに長すぎる。 年ごとに別ページにするなどといった工夫をしたい
ストーリー詳細の内部リンク
現在はストーリー詳細がどん詰まりになっているが、ここから関連ストーリーに飛べるようなセクションを起きたい。 その場合、近い関係のストーリーを関連づけるようなフィールドを新たに作らないといけないので、どのようにカテゴライズするかは考える必要がある。
まとめ
ずっと作りたいと思っていた写真ポートフォリオサイトがやっとできたので、まずはよかった。
普段の仕事ではふわっとした事象を扱いすぎて、成果物としての絵姿が見えているものづくりは純粋に取り組んでいて気持ちがよかった。
ただ、フロントエンド界隈の技術の変化は早すぎて、片手間に触っているうちはすぐについていけなくなると思ってしまった。（2 年前くらいの記事はもう参考にならなかったりする）
いつかはこのブログも自作ブログに移行したいなんてことを思いつつ、まずは完成した写真ポートフォリオサイトを、自分のギャラリーとして運用していこうと思う。
ちなみに、登山と写真を始めた 2015 年まで遡って写真を microCMS に突っ込んで、ストーリーもひとつひとつ文章を手入力したのだが、この作業は修行だった。microCMS にアップロードされている写真は 7000 枚。こんなやつが無料ユーザーですいません。
