で共有 このサイトのUIとOGP画像を修正しました
- css
この記事は本サイトへの移行に当たって、旧サイトの記事をそのまま持ってきたものになります。
旧サイト：
R.dev の個人ブログサイトです。
r-dev95.github.io
このサイトの UI と OGP 画像について、気になっていた部分を修正したので、作業内容とあわせて反省点もまとめておきます。
UIの修正
記事リンクカードのタイトル表示
記事リンクカードは、タイトルが長くなると折り返さず省略するようにしていました。そのため視聴端末によっては幅が狭く、タイトルの半分も見えないような状態でした。
そこで、長いタイトルが入っても2行分は見られるように表示を調整しました。
ページ移動ボタンの見た目
記事詳細ページの前後移動ボタンも、最初は状態の違いが少し分かりにくい見た目になっていました。
特に、移動できないときのボタンが通常時とあまり変わらず、押せるのか押せないのかが伝わりにくかったため、disabled 相当の状態が見た目でも分かるように調整しました。
OGP画像の修正
ブログ詳細ページ用の OGP 画像はローカルでは問題なく生成できていたのですが、GitHub Actions を使って Ubuntu 上でビルドしたときに文字化けしてしまう問題がありました。
調べてみると、原因はビルド環境ごとのフォント差分でした。Windows では表示できていても、Ubuntu 側では同じフォントが使えず、日本語の描画が崩れていました。
そのため、Ubuntu 上でも利用できる日本語フォントを使うように見直し、GitHub Actions 側でもフォントをインストールするよう修正しました。
まとめ
今回の修正を通して、いくつか反省点がありました。
- 短いタイトルや限られた表示パターンだけで確認すると、実際の運用で崩れるポイントを見落としやすい
- ボタンやリンクは、動くだけでなく状態が見た目で伝わることも大事
- ローカルで問題がなくても、CI や本番に近い環境では別の問題が起きることがある
- 見た目に関する機能でも、環境依存やフォント差分まで考える必要がある
UI を整える作業は見た目の微調整に見えますが、実際には使いやすさや保守性にも関わる部分だとあらためて感じました。
今後は、作ったあとにすぐ公開するのではなく、
- 長いタイトルや例外的なデータでも確認する
- 状態違いを含めて UI を見る
- ローカルだけでなく CI 環境でも確認する
といった流れを、最初から意識して進めていきたいです。