このブログのデザインをリニューアルした

おもむろに新しく作成した自作のテーマを先日適用した。
まだ直したいところはあるがとりあえず形にはなっているので、完璧にこだわりすぎてエターナルしないように。

リニューアルの経緯

このブログは今まで既成のテーマを使っていたのだが、カスタマイズしようとすると以下のような壁にぶつかっていた。

• HTMLやCSSの構造を把握するのがやや大変
• 汎用的に作ってあるので冗長なところがある

そこでデザインの勉強がてらイチから自作してみることにした。
Figmaによるデザインの作成やCSS設計などデザイン面でやってみたいこともあったので。

ちなみにテーマづくりの経験はそれなりにあるのでそちら方面のチャレンジは特にない。
しいて言えばブロックエディタ対応かな。これは現在進行形（記事を書いてみて表示が思った通りにならないところがあったら都度CSSを書いてる）

リニューアルでやったこと

カテゴリーをタグを一元化

割とカテゴリーが形骸化していたので再編したかったのだが、再編するにもどう分類したものか考えあぐねた。
結果、タグに統一でいいかと。

この手の雑多なブログだとカテゴリーからたどっていくってことはあんまりなくて、Googleさん経由でやってきてそのまま去るというのがほとんどなので、カテゴリーの重要性は小さいということもあり。

それにともないタグ一覧のページも作った。
最近よく書いている話題のタグを大きく表示して、それ以外は無造作に列挙するという形ですね。

あんまりちゃんと選んでない感もあるのでもう少し直すかもしれない。

プロフィール

ヘッダに概要を常に表示するようにした。

個別のプロフィールページはもう少しカッコよくしたい。
なかなかプロフィールの整理って難しい。

雑記

日記的な内容やメモ的なことは記事にするのもアレなので別の投稿タイプで独立させた。

古い記事

5年以上前の記事は古い記事として警告を表示。検索結果にも出さないようにした。
いやほんとに10年前の記事とかほぼ役に立たないし。

ただ一応古い記事も含めて検索できるようなオプションは後でつけたい。

Google Analyticsのタグを入れてみた

平日のUUが80人くらい。つつましい。

サイトの状況の可視化が目的。

デザイン反省点

いろいろとぐだぐだだった。

画面の要素の洗い出し不足

例えばヘッダのナビゲーションがないなど。デザイン時には抜けていたのである。
軽い気持ちで始めたせいもあるが、ワイヤーフレームを作る前に画面ごとに箇条書きはしておくべきだったかと。

仕事だったら殴られるレベルの手戻りである。

Figma上での作りこみ不足

ざっと要素を配置して整列するくらいはサクッとできるのだが、細部の作りこみになるとデザイン作業およびツールの両方に慣れていないことから質を高めていくことができなかった。

おかげで洗い出し不足の要素といっしょにコーディングしながらもりもり作っていったという。

ただこれはこれで便利な面もあって、デザイン時に実データを使えるのは良さがある。

徹頭徹尾ソロでやるなら紙でブロックをぱぱっと書いて、しかし紙だけだとフォントのサイズや画像サイズなどのスケール感が適当になりすぎるので、紙をもとにFigmaでワイヤーと大枠のデザインをささっと作って、残りはコーディングで詰めていくと言うのもありなのかもだ。

なんとなればデザインツールよりコードで整える方が楽なので。

画面遷移の洗い出し不足

例えばタグ一覧への導線がないなど。コーディングしてテーマとして動作するようになって気が付いた。

画面の要素と同じく事前の検討不足というのもあるのだが、動かすとすぐ分かるものなので、なんらかのツールで動くプロトタイプを作ってみたらいいのかもしれない。

Figma上できれいにみえてもコードに落とすと汚い

例えば本文を太字にしてしまうなど。Figma上では骨太でいいかんじに見えたが、コードに落としてブラウザで見るととてもうるさくて読みづらい。

このあたりはなんだろう。ウェブデザインの経験値不足かな。ブラウザで見たときどうなるかって言う感覚は必要ですね。

というわけででデザインは仕事でやるにはちょっと、というかんじになっている。まあ趣味ですね。

ただ一定のデザインリテラシーがあるというだけでも好悪の判断や意見を出せたりはするので、デザイナーを担当するほどのスキルにはならなくても無駄にはならないかと。

コーディングよかった点

BEM完全に理解した

あまり厳密にやってないかんじではあるが、SCSSを利用して見通し良く書けた。CSSのリファクタリングもしやすい。

MIXなども実践できたし、これはBEM完全に理解してしまった（してない）

スタイルを必ずクラスに当てることでHTML構造とCSSが疎になるため、タグの種類を変えてもCSSを直す必要がないというのは良い。
詳細度を低く保つことで、スタイルがどこで当たっているのかこんがらがって分からなくなるということもなかった。

CSS設計いいですね。

Flexboxけっこう分かった

Floatで頑張ってやっていたところが簡単にできて便利。

やっと俺が時代に追い付いてきた。

かかった期間

4月半ばくらいからちょいちょい取り組み始めて6/21に本番反映。
かかりきりになっていたわけではないので、実質は2週間くらいかな？

デザインにどれくらい時間がかかったのか測ってなかったので忘れてしまった。

コードは5/15に本格的に書き始めて6/22にだいたい落ち着いた（本番反映してからけっこう直した）
Gitのコミットログによればこの間に実際に作業したのは10日間だったようだ。

これくらいの規模だとコーディングされたものをテーマとして起こすなら1週間あれば余裕だが、自分でコーディングもして、加えてデザイン直しながらだとやっぱそれなりに時間はかかる。

これから

まだ気になるところはあるので随時直していきたい。
大ネタとしては静的化にチャレンジする。

デザイン反省点は今後の個人開発に活かしていければ。