WCAN mini で Webアクセシビリティをさらに深めるきっかけを得て

6月4日(土)に名古屋で開催された「WCAN mini 2016 Vol.1 そのモヤモヤをWebアクセシビリティの達人がスッキリ晴らす! Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」!」(なっ…長い…)に参加してきました。

今回の勉強会は、2月に大阪で開催されたものの再演。
大阪の回は物理的な距離を理由に泣く泣くあきらめましたが、名古屋なら懇親会も参加して余裕の日帰りですから喜び勇んで申し込みました。(名古屋の勉強会に行くと「遠くから来たねー」と“毎度”言われますが、静岡西部からは思いのほか近いんですよ…。)

Webアクセシビリティの基本は押さえていても、ざっくりとしか理解していなかった「WAI-ARIA」。実装したらどのように支援技術に伝わるのか、それをもってなにが実現できるのか…深く学ぶきっかけになればと、興味深くお話を聞いてきました。

今日から始めるWebアクセシビリティ、まずはココから!

写真:セッション前の撮影タイムでスライドの映るスクリーンと植木さん

インフォアクシア代表・植木さんのセッションは、明日から取り組めるWebアクセシビリティの基本のお話。合成音声に台詞を読み上げさせる演出が心憎いですね。

Webアクセシビリティを取り巻く国内外の現状(障害者差別解消法施行や外国での法整備)、デバイスの多様化によって対象者の裾野が広がったことなどをふまえ、「マシンリーダブル」をキーワードにどうやって対応(マークアップ)していけばいいのかを一つひとつ丁寧に掘り下げて解説されました。

このセッションの内容は、ひと昔前から心がけていることのおさらい+普段見過ごしていることの発見というような感じでした。(#ff0000のコントラスト比が実は4.0:1でJIS規格で求められる値に満たない話や、キーボードでのフォーカスが正しく操作できるモーダルウィンドウの話など。)

スライドの後半、ヤコブ・ニールセン氏の Twitter Bot の引用があり、そんなBotがあったのねと早速フォローをしましたけれど、「ヤコブ・ニールセンをご存じの方?」という質問で挙手が少なかったことには、かなりジェネレーションギャップを感じうるしかなく…。

HTML5で今日から使えるWAI-ARIA

写真:セッション前の撮影タイムでスライドの映るスクリーンと大藤さん

復職してから目にするようになった「WAI-ARIA(ウェイ・アリア)」の文字。何て読むの?というところからのスタートで、ランドマーク・ロールを使う程度でした。

これまでに仕様書や大藤さんのWAI-ARIA本など、文字としてその概要を読むことはありましたが、デモを見ることで実際のマークアップでの使用するイメージがわきました。Open Ajax Accessibility というWebサイトにマークアップ例が多数掲載されているということで、こちらで復習をかねて勉強をしてみたいと思います。

駆け出しだったころ、HTMLやXHTMLのリファレンス本で(間接的に)非常にお世話になった大藤さん。その頃は札幌在住でいらしたのが、今は名古屋にお住まいなのだとか。なかなかお会いする機会がないなぁと思っていたのが、初めてお目にかかることができ感無量。

まとめ

Webアクセシビリティの話題を Twitter などで追いかけていると、スクリーンリーダーや WAI-ARIA、さまざまなデバイス、障害者の方の体験談、大なり小なりいろいろなものが流れてきます。

その早い流れに身を任せていると、「はて?それはすぐ自分に必要な情報だろうか?」「それを取り込める器はできているのだろうか?」という不安と、許容量を超えそうな情報にすこし振り回されている自分もありました。

有益な情報があっても、このままだと馬子にも衣装、猫に小判だぞと。
ならば基本に立ち返ってみよう。Webアクセシビリティの基本とそこから一歩進んで WAI-ARIA をちゃんと固めよう。そんな気持ちで参加した勉強会でした。

質疑応答で「東京ではWebアクセシビリティを基本対応することで、競争力に繋げている企業もある」というお話も出ました。この先、事業者もWebアクセシビリティが努力義務から必須になっていった際、地方でも先んじて取り組んでおくことで、ひとつの武器になるのではないかと思います。

植木さんは、「Webアクセシビリティの学校」というWebアクセシビリティの基本を学べるセミナーを全国各地で行っておられます。Webアクセシビリティについて考えたり学ぶ場の少ない地方でもそういった試みが回を重ね、少しずつWebアクセシビリティが“あたりまえ”になっていくといいなと思うところです。

私個人としては、懇親会で静岡西部に縁がある植木さんと地元の話などしたり、大藤さんにリファレンス本でお世話になったお礼などができたりで非常に楽しゅうございました(笑)。

まとめの余談

イベント開始前にWebアクセシビリティに関連した TED Talk が流れていたのですが、何のトークだったのか気になります…。どなたか知っていたら教えてください。

Illustration by Freepik

TEDxHamamatsuSalon Vol.2 で知的好奇心の交差を目撃した一日

最近外に出ることが増えたので、「大人の課外活動」なんてタグを作ってみました。
手始めに、先の日曜(5月22日)に参加した「TEDxHamamatsuSalon Vol.2」のことから。


TEDxHamamatsuSalon とは

TEDx をご存じない方のために簡単に説明を。
TEDx というのは、NHKの「スーパープレゼンテーション」でも知られる TED から正式にライセンスを受け、厳格なルールに則って運営される“TED の地方版”。日本では東京をはじめ、北は北海道から南は沖縄までの都市や大学などで活動があります。そして浜松もそのひとつ。

今回参加した TEDxHamamatsuSalon は、これまでの TED Talk を参加者全員で視聴し、その内容から感じたことをディスカッションして知見を深めようというスタイルのイベントです。

この日はスタッフ含め50名近い人たちが集まり、5人ずつのグループに分かれて2つのセッションを行いました。私は今年から TEDxHamamatsu のボランティアスタッフとして参加しており、今回が初めてのイベント体験です。

イベントのテーマは「Across with Intellectual Curiosities(知的好奇心が交差する)」。


デザインチームのMasatoさんがテーマからイメージして描き下ろしたメインビジュアル。こんなところに学生の力が発揮されています。

参加することの意義

正直言って、なにか明確な「答え」が得られるようなイベントではありません。

ひとつの主張(アイデア)を人と視聴し、意見を交わし、そこから自分にはないものを感じ取って自身の活動につなげていく。これは一人ではできないことです。

また、普段と違う刺激を受けてじっくりと内観すること。普段の仕事や勉強を離れ、ひとまわり大きな視点で問題を観察してみる。それはすぐに実らなくても後の気づきや発想のきっかけになったり、会話のキーになったりするのではないでしょうか。すぐに成果や答えをを求められることが多い今の世の中では、逆にそれが大事なのかと思っています。

個人的には動画やテレビに時間を拘束されるのが苦手なので、見るための時間を確保できるというのはありがたいです。これは映画を劇場で観ることと似てますね(笑)。


会場は旧消防庁舎をリノベーションした「鴨江別館(アートセンター)」。趣あります。
Photo by TEDxHamamatsu / CC BY-NC-ND 2.0

プログラム: Ice Break 「トム・ウージェック:塔を建て、チームを作る」

まずは“つかみ”として視聴したのがこのトーク。発想力を問われるマシュマロタワーの制作を通し、チームをいかにしてゴールに導くか?ということを問う内容です。

視聴の後に実際にマシュマロチャレンジを行ってみました。
20本のスパゲティと90センチのテープと紐を使い、18分(今回は10分)でいかに高い場所にひとつのマシュマロを設置できるかという作業。これが意外と難しい。私のチームは63センチを記録したものの、最後まで自立することができず結果は0センチでした(笑)。

スパゲッティで作った三角形の構造物に刺さっているマシュマロ
Photo by TEDxHamamatsu / CC BY-NC-ND 2.0

マシュマロチャレンジは彼らが隠れた仮定を見出すのに役立つのです。

私が身を置くWeb制作界隈でも最近よく言われる「プロトタイプの重要性」に、このトークの内容が繋がるなーと思いながら観ていました。

プログラム: Session 1 「Curiosity(好奇心)」

模造紙に興味を書き出しディスカッションするグループメンバー
Photo by TEDxHamamatsu / CC BY-NC-ND 2.0

「興味があるけど実行できてないことを挙げてみよう。」
Session 1 は、3つのトークを視聴したあとにそこから開始。テーブルに広げられた模造紙に5人のグループメンバーが各々書き出していきます。

では、どうしたらその“興味があること”を実行できるのか。グループ内でディスカッション(堅苦しいものではなく、おしゃべりに近い感じ)したり、他グループの意見を聞いたりするなどして“知の再発見”を図ることに。

私の現実味を帯びている“興味があること”は、実行する気持ちを押してもらえましたし、先延ばしになっているものは、歳をとるごとに厚くなっていく「清水から飛び降りる気持ち」が原因なんだと再確認しました。

Session 1 の TED Talk

※ ティム・アーバン氏のトークは、GIGAZINEでも取り上げられた ので知っている方も多いかもしれませんね。お猿のあれです。

プログラム: Session 2 「Passion(情熱)」

熱中シートに熱中していることを書き出す女性参加者。
Photo by TEDxHamamatsu / CC BY-NC-ND 2.0

オーガナイザー(主宰者)曰く「重いテーマ」のトークが揃った Session 2。
感じるところはそれぞれだったようですが、物事を分解して自分のピースと照らし合わせるのが大好きな私は、こちらの方が実は盛り上がり…。社会人になってからの出来事や自身への不満、そういったものを一つずつ解きほぐすようにトークを視聴していました。

このセッションでは「熱中シート」に書き出したことへの熱中度を星で示し、グループ内で発表をしました。哲学的なテーマのため少し難しく感じるところもありましたが、もう少しトークについての感想を交換できるとよかったかなと思います。

Session 2 の TED Talk

まとめ

この手のイベントは「敷居が高い」ものと取られがちです。
しかしふたを開けてみれば大学生から還暦以上の方まで、さまざまな“知りたがり”の人々が集まる和気あいあいとした会でした。休憩時間にはお菓子を食べながらおしゃべりしたり、アフターパーティーでは美味しい料理を食べ、お酒を飲みながらワイワイとお互いのことを語り合ったり。

異業種交流会とも似ていますが、TEDx のルールで営利的なことは認められていないため純粋に「知的好奇心の“交流”」を図ることができる貴重な場だと思います。


地元で評判のイタリアンのケータリング!おいしくて食べ過ぎました。:P

TEDxHamamatsu では、浜松市内外のスピーカーがトークを行うスタンダードイベントの開催が2016年9月に決定しています。私は昨年のイベント参加を逃してしまったため、今からとても楽しみでなりません。

一般参加者(パティシパント)の応募も開催近くには公式WebサイトFacebookページで告知されると思いますので、浜松近郊(それ以外でもOK)で面白いことないかなーと思っている方はぜひ覗いてみてください。


恒例の「X」ポーズで記念撮影して無事終了しました!
Photo by TEDxHamamatsu / CC BY-NC-ND 2.0

母たちのものぐさ玉子焼

子供が大人たちの諸事情で幼稚園編入となった。
そのドタバタもなんとか落ち着き、仕事もやっと落ち着いて取りかかれるようになってきた。

とは言うものの、幼稚園の預かり延長保育は16:30がタイムリミット、週末には翌週のスケジュールを立てるのに未だ四苦八苦している。

そんな生活を始めて2週間になるが、4月は家庭訪問やらPTA総会、その他もろもろで給食がない日もあり、何度か弁当を作る機会がある。朝の弱い私は半分寝ぼけた状態で作るのだが、毎度欠かさないおかずがある。

玉子焼きだ。

§

高校生のころ、ほぼ毎日母が弁当を作ってくれていた。そして毎日決まって入っていたのが玉子焼き。素の状態もあれば、若布が入っているときもあった。それを3年間。

だが途中で大きな変化があった。巻かれなくなったのだ。
その作り方といえばほとんどオムレツで、ゆるいスクランブルエッグを鍋肌に寄せて形を整える。本人曰く「巻くのがめんどくさい」らしいのだが、それでもよく毎日作り、私も飽きずに食べたものだ。

そしていつしか私もその作り方を真似し、弁当の玉子焼きはオムレツもどきになった。

§

「あんたが幼稚園のころ、小さい弁当箱にほんのちょっと作るのが楽しかったわー。」と、今でも時折思い出したように母は言う。まぁ確かに小さい弁当箱に少しずつ盛り、残りは朝食にしてしまえるところは、楽しいというよりは楽である。

保育園の時は遠足ぐらいしか弁当を作る機会は無かったが、これからますます弁当を作る回数は増えていくんだろう。ああ、ものぐさにとってそれはそれで試練なのだ。

と、そんなことを思って久しぶりに作った玉子焼きは、見事に“オム裂”になってしまっていた。

【3月振返 その1】 Knock!Knock! デザイントレンド 2016 ショートセッションに参加

超過密月間だった3月とプライベートのバタバタが終わり、ようやくブログを書く余裕が出てきました。

年度も明けて4月も半ばに差し掛かろうとしていますが(笑)、3月の振り返りを何回かに分けてしてみようかなと思います。

第一弾は「Knock!Knock! 30th Knock!」について。

すべては Dorpamine からはじまった

3月12日に静岡市で開催された「Knock!Knock! 30th Knock!」のショートセッションとして、制作環境のお話をしました。(本編は原一浩さんの「Webデザイントレンド」。)

話は1月に戻り、浜松市で開催された Dorpamine
ここにKnock!Knock!主催者の矢部さんが参加されていて、イベント後日「スピーカー3人まとめて再演しない?」とお誘いを受けたのがことの発端でした。

矢部さんから愛のあるだめ出し(笑)をいただき、Browsersync をより使ってみたくなる内容に練り直すこと一週間。
Dorpamine の時よりもはるかに多い参加者を前に、ガヂンゴヂン状態での発表でしたが、直後に「すぐ使ってみたいんですが…」と声をかけてくださる方がいたり、セミナーお約束のアンケートでは比較的好評だったようでひと安心しました。(静岡の方は優しい…。いや、私も静岡のひとですが。)

小さなことに疑問を持ち、仕事をより楽しく素晴らしいものに

以下はフォローアップメールより、私のコメントの引用です。
発表の内容は Browsersync についてでしたが、こんなことが参加された方に伝わっていればいいなと思います。

最近耳にするコマンドラインのツール類はおしなべて敷居が高いように感じますが、Browsersync のように「意外と簡単」なものから手をつけると、そこを皮切りに視野が広がっていきます。
日常なんとなくやっている操作や業務に対して「なんでだろう?」「これ、なんとかならないかな?」という疑問を持つことで、あなたの仕事をより楽しく素晴らしいものにしていきましょう。

まとめ

この回をもって Knock!Knock! はしばらく充電期間に入るそうですが、クリエイター飲みとか興味アリなので企画されることを楽しみにしています(笑)。

最後に…。
声をかけてくださった矢部さん、一緒にショートセッションをした鈴木さんと清水さん、内容も発表もとても参考になった原さん、参加者のみなさん、すべての方々に感謝申しあげます。

当日の発表資料とフォローアップ記事がありますので、リンク張っときますね。

フリーランサーとして独立しました

タイトルですべて語っていますが、フリーランサーとして独立しました。昨年より個人活動をしてはおりましたが、本日(2016年4月1日)より正式に活動開始となります。

子供の保育環境がこの春から変わるということが一番の理由ですが、制作会社で12年半やってきた中で感じていた“組織の枠を超えたい”“仕事の幅を広げたい”という内側の要因が、今回そこに乗っかったということもあります。
(これは性格的なものもありますが、組織に属しているとその環境に甘んじてしまったり、帰属意識に縛られるというところもあるのですよね。)

これからは「トトコトデザイン」の人としてWeb制作を中心に活動します。舌を噛みそうな屋号ではありますが、どうぞよろしくお願いいたします。

ちょっと高めのドメインを勢い余って取ってしまったので、「それくらい安いもんよ」と一年後に笑って更新できるくらいにはなっていたいものです(笑)。

今日は世間的に嘘のまかり通る日ですが、本当のことを書いてみました。