ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。

株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。

  • Webデザインにおけるアクセシビリティへの取組み
  • 読書体験を考える ――サービスとしての読書体験
  • トークセッション
  • セミナーを終えて

Webデザインにおけるアクセシビリティへの取組み

講演では、Webアクセシビリティとはなにか、Webアクセシビリティへの取り組みの現状が紹介されました。

アクセシビリティはユーザビリティの前提条件

Webアクセシビリティとは、ある対象(多くの場合はWebコンテンツ)にどれくらいアクセスできるかという度合いのことです。ユーザビリティと言葉が似ているため混同されがちですが、ユーザビリティについてはISOで厳格に定義されており、「限定された状況下」の色合いが強いというお話がありました。しかし、ユーザビリティの問題はアクセシビリティの問題である場合もあり、明確に線引きは出来ないと言います。アクセシビリティはユーザビリティの前提条件であり、すばらしいユーザ体験であるためにはコンテンツがアクセシブルでなければならないと語りました。

アクセシビリティは品質

続いて、アクセシビリティは品質であるとした上で、品質の良し悪しを判断する基準となる国際標準、国内規格が紹介されました。アクセシビリティの国際標準として、W3CのWAI(うぇい)が中心となってWCAG(Web Contents Accessibility Guideline)というガイドラインを策定しています。WCAG1.0は16年前(1999年)に、WCAG2.0は7年前(2008年)に公開されました。今ではWCAG2.0が世界中で標準として使われているそうです。ISOやJIS規格も、このWCAG2.0に整合しているというお話がありました。Webの技術やデバイスは変化が激しいため、特定の技術に依存しないように書かれているとのことです。

  • Web Content Accessibility Guidelines 1.0
  • Web Content Accessibility Guidelines (WCAG) 2.0
  • Web Content Accessibility Guidelines (WCAG) 2.0 ※日本語訳

今後の法制化の動きに注目しておくべき

Webアクセシビリティへの取り組みの現状については、法制化の有無で国ごとにギャップがあるそうです。法制化されているアメリカや韓国では障害者・高齢者対応や訴訟回避の側面が強い為、Webアクセシビリティの取り組みが活発です。日本では法制化されていませんが、法制化の動きには今後注目しておくべきだと現状を語りました。

アクセシビリティはマルチデバイス対応の基礎

一方、Webアクセシビリティは障害者、高齢者のため「だけ」のものではないと言います。近年、デバイスはパソコンのみならず、スマートフォン、タブレット、そしてApple Watchのようなウェアラブルデバイス等、どんどん多様化してきています。いつでも、どこでも、どんなデバイスを使っても必要な情報が取り出せる為には、アクセシビリティは必要不可欠です。このように、多様化するニーズに対応するためには、コンテンツのアクセシビリティ確保が第一だと語りました。

最後に、Webの生みの親であるティム・バーナーズ=リーの言葉を引用しながら、障害の有無にかかわらず普遍的に使えるということがWebの力であり、その価値を最大化するためにアクセシビリティがあるのだと締めくくりました。

詳しい内容は講演資料をご覧ください。

読書体験を考える ――サービスとしての読書体験

講演では、本が大好きな読者の一人として、山岸さん自身の本との関わりを題材にしながら、読書体験を構成する要素が紐解かれていきました。

読書体験とは「人間が情報を取得するために道具を使う」体験

山岸さんによると、読書体験はユーザーとデバイス、コンテンツの3つの要素から構成され、「人間が情報を取得するために道具を使う体験」であると言います。電子書籍と紙の本は情報は同じであっても道具が異なるため、別の使い勝手があるはずであり、読書の未来のためにはその体験をデザインすることが必要だと語りました。サービスデザインは、この、人間・道具・情報3つのものを組み合わせて、体験のみならずしくみ(ビジネス)を考えることであると言います。

「本」も「読書」も拡張している

紙から電子へ、道具の部分が拡張しているなら、「本」も「読書」も拡張しているのではないか、拡張している差分が再定義された部分が書籍の新しい形になるのではないかと語りました。近年、IoT(Internet of things / モノのインターネット)というインターネットにIT機器以外の”モノ”がつながっていく仕組みが話題となっています。Webの場合、従来のWebが拡張されたものがIoTであり、高いアクセシビリティによって実現されます。電子書籍にもデバイスを問わないアクセシビリティが重要だと言います。

また、紙の書籍はモノとしての完成度が高い為、電子書籍をどうサービスとして差別化していくかが重要となります。「インクルーシブデザイン」という言葉にヒントが隠されているとのことです。アクセシビリティ対応は新しいビジネスモデルへの布石でもあると語りました。

詳しい内容は講演資料をご覧ください。

トークセッション

最後に、登壇されたお二方に弊社の佐々木をモデレータとして加え、電子書籍とWebをテーマにトークセッションが行われました。

出版とWebの大きな違いとは?

電子書籍は、技術的にはWebの技術を使って実現されていますが、その間には以下の3つの大きな違いがあるそうです。

  • コンテンツ(お金を払う価値)
  • プロセス(底本の存在有無)
  • パッケージング

近年、Webではノンリニアだったコンテンツを集め(キュレーション)てストック型にする動きがありますが、それは本なのか?概念としての本に縛られすぎると、どこからが電子書籍か分からなくなってくると山岸さんは語りました。

ここではプロセスとパッケージングが話題になりました。Webはデジタルファーストであり、形が無いものです。一方紙の本は制作段階で紙質、ページ数などが決められ、確実にユーザに届けられます。パッケージングの仕方にもどかしさを感じることがあると木達さんは言います。山岸さんも、今はデジタルからでも作ることができる時代だと続けました。しかし、デジタルとしてどう作りやすくしていくか?ビジネスを検討する際には教育、コストは避けて通れない課題だと言います。弊社佐々木も、デジタルファーストでの書籍作りが今後の課題だと述べました。

電子書籍の価値とは?

Webはデジタルであることがアイデンティティです。その一方、本はデジタルでも”モノ”でもどちらでも存在できます。それが価値であり強みではないかと山岸さんは言います。Webは、”コト”だったものが”モノ”にしみ込む=IoTの流れを辿りつつありますが、本は元々”モノ”として完成しているものです。本は”モノ”が”コト”になるというWebとは逆の過程を辿っていますが、”コト”への流れをポジティブに捉えられれば、良い体験が生まれるのではないかと語りました。

木達さんも、発想の段階からデジタルを意識し一気通貫で読書体験を作ることができれば、おのずとアクセシブルな書籍が作られていくのではと、デジタルファーストでの書籍づくりに関して期待を語りました。

アクセシビリティへ取り組む際の難しさ

発注側、受注側2つの視点から語られました。発注側としては、アクセシビリティはデザイン上の制約として受け取られがちであること、ぱっと見ただけでは程度が分かりにくい品質であること、技術の変化の激しさに辛さがあるそうです。また、受注側としては、法律が無いため発注側に提案しにくいこと、イメージとしてアクセシビリティが障害者/高齢者と結びつきすぎていること、明確なROIが答えられないことが挙げられました。難しさはあるものの、来るべきIoTの時代に対しての先行投資として捉えるべきだと木達さんは語りました。

サービスデザインへ取り組む際の難しさ

サービスデザインに関しては、大手とスタートアップで捉え方が違い、スタートアップが早さを追求する一方で大手はリスクを考え2番手狙いの色が強くなってしまいがちだと述べました。理解と実践は別であり、実践にはなんらかの壁があると山岸さんは言います。個人が舵を取ろうとしても、個人では壁が越えられず浸透しないこともあると語りました。

セミナーを終えて

アクセシビリティとサービスデザイン、一見すると直接的な繋がりが無いように見える2つのキーワードでしたが、電子書籍には紙の本とは異なる読書体験の設計が必要であり、そのためにはコンテンツがアクセシブルである必要があると、セミナーを通して双方の関係性が明らかになりました。

Webの技術を用いて電子書籍を実現する仕様として、EPUBがあります。今回のセミナーはEPUBに直接関係するものではありませんでしたが、EPUB3の仕様にも、『仕様の主な目標はコンテンツのアクセシビリティを促進すること』であること、『アクセシブルなコンテンツはより価値の高いコンテンツでもある』との記載があります。[参考]EPUB 3 Overview / EPUB 3 Overview

近年、マルチデバイス対応したサービスや、IoTが盛り上がりを見せています。電子出版に関わらず、アクセシブルであることは今後重要なポイントとなりそうです。山岸さんの講演であった「人間が情報を取得するために道具を使う体験」であるという点は、どのアプリケーションにも言えることであり、UIデザインのベースともなります。

私も本の好きな一人のユーザとして、今後電子書籍がどのような体験を提供してくれるのかと楽しみになりましたし、Webの知識としても充実の会でした。私たちのチームも価値ある体験を提供できるように、今後もWebやサービスデザインの動向をキャッチアップしていきたいと思います。

Related Post

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”