Orangebomb

Photoshopを使って一枚の画像でアナグリフ(3D画像)を作るチュートリアル

Anaglyph Photoshop Tutorial

アナグリフとは「立体写真」のことです。レンズ部分が片方は青・もう片方は赤の透明シートでできているメガネで見ると、立体的に見える例のアレですね。その昔懐かしい立体写真や、今や3D映画でおなじみの立体映像は、1853年にRollmanという人が原理を導いたとされる「アナグリフ方式」、その後「シャッター方式」「偏光方式」など変化してきています。ここではPhotoshopを利用して、一枚の写真を昔懐かしいアナグリフ方式の写真へ加工する手順を紹介します。

応用のために原理を知る

三次元認識の原理のひとつは、二つの視点です。人間の目は、左右別々の位置にあります。当然、片目をつぶって見ると微妙に見える角度が変わります。これが「両眼視差」と呼ばれるものです。三次元認識には他に「遠近法的手がかり」「遮蔽関係」「明瞭さ」「運動視差」などがありますが、アナグリフでは「両眼視差」を利用します。左右の目でそれぞれ微妙にズレた状態を眼を通して網膜に映すことで、脳が立体像として認知します。

眼の前数センチの距離にあるものを見るとブレて見え、離れたものを見るとブレずくっきり見えるように、眼球から距離があればあるほど視差は小さくなります。よって、アナグリフで画像をブラす度合いの調整次第で立体像の見え方が変わります。

現実世界でやっていることを、平面上で再現し脳に「錯覚」を起こさせるというのが仕組みです。

補足

ちゃんとした立体像を作る場合、一枚の画像ではなく微妙にズレた二枚の写真を用意するとより自然に近い立体像を作ることができます。要するに両目で見たその状況のままを二枚の画像で再現するわけです。二枚の画像でアナグリフを作成するのは、また別の機会に…。

操作手順

まずは加工する画像を用意します。

今回の画像加工に使う画像素材

今回はunsplash.comで無料配布されているこの画像を使います。

人物を切り抜き

まずは選択ツールや「選択とマスク」等を利用し、人物を切り抜きます。

背景部分は人物の部分の周囲を消し、背景と同化させる

赤青の3Dメガネで見たとき、背景部分の人物がそのままの状態では、上に重ねる人物と重なって二重に見えてしまいます。それを防止するために、人物の周囲をある程度背景に同化させます。方法はなんでも構いません、僕の場合は「コピースタンプツール」を使いました。

レイヤーを表示

ここからがアナグリフ加工の本番です。用意した背景と人物をどちらも表示させ重ねます。

背景と人物をそれぞれひとつずつ複製する

アナグリフは前述の通り、左右の眼が「ズレ」を認識し立体像として脳が錯覚を起こします。そのために、背景と人物はそれぞれ一つずつ複製し、ずらせるように二つずつになるようにしておきます。

人物レイヤーに効果をかける

まずは人物から加工を行います。人物レイヤーを選択し、レイヤーツール下方にある「fx」というアイコンをクリックし「レイヤー効果」を選択します。

「高度な合成」の項目の「チャンネル」を「R」のみチェックが入っている状態にする

レイヤースタイルパネルが表示されるので、「高度な合成」の項目の「チャンネル」を「R」のみチェックが入っている状態にします。

人物レイヤーのもう片方には別の効果をかける

もう片方の人物レイヤーには別の効果をかけます。 こちらは先ほどと逆に「チャンネル」を「G」と「B」のみチェックが入っている状態にします。

効果をかけるとレイヤーの右側に「効果付き」を示すアイコンが表示される

二つとも効果をかけることができました。レイヤーの右側に「効果付き」を示すアイコンが表示されます。しかしこのままでは画像になんの変化もありません。

人物レイヤーをそれぞれ左右にずらす

効果は人物レイヤーをずらすと現れます。それぞれ右・左にずらしましょう。この人物は背景と比較し、 見る側にとって背景より近くにいる ので、視差は大きいはずです。よって大きめにずらします。

背景も同じように効果を適用しずらす

背景にも同じように効果を適用し、それぞれずらします。ただし人物よりも遠くに存在するものです。よって視差は小さいので、人物よりも少なめにずらします。 人物と背景のこのズレ具合の違いが立体感を引き出します。

画像をトリミング

背景をずらしたことで、両サイドに隙間が生まれます。トリミングしてしまいましょう。

完成図

これで完成です!赤青の3Dメガネを用意し、実際に見てみましょう!

出典・参考文献

以下の文献の情報を参考にしました。

所感

Photoshopのチュートリアル記事でした。いろいろ調べてみたものの、アナグリフのチュートリアルは少ないようだったので作成しました。背景の加工をはじめ、このやり方以外にもっとよりスマートなやり方がある気がします。「アドオンを使う」などではなく、テクニックとしてもっといいやり方をご存知の方はぜひ教えてください。あと原理部分、解釈が誤っている場合もご指摘ください!

(あと背景合成、後ろの壁の調整をミスってることに作った後気付いた)

インクルーシブ本の査読させていただいたら興奮した話

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

Heydon Pickeringさん(@heydonworks) による著書 Inclusive Design Patterns の日本語化+充実の訳注付き版が インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン として発売されます。

監訳はデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチの著者であり、コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションの監訳者である太田良典さん(@bakera)と伊原力也さん(@magi1125)のお二人。

査読のきっかけ

ある日、@magi1125さんがアクセシビリティコミュニティのSlackにて以下のような募集をされていました。

magi1125:この場を借りて、もう1件ご案内させてください。新刊書籍「インクルーシブHTML+CSS&JavaScript」のレビュアーを1〜2名募集します。「本日から10月6日ぐらいまでに監訳原稿を読んで、フィードバック頂ける方」「フロントエンド(マークアップ)に業務で取り組んでいるけど、アクセシビリティはこれから学びたいという方(≒ガチ勢でない方。知らないわけではない、ぐらいのニュアンスでも)」ご興味のある方は @magi1125 までご連絡ください!A11Yガチ勢だと、言ってる意味が補完できてしまって、内容のわかりにくさに気づけないので、「これからやっていきたいんだぜ」勢に読んでいただき、ここ良くわからないっすというのをピュアに挙げて頂けるとありがたいのです…!どうかご協力を!

これからアクセシビリティやっていきの人に査読して欲しい、というもの。要するにユーザビリティテストの被験者のようなもの。 そこでまさにアクセシビリティこれからやって行く勢だった僕が立候補をさせていただきました。

不安だったのが僕が「フロントエンドがめちゃくちゃ強いわけじゃない」という部分で、そこについて尋ねたところ「まさしくそういう人もターゲットである」ということだったため安心しました。「ネタバレ歓迎」「ゲラを全部公開するとかでもない限りなんでもあり」とのことだったのでガンガン語ろうと思います。

どんな本?

まず ちょこっと紹介① 刊行によせて/日本語版の刊行によせて より抜粋します。

本書の原著のタイトルは、”Inclusive Design Patterns”で、インクルーシブな「デザインパターン」を意味します。そして副題は “Coding Accessibility Into Web Design” となっており、これを見ていただけばわかるように、アクセシビリティに配慮したWebの実装方法を紹介する内容になっています。既存のWebアクセシビリティの書籍は、WCAG 2.0のガイドラインを紹介するものであったり、「こうするのはよくない」というアンチパターンを紹介するものが主流でした。もちろん、それらを知ることには大きな意味があります。しかし、現場の実装者が実際にどのようなマークアップをし、どのようにJavaScriptを実装するのがよいのか、具体的な実装例まで踏み込んで紹介する書籍はほとんどありませんでした。

まさにこの本は、「現場の実装者が実際にどのようなマークアップをし、どのようにJavaScriptを実装するのがよいのか、具体的な実装例まで踏み込んで紹介する書籍」というわけです。もちろんそれだけではないのですが、まずはタイトルに含まれる「インクルーシブ」という単語についても紹介します。

インクルーシブ(Inclusive)とは?

  • 全てを含んだ、包括的な、包含的な
  • 一部の人の制限しない、開放的な、いろいろな人が参加できる
  • exclusive (排他的) の反対語

この本では「誰でも受け入れる」「特定の人を除外しない」のような意味で利用されています。 インクルーシブの逆の「インクルーシブではない状態」とは、特定の状況に置かれた人には使えない状態のこと、つまり「人を選ぶデザインはインクルーシブではない」と言えます。

僕の以前のエントリー アクセシブルにするならSlideShareを選ぶべき?SlideShareへのアップロード方法 にて、アクセシブルとは?について自分の見解を述べました。

僕は どのような条件であろうと誰しもが同じようにコンテンツにアクセスすることができること という認識をしている。僕にとって「障害者対応」という言葉は本質的ではなく、目が見えなかったとしても、耳が聞こえなかったとしても、テクノロジーを利用すれば健常者と同じようにコンテンツを参照できるのだから、当然そうあるべきである、というもの。(似て非なるもの、というか。やっていることは同じかもしれないが、捉え方の問題)

この本で紹介されている「インクルーシブデザイン」とは、アクセシビリティをも包括的に含み、特定の誰かを排除することなく「ユーザー」と「ユーザーが使うもの」のすべてを視野に入れた総合的なデザインのことです。 この本は「インクルーシブな実装例」が紹介されていました。

「ダメ」ではなく「こうしよう!」

「アレはこういう理由でやってはいけません」と言われ「ではどうすればいいのか…」というような「そこからは放任」というケースは悲惨です。 しかしこの本は表紙にあるように、「ダメ」ではなく「こうしよう!」(そしてどういう理由・根拠で)を学ぶ本と言えます。 ただし、監訳者のひとり@bakeraさんのエントリーによれば

なお、この本で語られている実装方法は、あくまで方法のひとつでしかないことに注意してください。他にもさまざまな方法がありますし、他の方法がダメだというわけではありません。さまざまな方法にはそれぞれ一長一短があり、原著者の主張する実装方法にも長所だけでなく短所があります。この本の実装方法をベースに、短所について議論していただいたり、より良い案を出していただくのも良いでしょう。「この方が良いのでは?」といった感想を持たれた方は、ぜひ共有いただき、議論を深めていただきたいと思います。

「こうしよう!」という本書の提案も あくまで選択肢の一つである ということには注意です。

なにに興奮したの?

4つの漫画:(1)「たしかにデザインはかっこいいね。でも、どうやって乗るの?ドアはどこなの?」「あれ?これって誰が何をどうするためのモノだっけ?」(2)Aさん「ひどい日付選択フィールドだな!なんで普通に日付を入力できないんだ?」Bさん「ひどいテキストフィールドだな!なんで日付を選択できないんだ?」(3)「おもしろい?気に入った?」「それは操作方法がわかってから答えるよ…」(4)「君がデザインしたインターフェイスはすごく評判がわるいよ。みんなうんざりしている」「それは変だな。僕はとても気に入っているのに!」

いくつか理由があります。

  • マークアップ中心の話であるとはいえ、「なぜ」「どうして」というWebに適したデザインの考え方を養える本であったこと
  • デザイナー/開発者などの分類にとらわれず、本当に大事なものはなにか伝えていたこと
  • 文脈で「ん?」となる場面ではかならずと言っていいほど訳注が登場しており、まるで解説者が隣にいて「あーそこはね、こういうわけなのよ」とマンツーマンで教えてくれるようであったこと
  • 刺激的な文面が多かったこと

本来、デザインの仕事とは、熟慮することです。そして、問題に対するベストな解決策を追求することです。それが「見た目の美しさ」という範囲だけでデザインをとらえることで、Webの大半は本来の意図から外れてしまっています。これは、低いアクセシビリティ、貧弱なパフォーマンス、そして全体的な有用性の低下につながります。


あらゆる人間がWebやアプリケーションの潜在ユーザーであり、能力、嗜好、状況のインクルーシビティは最も重要である。異なる人々が集う場では、インクルーシブなインターフェイスこそが常に堅牢であるといえる。


インクルーシブなインターフェイスをデザインすることは、堅牢なデータスキーマをデザインすることと似ています。排他的だったり、時代遅れで廃れたインターフェイスを作ることに比べ、難しかったり複雑だったりするわけではありません。ただ違うだけです。本書では、一般的なWebインターフェイスのパターンについて、インクルーシビティの観点で見ていきます。本書を読めば、慣習を適用したり応用したりする方法をすぐに学ぶことができ、より幅広い人に閲覧してもらったり、閲覧者のフラストレーションを軽減したりできるようになるでしょう。

僕は、自分の作ったものが誰かに「使い物にならない」「わからない」と言われるのが嫌です。あらゆる人に無理なく使えてほしい。そういう僕の願望に「インクルーシブ」という考え方がものすごくフィットしていて、そして「デザイン」の大切なことがたくさん載っていて、デザイナーとして大興奮してしまいました。

本書の掲載内容

実践的なラインナップがサンプルとあわせよりどりみどり。

  • 1: ドキュメント全体
    • DOCTYPE
    • lang属性
    • レスポンシブデザイン
    • フォントサイズ
    • プログレッシブエンハンスメント
    • アセットの管理
    • フォントのサブセット化
    • title要素
    • main要素
    • フレームワーク、プリプロセッサ、タスクランナーについての注意
  • 2: パラグラフ
    • 書体
    • 組版
    • インラインリンク
    • 自動化されたアイコン
    • パラグラフの記述
  • 3: ブログ記事
    • main要素
    • 見出しの構造
    • プログレッシブエンハンスメントと相互運用性
    • Flesch-Kincaid リーダビリティテスト
    • 見出しとリンクテキスト
    • ビデオ
    • フローシステムの確立
  • 4: パターンごとの評価
    • 原則ごとの評価における問題点
    • Custom ElementsとShadow DOM
  • 5: ナビゲーション領域
    • ナビゲーションランドマーク
    • サイト内共通のナビゲーション
    • 目次
  • 6: メニューボタン
    • 外観
    • アイコンの表示方法
    • ラベルづけ
    • 古いブラウザ
    • 操作
    • タッチターゲット
  • 7: インクルーシブ・プロトタイピング
    • ペーパープロトタイピング
    • 紙からコードへ
  • 8: 商品リスト
    • リストの長所
    • カギとなる情報
    • 商品サムネイル
    • 「今すぐ購入」アクション
    • SERP
  • 9: フィルターウィジェット
    • 見た目の例
    • マークアップ
    • CSSによる拡張
    • JavaScriptによる拡張
    • 検索結果をさらに読み込む
    • 表示オプション
    • 動的なコンテンツへの柔軟な対応
  • 10: 登録フォーム
    • コンテキストに応じたフォーム
    • 基本フォーム
    • 必須フィールド
    • パスワードを表示する
    • フォーム検証
    • マイクロコピーライティング
  • 11: テスト駆動マークアップ
    • セレクタのロジック
    • テスト駆動のタブインターフェイス
    • 汎用的ではないがゆえに

発売日

もう目前!11/4発売。ご予約はAmazonで。でももう早い書店では並んでいるかも?(エントリーが遅くなってすみません…)

見本誌をいただきました

見本誌 クレジットに自分の名前が載っていた

ムフフ。書籍に自分の名前が掲載されたのは初めてなので、めちゃくちゃ感激している。株式会社ボーンデジタルの@orange_junoさんをはじめ、みなさん、本当に感謝しています!

(追記)

ブログを公開したのが11/2なのですが、記事のファイルを作成したのが10/13で、修正をし忘れ記事の日付が10/13のままになってしまっておりました。紛らわしくて申し訳n…

多くの人に伝えたい。広めたい。そんなとき、一体どうすればよいのか? 〜インターネットで 可能性をつなげる、ひろげる〜

長崎県の五島列島、福江島。かつて珊瑚漁でさかえた港町にさんごさんという、築80年の古い民家を改装し新設された図書館があります。そのさんごさん主催でおとな小学校 デザインの時間「島でデザインを考えよう」というイベントが行われ、ご縁があってペパボのメンバーで登壇させていただきました。

一生懸命頑張って、素敵なアイデア商品を生み出した!多くの人に伝えたい。広めたい。そんなとき、一体どうすればよいのか?

インターネットで 可能性をつなげる、ひろげる 〜ペパボ福岡デザインチーム〜 from Keita Kawamoto

この発表内容に含まれていた「レンタルサーバー」+「独自ドメイン」で作ったサイトが「拠点」に最適であるという話についてはこちらでも語られています。

さらに多くを知ることができる?

拠点であるサイトによってさらに多くを知ることができる?

というスライドの文章に関して補足を。

  • 公式サイトなら “それの価値をさらに深掘りできる”
  • 公式サイトなら “それを生み出すに至るまでのエピソードを話せる”
  • 公式サイトなら “それに込めた想いを語れる”
  • 公式サイトなら “付加要素を紹介できる”

印刷物やSNSでは伝えきれなかったことを、サイトであれば思う存分伝えることができます。印刷物やSNSでの拡散によって興味を持った人がサイトを訪れ、想いに触れ、その結果ファンになる可能性が上がります。

イベントの様子・その他

地元の方々が集まって、古民家の雰囲気も相まってまるで町内の集会のような雰囲気に。普段のイベントでは体験できないような状況で、興奮しました。

ペパボメンバーは5人で参加しており、発表はそのうち僕を含め3名が行いました。ECに関する発表で@teeeeeeoo、ハンドメイドに関する発表で@shikakunが登壇しました。ペパボ以外では、ギフトで大人気の五島の蒲鉾を作っている浜口水産さんによる「浜口水産のデザインへの取り組み」、五島の鯛で出汁をとったなんにでもあうカレーごと株式会社さんによる「カレーのリデザインについて」、さんごさんが開いているコーヒーショップCORAL COFFEEについて、さんごさんによる「CORAL COFFEEが目指すもの」xという発表がありました。

詳しいレポートについてはペパボテックブログにて後日記事を公開予定です。

さんごさんの様子 参加者がぞろぞろ集まってきた 談笑する様子 @shikakunの発表の様子 聞き入る参加者 浜口水産の藤田さんの発表の様子 @teeeeeeooの発表の様子

諸事情でスクリーンの用意ができず、Macをイスに置きまるで落語のように発表を行いました。

畳最高

畳が最高に落ち着きます。

海の水が澄んでいる様子

海の水が透明過ぎた。

ここ数年で急激に発展している五島のデザイン界隈に触れられて、とても刺激を受けた旅でした。

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜

僕が務めるGMOペパボの同僚、@hfmが産んだ「キャリアキーノート」という取り組みがあります。キャリアキーノートとは、

先輩の個人史 (キャリア) を紐解いてもらう中で、その根底に一貫して流れる基本的な考え方 (キーノート) を学ぶ場

というものです。要するに「これまで自分が歩んで来た道のりの過程で生成された自分の根幹部分を、他者に共有する “資料” およびその “発表の場” 」だと僕は認識しています。詳しくは@hfmの記事 キャリアキーノートとはなにか をご覧ください。

今年の春、会社に新卒の7期生たちが入社しました。その後の新卒研修の中で、各職種から1名ずつ発表する方式のキャリアキーノートのパートがあり、僕がデザイナー枠として参加できることになりました。今回はそこで発表した内容を掲載します。なんやかんやで公開し損ねてました。僕が学校を卒業し、就職し、そして今に至るまでどんな道を歩み何を得たのかがわかります。

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜 from Keita Kawamoto

ヒューマンアカデミー、当時は長崎校が出島にあったんです。今はなくなってしまいましたが…。四つ折りにする紙の話、実際に7期生たちがやってみたところ、2/3がその通り中央よりほんの少し上に点を打っていました。残りの1/3は本当の中央に点を打っていたので、 「人間は本当の中央より ほんの少しだけ上を中央と感じがち」というところでしょうか。みなさんも試してみてくださいね。

資料発表中の様子

社内のことなんてどうでもよくない?のくだりは、「視野が社内だけに留まってどうすんだよ世の中を見ろ、もっと広く見ろ、そして得た学びで社内でぶつかった問題を解決すべきだ」と捉え、ゴニョゴニョ悩む時代は幕を閉じました。最高。誤解を生みそうなワードでしたが、社内のことなんてほっぽり出せ、という意味ではありませんでした。

この資料を作るために過去を振り返って以降時折思い出すのが、恩師の言葉です。

君のポートフォリオは5、6年前の手法だよ

幸いなことに、今僕はデザイナーとして働くことができている。しかし、その実力とは?働けてさえいればいいのか?あの頃とは違う。…本当に?

これから完全に新しく何かをデザインするとする。その結果、もしかしたら今でも5、6年くらい前のレベルのままなのではないか?今の自分は、最大の自分か?見た目だけがデザインではないから、装飾スキルが古いか新しいかとかいうよりも、トレンドだのなんだのとかそんな話でもなく、 「設計」という本当の意味でのデザイン能力は、現時点の自分にとって最大か?

本質的な「デザイン」ということに、新しいも古いもないのかもしれない。ただ、この言葉を思い出すたびに、今の自分が本当の全力なのか、見つめなおします。

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 / Design Casual Talks #2

ロリポップ!レンタルサーバーというホスティングサービスがあります。2001年に開始したサービスで、もう15年以上続いています。僕はそのロリポップ!を提供しているGMOペパボに勤めていて、ロリポのデザイナーをやっています。

15年以上続いてきた老舗サービスを、生まれ変わらせる必要がある。そういう問題に直面し、福岡支社長・マネージャー・エンジニア・デザイナー・カスタマーサービス・インフラエンジニア・ディレクター・特別顧問という関係者全員が集い生まれ変わらせるプロジェクトを始動させました。

結果開始からリリースまで1年ほどかかりました。デザイナーのひとりとして最初から最後まで携わった身として、共同主催でやったデザイン勉強会 Design Casual Talks #2 にて「僕の視点で見たロリポップ!リブランディング」というタイトルで発表しました。

15年以上ずっと大きな変化をすることができなかったサービスをどのように生まれ変わらせたのか?

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 from Keita Kawamoto

イベントの様子

前回よりも多くの方にお越しいただけて、とても楽しい勉強会になりました。 経験不足によりいろいろ失敗しご迷惑をおかけしてしまって申し訳なかったのですが、でもやっぱりデザインの勉強会は最高だなというところが正直な感想です。もっと福岡のデザイン界隈が盛り上がりますように!

入り口の様子 受付の様子 ビール 発表の様子1 発表の様子2

所感

ブランディングを行う際にも、例によっていかに「言語化」することが重要かを再確認しました。 発表時間が15分だったのでこのような省略された内容になりましたが、取り組んだ1年には膨大な学びが他にもまだまだありました。 今後まだお話しできていない部分もアウトプットしていけたらと思います。

リリース後、約束を守るために言語化した軸を中心にプロジェクトを進行中です。まだまだパワーアップしていくので、よければ今後のロリポップ!にご注目ください。

影があるとなぜ立体だと認識するのか?インターフェイスの仮説を脳科学から考える

デザインをするとき、様々な仮説に基づき、設計する。「影があれば浮き出て見えるので、影の有無によって主張レベルをコントロールできる」「黄色は主張する色なので、このコンテンツにふさわしい」「色は薄くしたりグレーにすれば非アクティブと認識する。アクティブなものだけ色を濃くしよう」など。

理解できるし、正しいはずだ。

でもどうして「影があれば浮き出て見える」のだろう?僕にはその説明ができなかった。錯覚するから?ならばなぜ錯覚する?実際は平面でしかないじゃないか。

自分の作ったものを人に説明するとき前述のような解説をするが、心の中では、どこか腑に落ちない感じがしていた。「自分自身がそう感じるから、誰もが同じはずだ」本当にそうだろうか?

謎を謎のままにして進めることをしたくなかったので

  • 影があれば浮き出て見えるのはなぜか
  • 色は薄くしたりグレーにすれば非アクティブと認識するのはなぜか

今回はこの2点の事象について調べてみた。

出典・参考文献

以下の文献の情報を参考にしました。

まとめ終えて

実はこの資料は2015年にGMOペパボの社内デザイナー勉強会にて発表したものだ。「ブログを作りたいから、それまでとっとこう」と思ってアップロードしていなかった。ようやく実現できた。 ブログを作るのが楽しいものだからテンプレートをいじくりまわすことにばかり時間を割いてしまったり、いざ投稿しようと思ったら先にSSL化しないとまずいと気付いたり。まだ溜まっている投稿ネタがいくつかあるので、近いうちにそちらも公開したい。

このスライドを作ったことによって、人間が錯覚する「理由」の一部がわかった。すごく面白い。 デザイナーが作ったものを利用するのは同じ人間だ。なので、人間の仕組みについてよく理解しておいた方が絶対にいいものが作れるはずだ。 僕はこれからも疑問に持ったことは一つずつ解決していきたい。 「そこまでしないといけないの?」というより、純粋に僕自身にとってめちゃくちゃ面白い。

アクセシブルにするならSlideShareを選ぶべき?SlideShareへのアップロード方法

Keynoteなどでスライドを作成し、スライドのSNSへアップロードし、シェアする。多くの人が行なっているこの行動、場合によってはスライドの中身にアクセスできないことがあるという事実を知った。そこで、そのようなことが起こらないようにアクセシブルなスライドにするにはどうすればよいのか?という部分に関し調査・検証を行なったので記録する。

アクセシブルとは?

まずは「アクセシブル」という単語について。

アクセシブルデザインは、高齢者・障害のある人々の利便性を配慮しつつ、健常者の利便性も確保することを目的として、従来の設計を高齢者や障害のある人々のニーズに合わせ拡張することによって、製品、サービス、建物などがそのまま利用できる潜在顧客数を最大限に増やすための設計ということができます。これにより、ビジネス拡大の効果を得ることが可能になりますが、ビジネスを最優先させるのではなく、高齢者や障害のある人々の利便性を高めることが主たるねらいです。 アクセシブルデザインは、ISOにおける ガイド71 の議論において、高齢者・障害のある人々が健常者と同様に社会システムにアクセスできる言葉として定義されています。

出典:共用品推進機構 - アクセシブルデザイン関連JIS・基本規格

このように書かれることが多いが、僕は どのような条件であろうと誰しもが同じようにコンテンツにアクセスすることができること という認識をしている。僕にとって「障害者対応」という言葉は本質的ではなく、目が見えなかったとしても、耳が聞こえなかったとしても、テクノロジーを利用すれば健常者と同じようにコンテンツを参照できるのだから、当然そうあるべきである、というもの。(似て非なるもの、というか。やっていることは同じかもしれないが、捉え方の問題)

アクセシビリティと、スライドのアップロードに関する事情

ここからは、スライドとアクセシビリティの関係について。

(1)SpeakerDeckでは情報(スライドの内容)にアクセスできない

以前、スライドをSpeakerDeckにて公開した時に、スクリーンリーダーユーザーである @ma10 さんが以下のようなツイートをなされていた。

驚いていると、 @magi1125 さんからアドバイスのメッセージをいただいた。

  • SpeakerDeckはスライドを画像として表示するのみである
  • テキスト情報として内容にアクセスすることができない

なんてこった…

(2)SlideShareの場合は中身を読みテキストとしてWebページ上に表示される

SpeakerDeckに関しショックを受けたところで、「SlideShareならばその問題が起こらない」という情報も得た。

  • 文字を画像にしない等、適切な方法でSlideShareにアップロードすればスライド内のテキストを抜き出してくれるため、スクリーンリーダーユーザーでも内容を把握することができる
  • スクリーンリーダーで読み上げることが可能=視覚以外でアクセスが可能

しかし、SpeakerDeckだと起こる困ることは起こらなくても、SlideShareにはSlideShareならではの困ることがあるのであった。 僕はスライド作成にはKeynoteを使っている。困る問題とは、Keynoteバージョン6以降で生成したPDFをSlideShareにアップロードすると、作ったスライド上からテキスト部分がすべて表示されなくなってしまう、という問題だ。実際はそこにあるけどただ映らないのみ。スライド外にテキスト出力はされていた。 今回、どのようにすれば問題なくSlideShareにアップロードすることができるのかを調べた。

Keynoteで作ったスライドをSlideShareにアップロードする手順

そのうちSlideShare側がバグを解消してくれるのでは?という点に関して。KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 - Qiita / 公式の回答 によると、残念ながら前述の文字が消える問題を解決する対応は時間がかかるようで、こちら側が頑張らないといけない… @magi1125 さんがツイートしていた解決策をベースに進める。

この検証では以下のバージョンを使用する。

  • Keynote バージョン7.2(4582)
  • Adobe Acrobut Pro DC バージョン 2017.009.20058

結論から言うと、

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。 今回行なった手段は、

  • Adobe Acrobat Proを用意(少なくとも2016年8月時点での最新版が必要?)
  • Keynote「ファイル」→「プリント」→ 形式で「Save as Adobe PDF」を選択
  • Adobe PDFの設定は「標準」を選択・保存
  • Adobe Acrobat Proで展開、無用な余白をトリミング・保存
  • SlideShareへアップロード

という流れ。画面を見つつ解説すると

keynoteの画面

まずはKeynoteメニューの「ファイル」→「プリント」。

keynoteメニュー

左下にある「PDF」を「Save as Adobe PDF」に変更する。Adobe PDFの設定は「標準」を選択。

プリント画面

Adobe Acrobat Proで先ほどのファイルを開き、右側の検索窓から「トリミング」と検索(どこにあるかわからなかったので検索した方が早かった)。その後「ページをトリミング」を選択。

Adobe Acrobat Proの画面

トリミング範囲を指定した後、詳細画面が表示される。16:9のスライド場合、「余白の制御」は上下「21ミリ」ほどで綺麗になった。ページ範囲の項目では「すべて」を選択。これで全ページに同じトリミングが適用される。その後保存すると、PDFの完成。

トリミング詳細画面

完成したPDFをSlideShareへアップロードすると、文字も消えておらず無用な余白もない綺麗な状態かつアクセシブルなスライドにできる。 次に、Adobe Acrobut Proが手に入らず、使わないでやる必要がある場合の方法を記載する。

Adobe Acrobut Pro を使わない場合

Adobe Acrobut Proを使わず、SlideShareへスライドをアップロードするにはどうするとよいか?

(1)Keynoteの場合(文字が消えるバグの回避法)

  • Keynoteの書き出しの「イメージ」を選び、すべてのページを画像で書き出した後、全ページにひとつずつ画像をかぶせ、通常のPDFで書き出し、アップロードする
    • 余白問題は解消され、スクリーンリーダーでも読める状態
    • しかし画像だと多少文字がギザる、大きな手間がかかると言うデメリット
    • とてもナンセンスな印象
  • ヒラギノなどOS Xの標準フォント以外のフォントを使う( KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 より )
  • 文字が消える事象が起こるKeynote6より前のKeynote5以前を使う?(手に入るかはわからないが…)

(2)Keynote以外の場合(おそらく文字が消えるバグは起こらない)

  • Googleスライド
  • その他スライド作成アプリケーション

などの手段がある。

完璧は難しい。「割り切ること」も重要なこと

今回の件を調べるにあたり、SlideShareにアップロードできたと言っても、「それだけで完全にアクセシブルなのか?」という疑問を持っていた。

  • SlideShareでは自動出力されたテキスト情報は改行や段落がなくなるので認識しにくいと思うが、テキスト情報だけで読む人は、どのように脳内補正している?
  • テキスト情報の内容は重複してもいいのか?(差分表現で、差分箇所以外は同じものを何度も掲載することになる)
  • 図解に関しどのようにテキスト化すればいい?
  • 自分一人ならすごく気にすればこれらを解決できるかもしれないが、人に続いてもらえるようなフレームワーク化とか無理では…

などということについて頭を抱えおり、ちょうどそのころ参加した勉強会 !important #04 -特盛!アクセシビリティスペシャル- でお会いした @magi1125 さんにこのことを相談させていただいた。すると、

  • 「全く読むことができない」という状況から「読めるようになった」それでけでも大きい変化だと割り切ることも大事
  • 「完璧」は難しいこと。そしてスライドの作成者次第な部分が大きすぎる

という回答をいただいた。割り切るという視点が欠けていたため、目が覚めたようだった。

余談1.SlideShareにアップロードしたスライドを削除する方法

テストで文字が消えてしまったスライドを削除しようとしたところ、消すまでにかなり迷った。(バグなのか、「Edit」→「Delete presentation」では消えないことがあった) 最終的には SlideShare ファイルを削除する | LinkedInヘルプ にたどり着くことで解消できた。

  • SlideShare にサインイン
  • 右上のプロフィール写真にマウスをポイントし、「My uploads」を選択
  • 削除するプレゼンテーションの左上のチェックボックスをオンに
  • 「削除」をクリック

とのこと。

余談2.一応ある?SpeakerDeckのスライドをスクリーンリーダーで読む方法

こういう裏技も一応あるようだ。 SSSSLIDE…スライド集約サイト?

所感

アクセシブルにするためにこのような努力が必要である今の状況には不満がある。 Keynoteの文字が消える問題の解決対応がまだ先になりそうなSlideShareも、テキストデータが出力されないためにスクリーンリーダーでは読むことができない状態であるSpeakerDeckも。ただPDFで出力してアップロードさえすればスライドの内容になんの無理もなく誰もがアクセスできるようになる未来を望んでいる。 …と言いつつ、自分の携わっているものがすべてアクセシブルかと言われると違う。もっと頑張らないといけない。もっと勉強と実験を繰り返し、関わるものを可能な限りアクセシブルにしなければ。

そして、この件で相談に乗っていただいた @magi1125 さんには本当に感謝しかありません。ありがとうございます!

【7/20追記】Acrobutでのトリミングなしで済む方法

この記事を公開したところ、@magi1125 さんからフィードバックをいただけた。

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。

わからなかったこの部分の解決方法を教えていただけた…!圧倒的感謝。(僕は印刷画面UIが苦手っぽい。「ページ属性」という項目の意味が理解できなかった)

Keynoteの以下の「プリント」の設定画面のところで下部にある「詳細を表示」から進む。

プリント画面

ダイアログ中段の 「Keynote」と書かれたセレクトボックスで「ページ属性」を選択。

プリント詳細画面 ダイアログ中段のセレクトボックス

「用紙サイズ」のセレクトボックスで「A4」になっているところを「カスタムサイズを管理…」に変更。

用紙サイズの変更

新しいサイズを設定できるので、左側の 「+」から新規サイズを追加する。 「90mm」「160mm」と指定すればOK。 (4:3のスライドの場合「160mm」「120mm」と指定すればよい)

用紙サイズの変更画面で専用のサイズを指定

こうすれば、Acrobatでトリミングせずとも余白がない状態で出力できる。形式は前述の通り「Save as Adobe PDF」! そのあとはSlideShareアップロードすればOK。

Archives