この記事は99%の人にとって、意味ある内容ではないです。(ただの報告記事です)
僕が色々まとめてる、KOREWAKAのデザインをリニューアルしたので、何を変えたのかとかをまとめておきたいと思います。
基本的に、自己満でしかないですが、、、
旧KOREWAKAのデザイン
こんな感じでした。
結構、管理画面チックなデザインだったと思います。
新KOREWAKAのデザイン
パッと見で分かるように、よりブログに近い形にリデザインしました。
あと、ダークモードが追加されてます。
何を変えたか
まず、デザイン面で言うと管理画面ライクなデザインだったのを、ブログライクなデザインに変更しました。
また、UXを良くする為にダークモードと目次を追加しました。(目次はページによって無いのもありますが)
ページによってメニューが切り替わるようになっており、より細分化した記事が書けるようになったと思います。(これはUX的に微妙かも...)
技術的な面でもかなり一新させました。
以前の構成、「Bootstrap webpack EJS GitHub Netlify」でした。
現在の構成、「TailwindCSS Nuxt.js GitHub Netlify」です。
デザインと管理の観点、あとNuxtを使いたいという理由でこの構成です。
正直デザインは悩みました。最初は、自分で作りましたが、しょうもないデザインだったので辞めました。
今でも少し変えたいなって思ってますが、ダークモードは必ず欲しい所だったので、とりあえず良しとします。
変えた事によって良かった事
リニューアルで、Nuxtを採用したので、より記事が書きやすくなりました。
以前は、.ejsというファイルで、HTMLを書いて、HTMLファイルを書き出して〜っていうやり方でした。
現在は、.mdというマークダウンで書いて、静的ファイルを書き出すやり方でやってます。
マークダウン形式になった事で、かなり書くのが楽になりました。
ファイルも一箇所にまとまるようになったので、かなり快適に書けるようになりました。
変えた事によって悪かった事
今回のリニューアルは、デザインだけでなく、よりカテゴリーを増やしたいと思い、リンクも変更していったので、アクセス数が一気に落ちました。(まぁ、元々そんなに見られていた訳ではないですが)
具体的には1日30アクセス位あったのが、1日5アクセス位になった感じ。。(このQiitaのアクセス数と交換してくれ。。笑)
正直これで食えたら良いと思うけど、自分自身気持ち良く記事が書ければ、それで良いと思ってるので、まぁ良いかな。
サーバー代かけるのも勿体ないしね(^^)
あと、SEO対策の設定が面倒になったので、それを全て取っ払いました。SEO対策命だったんだけどね。。笑
SEO対策×
記事の書きやすさ○
まとめ
このデザインにたどり着くまで迷走しました笑。(Zennみたくしようかなとか)
結局、Nuxtのcontent-theme-docsというパッケージを使いました。
(採用したかったNuxtであり、ダークモードであり、目次であり、マークダウンでありといった理由で)
所々、変えてますがこれ見やすいですよね。今後もっと見やすくなるように変えていきます。
良かったら、プログラミングで困った事あった時に役立つ事あるかも。
チェックしてね↓
KOREWAKA
以前のサイトを見て、このサイト見やすくて良くまとまってるって言われてたので、現在のサイトを見てどう思ってるかな...
サイトのデザインで迷走するとホント良い事ないですね...