← Writing

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

mrskiro.devをゼロから作り直し、デザイン含めリニューアルしました。

なぜリニューアルしたか

理由は大きく以下です。

以前までのmrskiro.devはNotionをCMSにして記事の管理・執筆をしていました。NotionをCMSにしていた理由は当時仕事でもプライベートでも使っていて、体験面やクラウド同期でPCやスマホどちらでも気軽に執筆できたことが主な理由です。 NotionをCMSにする都合上、Notion APIを扱ったり、API結果をUIに変換する処理を自作し運用していました。

個人サイトはメンテナンス頻度が低く、久しぶりに記事を書こうと思っても何かしらのエラーが出たり、UIへの変換処理が未実装のブロックを記事執筆で使った場合に実装も必要になるなど面倒なことが多く(便利なOSSなどもありますが趣味で自作していた)、このせいで執筆が後回しになることもありました。 あとはNotion自体どんどんアップデートしていて、記事を書きたいだけの自分の使い方としてはノイズになる機能も多くなってきていました。

コードベース全体も老朽化していたので、AIツールに慣れた今、時間をかけず作り直せるだろうと思いAIを活用しリニューアルを始めました。

考えたこと

とにかくシンプルかつミニマルなデザインにしようと、Dead Simple Sites や以前からブックマークしていたサイトを参考にしつつ、Claude Codeでコンセプトを固めてきました。 pencil.devでラフなデザインを発散しながら作り、各ページの構成とルールを固めてから始めた実装はすぐに終わりました。

現時点では凝った機能は入れず、githubやXからリンクを踏んでくれた人が自分をすぐに知れる場所、自分の記事をパーソナルなスペースに書ける場所となることを目指しています。 最小限な実装とデザインにした結果、メンテナンス負荷が下がることも期待しています。

デザインはモノクロをベースに、アクセントカラーとして自分のアイデンティティーである紫(#aa26ff)を使っています。 なるべく標準のHTMLに見えるようにシステムフォントにしつつ、font-weight: boldは使わない、フォントのジャンプはせず余白で表現するといったことを意識しています。

技術

正直素のHTMLやCSSだけでも実現はできるんですが、Next.jsとVercelで構築しました。実装は100%AIがやる前提なのでフレームワークの複雑さは気にならず、MDXとの相性やOGP・sitemap・RSSの対応、ホスティングの手軽さで選んでいます。

これから

あたりはやる予定です。