この記事は 「MEDLEY Summer Tech Blog Relay」 15 日目の記事です。

はじめに

こんにちは！人材プラットフォーム本部プロダクト開発部の小泉(@kzmkt)です。
医療介護従事者向けの求人メディア「ジョブメドレー」開発チームの一員として、主にフロントエンドのエンジニアをしています。

今回、2025年10月の利用規約改定に備えて、利用規約ページを刷新しました。
→ 改定版周知のための利用規約ページはこちら

ジョブメドレーは「誰でも使える」サービスを目指してデザインリニューアルのプロジェクトに取り組んでいます。
→ 「誰でも使える」ように、アクセシビリティ向上に向けて取り組んだこと

この記事では取り組みの背景、具体的な開発プロセスとソフトウェアエンジニアリングについて、プロジェクトメンバーの話も交えて紹介させていただきます。

今回のプロジェクトでは利用規約を読みやすくするために、総合的な観点が必要だったので、法務担当・外部弁護士・デザイン部・開発チームの共同プロジェクトとして進めました。

利用規約を刷新する理由

利用規約刷新の具体的な背景と課題について、事業企画室の小松さんとデザイン部の佐竹さんにお話を伺いました。

事業企画室 小松さんのコメント

ジョブメドレーの利用規約は、あらゆるケースを想定した抽象的で抜け漏れのない規定が必要となります。
そうした文章はともすると、冗長で専門的な用語が多用されるため、誰にとっても読みやすいものとはいえません。
また、サービス規模にあわせて最適な状態に改定してきたものの、運営が15年にもなると複雑でわかりやすいとはいえない規約となっていました。

今回の取り組みでは、わかりづらさを解消し、誰にとってもわかりやすい利用規約を目指すため、以下のような対応を実施しました。

• 冗長な文章を箇条書きや表形式に変更する
• 条文が適用されたときの具体例を記載する
• 「〜を承諾するものとします」や「〜に帰属するものとします」など、法律的な言い回しを可能な限り平易なものに変更する
• 章立ても含めた規約の構成をすべて見直す

デザイン部 佐竹さんのコメント

旧デザインの課題

デザインの視点から見た旧デザインの課題は大きく3つあります。

• 情報構造が不明瞭で、ページ全体の流れをつかみにくい
• 文字サイズや太さに強弱がなく、重要な情報を見つけづらい
• 装飾的な補助要素がなく、内容を直感的に理解しにくい

新デザインでの解決策

新デザインでは、読む負担を減らし、内容を把握しやすい表現を意識しました。

• 適切な余白を設け、テキストをブロック単位で整理
• 目次を追加し、見出しサイズを最適化することで、章や節の構造を一目で把握しやすく改善
• キーワードをフォントウェイトで強調し、重要情報を直感的に理解可能に
• イラストを追加し、複雑な内容をサポート。長文の合間に配置することで、読解のストレスを軽減
• 背景色付きの注釈で補足説明や注意事項を目立たせ、必要な情報をすぐに把握できるように

ジョブメドレーは2009年11月にサービスを開始しました。

サービスが成長していく中で法改正以外でも利用規約を更新し続けており、その時々では最善を尽くしてきたものの、たび重なる改定により、結果として複雑で読みにくい利用規約になってきてしまっていました。
そのため、今回の改定で全面的に見直しを行い、よりわかりやすい構成と内容に改定することにしました。

使用技術と開発プロセス

ここからは分かりやすい利用規約の実現及び「誰でも使える」ジョブメドレーの実現に向けた、アクセシビリティに配慮した開発について紹介します。

ジョブメドレーにはさまざまな開発チームがあり、各チームが並行して機能開発や改善を進めています。多様なチーム構成の中では、チーム間の違いに加えて、企画者・デザイナー・エンジニアなどポジション毎でも、アクセシビリティに関する知見のレベルは様々です。

また、現在は協力会社のサポートを受けながらアクセシビリティに配慮した開発を進めており、今後のアクセシビティ対応の内製化に向けて、ジョブメドレーのエンジニア全員が「誰でも使える」を「誰でも作れる」ようにする必要があります。

今回は以下のプロセスで開発を行いました。

• 企画・仕様策定
• デザイン作成
• 開発
  • デザインコンポーネント開発
  • 画面全体の作り込み
  • ロジックの実装
  • アクセシビリティレビュー
• QA
• リリース
• 監視
• 運用

今回は「デザインコンポーネント開発」および「アクセシビリティレビュー」における取り組みの一部をご紹介します。

どの画面でも変わらないアクセシビリティ品質を提供する開発プロセス

今回の利用規約ページでは、デザインコンポーネントとロジック実装を完全に分けて開発しており、デザインコンポーネント開発段階でアクセシビリティに配慮した実装を行っています。
Storybookを用いてアクセシビリティの品質が担保されたコンポーネントを開発し、それらを組み合わせることで各ページを作成しています。

アクセシビリティ勉強会でStorybookの利用方法を共有

ジョブメドレー開発チームではアクセシビリティ勉強会を実施しており、FigmaのデザインからStorybookを用いたデザインコンポーネント開発を行う際の注意点を紹介しています。
コンポーネント毎にジョブメドレーで目指すアクセシビリティが担保された状態を目標に開発しています。

利用規約ページにおける各項目要素のコンポーネントを作成

今回の利用規約ページでは、各要素に対応したコンポーネントを作成しました。
それぞれのコンポーネントを組み合わせることで、各章や注釈の構造を明確にしています。

ツールやAIによる形式レビューと人による総合的なレビュー

アクセシビリティへの配慮は最終的には人の手と目で確認しなければ、本当に必要な対応ができているかを判断することができません。しかし、開発現場では全てを人の手と目で確認することは必ずしも現実的ではありません。

そこで、段階的なレビュープロセスを実施しています。

• 初期確認
  • AIによる各コンポーネントの実装およびアクセシビリティのレビュー
  • 既存の実装と類似している箇所の事前自動チェック
• ページ作成時
  • ブラウザのアクセシビリティチェックツールによる確認
• 最終確認
  • VoiceOverやPC Talkerを用いた実機での確認
  • ジョブメドレー独自のルール、実際の使用感も含めた人によるレビュー

この仕組みによりレビューコストを減らしつつ、より本質的なアクセシビリティの課題に取り組めるようにしています。

AIによるレビュー

ジョブメドレーではAIによるプルリクエストのレビューを行っています。

アクセシビリティ観点だけでなく、開発初期段階におけるレビューとして、既存実装との整合性や単純な実装ミスのチェックはAIに任せています。
この結果、一定の精度をクリアしたものを人間のレビューに回すことになり、負荷を減らしています。

ブラウザのアクセシビリティツールによるチェック

ブラウザ拡張ツールのaxe DevTools®を用いて、ページのアクセシビリティチェックを実施しています。

これにより基本的なアクセシビリティ課題は自動的に検出することができ、一定の品質を担保できるようにしています。

利用規約ページに合わせた人によるレビュー

AIやツールによる自動チェックでは対応しきれない部分について、人によるレビューを行っています。
アクセシビリティに可能な限り配慮しつつ、ジョブメドレー固有のユーザビリティ要件や使用感も担保できる状態を目指してレビューします。
自動化できる部分は事前にAIやツールでチェックしているため、人によるレビューではより本質的で高度な判断が必要な部分に集中することができます。

VoiceOver・PC Talkerを用いた実機確認

実機での読み上げ、タップ操作、キーボード操作の確認を行います。

開発者用の検証ツールと実機では、読み上げや操作に差異が起きる場合があります。
利用者を想定して、実際のPCやスマホ上でも問題のない表現になっているかを改めて確認しています。

サービス体験をより良いものにするために、ウェブサービスは人間だけでなく機械が読みやすい文章にする必要があります。これをマシンリーダビリティと呼び、読み上げツールがより適切なアウトプットを行うことができ、ユーザ体験が向上します。
アクセシビリティに配慮した開発を行う中で読み上げツールに対応した表現になるようにしています。マシンリーダビリティも担保できる形になっています。

アクセシビリティに配慮したウェブサービスを提供することで、人間だけでなく読み上げツールやAIなどの機械にも扱いやすいサービスを作ることができます。

今回の学び

利用規約の刷新を行う中で様々な気づきがありました。

アクセシビリティに配慮できているウェブサービスであるかどうかは、実際に画面がどのようにHTMLとしてマークアップされるかによって決まります。
そのため、コンポーネント作成段階からアクセシビリティに配慮した開発を進めていくことで、実際の画面を作り込むときのチェックが行いやすくなり、実装者とレビュワーのそれぞれが注力すべき箇所がより明確になります。

コンテンツページのアクセシビリティ

静的コンテンツページでの表示はシンプルですが、ただ純粋に文章を羅列するだけではなく、適切なマークアップが必要になります。 適したHTML表現を行うことで、アクセシビリティに配慮したセマンティックなWebページを作ることができます。

今回、一般的なページの開発ではあまり見かけないHTMLタグも使用しています。

利用規約の各要素に明確に意味を持たせることを意図して使用しています。

WCAG2.1 AAAへの配慮

ジョブメドレーではWCAG2.1の適合レベルAおよびAAに配慮した、Webサービス作りを行っています。 今回の利用規約の刷新において、結果的にWCAG 2.1 AAA（日本語版: WCAG 2.1）にも一部配慮したページになりました。

※ 今回の利用規約刷新では、達成基準 3.1.5 読解レベルを目指していますが、まだ完全に平易なものにはなっておらず改善の余地があります。
この達成基準を目指して改善を重ねていければと思います。

まとめ

今回の利用規約刷新では、「多くの人にとって読みやすい」利用規約ページとなるように、これまで以上に、丁寧なアクセシビリティに配慮したページを作成しました。

また、開発チームにもさまざまな知見が溜まりました。
アクセシビリティに配慮した開発に終わりはなく、今後も続いていきます。
ジョブメドレーでは全てのチームがアクセシビリティに配慮したプロダクト作りを行い、これまで以上に「誰でも使える」ジョブメドレーを目指して行きます。

We Are Hiring!

最後まで読んでいただきありがとうございます！

メドレーでは一緒にプロダクト開発をしていただけるエンジニア・デザイナー・ディレクターを募集中です。
少しでも興味を持っていただけましたら、ぜひカジュアル面談でお待ちしています！

• 🤝 募集一覧
• 🗣️ カジュアル面談

「Medley Summer Tech Blog Relay」 16 日目は、医療プラットフォーム本部の山田さんの記事です！