Orangebomb

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

インクルーシブ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が目指すもの という発表がありました。

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

さんごさんの様子 参加者がぞろぞろ集まってきた 談笑する様子 @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メニュー

左下にある PDFSave 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にアップロードしたスライドを削除する方法

テストで文字が消えてしまったスライドを削除しようとしたところ、消すまでにかなり迷った。(バグなのか、 EditDelete 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。

目標設定が下手な自分と、デザイナーのアウトプットに関するヒント

僕は目標を立てるのが下手だ。ついでに言うと、自己評価も下手だ。 評価面談を行う上司やシニアデザイナーにはいつも迷惑をかけていた。今回も、例によって「あとはやるだけだ!」という目標設定はできていない。 それに対し、プライベート活動に関する目標を立てるのは上手だ。なぜならば、自分のやりたいことがたくさんあるから。とにかくやりたいことに対し、モチベーション全開で向き合うだけでよかった。ただ、なんとなくあっちこっち行き当たりばったりで軸がないような気もしていた。

去年は公私ともに悩んだ結果、自分が本当にやりたいことをやっとの思いで言語化することができた。「わからない」をなくす というのがそれだ。 これに至ったのは、「自分が作ったものが、誰かにとっては使い物にならない」ということがあり得ることが嫌だったからだ。「なにこれ、よくわかんないんだけど」という言葉を聞いたら、かなりショックである。しかし、必ずそれがあるのも事実だ。 僕は誰でもストレスなく使えることを追求することが好きで、だから人間そのものの特性ついてもっと知りたいし、視覚障害など晴眼者とは違う条件下での利用にも対応できるようにしたい。

仕事の目標を立てることに現在進行形で悩んでいる。締め切りはとっくに過ぎているが、プロジェクトの関係で、もっと戦略が具体的になってから定義する手筈になっていた。 が、しかし。具体的になったとしても、評価者が悩まず高評価をつけてくれるような自己評価をすることができる目標設定はできないだろう。

何に困っているのか?それは「言い回し」だ。ハッキリ数字が出る目標設定は簡単だ。それに達成しているか・いないかの2択だけでいい。今回の目標が改善タイプであればそのように数字の変化を軸にした目標を設定すればよいのだが、今回は改善タイプではない。新しくモノを作ることで期間ギリギリ(計測期間を確保できない)のケースだ。 よって、「作り上げる」タイプの目標設定をする必要がある。

「○○を作った」「○○で成果を出す」では、定量的ではないので評価者が評価をしにくい。解釈次第では、あとから結果がいくらでも変化することになる。 どうにか、上手い言い回しはないだろうか?評価判定がしやすい目標設定とは? 他の人の評価シートを眺めていても、真に上手なのか、評価者によってはその人も「評価しにくい目標」という判定になるのではないか、それ自体の判断すら曖昧だった。なので説得力 に関しても重要だった。

そこで、「作り上げる」タイプの目標設定が上手な人を探した。そのためにまず「上手であると判定できる人」を探す必要があった。 僕はデザイナーだが、以前からエンジニアの評価シートを眺めることが好きだった。職種柄、言語化に長けているからだろう、読んでいて気持ちが良かったのだ。 僕が勤めるGMOペパボには、シニア・プリンシパルエンジニアという上位職のエンジニア @matsumotory さんがいる。 技術者と研究者の狭間で得たたったひとつの教訓 2016 というスライドを読んでからファンになってしまって、スライドやissue、ブログ記事などをよく眺めてさせていただいていた。 @matsumotory さんに「作り上げる」タイプの目標設定について尋ねてみたら、想像以上に多くのことをアドバイスしていただけた。今回いただいたアドバイスを自分の中に取り込み、自分なりの解釈をし以下に記録する。

「作り上げる」の目標設定・達成のためのヒント

1. アウトプット・フィードバックを繰り返し「説得力」を獲得すること

作って公開・作ったものを社外で発表・自社サービスへ導入。エンジニアの王道スタイルという印象のあるこのパターン。 しかし、ただ作ればいいというわけではない。自分だけしか価値を感じない結果に終われば、それは自身の評価には繋がらない。その疑念を払拭する意味も含め、大事なことはアウトプットでそれを測ること。アウトプットし、それに対する社外のフィードバックを受け…というその繰り返しによって社外でも一定の評価を得られれば、それが社内評価での 説得力 となる。

2. 考えをまとめるだけでコンテンツになる

「これ( FastContainerアーキテクチャ概論 )とか何も作ってないですけど、考えだけをまとめたものですが、ちゃんと一つの作り上げたものに見えますね。それをベースに提案する、などがその先でしょうか」

ライブラリ・ソフトウェア作成以外には、上記のような設計や思考、アーキテクチャをちゃんと整理してアウトプットするなどがある。なので「プログラミング言語が扱えないから、エンジニアみたいに全部自分で作り上げるなんてできない!」などと嘆く必要はない(とはいえデザイナーもフロントエンドに特化している人ならばひとりでやってしまいそうであるが)。 設計こそデザイナーの本来の役目。ターゲットユーザーに対してインターフェイスがどのように機能するか。使いやすさはこれが一番か。誰でもアクセスできるか。セオリーに則っているが、もっとこうしたらこれまで以上に利便性が向上するのではないか。 考え始めたらアウトプットに繋がる題材はゴロゴロ存在する。

3. 社外へのアウトプットは「一般化」で解決する

やっていることを一般化して整理する、ということをやれば社内業務の出来事も社外へ向けてアウトプットすることができる。 Webオペレーションエンジニアのアウトプットと開発力 にも書かれている。 一般化とは、業務で生み出したもの・やったことを、組織に依存しない手法、コード、テクニックへと変換し誰でも問題なく参照できるようにすることだと僕は認識した。 一般化をすることで、会社的に出していいものか…まずいかなあ…などというアウトプットに対する足枷を外すことができる。

4. 提案したものをちゃんと作り上げる

細かくアウトプットしていく、というのがどのケースにおいても重要。 細かくアウトプットし、フィードバックを得て磨き上げる。その先で説得力を獲得する。 そしてそれを経て提案し、ちゃんと作り上げるまで実行する。

まとめ

目標設定のための「言い回し」に関する具体的な答えを見出せるまでには至らなかった。 しかし、

  • 将来、説得力を獲得している
  • 将来、設計や思考がまとまっており、伝わる状態になっている
  • 将来、提案が実行され(取り入れられ)作り上げられるものがある

これらを意識していけば自ずと言い表せるようになるはずだ。 一般化して考える癖をつけることと、自分の業務と社外の内容を重ね合わせるように努力して生産性を高くしていくことに注力するとよくなる。

僕はこの出来事を経た後も、変わらず目標を立てることも自己評価も下手くそだろう。何かに気づいたからその後一気に好転するくらいデキるやつなら、こんなに悩まずともきっとそのうちできていた。 大事なのは、すぐにできるかできないかではない。 これからも何度も失敗を積み重ねていく中で、今回得たことを忘れず継続していくことだ。 すると、失敗の先にきっと成功があるだろう。

matsumotory:今日のこの話を自分なりにブログエントリにかいてみるというのがよいかもです。忘れても見直せるように。自分の言葉で書くというのが大事だったりしますね。 kawamoto:わかりました! 最後の最後にこのアドバイスをする @matsumotory さん、さすがだった。

Archives