ウェブデザイナーの仕事をしているのに、自分のサイトだけはずっと後回しになっていた。クライアントのサイトは作っているのに、自分のポートフォリオは「そのうち作ろう」と思ったままだった。
今回ようやく重い腰を上げて、ポートフォリオサイト（nigo-web.com）を立ち上げた。こだわったのは次の3つ。
- 月額0円（元々持っていた独自ドメインの更新料以外はかかっていない）
- スマホから更新できる（記事を書くのにPCを開かなくていい）
- 表示が速い（Lighthouseは全項目100点）
作っている途中でつまずいた所も含めて、全部書いておこうと思う。自分と同じように、サイトを作りたいけど続けられるか不安、という人の参考になれば嬉しいです。正直に言うと、これを書いている今も、明日も更新できるかちょっと不安だったりする。
なぜ作り直したのか
理由は2つある。
ひとつは、転職やクラウドソーシングで実績を見せる場所が必要だった事。実績を聞かれたときに、URLを1つ渡せば済むようにしておきたかった。
もうひとつの方が大きくて、ポートフォリオサイトは作ったきり更新しなくなりがちだという事。実績が増えたら更新しようと思っていても、結局そのまま放置してしまう。前に作ったサイトがまさにそうだった。
なので今回は、ブログを中心にしたポートフォリオにした。毎日開いて更新する場所にしておけば、放置されずに済むと思う。それに、実績の一覧をきれいに並べるより、日々書いている物を読んでもらった方が、自分がどういう人間なのかは伝わるんじゃないかなと思っている。
毎日スマホでSNSを開くのと同じ感覚で、自分のサイトも開けるようにしたい、というのが今回いちばんやりたかった事。
WordPressではなくAstroを選んだ理由
最初はWordPressも候補に入れていた。情報は圧倒的に多いし、プラグインを入れれば大抵の事はできる。
それでもAstroにしたのは、個人のサイトとして考えたときに、こちらの方が条件に合っていたから。
1. 運用コストが0円
WordPressは基本的にレンタルサーバーが必要で、月500〜1,000円ほどかかる。Astroで作った静的サイトなら、Cloudflare Pagesの無料枠で公開できるので0円で済む。長く続けるつもりのサイトなので、ずっと無料で運用できるのはありがたい。
2. 表示が速い
Astroは基本的にJavaScriptを送らない作りなので、記事が中心のサイトなら何もしなくてもかなり速い。SEOの勉強もしたかったので、表示速度には最初から気を配っておきたかった。
3. 保守がほぼいらない
WordPressは更新作業が定期的に必要で、放置すると乗っ取られる危険もある。公開するのが静的なファイルだけなら、その心配をしなくていい。
ホスティング先を選ぶときに気をつけた事
無料で公開できるサービスとしてはVercelも有名だけど、Vercelの無料プラン（Hobby）は、規約で広告の掲載が禁止されている。少しでも収益化を考えているなら、ここは確認しておいた方がいいと思う。
その点、Cloudflare Pagesは無料プランでも商用利用ができて、帯域も無制限。いずれ収益化するかもしれないので、最初からこちらにしておいた。
念の為書いておくと、WordPressが悪いと言いたいわけではない。仕事の案件では需要が大きい事も知っている。今回は、個人で毎日更新できて、0円で、表示が速い事を優先したので、Astroの方が合っていた。
サイトの構成
最終的な構成はこうなった。
- microCMS（記事の管理）… 無料プラン
- Astro（サイト生成）… 0円
- Cloudflare Pages（公開）… 無料・商用OK
- ドメイン… 元々持っていたものの更新料のみ
そして、この構成でいちばん大事にしたのが更新の流れ。
- スマホでmicroCMSの管理画面を開く（ホーム画面に追加してある）
- 記事を書いて「公開」を押す
- 数分後には本番サイトに反映されている
裏ではWebhookでCloudflareのビルドが走っているだけなんだけど、使っている感覚としてはSNSに投稿するのに近い。PCを開かなくていいというのは、続けるうえで思っていた以上に大きかった。
写真も同じで、GR IIIxで撮った写真をスマホからアップすれば、そのままギャラリーに並ぶ。撮影日やF値、シャッタースピードは写真のExifから自動で読み込むようにしたので、手で入力する手間もない。
こだわった所
見た目の部分でも、いくつか手をかけた所がある。
雰囲気の決め方
好きな雰囲気のサイトを2つ選んで、フォントや字間、余白を実際の数値まで調べてから、自分のサイトのルールを決めた。なんとなく真似るより、数値に落としてから決めた方が、どのページも同じ雰囲気で作れる。
写真を主役にしたかったので、色は無彩色の4色だけにして、差し色は入れていない。
写真を主役にする
トップのギャラリーは、写真が2列でゆっくり流れ続けるようにした。写真が増えるほど賑やかになっていくので、更新する楽しみにもなっている。
表示速度
Lighthouseはパフォーマンス、アクセシビリティ、ベストプラクティス、SEOの4項目すべてで100点だった。画像はビルドのときにWebPに変換して配信しているので、写真が多くても重くならない。
作っていてつまずいた事
ここまで作った物の話ばかり書いてきたけれど、実際は順調だったわけではなく、つまずいている時間の方が長かったと思う。特に印象に残っている3つを書いておく。
日本語フォントを自前で配信したら55点に下がった
表示速度をひと通り調整して、Lighthouseで100点が出たときは素直に嬉しかった。
ただ、その後「日本語フォントも自分のサーバーから配信した方が速くなるはず」と思って変更したら、スコアが55点まで下がってしまった。表示されるまで17秒もかかる。何かの間違いかと思って何度か測り直したけど、結果は変わらなかった。
原因は単純で、日本語のフォントは1書体で1MB近くある。英語のフォントと同じ感覚で太さ違いを3種類読み込んでいたので、最初に3MB近くを読み込ませていた事になる。
最終的に、英字のフォントだけ自前で配信して、日本語は外部から非同期で読み込む形にした。自前で配信した方が速いというのはよく聞くけれど、日本語のフォントだと逆効果になる事があるというのは覚えておきたい。
公開した記事の写真が表示されていなかった
最初の記事を公開してスマホで開いてみたら、本文の写真が1枚も表示されていなくて、かなり焦った。
原因はセキュリティの設定だった。サイトが読み込んでいい外部のサービスをあらかじめ指定しておく仕組み（Content-Security-Policy）があって、そこに記事の画像を置いているCMSのドメインを書き忘れていた。画像自体はちゃんと配信されていて、ブラウザの方で読み込みを止めていただけだった。
困ったのは、この設定はローカル環境では効かないので、本番に公開するまで気づけない事。しかも機能を追加するたびに同じ所で引っかかる。フォントのときに一度やっていたのに、画像でもまた同じ事をしてしまった。
写真を差し替えたら、また点数が下がった
仮の画像を、実際にGRで撮った写真に差し替えたときの事。見た目も動作も問題なかったけれど、念の為測ってみたら100点だったのが64点になっていた。
調べてみると、6000ピクセルの元画像がそのまま配信されていた。リサイズの設定はしていたけれど、1行だけ書き忘れていた項目があって、その場合は元のサイズのまま使われる仕様になっていた。711KBの画像を、そのままスマホに送っていた事になる。
書き足したら65KBまで小さくなった。91%の削減。見た目では違いが分からないので、測っていなければ気づけなかったと思う。
こうして振り返ってみると、3つとも、作っている途中では気づけず、測ったり公開したりして初めて分かったものだった。目で見て確認するだけでは足りなくて、数値で測ったり本番の環境で確かめたりしないと気づけない、という事を今回改めて実感した。
これから
まだ記事は少ないけれど、これから毎日書いていこうと思っている。Web制作やAIの事、好きなApple製品の事、GRで撮った写真、あとは何気ない日常の事など。
更新を続けるための仕組みはひと通り用意できたので、あとは書くだけ...なのだけど、それがいちばん難しい事も分かっている。まずは明日、GRで撮った写真を1枚アップするところから始めてみようと思う。
制作のご依頼やご相談も受け付けているので、お気軽にご連絡ください。これまでの制作実績も少しずつ更新していきます。
