Web サイトをリニューアルした

長らく放置状態でしたが、Web サイトをリニューアルしましたので、どう作ったかとかの話をつらつらと書いていきます。 一応本業はエンジニアでまあまあ長いんですが、そんなにコード書く仕事してないので、マサカリは手加減して放ってもらえるとありがたいです。 音楽が聴きたいひとにとってはあまり興味のない話かもしれませんが、ご容赦を。

旧サイト

旧サイトはMKDocsという静的ドキュメントジェネレータを使って作っていました。Markdown と yaml の設定ファイルの内容に沿って html をビルドしてくれるツールです。

なぜ放置状態になったか

前提として、これは MKDocs の良しあしという話ではなく、私の調査不足で、能力・用途がアンマッチだったという話です。

• 更新がめんどくさい
  • Markdown で記事を書き、YAML に設定を書き、ビルドしたら、出てきた html ファイルを FTP で転送する、という手順でやっていました。
    • たぶんこれは GitHub Actions で解決できると思いますが、やっておらず
  • 特に YAML を直さなきゃいけない（ような構造にしてしまった）のが良くなかったですね。
• シンプルすぎるデザイン
  • シンプルなデザインで見やすいですが、個人サイトとしては無味乾燥すぎてイマイチでした。
  • 手軽にきれいなドキュメントが作れるという点では申し分ないです。
• デザインのカスタマイズが難しい
  • 単に私のスキルの問題ですが、Python や Jinja2 のスキルがなかったので、サードパーティのテーマをそのまま使っていました。
    • 主に仕事で使うのが Typescript や PHP で Python は使っておらず、フロントエンドは Vue.js を好んで使っています。
      • 正直「家で Jinja2 の勉強してもな」という…。
        • 仕事で Flask でも扱う機会があればまた違ったのでしょうが。

要件

• Markdown で書ける
  • これは MKDocs もそうでしたが、必須の要件です。
  • 少なくとも直で HTML 書いたりするよりは楽ですね。
  • 個人的にはリッチテキストエディタが好きじゃない（コピペでフォント情報が一緒に貼り付けられたりするのが嫌）ので、ライトなマークアップ言語であり、特別な道具が無くても書きやすく、文書構造については WYSIWYG である Markdown は扱いやすくていいです。
  • あと、こういうアウトライナー風箇条書きスタイルで文章書くの好きなのです。
• ある程度自分の思い通りにデザインできる
  • これは機能としてあるかどうかではなく、私のスキルにマッチしているかどうかということです。
    • その方がいじり甲斐がありますし、作っていて楽しいので。
• 静的生成が可能であること
  • さくらインターネットのレンタルサーバーでホストしたいので、SSG したい。
  • もちろん、Vercel あたりにホストすればいいというのはその通りですが、せっかくサーバー借りてるので…。
• 更新を手軽にしたい
  • GitHub Action の設定はするとして、*.md を一個置けば記事ができるようにしたい。
  • 繰り返しになりますが、YAML を書くのが面倒なので。

選定

こうなると要件から自ずと決まってきますね。

• Nuxt/Content
  • Vue.js ベースのフレームワーク Nuxt.js のモジュールで、ドキュメントベースの CMS です。
    • Markdown や CSV、YAML を所定の形式で書くといい感じに表示してくれます
    • Nuxt3 に対応した Content v2 を使っています。
• Vue.js(3.x)
  • Vue は 3 系です。
  • <script setup>構文はすごく書きやすくて好きです。
  • React に押され気味なので、頑張ってほしい。
• Nuxt.js(3.x)
  • Nuxt も 3 です。もうちょっとちゃんと勉強して使いこなしたい。
• Vuestic UI
  • マテリアルデザイン系の UI フレームワーク
  • こういう「ぽい」部品を一から作ると大変なので。
    • Vuetify も Vue3 に正式対応したのでこっちでもよかったです。
      • 細かいところの見た目が Vuestic のほうが好みだったのでこっちにしてみました。Badge とか。
• Tailwind CSS
  • CSS フレームワーク
    • class に書けば手っ取り早くいい感じになるので、導入してみました。
    • 初めて使いましたが、いい感じです。
      • 思うんですが、SFC ってスタイルシート書くのめんどくさくないですか？

本当はバックエンドに Contentful か microCMS を採用したかったのですが、レンタルサーバーで静的ホストすることを考えると、結局ビルドの手順挟むし面倒かなと思って、やめました。それよりは GitHub で管理できたほうが有益。

デザイン

Web デザイナーではないので偉そうなこと言える立場じゃないですが、自分なりにコンセプトをもって作ってるので、思いのまま書きます。

アーティストの個人サイトと言えば、トップにドカンとヒーローイメージがあって、直近のお仕事がわかる News があって、ライブ情報、プロフィール、ディスコグラフィ、コンタクトフォーム、みたいなのが多そうなイメージです。

個人的にはあんまり派手な感じというよりは、抽象的な話になりますが、シンプルで「感じのいい」サイトにしたかったのと、トップページには名刺代わりの内容が全部入ったらいいなというのがありました。

あと、Web って文章があればあるほどごちゃごちゃするという気がしていたので、トップページはある程度詰め込んだうえで「読ませない」デザインを考えました。

結果、アバターと各種 SNS や動画サイトへのリンクをまず置いて、その下にカード型のコンポーネントで記事の情報を表示して、直近の作品やアルバムの情報がわかるようにしました。カードからは description を省いて、代わりにタグを置いてます。

この方が一度に目に入ってくる情報量が多いので、説明文読ませるよりはいいかなと。

技術的な話

といっても、基本的にはツールに使われ系のエンジニアなので、選定のところに書いたツールを使ってなんとなく構築したぐらいで、特段技術的なこだわりとかはないです。Vue.js はやっぱり書きやすいなと思います。あと、Nuxt/Content がすごい。記事の取得やルーティングがめちゃめちゃ楽で、ほとんど何も考えずに実装できました。何喰ったらこういうツールが作れるようになるんでしょうか。

今後の話

全体的に個別ページが整備しきれてないので、まずはそれをせっせと直していきます。タグ検索もできれば実装したい。 自動デプロイがまだできてないので、先にそっちをなんとかしないといけないかな。