派手な配色は避ける

メインの色を灰色や白、黒などモノクロベースにしました。

記事の目次でマウスカーソルを重ねるとオレンジになるようにしています。ここでは、使用しているライブラリのHonoをイメージ出来るようにしています。

また、リンクには青色系を使用しています。タグなどが該当します。

ボーダーをなるべく使用しない

ブログ一覧やタグで絞り込みを行った画面で、境界線を引くと見やすくなると思いますが使用していません。

どちらかというとスマートな見た目、シンプル、ガヤガヤしたくないという思いがあり、ボーダーで区切るとなんだかカチッとした感覚があります。

雰囲気で例えると、技術記事の投稿サービスであるZennなんかは、私の好みドストライクです。

線の存在をなるべく使用したくありませんでした。

目次に関しても、現在はボーダー囲っていますが今後ボーダーレスになるかもしれません。

パッとデザインが思い浮かばなかったのでボーダーで囲っているだけで、今後のアップデートで見た目は変わっていくと思います。

なるべく外部ライブラリは使用しない

開発の話です。

現在、依存している外部ライブラリは下記です。

• Hono
• HonoX
• date-fns-tz
• marked
• microcms-js-sdk
• Vite
• prettier

他にもwranglerなどデプロイで使用するライブラリもありますが割愛します。

上記で挙げたライブラリは自分で実装するには規模がでかい、もしくは基盤となるライブラリなので使用しています。

HonoやHonoX、Viteは基盤となるライブラリであり、microcms-js-sdkはMicroCMSのAPIを操作するために必要な公式のSDKです。

markedとdate-fns-tzは、頑張れば実装出来るが私の現在の知識では時間がかかり過ぎると判断したため使用しました。

prettierはコードのフォーマットで私の中では必須ライブラリです。Biomeなど新しいライブラリも気にはなりましたが、今回は使い慣れているprettierを選択しました。

その他のコンポーネントなどは自作することで勉強したいと思っていたため、ライブラリには頼らずに作りました。

開発初期に「ここはこだわって作りきろう」と決めていたのが上記の3つです。