きっかけは些細な違和感でした。今日は新しい記事を書く代わりに、サイトを見返しながら細かいUI・UXの調整をいくつもやっていました。1つ1つは小さな修正なんですが、まとめて振り返ってみると「地味だけど効く」系のパターンが多かったので、備忘録がてら書いておきます。
見出しの前後の余白が逆転していた
見出しの余白、まさかの逆転。記事本文でh2の後ろの余白が、h2の前の余白より広くなっていることに気づきました。数字にすると、見出しの後(自分の本文との間)が32.4px、見出しの前(前セクションとの間)が28.8pxで、本来は逆であるべきなんですよね。見出しは前のセクションから離して、自分の本文には近づける方が読みやすいので、見出しだけmargin-topを使う例外ルールにして直しました。
なんで気づけたのか
発端は意外な出来事でした。今回のきっかけは、実はSNSで見かけたnpmのサプライチェーン攻撃のニュースでした。自分のプロジェクトが影響を受けていないか確認するために、依存パッケージを一つずつ洗い出す作業をしていたんですが、その過程で「そういえば普段あまり見ていない箇所も、たまにはちゃんと確認しないとな」という気持ちになって、そのままサイト全体を見直す流れになりました。セキュリティの調査とUIの見直しは一見関係ないようで、「見落としを潰す」という意味では同じ作業だったんだと思います。
固定ページに更新日はいらなかった
答えは拍子抜けするほど簡単でした。プロフィールやお問い合わせページにも、記事と同じように投稿日・更新日が表示されていたんですが、これはよく考えたら不要でした。日付が意味を持つのは「鮮度」を示したい記事だけで、固定ページには関係ないですよね。body.pageのときだけ日付エリアを消すCSSを1行足すだけで済みました。
「adminをフォローする」が地味に恥ずかしかった
地味に恥ずかしい発見でした。記事下部にCocoon標準の「◯◯をフォローする」という表示があったんですが、ユーザー名がそのまま出ていたので「adminをフォローする」になっていました。表示名を「Cat’s Hand」に変えるだけの話なんですが、地味に見落としがちなポイントだと思います。
関連記事が2種類、しかもシェアボタンを挟んで表示されていた
原因は重複表示。自分で作った「関連記事」ブロックとは別に、Cocoon標準の自動関連記事ウィジェットも表示されていて、しかもシェアボタンを挟んで上下に分かれて出てくる状態になっていました。せっかく自分で厳選したリンクを置いているので、Cocoon側の自動表示はオフにして、1つにまとめました。
必須バッジが本文より大きかった
サイズ感がずれていました。お問い合わせフォームの「必須」バッジ、気づいたらラベルの文字より大きいサイズ(1.2rem)になっていて、バランスが悪かったです。0.65emまで縮めたら、ちゃんと補助的なタグらしいサイズ感になりました。ついでに、お問い合わせ内容欄が必須になっていなかったのも見つけて直しました。空欄のまま送信できてしまう状態だったので、これは普通に不具合ですね。
セクションごとに横幅が微妙にズレていた
犯人はCSSの1行でした。これが一番厄介でした。トップページの「中の人について」セクションと「お問い合わせ」CTAセクションで、横幅が微妙に違って見えていたんです。原因を追ってみたら、以前レスポンシブの横はみ出し対策で足した.wrap { max-width: calc(100% - 32px); }というルールが、範囲を絞らず全部の.wrap要素に効いてしまっていて、常に32px狭くなっていました。全幅背景の要素(.wrapを使っていない)とだけズレて見えていた、というオチです。max-width: 100%に単純化したら、元の不具合も再発せずにズレも直りました。
教訓はシンプルです。この手のバグは、見た目だけ見ていても原因になかなかたどり着けません。実際にブラウザ側で各要素の幅を数値で測って、どこで数字が食い違っているかを一つずつ確認していく作業が結局一番早かったです。「なんかズレてる気がする」で終わらせず、実測値まで踏み込んで確認する癖はやっぱり大事だなと再確認しました。
コメント機能もオフにした
決め手はシンプルな損得勘定でした。ついでに、というと変ですが、コメント機能も無効化しました。今のところ読者もまだ少なく、コメント欄はスパムの標的になりやすい割にメリットが薄いと判断したためです。お問い合わせフォームという反応をもらう窓口は別にあるので、当面はそちらに一本化しておこうと思います。将来、読者が増えてコメントで交流できそうなタイミングが来たら、また有効化するつもりです。
振り返って思ったこと
振り返ると発見だらけでした。今回直した箇所、どれも「動いてはいるけど、よく見ると変」というレベルのものばかりでした。ぱっと見で気づきにくい分、放置されがちなポイントでもあります。公開して終わりじゃなく、ちょいちょい自分のサイトを読者目線で見返す時間を作ることの大事さを、改めて感じました。
まとめ
今日のまとめは一言です。今日は目立った新機能追加はなかったんですが、こういう地味な調整の積み重ねが、結局サイト全体の「なんかちゃんとしてる感」につながるんだと思います。次の記事を書く前に、たまにはこうやって全体を見直す日があってもいいなと感じました。
気づきにくい落とし穴です。特に個人でサイトを運営していると、自分がユーザーとしてサイトを見る機会は実は少なかったりします。定期的に「初めて訪れた読者のつもり」で自分のサイトを一通り見て回る時間を、意識的に作っていきたいと思います。
