サイトのデザインを新しくした。Astro製であることに変わりはないが、主にトップページ、トップバー、フッターの3つをまるきり作り替えた。

ずっとサイトを更新していると自分のスキルの向上によって、過去から変わらないページと新しいページの間でスタイルのズレがでてくる。これは夙に問題になっていた が、いい案が思い浮かばずに放置していた。今回このアクセスカウンタ を導入するにあたって既存のトップページのスタイルに合わないことから、改修を決めた。

旧デザインについて

以前のトップページはこのようなものだった。

これは僕がパソコンを使い出したばかりの時に作ったものからほぼ変わっていない¹。サイトトップに載せるリンクが3つあったため、T-O Mapをモチーフにして作った。枠の中に全ての要素をposition: absoluteで配置しているだけだった。

マメロン というフォントを気に入ったので、これに合うようなポップな雰囲気で作ったつもりだ。

新デザインについて

アクセスカウンタ

さて、これを導入するために作り替えたわけだが残念ながらこれはVercel用のリポジトリのようだ。仕方がないので画像だけ拝借してきて、カウンタ部分はFirestoreを使って作成した。

フロントからのdb操作についてはTwitterで無限に話されていることだが、まあカウント用の数字ひとつが入っているだけであるためいいか、という気持ちだ（75字）

トップバー

世の中には僕が見た目部分について参考にしているサイトがある。例えばこの辺だ。

Arcaea - New Dimension Rhythm Game

A harmony of Light awaits you in a lost world of musical Conflict. New Dimension Rhythm Game.

arcaea.lowiro.com

少女革命計画 GIRLS REVOLUTION PROJECT

『少女革命計画』は、6人の少女が織りなす“物語“。数々のアーティストやIPを世に送り出してきたKAMITSUBAKI STUDIOと、Web3時代のエンターテイメントを創出する深化がタッグを組み新たな体験を届けるオリジナルIPプロジェクトです。

girlsrevolutionproject.jp

アイコン

大きく配置するのでアニメーションがあってかっこいいのがいいな、と考えた。Quantum Protocol というゲームのシナリオ時の話者アイコンを参考に、45度斜めに傾いたデザインにした。アニメーションが難しかったが、SVGアニメーションでリッチな感じに作った。

その他

・背景にドットの繰り返しみたいなものをつけた。これはもともとcontent のみの背景だったが、これで統一されたデザインになった。

・ブログ記事の一覧ページは斜めにカットされたようなカードが並ぶようにした