スマホユーザー向けの山中弁護士ブログの改修（AI作成）

目次

第１　緒言
１　本記事の目的
２　ブログ改修の背景
(1) スマホユーザーの増加とモバイルフレンドリーの重要性
(2) 情報公開文書の視認性向上の必要性
(3) ２０２６年時点における最新のＳＥＯ基準への適合

第２　本件改修の核心：スマホファーストの徹底
１　ファーストビューの劇的改善
(1) ヘッダー領域のスリム化と余白の最適化
(2) 検索ツールの最上部固定配置による利便性向上

２　Ｆｌｅｘｂｏｘを用いた情報優先順位の再定義
(1) 表示順序（ｏｒｄｅｒプロパティ）の戦略的変更
(2) パンくずリストの配置変更とその論理的根拠

第３　ユーザー体験（ＵＸ）を向上させるタイポグラフィとレイアウト
１　視認性を極限まで高める文字設計
(1) 本文フォントサイズと行間の黄金比
(2) モバイルにおけるタップ領域の確保と誤操作防止

２　コアウェブバイタル指標と実測の確認
(1) ＣＬＳ（レイアウトシフト）対策の具体的手法
(2) 外部メディア（ＹｏｕＴｕｂｅ，Ｘ）のプレースホルダー確保

第４　弁護士ブログ特有の課題解決：表形式データのレスポンシブ化
１　裁判官人事データの「はみ出し」問題
(1) 横スクロール機能の導入と実装コードの解説
(2) セル内改行の抑制とデータの完全性維持

２　アクセシビリティの確保
(1) 公用文としての正確さと読みやすさの両立
(2) 支援技術での利用と適合性の確認

第５　改修の効果を確かめるための観点
１　表示改善と検索上の効果を分ける
(1) 表示順序とクロール・インデックスの区別
(2) 読みやすさと利用状況の計測

２　継続的な改善に向けた確認
(1) 構造化データの対象と表示結果を区別する
(2) 検索表示，訪問及び相談を分けて計測する

第６　結びに代えて

第１　緒言

１　本記事の目的

本記事は，２０２６年３月２５日に当ブログで行ったスマートフォン向けの表示改善について，改修内容と効果を検証する際の観点を整理するものです。
表示位置や文字サイズ等の実装内容と，検索順位，閲覧行動及び問い合わせへの効果は，それぞれ確認する資料が異なります。
本記事には改修前後のアクセス解析を示していないため，集客効果を実証した報告として読むことはできません。

当ブログは，情報公開請求等によって取得した司法行政文書や，裁判官人事データベースをはじめとする極めて公共性の高い情報を発信しております。
これらの貴重な情報が，あらゆるデバイスにおいてストレスなく閲覧可能であることは，情報発信者としての責務であると考えております。
今回の改修では，モバイル環境での「読みやすさ」と「探しやすさ」の向上を目指しました。

なお，ＰＣ表示（画面幅９９２ｐｘ以上）では，２０２６年１０月１７日から，トップページ等と同じく投稿ページでもサイドバーを左側に表示しています。

２　ブログ改修の背景

(1) スマホユーザーの増加とモバイルフレンドリーの重要性

スマートフォンで閲覧する読者が，目的の情報を探し，本文や表を読めるようにすることは，表示設計の重要な課題です。
当ブログの端末別利用割合や移動中の利用状況を本記事で示しているわけではないため，ＰＣからモバイルへの移行が完了したことや，特定の利用場面の割合までは述べません。

(2) 情報公開文書の視認性向上の必要性

当ブログで扱う情報は，表（テーブル）形式のデータや，期数，生年月日，経歴といった細かな数字・テキストが中心です。これまでの標準的なデザインでは，スマートフォンの狭い画面において表が途切れたり，文字が詰まりすぎていたりと，判読に支障をきたす場面がありました。今回の改修は，これらの「情報の質」に見合った「表示の質」を担保することを目的としています。

(3) ２０２６年時点における最新のＳＥＯ基準への適合

Ｇｏｏｇｌｅは，インデックス登録とランキングに，スマートフォン用のクローラーで取得したモバイル版のサイトコンテンツを使用するとしています（モバイル・ファースト・インデックス。Ｇｏｏｇｌｅ検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」）。
そのため，スマートフォンでの表示の改善は，検索エンジンへの対応という観点からも意味があります。
今回の改修は，単なる見た目の変更にとどまらず，テクニカルＳＥＯの観点からサイトの構造を最新の状態にアップデートするものでもあります。

第２　本件改修の核心：スマホファーストの徹底

１　ファーストビューの劇的改善

スマートフォンユーザーは，サイトを訪問してから最初の数秒で「この記事を読み続けるか」を判断します。画面上部（ファーストビュー）に不要な余白やロゴが占領していると，ユーザーは目的の情報にたどり着く前に離脱してしまいます。

(1) ヘッダー領域のスリム化と余白の最適化

改修前のソースコードでは，ヘッダー（＃ｈｅａｄｅｒ）およびロゴ部分（＃ｌｏｇｏ）に大きな余白（ｐａｄｄｉｎｇ）が設定されていました。これはＰＣの大画面ではゆとりを感じさせますが，スマートフォンでは画面の３分の１を埋めてしまう要因となっていました。

改修後のコードでは，ヘッダーの上下余白を５ｐｘまで削減し，ロゴの行間（ｌｉｎｅ－ｈｅｉｇｈｔ）を１.２まで詰めました。これにより，ページを開いた瞬間に記事タイトルが目に入るようになり，ユーザーの期待に応えるスピードが向上しました。

(2) 検索ツールの最上部固定配置による利便性向上

当ブログは膨大な記事数を誇るため，「検索機能」が極めて重要です。従来，サイドバーにあった検索窓は，スマートフォン表示では記事の末尾までスクロールしなければ表示されませんでした。

今回の改修では，スマートフォン表示（画面幅７６８ｐｘ以下）のときに，記事本文やサイドバーを囲む領域の上端に検索窓の分の余白を設け，サイドバーの中にある検索窓に「ｐｏｓｉｔｉｏｎ： ａｂｓｏｌｕｔｅ；」と「ｔｏｐ： ０；」を指定して，その余白に重ねて表示しています。
これにより，ＨＴＭＬ上の位置（サイドバーの中）に関わらず，スマートフォンでは記事の末尾までスクロールしなくても，画面上部で検索窓を使えるようになりました。
なお，検索窓には「ｏｒｄｅｒ」の指定もありますが，２０２６年１０月１７日に公開ページで確かめたところ，その値を変えても検索窓の位置は変わらず，位置を決めているのは「ｐｏｓｉｔｉｏｎ」の指定と上記の余白でした。

２　Ｆｌｅｘｂｏｘを用いた情報優先順位の再定義

ＨＴＭＬの記述順序（ソースコードの順番）に縛られず，ユーザーのニーズに合わせて情報の並び順を制御することは，現代のウェブデザインにおいて欠かせない技術です。

(1) 表示順序（ｏｒｄｅｒプロパティ）の戦略的変更

「＃ｃｏｎｔｅｎｔ ．ｗｒａｐ」に対して「ｄｉｓｐｌａｙ： ｆｌｅｘ；」と「ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ： ｃｏｌｕｍｎ；」を適用することで，各要素の並び順を自由に変更可能にしました。

１．検索ツール（「ｐｏｓｉｔｉｏｎ： ａｂｓｏｌｕｔｅ；」により最上部に表示）：最優先の利便性

２．記事本文（ｏｒｄｅｒ： １）：最も重要なコンテンツ

３．パンくずリスト（ｏｒｄｅｒ： ２）：現在地の確認

４．サイドバー要素（ｏｒｄｅｒ： ３）：補足情報

このように，ユーザーが記事を読み終えた後に「自分がどのカテゴリーにいるのか」を確認できるよう，パンくずリストを記事の直下に配置するなど，論理的な導線を設計いたしました。

(2) パンくずリストの配置変更とその論理的根拠

従来の「タイトル上部のパンくずリスト」は，スマートフォンの狭い画面ではタイトルを押し下げる要因となっていました。
記事直下に配置を移すことで，読了後のアクションを促すナビゲーションとしての役割を強化しました。
また，背景色を薄いグレー（＃ｆ９ｆ９ｆ９）に設定し，記事本文との境界を明確にすることで，視認性を高めています。

第３　ユーザー体験（ＵＸ）を向上させるタイポグラフィとレイアウト

１　視認性を極限まで高める文字設計

ウェブにおける「読みやすさ」は，単に文字が大きいことだけではありません。文字の大きさ，行間，余白のバランスが重要です。

(1) 本文フォントサイズと行間の黄金比

「．ｐｏｓｔ－ｃｏｎｔｅｎｔ」において，フォントサイズを１７ｐｘ，行間を１.９に設定いたしました。

特に裁判官の経歴のようなリスト形式の情報は，行間が狭いと行を読み飛ばしてしまうミスを誘発します。１.９という広めの設定により，指でなぞりながら読むような場合でも快適な読書体験を提供できます。

(2) モバイルにおけるタップ領域の確保と誤操作防止

指で操作するスマートフォンでは，「タップのしやすさ」が重要です。

箇条書き（ｌｉ）内のリンク（ａ）に対し，「ｄｉｓｐｌａｙ： ｂｌｏｃｋ；」を適用しました。これにより，文字の部分だけでなく，その行全体がタップ可能になります。これはアクセシビリティの向上に直結し，小さなリンク文字を正確に狙ってタップするストレスからユーザーを解放します。

２　コアウェブバイタル指標と実測の確認

コアウェブバイタルは，読み込み，操作への応答及び表示の安定性について，実際のユーザー体験を捉える指標です。
Ｇｏｏｇｌｅはランキングシステムでこれらの指標を使用すると説明していますが，良好なスコアだけで検索上位が保証されるわけではありません。
以下のＣＬＳ対策についても，実装したことと，実測値が改善したことを区別します。

出典：
https://developers.google.com/search/docs/appearance/core-web-vitals
https://developers.google.com/search/docs/appearance/page-experience

(1) ＣＬＳ（レイアウトシフト）対策の具体的手法

画像や動画などの重い要素が読み込まれる際に，下の文章が急にガクッと動く現象をレイアウトシフトと呼びます。これを防ぐために，要素が表示される前の「予約席」を確保する記述を追加しました。

(2) 外部メディア（ＹｏｕＴｕｂｅ，Ｘ）のプレースホルダー確保

ＹｏｕＴｕｂｅの埋め込み（ｉｆｒａｍｅ）に対して「ａｓｐｅｃｔ－ｒａｔｉｏ： １６ ／ ９；」を指定することで，動画が読み込まれる前から１６：９の比率で高さを確保します。また，Ｘ（旧Ｔｗｉｔｔｅｒ）の埋め込みに対しても「ｍｉｎ－ｈｅｉｇｈｔ： ２５０ｐｘ；」を設定し，読み込み完了時にコンテンツが急激に押し下げられるのを防止しています。これらの微細な調整が，サイト全体の信頼性を高める要因となります。

第４　弁護士ブログ特有の課題解決：表形式データのレスポンシブ化

１　裁判官人事データの「はみ出し」問題

当ブログのメインコンテンツである裁判官人事データベースは，期数，氏名，発令日，配置などの多岐にわたる項目を表（テーブル）形式で掲載しています。

(1) 横スクロール機能の導入と実装コードの解説

従来のテーブル表示では，画面幅の狭いスマートフォンでは列が重なったり，文字が縦に長く伸びてしまったりする問題がありました。今回の改修では，「．ｐｏｓｔ－ｃｏｎｔｅｎｔ ｔａｂｌｅ」に対して「ｄｉｓｐｌａｙ： ｂｌｏｃｋ；」および「ｏｖｅｒｆｌｏｗ－ｘ： ａｕｔｏ；」を適用しました。

これにより，表の幅が画面を超えた場合でも，全体のレイアウトを崩すことなく，表の中だけを指で横にスワイプして閲覧できるようになりました。これは情報の完全性を維持しつつ，モバイルでの閲覧性を両立させる最適解です。

(2) セル内改行の抑制とデータの完全性維持

「ｗｈｉｔｅ－ｓｐａｃｅ： ｎｏｗｒａｐ；」の設定を加え，セル内での不自然な改行を禁止しました。例えば，「山形地家裁判事補」といった肩書きが途中で改行されると，リストとしての可読性が著しく低下します。横スクロールと組み合わせることで，正確な経歴情報をそのままの形で提示することが可能となりました。

２　アクセシビリティの確保

(1) 公用文としての正確さと読みやすさの両立

法曹関係者や公務員といった専門職の方々が利用するブログとして，公用文の形式に準拠した整理を行いました。見出しの階層構造（第１，１，(1)，ア）を厳格に適用し，情報の優先順位が視覚的にも論理的にも明確に伝わるよう配慮しています。

(2) 支援技術での利用と適合性の確認

見出しや表の構造を整理することは，読み上げソフト等の支援技術でも情報を理解しやすくするための検討事項です。
ただし，見た目の改善又はマークアップの採用だけで，アクセシビリティ基準への適合や実際の読み上げの改善が確認できたことにはなりません。
本記事では，適合性評価又は支援技術による操作試験の結果は示していません。

第５　改修の効果を確かめるための観点

１　表示改善と検索上の効果を分ける

(1)　表示順序とクロール・インデックスの区別

ヘッダーの余白を減らすことや，画面上の表示順序を変えることは，読者が情報を探しやすくするための設計です。
ただし，ＣＳＳによる見た目の変更だけで，クローラーによる取得，インデックス登録又は検索順位が改善したと判断することはできません。
モバイル版に必要な本文やリンクが存在し，取得可能であるかという技術的確認と，検索上の効果測定を分けて行います。

(2)　読みやすさと利用状況の計測

文字サイズや表の横スクロールは，読みにくさを減らすための工夫です。
その効果を確かめるには，対象ページ，期間及び端末をそろえ，平均エンゲージメント時間，検索窓の利用，問い合わせ等の記録を確認します。
直帰率や滞在時間の変化だけで，読みやすさの改善又は受任の増加を確定しないことも必要です。

２　継続的な改善に向けた確認

(1)　構造化データの対象と表示結果を区別する

構造化データは，ページの内容と採用する型・プロパティが一致しているかを確認して用います。
本記事では，Ｐｅｒｓｏｎスキーマによる検索表示や流入の改善を示す比較資料は提示していません。
ＧｏｏｇｌｅのＤａｔａｓｅｔの説明は，データセットをＤａｔａｓｅｔ Ｓｅａｒｃｈで見つけやすくするためのものであり，一般の法律記事に付ければ検索結果のリッチスニペットが強化されるという保証ではありません。
実際に公開しているデータセットの内容と公式仕様を確認した上で，導入の要否を判断します。

出典：https://developers.google.com/search/docs/appearance/structured-data/dataset

(2)　検索表示，訪問及び相談を分けて計測する

検索順位や表示回数が維持されても，検索結果の構成や検索する目的が変われば，クリック率や訪問数は変わり得ます。
流入の減少を表示改修の失敗又はＡＩ検索だけの影響と即断せず，同じ条件で表示回数，順位，クリック率，訪問，問い合わせ及び受任を順に確認します。
ＡＩ回答への掲載，サイトへの訪問及び業務上の成果の区別については，法律事務所のＬＬＭＯ・ＧＥＯ対策の記事も参照してください。

関連記事：https://yamanaka-bengoshi.jp/2026/09/14/horitsu-jimusho-llmo-geo/

第６　結びに代えて

今回の改修は，スマートフォンで情報を探し，本文や表を読む際の負担を減らすことを目的としています。
具体的な実装内容の記録と，利用者の操作やアクセス解析から分かる効果を区別して，必要な改善を続けます。

検索サービスの仕様に関する公式説明は，一般的な仕組みを確認する資料です。
それだけで，当ブログの検索順位，問い合わせ又は受任が増えたことを証明するものではありません。