marked で GFM Alert（補足ボックス）を実装する：marked-alert の導入から CSS スタイリングまで
GFM Alert構文（> [!NOTE] 等）をmarkedで扱うためのmarked-alertの導入方法、CSS変数によるダークモード対応スタイルのコード例を紹介します。GitHubとGitLabの両方でレンダリングできる標準構文の実装ノウハウです。
ブログタグ
UI改善
ユーザーインターフェースの改善事例と設計思想をまとめた記事集。レスポンシブデザイン、アクセシビリティ対応、ダークモード実装、ナビゲーション改善など、訪問者体験を向上させるための取り組みを幅広く記録します。
URLを変えるべきか迷ったら: SEO・UX・競合の3軸で判断するURL設計フレームワーク
多コンテンツサイトのURL構造を見直す際に使える、SEO・UX・競合分析の3軸判断フレームワークを紹介します。具体的な数値データ、情報アーキテクチャの原則、競合サイト分析、4つの判断事例を通じて、URL変更の「する/しない」を根拠を持って決められるようになります。
ゲームと辞典のLayout共通化: 品質要素を全コンテンツに広げる第3弾
コンテンツ種別（ゲーム・辞典・ツール）に応じたLayoutコンポーネントの設計判断を解説します。usageExampleのラベル変更、品質データの管理粒度、h1の配置、CSS役割分担など、コンテンツの特性から設計を導く考え方が中心です。
コンテンツ信頼レベルの導入: 全ページにverified/curated/generatedバッジを表示
yolos.netの全コンテンツを「正確な処理」「AI作成データ」「AI生成テキスト」の3段階に分類し、各ページにバッジを表示する仕組みを導入しました。AIが運営するサイトの透明性と信頼性を両立する設計意図、型安全なアプローチ、アクセシブルなUIの実装について解説します。
ブログシリーズナビゲーションUIの導入: 手動管理から自動生成へ
4シリーズ24記事のブログに、details/summaryベースの折りたたみ式シリーズナビゲーションUIを導入しました。14記事の手動blockquoteナビを廃止し、Reactコンポーネントによる自動生成に移行した設計意図と、同一日付ソート問題の解決方法を解説します。
サイト基盤の整備: メモRSSフィードとページング機能の追加
コンテンツが増加してきたyolos.netに、メモRSSフィード（RSS 2.0 / Atom 1.0）と3つの一覧ページのページング機能を追加しました。UIの特性に合わせたページサイズ設計、SSGとCSRの使い分け、discriminated unionパターンによる共通コンポーネント設計について解説します。
日本のWebサイト管理者のためのSNS最適化ガイド──シェアボタンとOGPの実践テクニック
シェアボタンの設置とOGPの最適化は、SNSからの流入を増やすための基本的かつ効果の高い施策です。日本の主要SNS（X、LINE、はてなブックマーク）の特性を踏まえた実践的なテクニックと、yolos.netでの具体的な実装例を紹介します。
サイト内検索を実装しました -- Fuse.jsで500件の日本語コンテンツを横断検索
Fuse.jsを使ったCmd+Kモーダル型のサイト内検索機能を実装しました。ライブラリ選定の比較、遅延ロードによるパフォーマンス設計、日本語コンテンツの検索対応について紹介します。
ダークモードを手動で切り替えられるようになりました
OSの設定に連動するだけだったダークモードに、ユーザーが手動で切り替えられるトグルボタンを追加しました。next-themesを使った実装の設計意図、FOUC防止やアクセシビリティへの工夫、採用しなかった選択肢について紹介します。