みなさんこんにちは、アルファサード株式会社の野田純生といいます。 本日はスポンサーセッションということでお時間をいただきました。 題を、「やさしい日本語から考えるアクセシブルなウェブライティング」ということで始めさせていただきます。 まず最初に自己紹介を少しさせていただきます。 名前は野田純生です。私は、アルファサード株式会社を2003年11月に作りました。 私たちの会社は、約30人の小さな会社です。ウェブサイトを作ったり、ウェブ制作を支援するソフトウェアを作る会社です。 CMSソフトウェアPowerCMS/PowerCMSテンを作っています。 日本で初めて、やさしい日本語化エンジン「伝えるウェブ」を作りました。 それでは最初に、少しスポンサーセッションということでPRをさせていただきます。 最近作ったものをビデオでご紹介します。 PowerCMSテンで画像のアクセシビリティ対応。ロゴ画像をアップロードします。 「情報」ボタンをクリックします。色のコントラスト比は自動計算されます。色は選択しなおすこともできます。 「画像からテキストを抽出する」ボタンをクリックします。 画像の中のテキストをAIが取得します。 「この画像は検証済みです」にチェックを入れて保存します。 続いて、写真をアップロードします。 写真か、文字などを含む画像かは自動判別されます。 「画像を解析する」ボタンをクリックします。AIが画像に写っている内容を読み取ります。 窓の前に座っている猫の写真はぱくたそ（www.pakutaso.com）の写真素材を利用しました。PowerCMXテンでPDFのアクセシビリティチェック。 PDFファイルをアップロードします。 「情報」ボタンをクリックします。1ページ目のプレビューが表示されます。PDFの様々な情報を確認できます。 タイトルなどメタ情報は直接修正できます。 「読み上げる」をクリックすると内容を読み上げます。 われわれは、テクノロジーによって、顧客とパートナーに寄り添い、WEBをよくする。 「アウトライン」をクリックして「しおり」を確認します。コントラスト比は自動計算されますが色を選択し直すこともできます。 Acrobatでアクセシビリティレポートを添付していると内容を確認できます。 「このPDFは検証済みです」にチェックを入れてファイルを保存します。 PowerCMSテンでこの動画に音声とキャプションを合成しました。 PowerCMSテンのアクセシビリティ関連機能を少しご紹介させていただきました。 ウェブページを検証することができます。やさしい日本語エディタでふりがなや分かち書きを自動で追加できます。 ビデオにふりがな付き字幕と音声解説・ナレーションを追加できます。 この機能を使って先ほどの動画に音声解説と字幕を入れました。画像の色のコントラスト比の計算をしてチェックできます。 AIによって画像の代替テキストの入力を補助します。PDFのアクセシビリティチェックができます。 それでは、本日の本題にうつります。 「やさしい日本語から考えるアクセシブルなウェブライティング」 我々は「伝えるウェブ」というサービスを3年前からやってます。 この祭典でも2回ほどご紹介させていただきました。 やさしい日本語とは、普通の日本語よりも簡単で、外国人にも分かりやすい日本語のことです。 伝えるウェブでは、ウェブサイトをやさしい日本語に言いかえます。エディタを使って、やさしい日本語の文書を作成できます。 APIがあります。ビデオの先ほどの字幕ですとか、多言語音声翻訳サービスなどに利用が広がっています。 今日の本題なんですけれども、優しい日本語は外国人だけのためのものであるか？と、いうようなことがこの3年間の取り組みの中でいろいろとわかってきました。 若干ふざけた画像なんですけど、アルミ缶の上にミカンがおいてある画像がここに表示されています。 これを例えばウェブページに貼るときに、どんな代替テキストにするか、というのを題材として今日の話を進めていきたいと思います。 これダジャレですね。 「アルミ缶の上にあるミカン」ていう、有名なダジャレなんですけれども、 ちょっと話が変わるんですけれども、ツイッターで数年前にNHKニュースが発信している台風のときの外国人の皆さんへというツイートが 全部ひらがなでツイートされて、すごく話題になったんですけれども、もちろん外国人の人に全部ひらがなで発信してるってことで評価されるような反応もあったんですけれども、 逆に分かりにくいとかなんかバカにしているように感じるとか、そういうような反応がすごく多くて一時期話題になりました。 ツイッターなんかのSNSは漢字にふりがなとかふれないので、私たちは最近こんな感じでニュースを発信したときにふりがなを画像にしてしまって、 ツイートに添付するみたいな、これまあ自動化されてるんですけれども、こういうような取り組みなんかもやってます。話を戻します。 「あるみかんのうえにあるみかん」 これを分かりやすくする手立てとして 「分かち書き」っていうんですけど、単語の区切りをスペース区切るという方法があります。 「あるみかん　の　うえに　ある　みかん」 もしくは、単語の区切りを赤い線で区切る。これは、ディスレクシアの人の講演録をちょっと見たときに私はこれが分かりやすいんだ、 というふうに、紹介されていた方法です。赤い線のスラッシュで単語の間を区切ります。 で、ただそもそもですけど漢字とかひらがなカタカナを適切に使った方が分かりやすいです。 アルミはカタカナ、缶は漢字、上に、ある蜜柑、蜜柑てと難しい漢字ですけどふりがなふってます。 で、ただですね、ここが今日一番言いたいことなんですけど、これを音声読み上げするとひらがなに戻ってしまいます。 実際にはひらがなに戻るっていうのは正しくないんですけど、音になったときには 「あるみかんのうえにあるみかん」ということで耳に入ってくるわけですよね。漢字ではなく、 例えばスクリーンリーダーでの読み上げ。 で、そうすると、「アルミ缶の上に、蜜柑があります。」っていうテストの方がやさしいですね。 耳で聞いたときに。 これ、レアケース、こんな文章あるのか、ということなんですけど、例えば視覚　めでみる。悲報　かなしいしらせ。 分解　わける。 耳で聞いたときに複数の意味、同音異義語って言いますけど、そういう選択肢があると聞いたときに直感的に分からない可能性がある。 で、「病院で駐車の順番を待っています。」これ、耳で聞いてる人は、注射ってワクチンの注射みたいなものをイメージするんですけれど、これ、駐車場の順番を待っています。 という例文なんですけど、こういう日本語、僕ら普段あまり気にせずに使っちゃうんですよね。 で、「やさしい日本語から考えるウェブライティング」。「丸いことば」って呼んでるんですけど、 漢語より和語を使います。 それから二点目はです、ます調の文章にします。 この二つだけでもだいぶ違うので、今日はこの二つをお伝えしたくてこういうセッションにさせていただきました。 で、背景としては、音にしたとき、文章はひらがなになります。漢語は同音異義語が多く、「音」にすると理解しにくくなることがあります。 で、日本語学校、外国の人が日本語を習うときにです、ます調から勉強するので、 です、ます調が分かりやすいということになります。これは、相手が別に人でなくてもポケトークとかアレクサに話すときも役に立ちます。 だから「ちゅうしゃ」がパーキングなのかワクチンなんかの注射なのかっていうのは耳で聞いただけでは理解しにくいっていうことから、 そういうサービスに対する話し方でも漢語より和語を使って、です、ます調の文章で話すということは分かりやすさにつなげることができます。 で、参考になった本です。西任暁子さんていう方の「ひらがな」で話す技術。これ、まあアクセシビリティとかやさしい日本語とか一つも出てこないんですけれども、 いわゆる耳で聞いたときに分かりやすく話すということについて触れられている本で、参考にさせていただきました。 で、最後に、我々が運営している「やさにちウォッチ」っていうオウンドメディアがあるんですけれども、それの紹介をして結びとさせていただきます。 この、やさにちウォッチは去年の夏から運営しているんですけど、やさしい日本語に関する情報をやさしい日本語で紹介するというようなメディアです。 で、すべての漢字にふりがなをつけています。単語と単語の間にスペースを入れています。 先ほどご紹介した分かち書きですね。で、ふりがなと分かち書きは消すことができます。 チェックボックスで。これは今、ブラウザの対応雄状況によるんですけど、例えばそのボイスオーバーとクロームとかだとうまく読めるんですけど、 例えばそのボイスオーバーとサファリの組み合わせであったりすると、ふりがなと元の漢字を順番に続けて読んでしまうので意味がかえって分かりにくくなるというようなことがあって、 こういう対策を入れています。 で、ルビを標準のスタイルより少し大きくして親文字っていうんですけど、元の文字との距離をあけてさらに、 ルビの色を変えています。これもまあ先ほどのディスレクシアの人の講演と録を参考にさせていただきました。文字の塊がわかりやすいように色をあえて変える。 それからUDデジタル教科書体というウェブフォントを選ぶことができるようにしています。記事を正確な発音で読み上げることができます。読み上げる音声と同時にテキストを表示するような工夫をしています。 ぜひ一度、ご覧ください。 本日、私からのお話は以上となります。どうも、ありがとうございました。