UX casestudy

情報設計と言語設計で、 複雑なプロダクトを〝迷わず使える体験”にする Case Study Portfolio 2026

3つの強み デザインと言葉を統合して設計する 画面の文言・マニュアル・FAQをUIと切り離さず、同じ設計の問題として扱います。ボタンの配置を変えることも、ラベルを書き直すことも、同じ判断の連続です。

制約の中での優先順位を決め、段階的に改善する 動かせない制約を把握した上で、今手をつけられる場所から進めます。「最も困っている問題」と「今解ける問題」を分けて考えます。

プロダクト全体を見て動く姿勢を持つ 大きな改修を積み残し課題の回収機会として捉え、自ら提案して設計の範囲を広げてきました。

デザインと言葉で、ユーザーの「わからない」を解消する UIを作ることと、言葉を整えることを、同じ設計行為として扱っています。画面の構造がわかりにくければ導線を組み直し、マニュアルの順序がずれていれば操作の流れに沿って書き直す。どちらも「利用者がその場で完結できる状態を作る」という同じ目的から来ています。

教育領域のクラウドサービスで、児童生徒・教員・学校管理者・教育委員会という多層のユーザーを前提に、課題の発見から実装レビュー・運用改善まで継続して担当してきました。

文部科学省の統一仕様や共通パーツの影響範囲など、動かせない制約を把握した上で、プロダクトが迷わず使われ、その運用フェーズと改善まで継続して整備してきました。

Case Study 01 デジタル教科書ビューア UI/UX 再設計

プロダクト ：デジタル教科書配信ビューア（クラウド版／アプリ版／校内版）

対象ユーザー ：児童生徒（小〜高校）、教員、個人ストアユーザー

役割 ：サービス設計、画面設計、アイコン設計、設計基準の標準化、仕様整理、実装レビュー 期間：2022年9月〜現在

背景・課題 機能追加のたびにメニューバーのアイコンが増え、表示領域が限界に達していた。「読むモード」と「書くモード」の切り替えがUIとして明示されておらず、利用者が気づきにくい状態が続いていた。

課題の把握：問い合わせ傾向・サポート窓口のフィードバック／他サービスとのベンチマーク調査／検証環境での挙動確認

制約条件：文科省統一仕様（ナビメニュー）は改変不可／iPad miniでの指操作を最小単位として設計／アクセシビリティ基準への準拠が必須

最重要判断 ：モード切り替えボタンをナビバー最下部に固定配置した。切り替えの存在自体が利用者に伝わっていなかったため、頻繁かつ文脈が根本的に変わる操作として、他の操作に影響されない安定した位置に置くと判断した。

設計判断

フローティングバーの断念：文科省統一仕様との表示領域競合により断念。誤タップを誘発すると判断し、上下左右の表示切り替えは環境設定へ移動した。

アイコン再設計：サイズ統一・SVG出力で拡大縮小時の視認性を担保。選択状態とホバー状態を同一化し、アクセシビリティと操作の一貫性を整えた。

設計基準の標準化：サイズ・余白・タップ領域の基準を言語化し、開発チームとの共通言語として機能する土台を整えた。

成果：導入校数が6,000校から33,000校へ拡大するフェーズで、導入拡大に伴う機能追加が続く中でもUIの破綻を防ぎサービス品質を維持しつつ、出版社要請の「紙面へのはみ出し抑制」対応、継続的な機能追加に耐えるUI基盤を整備などで、体験品質の破綻を防ぎ、運用の安定化に寄与した。

学び： 既存アイコンの継承を優先した結果、書き込み操作すべてに共通する＋記号をそのまま残した。後から不要だったと気づいた。「何を引き継ぎ、何を切るか」の判断軸を、設計の早い段階で言語化しておくべきだった。

Case Study 02 学校管理画面の改善　開発者視点からユーザー視点へ

プロダクト ：クラウド版デジタル教科書配信用　学校管理画面 対象ユーザー ：管理者（学校内ICT担当・ICT支援員など）、教員

役割 ：画面設計、情報設計、文言整理、デザインシステムの適用、実装レビュー 期間：2024年1月〜現在

背景・課題：開発者視点で作られた管理画面は、現場の業務フローとUIの構造がかみ合っていなかった。教員と管理者のアイコンが酷似しており、利用者が自分のアカウント種別を判別できず、サポートセンターの案内業務にも支障が出ていた。また、同じ操作を指す言葉が画面内で統一されておらず、UI・マニュアル・FAQ間で表現が乖離していた。

課題の把握：サポートセンターからの問い合わせ傾向の分析／開発メンバーとの対話／既存画面の精査

制約条件：モーダルは共通パーツのため改変には全体調整が必要／機能追加・改変のタイミングでしか画面を切り替えられない

最重要判断 ：「最も困っている問題」と「今手をつけられる問題」を分けて考え、影響範囲の小さい改善から着手した。最大の課題だったモーダルの表示領域は共通パーツへの影響が大きく即着手できないため、第一階層の検索バーやアイコンから段階的に進める順序を選んだ。

設計判断

アイコンの明確化：教員・管理者アイコンを明確に変更し、利用者が画面上でアカウント種別を自己確認できるようにした。

一覧→詳細→戻る の往復を減らす：詳細をモーダル内で完結させる構造へ見直し、管理業務中の画面の行き来を最小化した。

言葉をプロダクトの中から発見する：新しい言葉を外から持ち込むのではなく、既存画面を読み直し「本棚に追加」「本棚に並べる」という利用者の実感に最も近い言葉に統一した。

成果：アイコンやUIの変更によりアカウント種別の混同を防ぎ、誤操作が起きにくい状態を整備。問い合わせカテゴリが減少（サポートフィードバック）し、サポートの説明コストを低減できた。文言統一の基盤整備では、以後の改善サイクルの効率化につながっている。

学び ：言葉の統一は、新しい言葉を作ることではなく、すでにそこにある言葉を発見することだった。画面を丁寧に読み 直すことが、設計の出発点になると実感した。

Case Study 03 教育委員会向け管理機能　一括運用を成立させる導線設計

プロダクト ：クラウド版デジタル教科書配信用　教育委員会向け管理画面（所管校の管理・一括作業機能・BI機能）

対象ユーザー ：管理者（教育委員会）、ICT支援員など

役割 ：画面設計、情報設計、文言整理、導線設計、実装レビュー

期間：2023 年3 月～現在

背景・課題 ：クーポン引き換えと本棚追加の2ステップが用意されていたが、本棚追加は実際には使われていなかった。各校の管理画面に個別ログインして本棚追加を行う手間が残っており、導入期の作業負荷が解消されていない状態だった。

課題の把握：既存機能の利用状況から未使用フローを特定／文言・一覧表示を精査しつまずき箇所を整理

制約条件：「各校にログインせずに完結する」は要件定義で定められた仕様／担当者のデジタルツール習熟度はばらばら

最重要判断 ：「本棚追加が使われていなかった」事実を、2ステップが手間として認識されていたと読み、操作を一続きで完了できる構造への転換が必要と判断した。複雑な内部処理を利用者から隠し、選択の順序そのものをガイドとして機能させる設計を採用した。

設計判断

選択順序を業務フローに合わせる：校種→対象学校→教科書・教材→ユーザーという順序は、教育委員会が実際に業務を進める順序に沿わせた。次に何を選ぶか考えなくて済む構造を優先した。

おすすめ表示と書影で選択負荷を下げる：対象ユーザーに合わせたおすすめ教科書を表示し、本棚と同じ書影デザイン・チェック選択UIを採用した。

文言を状態から行動へ：「学校管理」を「学校管理画面へ移動」に変更。利用者が次の行動を言葉から直接判断できる表現に統一した。

成果 ：導入期に集中する3種の一括作業（アカウント・クーポン・本棚）を、各校へのログインなしに教育委員会画面上で完結できる体制を整備。習熟度がばらばらな担当者でも初見で操作を完了できる構造を実現。設計に拡張性があるため、学習者用だけでなく、指導者用教科書の配布にも大いに利用されたと報告があった。

学び ：「使われなかった機能」は設計の失敗ではなく、次の設計の手がかりだった。何が使われて、何が使われなかったかを丁寧に見ることが、利用者の実態に即した改善の出発点になると実感した。

Case Study 04

FAQ ／マニュアル／説明動画の再設計　利用者の理解順序に合わせたオンボーディング整備

プロダクト ：Lentranceプラットフォームに関わるFAQ・マニュアル・説明動画　（https://usersupport.lentrance.com/） 対象ユーザー ：Lentranceプラットフォーム利用ユーザー

役割 ：情報設計、文章設計、構成設計、スタイルガイド作成、動画制作 期間：2022年3月〜現在

背景・課題 ：開発主導で作られたマニュアルは機能単位で情報が並んでおり、利用者が操作の順序を自分で組み立てなければならない構造だった。FAQも担当者によって表現が異なり、説明動画は構成基準がなく品質にばらつきがあった。 課題の把握：サポートセンターへの問い合わせ内容からつまずき箇所を特定／既存マニュアル・FAQの情報重複・順序ずれ・用語不統一を整理

制約条件：マニュアルはUI変更のたびに更新が必要で、更新しやすい構造にしておく必要がある／FAQの文言統一はUI側の文言整理（Case02）と連動して進める

最重要判断 ：機能単位の構成から操作タスク単位の構成へ組み替えた。「このページを見れば、この操作が完了する」という単位で章を区切り、利用者が必要な情報にたどり着いたその場で操作を完結できる構造にした。

設計判断

日本語スタイルガイド（外部基準）を根拠にFAQのルールを作る：感覚ではなく外部標準に根拠を置くことで、担当者が変わっても表現が揺れない基準を整備した。

静止画の組み合わせで目線誘導を設計する：画面全体が動き続ける録画では目線が分散するため、静止画組み合わせの紙芝居形式を採用。操作箇所への目線誘導を効果的に行えると判断した。

動画プロットをレビューの起点にする：完成物ではなく構成段階で合意を取ることで、手戻りを最小化するプロセスを標準化した。

成果 ：利用者のつまずき箇所を問い合わせ内容から特定し、機能単位の情報をタスク単位に再構成することで、説明なしでも操作完了できるオンボーディング基盤を整備。問い合わせ数は2年連続で減少傾向となり、問い合わせ内容はログイン関連に集中（約9割）する状態へ整理された。結果として、操作説明系の自己解決が進み、サポート負荷の軽減と運用の安定化につながった。

学び ：文章と導線はUIと同等にUXであり、運用コストを左右する。マニュアルの構成を変えることは、画面の構造を変えることと同じ設計行為だった。

導入から運用まで、プロダクトが成立し続ける構造を整える。

仕事の進め方 ：問い合わせ・利用の状況・現場の声などを起点に課題を構造として整理し、プロダクトマネージャー・開発・サポートと協働しながら、改善を継続して回してきました。

デザインシステム／標準化 ビューア（B2C）と管理画面（B2B）で設計思想を使い分けながら、基本規定を共通化し、機能追加のたびに構造が壊れない土台を整えてきました。開発チームとの共通言語として機能する状態を、積み上げてきました。

アクセシビリティ： 幅広いユーザー（小学生から教育委員会担当者まで）を前提にした設計思想がされているのは、公共性の高いサービスのためです。よって、アクセシビリティの準拠は必須要件となります。

オリンピック組織委員会でのアクセシビリティPDF制作経験も踏まえ、表現・導線・読みやすさを継続的に調整しています。

最後に 4つのケースを通じて見えてくるのは、UIと文章とマニュアルと動画を、別々の成果物としてではなく、「利用者がわからなくなる場所をなくす」という一つの仕事として扱ってきた、ということです。

プロダクトが成立し続けるための構造を整える。それが私の仕事です。