Yuhei Yasuda
yuheiy.com-v6
このウェブサイトをリニューアルした。これまでも何度かリニューアルを重ねてきており、今回でバージョン6ということになる。サイトとしては今年で7年目。
ブログを組み込んだのはひとつ前のバージョン5からだ。それ以前は、1ページしかないただのリンク集のようななにかでしかなくて、ブログを書くときには外部のブログサービスを使っていた。その方が、考えないといけないことが少なくて済む。でも、ずっとやってるとそれに飽きてきた。やはりブログも自分で作った方が楽しいと思ったので、こうして丸ごとサイトに含めることにした。
そして、それから2年弱くらいこのサイトを運用してきて、そろそろ作り直したい気持ちになってきた。前回リニューアルしたときから少し僕の考え方が変わっているし、技術的にもいろいろ試したいものが出てきたので、ちょうどまとまった時間が取れたこの連休でリニューアルした。
まず、サイト全体としてかなり質素なスタイルにした。かつ、ページの構成要素も最小限に。ブログにとって重要なのは、その内容について参照するために、どこからかリンクされることであって、それに当たって余計な要素はできるだけ排除したかった。サイトとしてのナビゲーションとか、そのサイトらしさみたいな、サイトとしての都合、つまり単一リソースとして見たときに関係のない部分は不要だということだ。
そう考えると、ブログにはサイトのタイトルすら不要に思えるが、これは残すことにした。ブログという情報を解釈する前提として、それを「誰が言っているのか」という点は欠かせないからだ。同じことを言っても、それを誰が言うかによって意味は違ってくる。どういった背景を踏まえた意見なのかが異なるから。このサイトでは筆者の名前がそのままサイト名になっているので、ページの上部にそれを配置した。
次に、前のバージョンでは文字のジャンプ率がやや高めになっていたが、あまり差をつけすぎないように変更した。こういったコントラストは基本的に読み飛ばしを助長する方向に働く。読まずにわかった気にさせる。そもそもウェブはそういうものだと言われるかもしれないが、少なくともこの場所ではそれに抗っていたいと思う。
技術的な部分での変更点はいろいろあるので、箇条書きで簡単に挙げてみる。
- EleventyからAstroに移行
- NetlifyからVercelに移行
- Value DomainからGoogle Domainsに移行
- Tailwind CSSを導入
- ダークモード対応
- セマンティックな色指定ができるようにTailwind CSSを設定
- カラム幅を文字サイズの整数倍にするようにした
:visitedのスタイルを追加viewport-fit=coverを適用- コードブロック内でのシンタックスハイライトを有効化
- マークダウンファイル内に記述した
<img>要素にwidth/heightとdecoding=async属性を自動で付与するようにした <title>要素にサイトタイトルを含めないようにした- ホームに最新記事のリストを追加
詳しくは、GitHubリポジトリを参照してほしい。