スライドの見た目なおしプロジェクト - SpeakerDeck cybozuinsideout 調査編

2023年10月25日 13:29

サイボウズ株式会社開発本部 PeopleExperience チームの西原 ( @tomio2480 ) です．以前，自分の手元では問題ないスライドが，スライドアップロードサービスにアップロードしたそばから意図しない見た目になったり，文字起こしが文字化けしてしまったりと，アクセシビリティの観点からよくない事例が起きてしまう件について記事を書きました．

あれから地道に Cybozu Tech にアップロードされているスライドを目 grep して，問題箇所等を見つける時間をとっています．毎週月曜に 1 時間だけ同じ PeopleExperience チームの貴島さん ( @jnkykn ) と 2 人体制でスライドに目を通しています．

ここでは中間報告として，見つけただけで修正は手付かずですが，SpeakerDeck - cybozuinsideout のアカウントで発見された異常？報告集を記事化します．

太字等の見た目

太字設定した文字が縁取りの影響で掠れて見える

前回の記事でも紹介した，太字掠れの問題です．

画像上側が問題のスライドのスクリーンショットで本来くっきり黒で文字が表現されてほしいところ文字の縁から遠い中心部に白い線が入ってしまっている．画像下側には比較用の正しい状態のスライドのスクリーンショットがある． — 上が SpeakerDeck で見たスライド，下が PDF で開いたスライド

(PDF 時点で確認されたものだが) 背景やロゴの縁取りが現れてしまっている

どうやら半透明の箇所が軒並み色がおかしくなっています．それに加えて全部に縁取りが現れてしまっています．これは PDF の時点でそうなっているので，SpeakerDeck の問題というよりかは，PowerPoint の PDF エクスポート側の問題ではないかと思われます．

画像上側が問題のスライドのスクリーンショットで本来白い半透明であるべき図形が灰色になりロゴや背景のドットに縁取りが現れてしまっている．画像下側には比較用の正しい状態のスライドのスクリーンショットがある． — 上がおかしな状態のスライド，下が正しい状態のスライド

文字起こし

ほとんど文字にならない

文字が全く出てこないか英字アルファベットが並ぶパターンです．半角スペースが挟まれているパターンがほとんどですが，たまに英字アルファベットが並ぶパターンも確認されています．

画像左側がスライドのスクリーンショットで日本語で文章が書かれているが，画像右側の文字起こしは何も出てこないページと一行につき数文字の英字アルファベットが並んでいるだけになってしまっている． — 何も出てきていないページと謎の英字アルファベットだけが並ぶページが確認できる

ただ，テキストボックスのフォント設定によっては，正しく文字起こしされる部分もあり，スライド一枚の中で文字起こしできないものと，文字起こしできるものが混在するパターンも確認されました．

画像左側がスライドのスクリーンショットで日本語とコマンドのテキストが確認できるが，画像右側の文字起こしはコマンドのみが文字起こしに成功している． — 日本語は文字起こしできていないが，コマンドは文字起こしできている

様々な国のアルファベットや記号が並ぶ

画像の例では前項と同じく，テキストボックスによって，文字起こしが成功しているものと失敗しているものが混在しています．

画像左側がスライドのスクリーンショットで日本語や英語で文章が書かれているが，画像右側の文字起こしは文字起こしのできている部分とスライドの文章とはかけ離れた各種文字や記号がならんでしまっている． — 最もよく見られるパターンで，様々な文字や記号が並んでいる

画像左側がスライドのスクリーンショットで日本語の文章が書かれているが，画像右側の文字起こしは文字起こしのできている部分とスライドの文章とはかけ離れた各種文字や記号がならんでしまっている． — テキストボックスによっては日本語が文字起こし成功しているパターンもある

よくあるパターンのようで，それぞれの文字で検索してみると，文字化けした検索結果が結構簡単に見つかります．スライドと同じく，PDF 等を直接開くと化けてはいません．

Ϩ を Google 検索した結果のスクリーンショット．佐賀県と防衛省・自衛隊の資料がヒットしている． — Ϩ を検索し国のページを選んでスクリーンショットを撮ったが，企業も個人も様々見つかった

箇条書き記号が "n" や "l" になる

確認できたのは PowerPoint で編集されたスライドでした．文字起こし側だけを見て箇条書き記号であることに気づけるかというと，難しいのかなと感じています．頭に n や l が付くことで，意味が変わってしまう単語もあるので，まあとりあえず無視というわけにもいかないのかなと感じています．

画像左側がスライドのスクリーンショットで箇条書き記号は▶︎と■だが，画像右側の文字起こしは▶︎と n になってしまっている． — ■ が n として文字起こしされている

画像左側がスライドのスクリーンショットで箇条書き記号は縦長の長方形と丸記号だが，画像右側の文字起こしは縦長の長方形と l になってしまっている． — ● が l として文字起こしされている

均等割付けか何かのスペースが反映される

PDF で確認したところ，半角スペースが入っているわけではなく，何か別の制御記号等が挟まっているような形で，文字選択すると半角スペースっぽいものが混ざったり混ざらなかったりします．文字起こし側ではいずれの文字のあとにも半角スペースが挟まっているので，何らかの制御文字が半角スペースになっていると思われます．

画像左側がスライドのスクリーンショットで文字間に均等割付けのような隙間があり，画像右側の文字起こしではそのスペースがすべて半角スペースを挟むことによって再現されてしまい単語や文章として解釈することが難しくなってしまっている． — 見た目に忠実ではあるが一文字一文字が区切られてしまっているため単語，文章にならない

その他

タイトルの頭に半角スペースが混ざる

どういう条件で発生するかはわかりませんが，現象として確認できたので紹介します．日本語なのか英字なのかにかかわらず発生するときは発生するし，発生しないときは発生しないです．SpeakerDeck は PDF でしかアップロードできないため，PDF の状態が影響すると思われます．

画像左側はタイトル設定画面のスクリーンショットで先頭は半角スペースではないことが確認できる一方，画像右側は公開ページのスクリーンショットでタイトルの文字の先頭に意図しない半角スペースが入り込んでしまっている． — 画像左側が設定画面，画像右側の先頭が公開画面
（見やすくするために選択して，薄く色が付いているがただの半角スペースである）

アップロード時にタイトルそのものに半角スペースが入るのかと思い，設定画面に入ってみましたが，タイトル情報の頭には半角スペースは確認されませんでした．つまり表示時に半角スペースが入り込んでいるものと思われます．これについてはこちらで修正できるものではないので，一応チェックだけはしていますが，特に対策については考えていません．

今後

2023 年 10 月 23 日現在で，Cybozu Tech からリンクされているスライドは 369 個，すでに確認の終わっているスライドが 114 個です．これはSpeakerDeck - cybozuinsideout のアカウントでアップロードされていてかつ Cybozu Tech にもリンクがあるものだけです．個人アカウントにてアップロードされているものを中心に未確認のスライドがまだまだ残っています．

SpeakerDeck 個人アカウント分は今わかっている問題とほぼ同じことしかないかなと想像しています．Cybozu Tech にリンクされているもので利用されているサービスは SlideShare，Google Slides，Docswell の 3 つで，他に PDF 直アップロードのパターンもあるため，どの形がどうよいのか，どう悪いのかもわかってくるかと思います．

ということで，ひとまずの中間報告でした．