CSS Nite Shift13「ウェブデザイン、行く時代来る時代」 参加レポート
サイボウズ２０２０年新卒のSUGIです。
今回はイベント参加レポートです。
2019年12月21日に浅草橋ヒューリックホールで開催された、CSS Nite Shift13「ウェブデザイン、行く時代来る時代」に参加してきました。
特に印象深かった3つのセッション、
・辻ちゃん・ウエちゃんのAccessiブル GO! GO!「アクセシビリティ ゆく年来る年 2019」の巻
・ウェブサイトをビジネスから考えるための競合分析
・字幕がつなぐ、ウェブと動画のこれからの関係
について、「簡単な概要」、「勉強になったこと」、「今後生かしていきたいこと」の3つの観点で振り返りをしたいと思います。
イベントの概要
CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。
“ウェブ制作者にとって有益であろうトピック”を広く扱っています。
Shiftについて。
毎年年末に、「マークアップ」、「アクセシビリティ」、「ツールと制作環境」、「デザイントレンド」などのカテゴリーごとに、その年のウェブ制作シーンを振り返り、知識やスキルの棚卸しをするという目的で開催しています。
定員は350人で、主にウェブ制作会社勤務のコーダーの人が多く参加しているそうです。
私は今回、CSS Nite、Shiftシリーズともに初参加でした。登壇者の皆さんユーモアがあって、非常に楽しかったです。ハッシュタグ#cssniteを負いながら聞いてました。
セッション全体において、
・UDトークによるリアルタイム字幕
・@cssniteによるわかりやすい要約ツイート
が提供されており、見たり聞き逃したりしてもそれらでキャッチアップできるという点で非常にありがたかったです。アクセシビリティ的にもばっちり！
セッション： 辻ちゃん・ウエちゃんのAccessiブル GO! GO!「アクセシビリティ ゆく年来る年 2019」の巻
最初に取り上げるのは、株式会社インフォアクシアの植木さんと株式会社コンセントの辻さんによるアクセシビリティセッションです。
簡単な概要
植木さんが今年（２０１９年）に診断したウェブサイト36サイト754ページから発見された問題点10,417件をランキング化して発表。全盲のエンジニアの辻さんによるスクリーンリーダのデモを交えながら振り返りを行います。
アメリカではウェブサイトがアクセシブルではないことで訴えられた件数が2018年に2285件あったらしく（2015年の50件から急激に増加）、それを受けてアクセシビリティに力を入れている傾向にあるようです。
日本でも各社アクセシビリティに取り組む企業は増えてきていますが、その現状はいかに。どうなんでしょうか。
勉強になったこと
アクセシビリティ確保の基本のキができていない。
ランキングを聞いて率直に思ったことです。アクセシビリティ向上というと、なんだか難しそうと思われてしまうことも多いかと思いますが、ほんのちょっとマークアップを意識して改善するだけでいいのです。それこそ今日からでもスモールステップで向上させられると思うのですが、現状そうではないウェブサイトが数多くあることがわかりました。
以下は、ランキングの一部です。
・6位 フォームコントロールとラベルが関連付けられていない
・5位 キーボードフォーカス時にフォーカスインジケータが表示されない
・4位 マウスやタッチでは操作できるが、キーボードではできない
・3位 見出しがちゃんとマークアップされていない
・2位 文字色と背景色のコントラスト比が足りていない
・1位 画像の代替テキストが適切ではない
フォームコントロールとラベルの関連付けや見出しのマークアップが適切にされていると、それだけでスクリーンリーダ使用時の操作性が大きく向上します。ふだんからスクリーンリーダを利用してウェブを閲覧している私としては、ぜひともお願いしたいところです。ほんの少し、マークアップを変えるだけでいいので。というより、構造的に正しいセマンティックなHTMLを書くことを意識すればいいので。
他には、やはり代替テキスト問題は大きいようですね。
代替テキストが設定されていなかったり、されてはいるけれど不十分だったり意味不明だったりということが多くあると思います。
ひとつなるほどな、と思ったことがあります。写真を挿入する場合、代替テキストで「写真： 説明」のように写真であることを明記したほうが良いそうです。たしかにそうであれば、たとえ画像が見えなくとも、写真をダウンロードして写真コレクションに追加したり、誰かに詳細な説明を依頼したりといったことができますね。
今後生かしていきたいこと
基本をおろそかにしない。
基本を押さえることは大切です。アクセシビリティというとガイドラインだったりHTMLタグの細かい仕様だったりJSでごりごりやるようなテクニックにともすれば目が行きがちです。しかしそれらは基本の土台があってこそですね。
社内のプロダクトを改善したり勉強会を開催したりする時、根気強くまずはそこからやっていこうと思います。
セッション： ウェブサイトをビジネスから考えるための競合分析
次に、一般社団法人ウェブコンサルタント協会の権さんのセッションです。
簡単な概要
私たちウェブ制作会社は中小企業のこれからの命運を握っている。
デジタルトランスフォーメーションは、デジタル化によって生活や働き方が大きく変革すること。2018年12月に経済産業省はデジタルトランスフォーメーションを推進するためのガイドラインを発表しました。
これを受けて、特に中小企業の変革が求められています。今はウェブ中心消費行動（消費者はウェブの情報を参照しながら消費を行う）のため、中小企業の本質的なウェブ活用が重要になってきます。単なる広報や営業のツールではなく、ウェブサイトが事業革新のきっかけを作るキーとなるメディアになっていくでしょう。
ウェブ制作をする私たちは、デザインやプログラミングの技術を磨くだけでは不十分で、ビジネスを理解しウェブサイトで何をすべきか一緒に考えるパートナーになっていく必要があります。
勉強になったこと
ウェブ中心消費行動の現在、ウェブのプロフェッショナルではない企業側が自分たちの戦略の妥当性を検証するのは難しい。ウェブプロフェッショナルである側がビジネスを理解し分析しウェブサイトの在り方を提案していくべきだ。消費者はウェブを見て判断するようになってきているので、ウェブサイトのトップページで、
・あなたが求めている価値を提供できること
・他と比較してこういう優位点があること
をシンプルに伝えられると良いそうです。そのために競合を分析し、戦略を立てる。クライアントが求めているのは、単なる分析結果ではなく、結果を踏まえてこうしたらどうでしょうという戦略提案。
ある信州そば店の事例が紹介されていました。
・信州産だからお客さんは選んでくれると思っていた→レビューや口コミを横断検索したが信州産だからおいしいというようなコメントは見受けられなかった→値段の安い北海道産に切り替えることを決断
・お客さんは蕎麦になにを求めているのか→ラーメンより健康的である→クックパッドでレシピ検索したところ蕎麦湯の需要が高いことが分かった
・信州を活性化させていきたい→ラーメンや鍋を蕎麦湯で割って作るのはどうか→信州受けとしても良く、罪悪感のない商品に
今後生かしていきたいこと
「作る」ことだけではなく、ウェブの利用者のことも考える。これはアクセシビリティ向上にも通じることだと思います。
私が取り組むのはアクセシビリティ向上です。製品を使って何を行いたいのか。その過程で起きる使いづらさという障害を取り除いていきたい。その為には実際にの利用者を知って観察することが一番だと思います。それによって、潜在ニーズや我々が気づかなかった課題を発見することができる。
今回の競合分析の話でもまさに共通するところがあるなと思いました。
セッション： 字幕がつなぐ、ウェブと動画のこれからの関係
最後に、よつばデザインの後藤さんと株式会社エイチツーオー・スペースのたにぐちさんのセッションです。
簡単な概要
動画SEO、動画アクセシビリティを向上していくために字幕が担う役割は重要です。今やウェブページ上で流れる動画や、チュートリアル動画、広告動画など、さまざまな分野で動画が活用されています。
勉強になったこと
動画は信頼を勝ち取るためのコミュニケーション手段として使う。
テキストや画像よりも動画で紹介された方が直観的ですし親近感も沸きますね。また動画で見かけたことがあるというステップを踏んでいると、単純接触効果（人は接触回数が多いと親近感を覚える）によってその後のやり取りがスムーズにいきそうです。
動画を通じて、楽しそう、信頼できそう、便利そう、親切そう、誠実そう、など、パーソナルな空間で自分にとってプラスになりそうと思わせられ羽化が重要。
最近は動画で使い方や作り方を公開している企業が多いですね。ユーザが抱えている問題を解決するような動画があると、役に立つ・便利といった価値を感じますね。また社長対談・社員インタビューといった中の人をありのままに紹介する動画だと、親近感がわいて信頼感を感じるかもしれません。「きてください、買ってください」と直接プロモーションするのではなく、ユーザの心理的な価値に寄り添ってフォローするような、宣伝しない宣伝動画が増えているようです。
CC(クローズドキャプション)を付けると、音声で伝えられない人に内容を伝えられる、動画の内容がアより伝わりやすくなる、検索結果の精度が上がる、といったメリットがある。動画SEO・動画アクセシビリティを向上させるために重要。
CCを付加すると、プログラムが解釈可能になるため、Googleの検索結果で適切な動画をレコメンドさせられたり、多言語対応のため翻訳して表示させたりできます。また、人間が目で確認できることから、聞き漏らした部分をキャッチアップしたり、聴覚障害者の人が内容を理解するうえでも役立ちます。
今後生かしていきたいこと
動画を作る時に、誰に、何を伝えたいか（なんといって欲しいか）を考える。
動画やりたいなと思っているのですが、まとまりのない長々としたものでは伝わるものも伝わらないし飽きてしまうと思います。動画の趣旨はしっかり考えて、コンパクトでインパクトのあるものを作るよう意識したいですね。
UDトークで字幕を提供したり、映像のみに依存せず音声のみでも内容が伝わるようにしたり、動画のアクセシビリティについて探求したいなと思います。
最後に
アクセシビリティセッション聞けて満足でした。またアクセシビリティセッションに限らず、随所でアクセシビリティに通じる話が取り上げられていたのがよかったです。
デザインだったりフォントだったり、私が視覚的に見ることができないために理解するのにハードルがあるところもありましたが、いろいろな領域の情報を知れることは勉強になりますし面白いですね。
２０２０年はアクセシビリティと動画、頑張っていきたいです。