feat: ✨ add a diary

src/contents/writings/20240225/index.mdx

@@ -0,0 +1,66 @@
+---
+id: "20240225"
+type: "diary"
+title: "記事のデザインを変えてモチベーションを上げてみる"
+published: "2024-02-25"
+tags:
+  - "Syakoo Lab"
+  - "雑記"
+---
+
+お久しぶりです。
+
+２０２４年になってからより執筆活動を増やしたいと意気込んで２ヶ月が終わろうとしています。
+書いた文章は３つ。少ない。
+
+...やる気を上げるためにはまず環境からということで、今まで若干気になっていたサイトの記事表示のデザインを変えてモチベーション上げを図りました。
+
+## 参考にした他サービス
+
+デザインを変えたいということですが、自分はデザイナーでもなくデザインのセンスもなかなかに 🈚️ のため、
+個人的にこのサイト読みやすいなーと思ったところを調査してみます。
+
+今回確認したのは「[Note](https://note.com/)」と「[しずかなインターネット](https://sizu.me/home)」。どちらもおしゃれで読みやすいデザインしていますよね。
+
+<Image
+  src={"/img/writings/20240225/research.png"}
+  caption="各サービス（編集画面）"
+  style={{ width: 500 }}
+/>
+
+まずそれぞれの文字の特徴として、Note はデフォルトの文字サイズが 18px と少し大きめになっていました。
+しずかなインターネットはどこかに記載もありましたが、太字がなく全ての文字がおとなしいのが大きな特徴ですね。
+
+共通して自分のサイトと違う点は、一番わかりやすいのはカラーテーマがライトかダークかですが、
+私は以下の２点が大きいかもと思いました：
+
+1. 一行の高さ、行間の幅が大きい（余白が大きい）
+2. 一行に入る文字数が少ない
+
+「これだ！」と思ったので早速自分のサイトに反映してみました。
+
+## 結果
+
+<Image
+  src={"/img/writings/20240225/update.png"}
+  caption="デザイン更新ビフォーアフター"
+  style={{ width: 500 }}
+/>
+
+はい、いかがでしょうか。
+この記事が公開されている時点で新しい方のデザインになっているかと思います。
+
+大きく以下の変更をしました：
+
+1. 一行の高さを増やして、行間を増やした
+2. コンテンツの幅を減らした（一行の文字数を減らした）
+3. ヘッダーデザイン変更
+
+いい感じの変更になった気がします。満足。
+
+## おわりに
+
+今回はモチベーションのために記事のデザインを変更してみました。
+まあまあモチベーション上がった気がしています。
+
+今回の変更で読む側としても読みやすくなってたらいいなーと思いますが、結局大事なのは読みやすさと文章量ですよねー。