（この記事はこのサイトの旧デザインについて言及された記事です。）

今まではずっと https://cho-ice.xyz/avaice/ を自分のホームページとして使っていましたが、 サイトを作った当時は Web 系のプログラミングよりも Unity でゲームを作る方に力を入れていたこともあり、割と適当な仕上がりになっていました。

最近はガッツリ Web 系のプログラミングを行なっており、たまにポートフォリオの提示を求められることもあるので、新しくホームページを作り直しました。

作成にあたってのコンセプト

「見やすさ最強」をコンセプトにして作りました。 最近 Web 技術がめちゃくちゃ発展してきて、世の中にはアニメーションが凝ったページもありますが、 原則として Web サイトはコンテンツの内容が一番大事だと思うので、デザインもコンテンツが最大限見やすいように気を使いました。

どんな人でも見やすいようになっているかと思います。（もしもっとこうした方が良い！と言う意見がありましたら、Twitterまでご一報いただければ・・！）

どんな構成で作ったのか

特に書くことはないくらいシンプルな構成ではあるのですが、フレームワークに Next.js を使用して、Vercel へデプロイしています。 Next.js は３ヶ月くらい前に使い始めたのですが、 React でやると微妙に面倒だったルーティングが簡単にできたり、画像の表示がいい感じにできたり、サーバーサイドの処理も簡単にできたり、 いいことずくめでもうやめられません。

実装で役立った機能・ライブラリなど

ホームページを作っていく過程で、便利だと思ったものがいくつかありました。

next/image のプレースホルダー機能

ある程度ページの作成が終わり、Vercel にデプロイしてみた時、絶望しました。

ローカル環境では気づかなかったのですが、上の画像の通り、読み込み待ちで画像を表示するべき場所が真っ白になってしまっています。 まあ当たり前といえば当たり前なのですが、画像のサイズが大きいだけに、予想以上に不恰好になってしまっています。

さあどうしたものかと考えた時、Gatsby のように読み込み中は画像を表示する部分にぼかしを入れればマシになるのではないか？と考えました。

next/image はめちゃくちゃ優秀で、しっかり読み込み中のプレースホルダーをぼかし画像として表示する機能がありました。

コードはこんな感じです。

<Image
  src={yukataGirl}
  width={600}
  height={450}
  alt={"浴衣を着た女の子が、アルパカとクマに囲まれて微笑んでいるイラスト"}
  placeholder="blur" /* blurを指定するとぼかしがかかる */
/>

placeholder="blur"を指定するだけでぼかしプレースホルダーを実装できるのは便利すぎる・・。

next/mdxが優秀すぎる

ホームページの中にブログも併設しようと思ったのですが、どういう実装にしようか、以下の３つでかなり迷いました。

• Markdown で書いてそれを JSX に変換する

  一番スタンダードな方法ではありますが、色々埋め込んだり変なことしたり出来ないなーと思い、やめました。 （ちゃんとやればできるかもですが）

• 他のページと同じように JSX を直打ちする

  今回ホームページを作り直したように、また数年後新しく作り直すことになるでしょう。 その時 JSX 直打ちは後悔することになるんだろうなと思って、やめました。

• next/mdxを使う

  上の２つを却下して、さあどうしたものか。。と思ったときにnext/mdxというライブラリを見つけました。 Markdown の中に直接 JSX を書けるというライブラリです。 これなら将来記事を移行するときもそこまで手間がかからなそうだったので、採用しました。

まだこの選択がベストだったのかはわからないのですが、少なくとも記事を書くのはめちゃくちゃ楽です。

作った感想

いっぱいコードが書けて楽しかったです。