ウェブサイトをおよそ半年ぶりにリニューアルしました
- 投稿した日
- 更新した日
- 書いたひと
- ひらたけ
趣味で HTML/CSS の勉強をし始めて、ノリと勢いでドメイン取得したりレンタルサーバを契約したりして 2014 年の 8 月にウェブサイトを開設してから、早いもので今年で 10 年目。あと数ヶ月で 10 周年・11 年目に突入という節目の年に、およそ半年ぶりの ウェブサイトリニューアルを実施いたしました✨️🎉
前回のリニューアル が昨年 7 月だったので、9 ヶ月ぶり。半年…というにはちょっと過ぎてる感ありますが。新しいウェブサイト、いかがでしょうか？個人的には「ここ 10 年で最高の出来」だと感じています。
私はデザインを専門でやってきた人間ではなくて、独学でゆるくやってきたみたいな感じなので、とりあえず色々なオシャレ・ウェブサイトを見漁って 「すきだな」と感じたページのデザインを参考にそれっぽく制作 してみました。
トップページの「ぐるぐる」とか「おひさま」は、良い感じの素材が見つけられなかったので、そのへんに転がってた「『イラスト描けるようになりたい！』と思い立って買ったのに全く触っていないペンタブ」を PC に繋いで、雑に自前で用意しました。なんかこう、趣があると、思いませんか？思ってくれ。
以前までのウェブサイトでもそうですが、今回のリニューアルでも ダークモード表示に対応 しています。ヘッダーにある「太陽」「月」のアイコンが描かれたボタンを押すと、明るいモードと暗いモードを切り替えることができます。
個人的にはアプリなどを白背景の明るいモードで使うことが多いので、ダークモードの色をどうしたらいいのか悩むことがわりとありました。「ここ見づらいかも」みたいなところがあったら教えて欲しさあります🙏
今回のリニューアルのポイントは 「ブログへの導線をどうするか」 というところ。
私はこれまで何度もウェブサイトを作り直し、数ヶ月～ 1 年ほど放置してまた全部破棄して作り直す、ということをやってきています。前回のリニューアルでも「とりあえずブログのページは作ったけど、まあ更新しないだろうな…」という感じで、「ブログは更新しないもの」という想定で作っていました。
なので、なんやかんやあってこれだけブログの投稿が増えることは考えておらず、各ページの フッターに小さく「ブログ」と書かれたリンクがある以外はブログのページへ行く手段がない という状況でした。
これをどうにか改善すべく、ヘッダーにナビゲーションを作ってブログのページへのリンクを貼っつけてみたり、トップページに最新の投稿を表示してみたりと、ブログへアクセスしやすいように変更しました。まあ、デザイン同様マーケティングについても独学でゆるくかじった程度なので本当に効果があるのかとか、そもそも日記の延長線みたいな感じの誰得ブログに誘導してどうするんだという話はあるんですけども…。
あとは細かい改善とか。ブログ一覧ページには、これまでもページを移動するためのページネーション的なものを設置していたのですが、一覧ページが /blog という 1 つのページしか無かったので、一覧にあるリンクをクリックして投稿のページへ移動した後、ブラウザバックして一覧ページに戻ってくると 1 ページ目に戻ってしまう、という問題がありました。
これを /blog/page/2 とか /blog/page/3 とかでページごとに違う URL になるようにするとか、そういう変更も今回のリニューアルで行っています。
一応フロントエンドのエンジニア（初心者）をやっているので、ちょっと技術的な話も。今回のウェブサイトリニューアルでは、以前のものと同様に Vue.js のフレームワークである Nuxt を使用して構築しています。Nuxt の @nuxt/content モジュールを使用して、ブログの投稿などは Markdown 形式で Git 管理をしています。
スタイリングに Tailwind CSS を使っていたり、ホスティングとかデプロイに Cloudflare Pages を使っていたりするところも、以前のものと同じ。リニューアルを通して新しい技術に触れる、ということはあまりできませんでしたが、今後の開発とか仕事とかに役立ちそうな発見や学びはありました。
同じく Nuxt を使用している UnJS のウェブサイトのリポジトリ あたりをめちゃくちゃ参考にしたのですが、すごく勉強になりました。
なんやかんやで 個人的には納得のいく形でウェブサイトを作り直すことができた かな、と思います。めでたい。きれいなウェブサイトのほうが「ブログを投稿しよう」とか「もっと見やすいように改善しよう」みたいなモチベがアガるので良き。
今後もどうぞよろしくおねがいいたします。