社内フロントエンドエンジニアの提案でCybozu Inside Outが読みやすくなるまで - Cybozu Inside Out

この記事は、CYBOZU SUMMER BLOG FES '26の記事です。

こんにちは。開発本部 Tech Media Platformチームで、エンジニアの情報発信を支援しているjnkyknです。技術ブログのCybozu Inside Outと、エンジニアポータルサイトCybozu Techの運用・管理などを担当しています。日々の業務の中で、アクセシビリティの重要性を認識しつつも十分に対応できていないと感じることがあります。そんな中で、いただいたご要望をきっかけに改善できた事例をご紹介します。

ある日届いた、Cybozu Inside Outへのご要望

Cybozu Inside Outの運営にあたり、過去記事の訂正依頼やブログの運営に関するフィードバックを、kintoneアプリ「Cybozu Inside Out評価箱」で受け付けています。今年の2月このアプリに、フロントエンドエンジニアのmehm8128さんから、こんなご要望が届きました。

Cybozu Inside Outのリンク（a要素）の文字色が全体的に薄くて、見づらい＆アクセシビリティチェックのツールでも、コントラスト比が不足していると判断されてしまいます。視認性を高めて、アクセシビリティが考慮できているイケてるサイトにしませんか？

具体的な数値と根拠、参考になるリンクも添えてくださっていて、「これは対応しなくては！」と思いました。そして決定的だったのは、評価箱に添付されていた「ブラウザ拡張のアクセシビリティ診断ツールAxe DevToolsで実際にブログ記事を診断した結果のスクリーンショット」でした。

Cybozu Inside Outのヘルプサイト刷新の記事をAxe Devtoolsでチェックした結果。問題が203個見つかり、そのうちコントラスト比の問題が191個。 — フロントエンドエンジニアのmehm8128さんから提供された問題箇所のスクリーンショット

指摘の中身が具体的で、すぐに行動に移したくなった

記事を1本チェックしただけで203件の問題が検出され、そのうち191件がコントラスト比（文字色と背景色の明るさの差を数値化したもの）に関するものです。数字とスクリーンショットで具体的に示されると、インパクトがあります。「まず、何から直すと良いだろう？」と検討を始めました。

具体的な指摘ポイントは、大きく3つでした。

訪問済みリンク（:visited）のコントラスト比不足
記事タイトルなどのリンクは、訪問済みになると色が変わる仕様でしたが、そのコントラスト比が 2.9:1。WCAG（ウェブコンテンツアクセシビリティガイドライン）のAA基準である4.5:1を大きく下回っていました。
目次リンクのコントラスト比不足（デフォルト時）
目次のリンクテキストは、ホバー時は基準を満たしているものの、デフォルト（未操作時）の状態では 4.01:1。こちらも基準にわずかに届いていませんでした。
文字サイズ・行間・コードブロックの読みやすさ
文字サイズは15px。WCAGに文字サイズそのものの基準はないものの、他社の技術ブログ（評価箱で例示されていたSmartHR Tech Blogの各記事の本文のフォントサイズは18px）と比較すると見劣りする水準でした。加えて、コードブロックの文字色も背景とのコントラストが弱く、コードを引用する記事では読みにくいポイントになっていました。

「専門家から助言がもらえる」ありがたさ

以前、Cybozu Inside Outの文字配色をコーポレートロゴに寄せる修正をしたのですが、その際に、コントラスト比が低下してしまったようです。明らかに、アクセシビリティの考慮不足です。アクセシビリティチェックの結果を添えて指摘されるまで、確認できていませんでした。

いただいたご要望でありがたかったのは、単に「読みにくい」という感想ではなく、

実際のツール診断結果（スクリーンショット付き）
他社事例との比較
具体的な改善の方向性

までセットで提案してもらえたことです。専門知識を持つエンジニアが、製品だけでなく「情報発信の場」の品質にまで目を向けてくれている。そして、プロの目線で改善提案をしてくれるのは、とてもありがたいと感じました。

実際に対応した内容

いただいた提案をもとに、以下の対応をしました。

項目	Before	After
訪問済みリンクのコントラスト比	2.9:1	5.43:1
目次リンク（デフォルト時）のコントラスト比	4.01:1	5.43:1
本文の文字サイズ	15px	1.125rem（18px相当）
コードブロックを含むページのAxe DevToolsの指摘件数	203	34※

※コードブロックのコントラスト対応時点の中間値。

訪問済みリンク、目次リンク（デフォルト時）のどちらのリンク色も、WCAG AA基準の4.5:1を上回る5.43:1まで改善できました。

文字サイズについては、単純に「18px」と指定するのではなく、rem単位を使って font-size: 1.125rem にしています。これも評価箱のやりとりの中で教えていただいたポイントで、ブラウザ側で設定されているデフォルトの文字サイズ（多くの場合16px）を基準に、その何倍かという比率で指定してブラウザ設定に応じて文字サイズが柔軟に変化できるようにしました。閲覧環境ごとの見やすさに配慮できる点で、単純なpx指定よりも理にかなっていると感じました。

コードブロックについては、「プログラミング言語ごとにシンタックスハイライトの配色が定義されているため、文字色を一つひとつ調整するのは難しい」と考え、背景色を#ffffffに変更するだけの対応にとどめていました。それだけでは、コントラスト比不足の指摘の多くは解消しきれていませんでした。

プログラミング言語ごとに、7つあるシンタックスハイライトのクラス（コメント・型・識別子・文字列・予約語など）それぞれの色を、白背景に対してWCAG AA基準（4.5:1）以上になるよう一つずつ計算し直す作業は、正直ハードルが高いと感じていました。しかし、あれから5ヶ月近く経ってこの記事を書き進める中で「AIに計算してもらえば、コントラスト比を改善できるのでは！？」と、気が付きました。そこで、Claudeに白背景#ffffffに対して4.5:1以上のコントラスト比を確保しつつ、色の見分けがつく各トークンの配色を計算してもらいました。配色はただ見分けが付けば良いというわけではなく、色相はできるだけ元のハイライトらしい役割分担（青は識別子、緑は文字列・数値、といった具合）を保ちつつ、すべてのクラスが基準を満たす配色案を一緒に作りました。何度か繰り返す必要があるかと思ったのですが、見やすい！と感じられる配色が最初にできたので、そのまま採用しました。以下が、デザインCSSとして追加したスタイルです。

/* コードブロックの配色（WCAG AA準拠） */
.entry-content pre.code {
  background-color: #ffffff;
  color: #24292f; /* 通常の文字色 */
}
.synComment    { color: #6A737D; } /* コメント：4.82:1 */
.synType       { color: #B2318E; } /* 型：5.64:1 */
.synStatement  { color: #B2540A; } /* 予約語・ステートメント：5.04:1 */
.synIdentifier { color: #0B6FA8; } /* 識別子（var, let など）：5.45:1 */
.synConstant   { color: #3B7A1F; } /* 文字列・数値：5.26:1 */
.synPreProc    { color: #7A46C9; } /* import など：5.92:1 */
.synSpecial    { color: #A8290B; } /* 特殊文字・エスケープ：7.03:1 */

左側に改善前のコードブロックのスクリーンショットから、右側にコントラスト改善後のコードブロックのスクリーンショットが配置されている画像。中央に、左から右に向かう水色の矢印があり、改善前から改善後の変化の方向を表している。 — コードブロックの改善前と改善後の比較

結果、コードブロックを含むページのAxe DevToolsの指摘件数は、203件から34件まで減少。数値だけでなく、実際にコードブロックの視認性も上がったことを確認できました。

コードブロックを含む記事のAxe DevToolsチェック結果のスクリーンショット。左側にコードブロック部分が表示され、右側にAxe DevToolsの結果「合計課題数34」と表示されている — コードブロックのスタイル改善後のAxe DevToolsチェック結果

この記事の執筆をきっかけに、コードブロックの文字コントラストの問題も解決することができましたが、まだ34件の課題が残っています。評価箱では指摘されていない箇所ではありますが、コードブロックの改善で勢いがついた私は他に対応が可能な課題がないか気になりました。その結果、CSSのカスタマイズで解決できる、記事エントリーの個別ページ用のカテゴリーリンクのスタイル、画像のキャプション文字の配色を調整して、残る課題は25件になりました。記事執筆時点の改善結果は、以下のとおりです。

項目	Before	After
訪問済みリンクのコントラスト比	2.9:1	5.43:1
目次リンク（デフォルト時）のコントラスト比	4.01:1	5.43:1
本文の文字サイズ	15px	1.125rem（18px相当）
カテゴリーリンクのコントラスト比	2.8:1	5.74:1
キャプション文字のコントラスト比	4.12:1	4.93:1
コードブロックを含むページのAxe DevToolsの指摘件数	203	25

まとめ

情報発信の観点に立つと、つい「何を書くか」「どう伝えるか」といったコンテンツの中身に意識が向きがちですが、そもそも「読める・見える」状態になっていなければ、その先には進めません。今回の一件で、それをあらためて実感しました。残った課題25件は、はてなブログのシステム側で管理されているコンポーネント関連（装飾的な画像に代替テキストが設定されていないなど）で、CSSのカスタマイズでは解決できない項目です。一旦ここまでで一区切りにして、対策方法の検討は続けたいと思います。

専門的な知識を持つエンジニアから評価箱を通じて、「根拠とともに、しかもすぐに実行できる形で」提案をもらえたのは本当にありがたいことでした。今回改善したコントラスト比や文字サイズが、これからブログを読んでくださる方はもちろん、これから記事を書くエンジニアのみなさんにとっても、少しでも快適な環境になっていればうれしいです。

そして、このような「気づいたら気軽に声をかけられる」関係性は、これからも大切にしていきたいと思っています。