【レポート】WCAN 2017 Spring にてLT登壇（アクセシビリティのお話）してきました。

f:id:sitk:20170524223720p:plain

https://wcan.jp/event/2017spring/

2017年4月22日、名古屋で行われた「WCAN 2017 Spring」に参加してきました。内容もフロントエンドに関わる所でとても興味深いお話が多かったです。また、180名くらいが入るフロアにて、アクセシビリティについてのLTをさせていただきました。振り返りを兼ねて、まとめておきます。（開催から1ヶ月以上経ってしまったので、覚えてる範囲で。。。）

LT登壇＠小畑「Webアクセシビリティ脳のつくりかた」

こちらは、参加者のみなさまにフォローメールとしてお送りさせていただいた内容です。そのまま記載させていただきます。LTの内容に関しましては、スライドをご覧ください。

speakerdeck.com

本格的に「アクセシビリティ」を意識し始めたのが、約1年前。WCAN mini 2016で、植木さんと大藤さんのセッションを聞いたのがキッカケでした。それからというもの、あれこれサイトや書籍を読み漁り、勉強会に出まくり、Slackでのコミュニティに飛び込みました。それが、人前でお話するまでに情熱を注ぐようになりました。

セッションのさいごに「アクセシビリティは、Webの本質である」とお伝えしました。Webアクセシビリティは、とても地味な分野です。地味なだけに、皆さん取り掛かる「キッカケ」がないのかなという印象を受けています。

アクセシビリティは、障害者や高齢者の方だけを意識すれば良いというものでもありません。事故で明日失明してしまうかもしれません。そうなった時に、視覚に頼ったWebサイトだったらどうでしょうか。きちんと情報を得ることができるでしょうか。きちんと操作ができるでしょうか。そのためにも、正しい文書構造が必要になります。

セッションの中では、ご紹介できませんでしたが、総務省が出している2つ動画をご紹介させていただきます。こちらをご覧になられると、アクセシビリティの必要性を感じていただけると思います。

youtu.be

今後の制作時には「あ、そういえばアクセシビリティってあったな」と脳みその片隅に置いていただき、思い出してもらえれば幸いです。もっと深く勉強したい方は、ぜひコミュニティに飛び込んでみてください。そして、アクセシビリティ脳をつくってください。

WebデザインのトレンドとAdobe XDのススメ

f:id:sitk:20170524223737p:plain

アドビシステムズ株式会社轟啓介さんの講演。XDはインストールしてはいるけど、まだ使ったことがない。。。イメージ的には、「プロトタイプ」をつくるツールというイメージ。実際にデモを見せてもらいましたが、（Adobe製品の割には）動作もさくさく動いててストレスなさそうな感じでした。XDのライバル的存在のSketchも頻繁にアップデートかかってますし、日々進化している印象。XDは、そこに遅れを取ってるなぁと思いました。

XDを使うことによって得られるメリットとしては、「プロトタイプをさくっと作れること」。「プロトタイプ」は、1000回の会議にも匹敵するそうです。つまり、実際に動いているものを見てもらった方が、判断しやすいということ。ワイヤーフレームの段階から、「プロトタイプ」をつくれば、案件進行もスムーズになると思いました。

講演の中で、轟さんがおっしゃっていたのは「プロトタイプは、誰かのフィードバックを得るためにつくるもの」とのことです。想像力が豊かなクライアントは、そうそう居ないし、触れるモノを作ったほうが近道なんですね。その場で意見交換ができるツールとしては、最適だそうです。実際にAdobe内での会議でも、XDを開きながら進めているとのことでした。リーン・プロトタイプとも言うのでしょうかね。この手法だと、合理的だし決断も早くできる。（いかにも外資なイメージｗ）

「プロトタイプ」を導入することによって、今までのワークフローががらりと変わりそう。実装してから、確認してもらって、駄目なら調整、また確認して、調整、、、延々と続くとエンジニアも疲弊してしまいます。（エンジニアだけじゃないだろうけど）そういう意味では「プロトタイプ」をつくるフェーズを入れたほうが効率よくプロジェクトを進めることができそうです。

「プロトタイプ」は、アプリ制作やモバイル向けのサイトに向いていそうだなという印象を持ちました。実際に、UIが機能しているか、遷移は無理なくできるか、など、プロトタイプを作ることによって色々と見える化されるのですね。これが「プロトタイプは、誰かのフィードバックを得るためにつくるもの」と言われる所以なのでしょう。

とはいえ、、、XDはまだベータ版ですし、Windowsでは、Win10以外ではまだまだ使えないですし。チームで使うとなると、ちょっと導入に踏み切れないなぁ。これが正式にリリースされれば、がらりと勢力図が変わるかもしれませんね。そんな期待もしつつ、今後の開発動向を見守っていきたいと思います。

おわり。

最近のフロントエンド事情（2017年）

（写真撮りそびれた！）

株式会社トゥーアール西畑一馬さんの講演。フロントエンドまわりのお話でした。西畑さんとは同じ年でして、勝手に親近感が沸いてきました。昔を思い出しながら、お話を聞けたのは良かったです。フロントエンドというと、若い子たちがゴリゴリJSを書くようなイメージがついてますが、おじさんからしてみたら、そんなことじゃないと。Webの本質はHTML（アクセシビリティ）なんだ！ということを声を大にして言いたいw（大阪のアクセシビリティおじさんのお仕事です）

ブラウザ戦争の話や、HTML4.01からXHTML1.0、そしていまは亡きXHTML2.0のお話。HTML5に至るまで、それはそれは長い歴史があります。僕はその時代を生き抜いてきたので、実体験としてわかるのですが、今の若い世代には、まったくその実感がないんでしょうね。ネットスケープって何？って言う人もいるでしょう。MacにもIEってあったんだ、なんて言う人もいるでしょう。その黒歴史ともいうべき、ブラウザ戦争。いまでこそ、モダンブラウザになって、マシンのスペックも、通信環境も大変良くなりました。いい時代です。

とはいえ、「パフォーマンス」については、これからもっとシビアに見ていかないといけないなーと、講演を聞いて感じた所。いくら通信環境がよくなっても、スマホで閲覧する人が増えてきた現代。通信料とか気にしますもんね。そして、すぐに表示されなかったら、イライラしますもんね。みんな、月末になると容量制限に引っかかりますもんね。みんながみんな良い環境で閲覧している訳でもないので、「パフォーマンス」は要チェックです。

「パフォーマンス」については、いますぐ取り組めることもあります。リクエスト数を減らすとか、ファイルサイズを軽減するとか、リクエストタイミングを調整するとか、、、普段あまり気にしてなかったことを気にするだけで、大きく変わってくると思います。午前中の佐藤歩さん（@ahomu）さんの講演でもありましたが、このパフォーマンスが売上に左右すると、、、規模が大きくなると、その分金額も大きくなります。恐ろしい話です。我々エンジニアは、そういうビジネス的側面にも携わっていることを忘れてはいけませんね。

あとは、ここ数年でがらりと変わったのが、開発環境ではないでしょうか。CSSはSassでコンパイルしたり、黒いコマンドプロンプトで実行してみたり。便利で、効率よく作業を進めるには、Gulpなどのタスクランナーをつかこなせないと、イマドキのフロントエンドエンジニアと言えないのではないでしょうか。プログラム側にできることは、任せていく。自動化できるところは自動化していく。こういう流れはますます増えてきそうです。食わず嫌いな人は多そうですがｗとにかく、便利といわれてるものは、試してみる価値あります。

わからないことは、知ってる人に聞けばいいし、ググればそれなりに情報はでてきます。自分の開発環境もまだまだ整備できてないので、再度見直していかないと。あとは、チームで作業を進める時にMacとWinの壁があったりします。ここも解消できるようにしていかないと。各自使ってるツールも様々ですし、すべてを統一すると言うとは難しいです。その中で、できることから始めていきます。

あ、あときちんと「アクセシビリティ」のお話も盛り込まれておりました！よかったｗここでは、障害者差別解消法の話に始まり、実際にMacのVoiceOverを使ったデモをしていただきました。個人的にも、机上の空論ばかりではなく、実際に動いているものを見るのが一番習得が早いと思うのですよね。理解もしやすいですし。「あぁ、アクセシビリティってこういうことか！」と、口頭や文字だけで伝えるよりも納得感も変わってくると思います。（LTでも実際にデモを見せれれば良いのですが、5分という短い時間なので、周辺説明だけで終わってしまう。。。これは自分への課題ですねｗ）

おわり。