CSS Nite公式サイト

2019年7月20日にTKPガーデンシティPREMIUM神保町で開催したCSS Nite LP63「カイゼンとグロース」のフォローアップを公開します。

• （1）谷脇 しのぶさん、林田 拓郎さん
• （2）益子 貴寛さん、松田 直樹さん
• （3）安達 里枝さん
• （4）権 成俊さん

ツイートは下記にまとめました。

• CSS Nite LP63「カイゼンとグロース」 - Togetter

2019年7月20日にTKPガーデンシティPREMIUM神保町で開催したCSS Nite LP63「カイゼンとグロース」のフォローアップとして、権 成俊さん（ゴンウェブコンサルティング）の『カイゼンかカイカクか　ウェブプロフェッショナルに求められるビジネスの視点 』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

戦略やイノベーションという言葉になじみが無かった方も多いと思います。
また、今でも自分事と感じられない方も多いと思います。

私も、かつてはそうでした。
しかし、経験が増え、視野が広がるにつれ、本当の課題を解決せねばならない、と思うようになりました。

そう思うと、直接自分がかかわらないことにも興味が湧くようになりましたし、自社の課題だけではなく、業界や社会の課題にも目が向くようになりました。
その結果、ismや協会を立ち上げることにもつながりました。
自分自身の覚悟が出来たこともありますが、経営の改善にもつながったと思います。

■社会問題の解決に取り組むことが競争力を生む

マイケル・ポーターはこの競争社会で企業が生き残るためには、CSV（Creating Shared Value）という考え方が必要だ、と言っています。

• 共通価値の創造
  https://www2.deloitte.com/content/dam/Deloitte/jp/Documents/get-connected/pub/risk/jp-risk-43-csv.pdf
  

自分のための価値を生むのではなく、より多くの人にとって価値がある活動をしていこう、という意味です。
社会問題の解決を通して、収益化する。
難しいことのようですが、実は社会にとって良い活動をしていれば、自社の社員やお客様だけでなく、直接商品やサービスにかかわらない、社会の多くの人たちが、その会社を応援してくれます。
結果的に、効率の良い経営になります。
ネットの登場により、経営活動が伝わりやすくなり、良く在ることが競争力に直結します。

結局、経営者や社員の視座を高め、視野を広げることが、企業の本質的な競争力を高めることにつながります。
企業の競争力は、価値観から生み出されている、ということです。

■抽象的な価値をハンドリングするスキルと信頼

クライアントワークの中でも、これを伝えて行く必要があります。
目に見えない抽象的な価値の議論が増え、それを経営に反映させていくスキルが必要になってきました。
それがデザイン経営と呼ばれるものです。

これをうまくやるためには、抽象的な価値を伝え合うコミュニケーション能力が必要で、
人の気持ちや感覚を把握する「観察力」、それを伝える言語化能力など、広い意味でのファシリテーションスキルが必要です。

• センスメイキングとは何か
  https://www.dhbr.net/articles/-/6031
  

そして、抽象的な議論をリードするためには、信頼される必要があります。
能力としてもそうですが、その人の価値観、考え方が自分と合わないと任せてもらえません。
信頼を得るための一歩目は、価値観とスキルについての情報発信です。
SNSやブログからスタートして、最終的には、セミナーや書籍で発信できるようになれば、第三者からの信頼の保証も得られます。
例えば、私のセミナーに関して、ブログで感想を書くことで、「この人は戦略やイノベーションに興味があるんだな」
ということが周囲に伝わり、同じようなことに関心がある人が集まってくるわけです。

私が本を書く機会をいただいたのも自身の情報発信によるものですし、CSS Niteに読んでいただいたのも本がきっかけです。
この継続が自身のポジションを作り、ポジションが仕事を生み、仕事への取り組みが卓越を生みます。
そして、卓越が差別化を生むのです。

私はセミナーをやるときは「今日、参加者の人生を変える」という意気込みでやっています。
これをきっかけに、覚悟を決めて、自身の道を一歩踏み出す方がいたら嬉しいです。

■リニューアルタスク表

セミナーでご紹介した見積もり書、欲しい方はこちらからご連絡ください。

https://www.facebook.com/narutoshi.gon

アンケートの質問への回答

セミナーアンケートでいただいたご質問にお答えします。

Q.ウェブイノベーションについて、事例を知りたい

A.ネットの連載や書籍、セミナーをご覧ください。

https://biz-journal.jp/category/series/narutoshi-gon-net

有料
https://xtrend.nikkei.com/atcl/contents/18/00126/?i_cid=nbpnxr_child

書籍
アマゾンにも負けない、本当に強い会社が続けていること。
https://www.amazon.co.jp/dp/4798139610

また、一般社団法人 ウェブコンサルタント協会の主催セミナーでも、事例をご紹介しています。
事例セミナーは中小企業経営者をメインの対象としており、専門知識が無い方でも分かり易いようにご説明しています。

https://www.webconsultant.or.jp/service/seminar/general.html#s20190729

Q.見積もりでは成果を見積もれ、とのことだが、見積もり通りの成果が出なかったときは？

A.見積もりの根拠に納得いただいていれば、成果そのものに責任を取る必要は無い

まず、私たちが成果を見積もる場合、いくつかのやり方で推論します。

短期の成長を目指す場合

• 現在の集客数が増える、コンバージョンレートが上がる、などの要素ごとの仮説から試算する

長期の成長を目指す場合

• 市場規模、EC化率とシェアなどから限界値を試算する
• ベストプラクティス、つまり業界の競合他社の売上、利益状況を参考に限界値を試算する

いずれにしても、その根拠と妥当性を伝え、その上で、成長のドライバーとしての商品、サービスのアイデアをすり合わせます。
このとき、重要なのは収益の桁です。
例えば、年商で10億円を目指せる、となれば、1000万円の投資は全く問題ありません。
これが、年商1億円目標ですと、1000万円もちょっと高いですね。
このレベルで納得していただければ、細かい精度は求められないのが通常です。
また、「そういう視点で考えてくれているんだな」という安心感も、判断をゆだねていただける理由でしょう。

Q.差別化するにはどうすればいいか？

A.歴史のある会社なら、生き残った理由を掘り下げます。
歴史の浅い会社なら、創業者の中にあるビジョンから強みをつくります。

このあたりはまさに３C立案の肝ですが、私のやり方は、人の成長を信じる、というところに特徴があります。
いま強みが無くても、強みは作り出せる、という考え方です。
その強みのとっかかりをどこにするかは、会社の状況によって違います。
数十年の歴史があって、創業者経営者が残っているのがベストです。
かつて、０から１にしたことがある人がまだいるなら、また０を１に出来ると考えます。
もう創業者がいない場合、つまり次の社長にバトンタッチするくらい、歴史があるわけですから、
その場合は何か強みがあってこそ会社が生き残っているのだと思います。
その理由を探して、そこからとっかかりを紐解きます。
商品の特徴、社内のワークフローの特徴、取引先との関係などを探っていくと、
自分たちでは気づけなかった、特徴や考え方を見つけられることが多く、そこに固有の価値が埋まっていることが多いです。
そこを明らかにすることが、コンサルタントの仕事だと思います。

アイデアからAB3Cで戦略を立案しつつ、決算書やキャッシュフローで戦略の妥当性を判断、
定量的な計画に落とし込んでいきます。
これを繰り返して、実現可能性の高い事業計画に落とし込みます。
その裏で、いろいろな調査分析の手法を持ちます。

https://www.webconsultant.or.jp/service/seminar/advanced.html

こういう話に興味がある方はぜひWebCAにご参加ください。

Q.ビジネス＋デジタル＋デザインについて詳しく知りたい

A.DXやデザイン思考について勉強するとよいと思います。

https://www.meti.go.jp/policy/digital_transformation/index.html
https://cio.go.jp/node/2421

DXやデザイン思考については本もたくさん出ているので、ぜひ探してみてください。

ちなみに、今回ご紹介したAB3Cはまさにこの3つの視点を統合するフレームワークです。
ご興味のある方は学んでみてください。

また、以前出演させていただいたCSS Nite LP42で、AB3Cからサイト制作につなぐ流れをご紹介しています。
これでAB3CとDをつなぐ流れがつかめると思います。

http://cssnite.jp/archives/post_2844.html

2019年7月20日にTKPガーデンシティPREMIUM神保町で開催したCSS Nite LP63「カイゼンとグロース」のフォローアップとして、安達 里枝さん（スマイルファーム）の『SNSの攻めと守り〜アカウント育成とカイゼンのコツ』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

スマイルファームの安達です。
ご参加いただきありがとうございました。

普段、自社やクライアントのSNS運営にはあまり携わっていないという方もいらっしゃったと思います。
SNSは水物のようにアルゴリズム流れが変わっていきますので、
今回は当たり前のことを今一度見直していただく機会として、
テクニカルな話題はピックアップしませんでしたが、
SNSのカイゼンとグロースに取り組んだら、こんな未来が待っているかもしれない...
と、未来予想図をイメージしていただく機会になったら幸いです。

質問への回答

アンケートにありました質問に回答させていただきます。

■適切なハッシュタグの付与数は？

Instagramの場合は、30個が上限ですが、あまりに多くのハッシュタグを付与しすぎると
いわゆる「うざい」印象にはなりますよね。
ですが、やはりハッシュタグが少ないとリーチするマーケットが減ってしまうので、
投稿毎に「緩急」を付けながら、付与するハッシュタグの数を調整してみてはいかがでしょうか。
また、印象やイメージを優先してハッシュタグを減らすのであれば、
投稿回数などで、接触回数を増やす工夫が必要かと思います。

■BtoB企業の場合、ターゲットユーザーに自分事化させるためにはどのような訴求が有効でしょうか？

BtoBでも、ニッチなビジネスでも、SNSの活用でうまくハマっている事例はあります。
うまくハマっているのは、「誰のどんな悩みをどう解決できるのか」を、ペルソナを決めたうえで
ひとつの投稿でひとつのペルソナの一つの悩みに寄り添う、
細分化した投稿を行っているところがうまく活用できている印象です。
ターゲットのとある一つの悩みに絞り込めば、自分事化させる訴求も考えやすいのではないでしょうか。

■SNS投稿を一元管理できすツールはなんというものでしたでしょうか？
セッション内でご紹介したのは
Zanroo（ザンルー）　https://enterprise.zanroo.com/
ソーシャルリスニングのツールです。
こちらは、自社のアカウントを一元管理というよりも、
自社名やブランド名を含んだ第三者の投稿を分析できる
ソーシャルリスニングのためのツールになります。

その他、自社のSNSアカウントを一元管理をするツールとしては
Hootsuite　https://hootsuite.com/ja/
Social Insight　https://social.userlocal.jp/
などがあります。

＜メッセージ＞

「限られたリソースを有効活用するためにも、一度はSNSと真剣に向き合ってみませんか」

SNSに目を向けてみることで、
ウェブサイトのコンバージョンUPや
事業ゴールの達成につながるような宝の山を発見できます。

自社製品の知名度を上げるためではなく、
採用のみのためにTwitterを運用するBtoB企業も増えてきました。

限られたリソースを有効活用するためにも、解析やディレクション時点で
SNSを含めて、全体を俯瞰する機会を持つのはとても有効です。

普段、SNSに携わっていない方も、SNSを他人事と思わず、
ちょっとだけ自分事としてとらえてみてはいかがでしょうか。

「感情を動す」「自分事化」そんな訴求力を高めるには、
まずは個人アカウントで「Do！」するのがトレーニングになります。

ぜひ、チャレンジしてみてください。
ありがとうございました。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップを公開します。

• （1）伊原 力也さん
• （2）松森 果林さん
• （3）辻 勝利さん、植木 真さん
• （4）澤田 望さん
• （5）小林 大輔さん、樋田 勇也さん
• （6）木達 一仁さん

ツイートは下記にまとめました。

• CSS Nite LP62「Webアクセシビリティの学校」特別授業 - Togetter

次のブログなどにて取り上げていただきました。

• CSS Nite LP62 Webアクセシビリティの学校 特別授業に行ってきました
• CSS Nite LP62「Webアクセシビリティの学校」へ行ってきました！ - 株式会社ハマ企画
• CSS Nite LP62「Webアクセシビリティの学校」特別授業 参加レポート | PRESS.mjmj
• CSS Nite LP62「Webアクセシビリティの学校」に参加しました。 | PowerCMS ブログ | PowerCMS - カスタマイズする CMS。
• CSS Nite LP62「Webアクセシビリティの学校」特別授業 | セミナーレポート – ProjectDD
• CSS Nite LP62「Webアクセシビリティの学校」特別授業に参加しました｜東京のWeb制作会社｜non-standard world株式会社

こちらは出演者のブログ

• CSS Nite LP62「Webアクセシビリティの学校」特別授業 | 覚え書き | @kazuhito
• Webアクセシビリティの学校【特別授業】に登壇 | 松森果林UD劇場～聞こえない世界に移住して

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、木達 一仁さん（ミツエーリンクス）の『【クロージング・トーク】インクルーシブネスを超えて』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

コメント

クロージング・トーク「インクルーシブネスを超えて」を担当しました木達です。

CSS Niteでの登壇は今回が通算で5回目、昨年9月に開催されたLP58「Coder’s High 2018」以来だったのですが、終始、早口かつ声が上ずり気味で、聞き取りにくいところが多々あったと思います（アンケートでもご指摘をいただきました）。まずはその点をお詫びいたします、申し訳ありませんでした。

講演内容につきましては、他の登壇者の皆さんがお話しされた内容にほんの少しずつ触れながらも、締めのセッションとして私が特に強調したかったのは以下の2点です：

• 電気や水と並ぶまで情報がライフラインと化した昨今、Webコンテンツにとって必須の品質としてアクセシビリティを捉え、それを高めるための取り組みを、業界としてますます強化しなければならない
• そうした取り組みに着手することは大事だけれど継続はもっと大事であり、いきなり欲張ったりせず「できること」から少しずつ、プロセスとカルチャーの両面から実践していただきたい

特に2点目については、「小さく産んで大きく育てる」という言葉を用いてお願いをしました。ともすると、いきなりWCAGやらJIS X 8341-3やら、小難しいガイドラインを読み始めがちなのですが、当日の配布資料にあった植木校長の「基本のキ」から小さく始めていただければと思いますし、澤田さんが解説された「ちゃんと画像の代替テキストをつける」、最初はそれだけでも十分かと思います。

ただし、一度始めた取り組みは、途中でやめたり縮小させないでいただきたいと思います。そうしていただくことで、確実にWebはよりアクセシブルなメディア/プラットフォームへ進化し続けるでしょうし、それが回り回って社会全体に、あるいは異なるニーズをもつ私たち一人一人にきっと良い影響をもたらすと、私は信じます。

アンケートにご記入いただいた感想はすべて、拝読させていただきました。「勇気づけられました」「心が軽くなりました」「小さく始めていこうと思います」「モチベーションが上がりました」「もっとやる気が出ました」など、大変ありがたい感想もあって、嬉しく思います。またいずれ、ご縁がありましたらCSS Niteの場でお目にかかりたいと思います。改めて参加された皆様、そして鷹野さん・植木さんはじめ運営側で尽力くださった皆様に、感謝申し上げます。ありがとうございました。

質問と回答

品質の先に何があるんですか！

哲学的な問いをありがとうございます。深いですね……脊髄反射的には「幸福」という言葉が思い浮かんだのですけど、自分もその答えが知りたくて、さまざまな品質向上の旗振り役を担ってきた気がします。あくまで一意見として、ご納得いただければ幸いです。

Tシャツ欲しいです

本当（本気）ですか？ありがとうございます！！実は、私が着ていた「アクセシビリティ チョットワカル」とプリントされたTシャツは、SUZURIというサービスで作ったもので、同じものをどなたでもご購入いただけます。ちなみに何枚お買い求めいただいても、私に儲けなどは発生しませんので、ご安心ください。

• アクセシビリティチョットワカル / Kazuhito Kidachi ( kazuhito )のTシャツ通販 ∞ SUZURI（スズリ）

アクセシビリティっていう呼び名、アクセシブルじゃなくないですか？日本語で適切な呼び名あると思いますか？

逆に気になったのは、なぜ「アクセシビリティ」という呼び名がアクセシブルではないとお感じになったか、です。発話しにくいでしょうか、それとも意味が類推しにくいとお考えだからでしょうか。私自身は、もう何年もこの言葉と向かい合ってきたせいで麻痺してしまったのか、特にアクセシブルでないと感じたことはありません。そのいっぽうで、障害者対応や高齢者対応という色がついてしまっている印象から、別の言葉に置き換えられないか……などと考えたことはあります。

• 「Webアクセシビリティ」のリブランディング（2011年11月26日 著）
• 続・「Webアクセシビリティ」のリブランディング（2015年3月20日 著）

あらゆる製品やサービスの基本要件、基本品質としてアクセシビリティの認知が進めば、いずれ「アクセシビリティ」という言葉を使わなくてもよくなるかもしれません。

• アクセシビリティという言葉をなくしたい（2011年4月22日 著）

「アクセシビリティおじさん」自称するのは良いですが「1社に1人」のように役割として呼称するのは疎外感があります。年齢や性別で固定されるものではないはずなので

おっしゃる通りだと思いますし、自分が言葉足らずで失礼しました。年齢や性別関係なく、アクセシビリティ向上の旗振り役という意味合いで「アクセシビリティおじさん」という言葉を捉え直していただければ、ありがたく思います。言い直させていただけるなら、私が申し上げたかったのは、「1社に1人」くらいにまで旗振り役の数が増え、自分がその中に埋没してもむしろそれで本望、ということです。

インクルーシブとユニバーサルは同じものと捉えてよろしいのでしょうか？

異なる言葉である以上、辞書的かつ厳密には同じ意味ではないわけですけど、Webデザインという文脈において実務上は同じものと捉えていただいて支障はないと思います。ユニバーサルデザインとは何か、については障害者の権利に関する条約の「第二条　定義」に、以下のようにあります。

「ユニバーサルデザイン」とは、調整又は特別な設計を必要とすることなく、最大限可能な範囲で全ての人が使用することのできる製品、環境、計画及びサービスの設計をいう。

まさにその、「最大限可能な範囲で全ての人が使用することのできる」ようにするためのアプローチとして、より上流の工程から多様なユーザーを想定し、あるいは実際に多様なユーザーと一緒になって（巻き込んで）デザインに取り組む手法が、近年呼ばれているところの「インクルーシブデザイン」と自分は理解しています。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、 小林 大輔さん、樋田 勇也さん（サイボウズ）さんの『サイボウズの組織的な取り組みとビジュアルデザイン』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

コメント

ご参加頂いたみなさま、本当にありがとうございました。登壇者の小林です。アクセシビリティをいかにチームで取り組んでいくか、私自身も試行錯誤の日々です。
発表した内容がそのまますべての組織に当てはまるとは限らないかもしれません。それでも、理想を大切にするマインドや、みんなを巻き込むプロセスの考え方は、きっと多くの組織で必要になると思います。
参考になることが一つでもあれば嬉しいです。

同じく登壇者の樋田です。当日は多くの方に、都心だけでなく全国からお集まりいただき大変感謝しております。アンケートを全て拝見させていただきました。アクセシビリティが特別な対応ではなく普段のデザインの延長にあることをお伝えたしたのですが、それがちゃんと伝わっていることが感じられてとても嬉しいです。
懇親会でも話題になりましたが、どうかアクセシビリティ 対応は「できる/できない」という考え方をしないでほしいなと思います。ハードルを感じた時は「実はすでに出来ていること」を探してみるのもオススメです。

質問と回答

小林/樋田それぞれにいくつかご質問をいただいているので下記で回答いたします。

ガイドラインはどんな内容ですか？実際に見てみたいです

（小林）現在、kintone チームにはデザインガイドラインと実装ガイドラインがありますが、
例えば実装ガイドラインの場合だと、以下の項目があります。それぞれに数行の説明があるという構成です。今回の「アクセシビリティ確保の基本のキ 10 項目」に近い内容になっています。

• マークアップ
• 画像
• ボタンとリンク
• 入力フォーム
• 見出し
• ホバーとフォーカス

発表でもお伝えしましたが、ガイドラインそのものではなく、ガイドラインをもとにチームを支援したり、議論していくことがとても重要だと感じています。

ガイドラインで困ったことはありますか？

（小林）ガイドラインを作成すること自体はそこまで難しく感じたことはなかったです。
どちらかというと、ガイドラインから外れた実装等が見つかったとき、どんな風に交渉して修正してもらうかが難しかったです。
後から指摘するのは辛い交渉になりがちですし、修正できないことも多いので、できるだけ早いタイミングで一緒に相談しながら実装する、といった対応がおすすめです。

アクセシビリティ検証会にはデザイナーやディレクターは参加しましたか？どう巻き込んだらよいか、コツがあればききたいです。

（小林）サイボウズの場合、週 1 の検証会にはディレクターは参加していませんが、デザイナーは積極的に参加しています。
ディレクターを巻き込めた事例もいくつかあります：

• 外部の講師の方を招いて、講演をしつつ、ワークショップとして検証会も同時に行う
• 外部の障害当事者の方を招いて、ユーザビリティテストを行い、観察してもらう

社外の講師や社外の当事者の方が話すと、説得力が強まりますし
普段、勉強会等に参加しないメンバーにも参加してもらえたりしました。

ユーザのことを考えると、時間がかかったりコストがかさんだり･･･な印象があります。決定権のある人との交渉はどのように行なっていますか？

（小林）まずはコストをかけずにできるところからやってみてはどうでしょう。例えば HTML は、ほとんど工数に変化を与えずに、アクセシブルにすることができる場合があります。

コストがかかる場合は難しいですね。サイボウズでも試行錯誤していますし、うまくいかないことも少なからずありますが、例えば、決定権のある人にユーザビリティテストに参加してもらい、その直後に問題をまとめて、優先度の交渉をして、改善したことがあります。問題を体感してもらった直後に交渉をしていくのがいいと思っています。

業務が多くて、なかなかアクセシビリティの話をチームに共有できません。どうしたらよいですか？

（小林）今回紹介した、社内のグループウェアでの共有は、最初の活動として比較的やりやすいと思います。今回の CSSNite の感想や、アクセシビリティのニュースなどを、少しずつ共有してみてはどうでしょう。

輪講形式の勉強会は、最初の 1 回目～ 2 回目くらいは発案者が発表をする必要がありましたが、そのあとは、担当者を決めて持ち回りで発表していくことにしたので、忙しくても継続することができました。

アプリという言葉はアプリケーションをイメージしてややこしいと思ったのですが、そのような意見は出なかったのでしょうか？

（樋田）デスクトップ版、モバイル版に限らず、議論になるところです。今回は kintone において「アプリ」という言葉がすでにプロダクト内外問わず広く使われており、変えてしまうことの方の混乱が大きいだろうということでそのままになっています。

やわらかいデザイン、やさしい感じのデザインなどを求められたとき、コントラスト比の確保が難しいように思うことがあるのですが、難しくないですか、そんなことありませんか。どう対応されてますか。

（樋田）同じ疑問を持っているデザイナーの方も多いと思います。確かに難しいように感じてしまいますよね。
WCAG や JIS のコントラスト基準は「あらゆる要素」に対してコントラスト比をつけるよう求めているわけではないので、やわらかいテイストのデザインの中でもコントラスト比を確保することは可能だと思います（例えばロゴはコントラスト比を確保する必要がないです）
デザインの中で「すべての人に伝えなければいけない情報」が何かを整理した上で、柔らかい雰囲気を出すための要素と、ちゃんと情報を伝えなければいけない要素を分けてみることをオススメします。分けることが難しい場合は、代替の要素を置いてみるなど工夫をしてみてください（ヘッダーイメージ上のテキストはコントラストを確保できないけど、その下のテキストを読むことで理解できるようにする、など）。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、澤田 望さん（SAWADA STANDARD DESIGN）の『代替テキスト決定ツリーの使い方』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

セッション4「『代替テキスト決定ツリー』の使い方」を担当いたしました澤田です。
岡山の中年講師の話を最後まで聞いていただきまして、本当にありがとうございました！

アンケートでもたくさんの質問を寄せていただきましたが、参加者の皆さんが自分事として真剣に考えていただけた結果かなと、たいへん嬉しく受け取っています。
次回フォローアップにて、すべて回答いたしますので、少々お待ちください。

画像に対する代替テキストは、さまざまなアクセシビリティ向上施策の中でももっとも基本の「キ」でありながら、実に奥が深い（難しいという意味ではなく、様々な解釈や手段のある）トピックです。
そういう意味では、代替テキストに対する考え方にも多様性があることを感じていただけたのではないかと思います。

勉強会「リーダブルな夜」では、セッションやハンズオン終了後に参加者の感想や意見を伺う時間を設けて、なるべく登壇者からの一方通行にならないよう、お互いに知識を深められるように努めています。
今回はそれがSNSであったり、懇親会であったり、別の形でしたが様々なご意見を伺えたことは素直に嬉しかったです。

当方自身は普段、一般企業／公共系サイト等のアクセシビリティ検証作業を担当することが多いのですが、いまだに代替テキストに関する問題は多く、なかなか減らない印象を持っています。
「誰が考えるべきなのか」「本来の担当者に考えてもらうためには、組織や仕組みなど何をどう変えればいいのか」を含めて、皆さんが代替テキストと向き合い、現状より少しでも改善されることを願っております。
その際に「代替テキスト決定ツリー」がお役に立てれば本望です。

勉強会「リーダブルな夜」
URL：https://readable-na.world/

次回は7月8日（月）19:30からの予定です。
詳細が決まりましたらSNSでご案内いたします。
もし岡山にいらっしゃる予定のある方、興味がございましたら是非ご参加ください！

「情報過多なのでは」というご意見について

参加者の皆さん、本当に多くの疑問質問をいただきましてありがとうございました。「情報過多なのでは」と疑問を感じられた方から、次のようなコメントをいただきました。

• ギモンが残った。
• 「alt=""」で良いケースが多かったかと...
• alt書きすぎ問題も発生する可能性があると感じました。
• 主観を入れるのは疑問。視覚健常者が得る情報よりも上回っている。受け手に判断させるべきでは？
• 本当に必要なのかな... Twitterを見たらご意見がいろいろあって、もう少し基準があると良いなと思いました。
• 感覚的な話が多く、結局制作者側の考え方次第のような気が。特に例えで出た内容は現実的ではないと感じた。
• どこまでaltで補足するか（長すぎて伝わらないかも？）ちょっと悩みます... クライアントにも知ってほしいかも。
• alt属性は、イメージが主のコンテンツ以外ではあまり詳細を書くとかえって本文の読み下しにじゃまでは... と気になった。
• 情報量が多い画像のaltの内容には個々の考えや好みがありそうで、マークアップ以上に宗教戦争の火種になりそうだと思いました。
• 情景的なものはライティングになってくるので、コンテンツ作る人でないと本当に適切なものは書けないかな。勝手に想像してもまずいし。
• 挿絵のaltは場合によってはノイズになってしまうかと思ったので、これまであまりつけてませんでしたが、つけた場合もいいのかなと考えさせられました。
• Web小説などで写真や挿絵があった場合、テキストは入れないのも小説の世界を提供するアクセシビリティなのではと思いました。そもそもどのタイミングで写真の代替テキストが耳に入ってくるのか。

私の見解は以下の通りです。

まず、小説であれば純粋に文字から想像して楽しむための文学作品ですので、著者が望まない写真や挿絵はそもそもコンテンツとして入れるべきではないだろうと考えます。しかし、著者が納得の上でコンテンツに入れられている写真や挿絵であれば、それは何らかの効果を狙った（もしくは説明が必要だと判断した）画像だと考えられますので、その画像の内容を代替テキストに書くべきだと考えております。ただし、どこまで著者が関与したコンテンツなのかという情報は、実装担当者まで届かないケースも多いでしょうから、そのような状況で実装担当者が自らの判断で代替テキストを創作することは危険だと思います。そのような場合は代替テキストを空にするという判断もあり得るでしょう。

当方は検証する側の立場が多いですので、「代替テキストの内容が足りないのでは」「代替テキストの内容が不適切なのでは」といった指摘をすることがあります。しかし、コンテンツのオーナーや原稿制作者から「そのままで問題ない」と判断されるケースは少なくありません。セッション後半でお話ししたように「適切さ」についてはコンテンツ／原稿制作者側ではないと意図を汲んだ判断ができません。現状では実装担当者が判断しなければならない案件や体制が多いと思いますので、コンテンツ／原稿制作者側に代替テキストも考えてもらえる運用体制づくりの必要性を感じています。

今回、当方がカモメの写真を例にしたページで「小説の挿絵なら？」というタイトルをつけたことは、皆さんに疑問を抱かせる結果となってしまいましたので、説明する題材のタイトルとして良くなかったと反省しております。また、文学作品的ニュアンスのないコンテンツを例にすれば、皆さんがもっと理解しやすい題材になったかもしれません。

また、次のようなコメントもいただきました。

• 例題のブルースのaltについて。それ以外のaltも...。写説のさし絵のaltなど。altをつけることによって情報過多になり、逆に分かり難くなることがあると思いますが、その場合どうしていますか？
• 等価性を担保するのが難しいと感じた。却って悩みが深まってしまった。
• 文字数は短い方が良いと思ってましたが、長くても良いですか？

「情報過多かどうか」の判断について、当方は「画像の中から視覚的に読み取れる情報かどうか」「付随的な情報（写真に映り込んだ意味のない看板の文字など）ではないか」の二つを軸に判断をしています。「多い／少ない」ではなく「足りているか／足りていないか」での判断です。

例えば、非常に多くの代替テキストを設定した画像に対して、スクリーンリーダーの利用者は「長くて理解しにくい」という感想を抱くかもしれませんが、ビジュアルブラウザーの利用者も同じ画像から同じ（もしくは近い）情報量を得ているはずです。ただ、一次元的な音声に比べて二次元的な視覚情報の方が全体像を把握しやすいため、重要な事項を認知（取捨選択）するための負荷が少なくて済む（ので苦にならない）のではないかと考えています。代替テキスト全体の情報量は多いまま変わらなくとも、個々の文を短く切ることで音声の認知負荷を下げることはできますので、なるべく長文は避けると良いと考えます。

「リーダブルな夜のテーマ」の例については、たしかに「不安げに」の部分はあの画像からは読み取れませんでしたので、おっしゃる通り情報過多でした。申し訳ございません。

さらに、このようなコメントもいただきました。

• カモメの例など「phとかぶらない情報を」というのは同意なのですが、オス／メスの説明など、むしろ文章からもphからもわからないことをaltだけで言ってしまっていて、情報過多なのでは？と思います。

（※「ph」の部分が読み解けませんでしたので、「ph」のまま表記しています）
あのユリカモメの写真は当方が撮影したものですが、撮影した際には大きさの違う複数の個体を確認していました。その中からオスだと判断した写真を今回使用しましたが、あの写真の中だけでは確かに比較対象がないためオスだと見分けることは難しいですね。その前提がない状態で考えると、たしかに、おっしゃる通り情報過多といえるかもしれません。

その他のご質問／ご意見と回答

実例では本文と画像の例でしたが、実際には本文、画像、その画像のキャプションで構成される原稿が多いです。こういった場合でのaltに迷うことが多いです。具体的な指針はありますか？

「画像＋キャプション＋本文」も「画像＋本文」と考え方は同じで、「意味がある画像なのかどうか」「隣接するテキスト（この場合は本文＋キャプション）で説明されていない内容がないかどうか」を判断します。
代替テキストとキャプションと、どちらを充実させるかという判断になった場合は、キャプションの方を充実させましょう。見えるテキスト情報の方が、より多くの利用者に恩恵がありますので。

上流の方々に響きやすいaltを設定する意味としては何になりますか？

当方がお話ししたのは、「代替テキストの内容が適切なのかどうか、を判断できるのは上流の担当者であることが多い」という内容でした。ですので、「上流の担当者に納得してもらいやすい代替テキストを書きましょう」という意味ではありませんでした。当方の言葉が聞き取りづらかったり、スライドが理解しにくかったかもしれません。その点はお詫びいたします。

なかなか大規模サイトだと全部は難しいなとは思った。／「適切さを判断できる人」に挙げられた職域の人にどう対応してもらうか、について課題だと考えています。

（※2名の方からの質問をまとめさせていただきます）

大規模サイトの隅々まで徹底させることは、代替テキストに限らず難しいことですよね。言葉による啓蒙だけでは難しい壁があります。当方の過去の経験では、ガイドラインの整備と並行して原稿のフォーマットを作成し、代替テキスト入力欄を設けるなどし、原稿制作者に入力してもらう仕組み作りを進めていました。とはいえ、一方的に押し付けるのではなく「ここはこんな感じの説明を入れるといいですよ」的なフォローは必要ですし、原稿制作者側とコミュニケーションしながら進めることが重要ですね。

デザイナーが代替テキストを指定する必要はありますでしょうか？

コンテンツに使用されている写真／グラフ／図などは、上流の担当者ではないと判断ができないものが多いですが、ナビゲーションエリアにおけるアイコンや商品画像など、デザイナーでも判断できる画像はあります。
特にサイト全体で使用される共通画像については、実装担当者と調整しておく必要があると思います。

誰が代替テキストを書くことになるのかの話がもう少し詳しくお聞きしたかったです。

今回は「代替テキスト決定ツリーの使い方」がテーマのセッションでしたので、誰が担当するのかというテーマについてはあまり時間が割けませんでした。ただ、決定ツリーを使って様々な判断基準を知っていただいても「実際の業務では自分たちの負荷が増えるだけ」と捉えられないよう、担当の件についても少しだけ触れました。より理想的な制作フローに改善できるよう、少しでもヒントになっていれば幸いです。

辻ちゃん植ちゃんの時間にもでてきたが「アーリエリア？ウェルアリア」と聞こえた単語は何ですか？

聞き取りづらかったようで申し訳ございません。「WAI-ARIA（ウェイ・アリア）」という、アクセシブルなリンチ・インターネット・アプリケーションを制作するための（属性を追加する）仕様になります。

組織図のaltは「組織図」にしていました。さっそく見直します。

実際のコンテンツの構成を見ないと判断は難しいです。組織図を描いた画像とは別に、組織の内容がリストなどテキスト情報として十分に実装されているような場合でしたら、「組織図」で問題ない可能性もございます。ただし厳密には組織図の制作者ではないと「テキスト情報として十分」かどうかの判断はできませんので確認は必要です。もしテキストで説明しきれていない部分がある場合は、補足していただけたらと思います。

idで紐づける方法で読み上げた場合、内容が被ったりしないのでしょうか？

読み上げ時の操作方法と、スクリーンリーダーの仕様によって違いはありますが、Mac版VoiceOverなどは一つ一つのオブジェクトを指定して読む場合、aria-describedby属性に関係付けられた対象を読み上げますが、ページ全体を自動で読む場合はaria-describedby属性に関係付けられた対象を読み上げません。ですので、関係付けられてはいますが、読み上げ時に重複しているという印象は受けにくいのではないかと感じています。

「イラスト：◯◯」の「：」コロンですが、つけたほうがよいでしょうか。読み上げた時うざったいのかなと思って... 半角スペースにしてもよいものでしょうか。

うざったいかどうかの判断はできませんが... 当方は「：」の後に続く文面の中で半角スペースを使う可能性が高いと感じており、区別がつきにくいため、「：」を使うことが多いです。また、スクリーンリーダーによっては「：」などの記号を読み上げないものもありますので完璧ではないです。

アクセシビリティ的にはnullとすべき場合に、SEO的要請からはどのように対応すべきでしょうか？当該画像に特段の意味がなければ問題ないでしょうか？

意味のない装飾画像に代替テキストは設定すべきではありません。力強く空（""）にいたしましょう。

スライダーのimgが複数枚ある場合、altには何を入れますか？

（キービジュアルエリアなどのカルーセル表示する）スライダーには、複数のimg要素を使用することが多いのではないかと思いますので、それぞれのimg要素にそれぞれの代替テキストを設定します。最新の制作事情をキャッチアップできていませんので、時流に乗っていない回答でしたら申し訳ございません。もし、1つのimg要素の内容を動的に書き換えて画像を切り替えるような仕組みの場合は、alt属性値も画像に合わせて切り替える必要があります。

レスポンシブデザインでPC用スマホ用で同じ意味を持つ画像をそれぞれ別の画像で表示する場合、altはどのようにいれれば良いでしょう？（片方は空にしていたのですが、iPhoneのVoiceOverでは表示されるスマホ用しか読み上げないらしく）

回答になっているかどうか自信がありませんが、レスポンシブWebデザインで表示する画像を切り替えるのでしたら、img要素+alt属性値を複数用意するのではなく、srcset属性+sizes属性などを利用して画像を切り分ける方法ですと、alt属性値は一つで済みますのでシンプルで良いのではないかと感じています。

今回のスライドのような実際の良い例をたくさん見れるところがあれば教えてください。

業務で関わりのある企業サイトを直接ご紹介することはできませんので、なかなか難しいのですが、米国内の空港に乗り入れる日本の航空会社（米国航空アクセス法の対象）のサイトは充実している印象を持っています。

代替テキストの適・不適を判断してくれるソフトとかないでしょうか？

残念ながら「内容が適切かどうか」を判断してくれるソフトウェアは存じ上げません。自動ではありませんが、 Web Developer などの機能拡張を使って画像と代替テキストを並べて表示することができますので、「内容が適切かどうか」の判断がし易くなると思います。また、 A11yc のような、画像と代替テキストの一覧表を作成してくれるツールは効率的にチェックができて便利です。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、辻 勝利さん（コンセント）、植木 真さん（インフォアクシア）の『辻ちゃん・ウエちゃんのアクセシブル GO GO!!「スクリーンリーダーで『Backlog』を使ってみる」の巻」』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

辻 勝利（コンセント）

先日はお忙しい中、Webアクセシビリティの学校特別授業にご参加いただき、本当にありがとうございました。 これを機に、皆様と様々な分野のアクセシビリティを高めていけることを願っております。

僕たちのセッションでは、スクリーン・リーダーを使ってBacklogを操作している様子をご覧いただきましたが、もしかしたらこれをきっかけに、ご自身でもスクリーン・リーダーを触ってみようと感じてくださった方もいらっしゃるかもしれません。

このフォローアップでは、そんな方のお役に立てるよう、スクリーン・リーダーと便利な関連リンクをご紹介したいと思います。 是非アクセスしてみてください。

NVDA

無償でオープンソースのスクリーン・リーダーで、今回デモで使用いたしました。

• NVDA日本語版 ダウンロードと説明
• NVDAチートシート - GitHub
• NVDA日本語版　操作ガイド

VoiceOver

Mac OSやiOSに標準搭載されているスクリーン・リーダーです。

• 視覚のアクセシビリティ - Mac - Apple（日本）
• 視覚のアクセシビリティ - iPhone - Apple（日本）

植木 真（インフォアクシア）

「辻ちゃん・ウエちゃんのアクセシビリティPodcast」をご存知ですか？

実は、2007年9月～2011年5月まで、辻ちゃん・ウエちゃんは、ポッドキャストをやっていたのでした。その迷コンビが復活してのセッション、アンケートを拝見すると、皆さんに楽しんでいただけたようで嬉しく思っています。

「アクセシビリティ」というと、必ず話題に上がるのがスクリーンリーダー。そして、最も難易度が高いのも、スクリーンリーダーのアクセシビリティ確保ではないかと思います。

でも、必要以上に身構えることはありません。今回「Backlog」を事例として紹介した基本の「キ」を実践してみるだけで、辻ちゃんにとってもより快適に利用できるコンテンツに「高める」ことができます。

スクリーンリーダーの読み上げを初めて聞いたという方もいらっしゃいましたが、辻ちゃんが紹介しているリンクなどを参考に、まずは体験してみてください。Windowsユーザーの方には、「NVDA日本語版　操作ガイド」に沿って試してみることをオススメします。

質問と回答

Q1.ページ遷移するものが、aではなくbuttonだったり、ハンバーガーメニューのような開閉イベントを処理するものがbuttonではなくaだったり、この辺のHTML要素の使い方はあまり気にしなくて大丈夫なのでしょうか？

情報を設計するときにアプリ内でこういうパーツはボタンで、こんなパーツはリンクで、みたいにきちんと一貫性を持たせてもらえれば良いのではないかと思います。スクリーンリーダーの「NVDA」の場合、ボタンはB、リンクはKで拾い読みすることができるのですが、例えば、全てボタンだけで作られていたとしたら、もしかしたらユーザーとしては押したいボタンを探すのが少し大変かもしれません。とはいえ、サイト内やアプリ内で操作に一貫性があることがもっともありがたいこと、のような気がします。

Q2. aとbuttonの違い、使い分けがだんだん分からなくなってきました...。どのように分けるべきですか？

ページ遷移するものはリンク（a要素）、何かの機能を実行するものはボタン（button要素）にしたほうがよいと考えます。例えば、ユーザーがブラウザの新しいタブやウィンドウで開けるなら、それはリンク（a要素）だと考えればよいという考え方もあるようです。

• 参考：Links vs. Buttons in Modern Web Applications
  • 英語が苦手な方は、Google Chromeなどで日本語訳してご一読されることをオススメします。　

Q3. フォームで氏名を入力する場面で、「氏名：姓［ ］名［　　］」のような場合、labelは姓と名だけにつければいいでしょうか？

「姓」と「名」をlabel要素でマークアップするのに加えて、全体をfieldset要素で囲んで、「氏名」をlegend要素でマークアップすることで、全体をグループ化できます。

• 参考：H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する｜WCAG 2.0 達成方法集

Q4. 色を反転していた理由は、見づらいからだったのでしょうか？

スライドの色を反転していた理由は、その通りです。白の背景に黒文字よりも、黒などの濃い背景に白文字のほうが、見えやすく目に負担をかけないといわれています。海外のアクセシビリティのカンファレンスでは、スライドの背景を黒にすることが推奨されていることもあります。

また、ロービジョンなどの視覚障害がある人は、PCの画面を白黒反転していることがあります。伊原さんのセッションでも紹介されていた動画を最初からご覧いただくと参考になるかもしれません。

• 参考：視覚障害者（弱視）のウェブページ利用方法｜総務省動画チャンネル

Q5. 辻さんはセッションの内容を覚えて喋っていたのでしょうか？　点字メモ等があるのか？

点字ディスプレイを演台の上に置いて、点字を指でなぞりながら、スライドの内容にあわせてお話をしていました。ディスプレイはBluetoothで演題下に置いたPCと接続されており、話している間にもTwitterでメンションされた内容も表示されておりました。ちなみに、辻ちゃんが使用しているのは、Focus 40 Blue V 点字ディスプレイという点字ディスプレイです。もちろん、ウエちゃんと入念な打合せとリハーサルを繰り返して、本番に臨みました。

Q6. CSS無効化はどれぐらい使うものなのでしょう？

普段はほとんど使うことはないのですが、想定している操作が行えなくて困ったときなど、ふと思い出してCSSを無効化して試すことがあります。ただ、画面上から隠してあるものまで（エラーメッセージとか）読み上げてしまうので使いづらいことも多いのですが…。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、松森 果林さん（聞こえる世界と聞こえない世界をつなぐユニバーサルデザインアドバイザー）の『誰もが隣にいる人と一緒に楽しむために』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画（非公開）

フォローアップ

参加者の皆さま、こんにちは。松森果林です。

拙い話を最後まで楽しんでいただき、誠にありがとうございました。普段あまり意識することのない、聞こえない世界や聞こえにくい世界について、少しでも興味を持っていただけたら嬉しく思います。

そして、ひとつでも多くの動画コンテンツに字幕がつくといいなぁと願っています。字幕付きのとっておきの動画ができたら、教えてくださいね！楽しみにしています。

今回の授業をきっかけに、お仕事や日常の生活の中で「こんなとき聞こえない人だったらどうするんだろう？」「見えない人だったら？」「車いす使用者だったら？」そんなふうに想像する習慣をつけていくと、世界がちがって見えてくると思います。

著書

もっと知りたい！という方は拙著を手に取っていただけると嬉しいです。

• 「音のない世界と音のある世界をつなぐ～ユニバーサルデザインで世界を変えたい！」（岩波ジュニア、2014）：全国の入学試験問題や、学習塾の問題に採用され、中高生から中高年まで楽しめる一冊。
• 「誰でも手話リンガル」（明治書院、2010）：基本手話から上段手話まで300語以上満載の楽しく覚える雑食系手話の本。
• kindle「処女エッセイ「星の音が聴こえますか」（筑摩書房、2003）：刊行後数年で品切れ重版未定となった一冊、2017年電子書籍化しました。

ダイアログ・イン・サイレンス

また、「伝える」ことを生業としている皆さんにおススメなのが「ダイアログ・イン・サイレンス」というエンターテインメントです。

音を遮断し、言葉を使用せず、90分間言葉の壁を超えて対話を楽しむエンターテインメントです。日本では2017年初開催にあたり、私は企画監修に関わりました。今年で三年目となり、参加者からは「この体験をすると世界中どこでもだれとでもコミュニケーションがとれる気がする」などの感想があり、企業研修としても活用いただいております。チケットがあっという間になくなってしまうので、興味のある方はぜひお早めにどうぞ！

• 期間：2019年8月9日（金）～18日（日）10日間
• 会場：LUMINEゼロ NEWoMan新宿 5階
• 時間：11時～19時20分スタートの回まで（1日18日回予定）
• 参加費（事前予約制）：大人4,500円、大学生3,000円、小・中・高校生2,000円

詳しくは、ダイアログ・イン・サイレンス公式HPをご覧ください。

質問への回答

Q1. 音楽やカラオケはどのように楽しむのですか？

聴覚障害者でも音楽が好きな人、関心を示さない人など様々ですが、楽しみ方は人それぞれです。

音楽は、ヘッドホンや車の中で最大音量にして音楽を楽しむ人から、手話歌や、手話パフォーマー、ダンサーなどもおり、ろう者の太鼓グループなども各地にあります。楽しむ手段も多様で、音を振動に変えるデバイスは、ヘアピン型、ボール型、クッション型、ジャケット型、手に握るタイプなどもあります。

カラオケの楽しみ方は、歌詞が表示され色が変わることから歌うタイミングが分かりやすいですよね。ガッツリ歌う人から、手話で歌う人、手話で表現する人など様々です。聞こえない人同士の場合は、音程やリズムなど関係なく超音痴でも堂々と歌えたりします（笑）

私個人としては、音楽は大好きで昔の歌（昭和の…）なら今でも覚えています。

ライブは、歌っている人の表情、声を出すときの呼吸や動き、そして空気を伝わる響き、お客さんの拍手など臨場感を感じられるので、来日公演なども良く行きます。そしてその時には、必ず前の席を確保するようにします。見えることが大事なんです！

Q2. 手話は世界共通ですか？

よく聞かれる質問です。

手話は言語です。音声言語に英語やフランス語、中国語などがあるのと同様に、手話もちがいます。同じ英語圏でも、アメリカ手話とイギリス手話では大きな違いがあります。

また、国内でも方言があるのと同様に、手話も地域による違いがあります。国際会議や多様な国の聞こえない人が集まる場では「国際手話」が使われます。

手話は、国の文化や歴史を反映した表現も多くあり、例えば「食べる」という表現でもアメリカではパンを食べる表現、日本ではお箸をもって食べる表現など視覚的にイメージしやすい豊かな表現力を持った言語なのです。

Q3. 日本語と手話は違うの？

手話は音声日本語とは異なる独自の文法をもった言語です。

Q4. Web動画に字幕があると視聴率があがる、最後まで見てもらえる根拠は？

• Discovery Digital Networksの事例：公開日からの2週間で比較すると閲覧数が13.48%増というデータが示されています。
• Facebookの事例：閲覧時間が12％増というデータと、A&W Canadaでも閲覧時間が25％増えたという事例も紹介されています。
• TBS NEWSの事例：伊原さんのセッションでも紹介されていた事例です。

Q5. ジェスチャー交じりで話す人のジェスチャーはノイズにならない？

面白い質問ですね！

程度や人にもよりますが、ジェスチャーと手話は別物なので、特に気にならないのではと思います。意味もなく手を動かすことはあまりないと思うので、ジェスチャーがあったほうが会話の助けになることも多くあります。

Q6. 美容で気を付けていることは？

笑うこと、睡眠時間の確保、毎日甘くない甘酒を作って飲むこと。

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、伊原 力也さん（freee）の『あなたの価値を高めるアクセシビリティ』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

ご参加いただきありがとうございました！またアンケートへのご回答もありがとうございます。すべて拝読しました。

私にとって、調べ物をするうえでGoogle翻訳は欠かせません。横断検索サイトを使うことも多々あります。海外の動画だとYouTubeの字幕を活用します。Kindleはスピーチ機能で読んでいます。いつもイベント申し込みフォームの入力はキーボードで進めますし、このフォローアップはmarkdownで書いています。

みなさまが感想欄に書いてくださったとおり、Webは、その存在そのものが圧倒的にアクセシブルになるように作られたメディアです。そのプラットフォーム上で、適切なUIとしてのテキストを準備してマークアップするだけで、分母へのアプローチとなるだけでなく、ときに想像を超えるほどにコンテンツの価値を増幅させることに繋がります。

つまりWebアクセシビリティとは「Webの仕組みに則り、Webの力を活かす」ことであると私は考えています。Webを作っている私たちがその取り組みを少しずつでもはじめることで、利用者が増え、それが伝搬することでWebの価値は高まり、最終的には自分たちの周りや、ユーザーとしての自分に還ってきます。

冒頭で挙げた私の話は、その一例です。誰かがアクセシブルにしてくれたから、私はアクセスできています。そしてみなさんが今読んでいるこのメッセージもまた、そういったWebの一部なのです。このフォローアップページはやがて、アクセシビリティについて調べているであろう多くの人の目に触れるようになるはずです。それが届くのは、このページがアクセシブルなWebに在り、マークアップされているからです。

このつながりを感じて、これからの取組みに活かして頂ければ幸いです。

なお、7月20日（土）にはJapan Accessibility Conference Vol.2が渋谷アベマタワーズで開催されます。今回も300名規模のお祭りとなる予定です。みなさまのご参加をお待ちしております！

質問と回答

アクセシビリティに関する情報収集はどのように行っていますか？

主にTwitterです。Webアクセシビリティ関連の資料まとめ というドキュメントがあり、ここで出てくるような資料を作っている方々をTwitterでフォローしているため、私のTwitterタイムラインには割とアクセシビリティ情報が流れてくるようになっています。

あとは、このドキュメントの冒頭にも載っているA11YJ Slack Teamに参加してみると、イベントや書籍の情報などがキャッチアップできます。

障害当事者が身近にいないこともあり、どういう使い方をしているか、どこが困るところかなどを知ることができるサイト・動画があれば教えてください。

パソコン操作動画集というページがあり、ここにいくつかYouTubeから抜粋された動画が紹介されています。この他にもYouTubeで、たとえば「視覚障害 iphone」のような形で障害のタイプ＋デバイスで検索したり、「筋電スイッチ」「視線入力」などの支援技術の名前で検索してみたりすると、いろいろ見ることができます。

支援技術の種類については、東京都障害者IT地域支援センターの展示支援機器（ハード）一覧が参考になります（実際に展示も行っています）。

読む習慣のない、または読むことが苦手なユーザーに対してはどう配慮が必要ですかね & リッチ化するコンテンツとアクセシビリティとの両立の具体例があればご教示頂ければ

いくつかのパターンに分かれると考えられます。まず下記2パターンの場合は、やはりテキストをマークアップして提供することが最善手でしょう。

• 文章を読むことは可能だが提示されたフォントでは読みにくいような場合は、ブラウザ側でフォントを置き換えることができます。
• 目で追うのは苦手だが音声なら読めるというケースであれば、スピーチ機能などを使って読み上げることで問題を解消できます。

しかし、このどちらでもなく、テキストや文章という表現形態自体が苦手なユーザーもいます（最近の写真や動画をメインとしたSNSの流行は、その兆候を感じさせます）。ここへの回答は、ある題材を多面的なメディアで伝えるということになるかと思います。

たとえば今回のイベントでは、セミナー動画、スライドPDF、UDトークによる発話書き起こしが提供されます。セッション内で紹介したログミーというサービスも、動画に対して書き起こしを提供しています。このようにいくつかの方向から情報が提供されていれば、自分の状況にあったメディアを選択することができます。

こういった提供形態をなるべくかんたんに用意するには、UDトークとYouTube Liveを組み合わせるのがよさそうです。具体的な手順は以下です。

1. YouTube Liveで動画を撮影します。
2. UDトークで発話をリアルタイムで字幕化します（具体的な方法）。クオリティを担保するため、複数人でその場で修正を行うのがよいでしょう。
3. UDトークから取得した発話ログに、発言者や環境音などの情報を追記します。
4. YouTubeの動画に対し、UDトークの発話ログを「文字起こしと自動同期」という形でアップロードします。

私の同僚の中根さんによる、実際に上記に近い手順を試してみたYouTube動画がありますのでご紹介します。参考になれば幸いです。

• 職場のダイバーシティーとアクセシビリティー技術トレンド CSUN2019で見たこと聞いたことを肴に雑談する会

売りにつながるという部分がどのサイトでもそうなのだろうかと感じています。ターゲットによっては効果が薄いのではないかと思います。

アクセシビリティとターゲットと効果についてはかなり慎重な議論が必要だと考えています。

まず、どういったコンテンツをどう活用するかは受け手に委ねられています。よく言われる例として「全盲の人がカメラの情報を欲しがるのか」という話があります。これは、以下の観点で「欲しい人にとっては欲しいに決まっている」という話になります。

• 記録用や、撮ったあとに誰かに確認してもらう前提で、ふつうに使う
• もともとカメラが好きで、視力が弱まったあとでもガジェットとして興味がある
• その企業や関連企業に投資していて、新製品の動向が気になる
• 誰かに頼まれてスペックを調べている
• 贈り物として探している

松森さんのお話にもあったように、私たちには一緒のものを見て楽しみたいという前提があります。そうであればターゲットにしていない人を排除するという考え方はデメリットになるはずですし、企業イメージという観点からも望ましくない振る舞いです。コンテンツが狙っているターゲットと、さまざまな閲覧状況への対応というのは分離し、なるべく多くの状況でアクセシブルに作るよう取り組むのが原則ではあると考えています。

ただ、実際の効果の話とは別に、やりやすい案件とそうでない案件があるのは事実です。現時点では、発注側がアクセシブルにする必要があると考えるものと、そうでないものがあるということです。ユーザーにとっての緊急度や重要度の高い情報、客観的一次情報に近いもののほうが対応が必要だという判断になりやすく、いっぽうプロモーション系は優先度が落ちる、ということが多いでしょう。

ここは、その状況を上手く活かすほうに持っていったほうが、最終的にアクセシブルになるサイトを増やせると私は考えています。そのあたりの考えはツイートにまとめました。

たとえば今回、CM字幕を提供している会社の一覧を見て、私は少なからず好感を持ちましたし、BacklogやKintoneは良い会社が作っている製品であるというイメージも持ちました。現時点では多くの会社がまだ手をつけられていない状況ですから、やはりできるだけ外に言っていくことが相対的に企業価値を上げることに繋がると感じた次第です。効果は作り出すことができます。そういった視点での価値の増大にも、ぜひ目を向けてみていただければ嬉しく思います。

なお、私はこの「アクセシビリティ vs ターゲット」という構造を、最終的には破壊したいと考えています。CMだから字幕がないとか、プロモーション系は後回しとかは、本来はおかしな話です。アクセシビリティを必要とする人がターゲットとして認知されるようになることでこの状況は変わるという仮説のもと、「アクセシビリティで一発当て太郎」としてfreee社にて日々可能性を模索しています。ご興味があるかたはツイートをご覧ください。

音声ブラウザのバージョンアップは誰にお願いすればよいのでしょうか？

ここでのバージョンアップというのは、以下の3通りの解釈ができそうです。

• ユーザーがより新しいスクリーンリーダーにバージョンアップすること
• 既存のスクリーンリーダーの機能がより高機能になるようにベンダーが改修すること
• ユーザーがより高機能なスクリーンリーダーに乗り換えること

いずれにしても、これはユーザーとコンテンツ提供者とベンダーが互いに発展することが必要だと考えられます。バージョンアップしないのは、現状で満足しているから……というとポジティブですが、以下のような構造により、実際は妥協せざるを得ないケースが多いからだと推定しています。

1. アクセシブルでない、または使いにくいコンテンツがWebに蔓延している。またそれらのWebサイトの使い方は一貫していない
2. ゆえにユーザーからするとWebを使うことはモグラ叩きのような探索となってしまい、高度な使い方に取り組むのは合理的でない行動となってしまう
3. 結果としてタブキー連打＋決定キーといった、どのサイトでも通用するであろう使い方だけを頼りに、それで使い物になるサイトだけを利用する傾向が強まる
4. この使い方においては高度な機能が必要ないため、スクリーンリーダーをバージョンアップするモチベーションや、スクリーンリーダーの機能を高機能にする理由が出現しない

この状況を改善するには、上記を反転させる必要があります。

1. ユーザーが、使いたいと思うコンテンツの提供者に対してアクセシブルにすることを求める
2. コンテンツがアクセシブルになるよう提供者が改修する
3. アクセシブルになったコンテンツを利用するための閲覧技術をユーザーが身につける
4. その閲覧技術を発揮できるようなスクリーンリーダーを選定する
5. より高度な使い方に対応できるようスクリーンリーダーベンダーが製品を改善する

論理的にはこうなるものの、実際のところとして、妥協で済んでいる状態から行動を起こそうとするには非常に大きなパワーが必要になります。ただし前例がないわけではありません。私たちはガラケーからスマートフォンに歩を進めました。それは新しい可能性を手に入れたいという気持ちが、現状維持の気持ちに打ち勝ったからです。私はこれをヒントにして、これはぜひ使いたいと思うようなものを皆が作り、かつそれをアクセシブルにしていくことができれば、状況を変えることもできるかもしれない、と考えています。

2019年10月19日（土）大崎ブライトコアホールでCSS Nite LP64「Coder's High 2019」を開催し、340名の方にご参加いただきました。

CSS Niteでは毎年秋にコーディング特集のLPを開催していますが、今回は次の9セッションで構成しました。

• ウェブデザイン・サイト制作におけるプロジェクト・タスク管理ワークフロー／阿部 文人（necco）、今 聖菜（necco）
• ウェブ開発のいまと、コーディングしない制作手法／阿部 正幸（モチヤ）
• ジンドゥークリエイター カスタマイズ自由自在／神森 勉（KDDIウェブコミュニケーションズ）
• デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作／鹿野 壮（ICS）、松下 絵梨（ツキアカリ）
• これだけは押さえておきたい Vue.js の基礎知識／長谷川 広武（HAMWORKS）
• 高速なウェブのためのモダンアーキテクチャ JAMstack／中村 享介（ピクセルグリッド ）
• Nuxt.jsがもたらすWordPressの新たな可能性／カイト（キテレツ）
• プロジェクトをうまく進めるために、コーダーが進化するためのテクニック／大串 肇（mgn）
• コーダーとしての価値を高めるウェブ解析活用術／井水 大輔（エスファクトリー）

当日のツイートはTogetterにまとめました。

• CSS Nite LP64「Coder's High 2019」 - Togetter

当日の様子は、Facebookアルバムにて公開しています。

会場参加、ビデオ参加の方には、五月雨式にスライド、補足、リンク集、ビデオなどを「フォローアップ」として提供しはじめています。フォローアップページへのID/パスワードはフォローメールに記載しています。

一般公開は90日後を予定。その前に見たい方は、ビデオ参加をお申し込みください。

2019年4月23日（火）にTKPガーデンシティPREMIUM神保町 で開催したCSS Niteビギナーズ「基礎からのウェブ解析」のフォローアップを公開します。

• フォローアップ（1）井水 大輔さん
• フォローアップ（2）牧野 佐智子さん
• フォローアップ（3）吉田 哲也さん

2019年4月23日（火）にTKPガーデンシティPREMIUM神保町 で開催したCSS Niteビギナーズ「基礎からのウェブ解析」のフォローアップとして、吉田 哲也さんの『よくある質問から考えるウェブ解析を使いこなすヒント』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

アンケートを拝見していると、GDPRやプライバシーポリシー、Campaign URL Builderなど、知らなかった方も多かったようなので、お話できてよかったです。

今回は既存クライアントの質問項目を元に解説しましたが、ネットアンケートなどで悩みどころを募集するのも面白いかと思っています。

よく見る指標の例を知りたいという声も伺ったので、具体的な事例を上げて、業種やサイトのタイプ別に、よく見る指標を解説するセクションも追加したほうがイメージが湧きやすくなりそうなので、今後の課題とさせていただきます。

参考URL

• Google アナリティクス利用規約
  https://www.google.com/intl/ja/analytics/terms/jp.html

• WordPress向けGDPR対応プラグインの脆弱性
  http://www.security-next.com/100144/2

• クロスドメイン トラッキングを設定する（analytics.js）
  https://support.google.com/analytics/answer/1034342?hl=ja

• タグマネージャでクロスドメイントラッキングの設定
  https://support.google.com/tagmanager/answer/6164469?hl=ja

• Campaign URL Builder
  https://ga-dev-tools.appspot.com/campaign-url-builder/

• Google アナリティクスタグ設置検証記事
  http://ummmummm.hatenablog.com/entry/2016/05/14/Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%A7%E8%A8%88%E6%B8%AC%E3%82%BF%E3%82%B0%E3%82%92%E8%A4%87%E6%95%B0%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%A8%E3%83%80%E3%83%96

補足

Googleアナリティクスでクロスドメイントラッキングを設定した場合、レポートビューの設定の変更も必要になります。

設定方法は、以下のページの

「レポートビューを設定してフィルタを追加する」

の項目をご参照ください。
https://support.google.com/analytics/answer/1034342?hl=ja

Q＆A

SNSの効果測定としてCampaign URL Builderの利用をご紹介いただきましたが、クライアント側が頻繁にSNSを更新する場合の施策などはありますか？

弊社でもクライアント様にCampaign URL BuilderでURLを作成してから投稿していただいておりますが、各要素のルール付けをしっかり行うことが必要です。
1日に何回か投稿する場合は、Campaign Nameに日時だけでなく時間も入れる、などの工夫が必要になります。

フォームが別ドメインかつデバイスごとにURLが異なる場合でも、クロスドメイントラッキングを活用出来るのでしょうか？現状は、あえて個別に計測しています。

複数のドメインにまたがる解析も、クロスドメイントラッキングで行うことは可能です。コンバージョンの測定については、各フォーム、ドメインごとに計測されるので、各デバイスごとのカウントできます。

Googleアナリティクスでクロスドメイントラッキングを設定した際には、目標URLの設定方法が通常と変わります。

通常は

/form/send.html
のようにスラッシュで開始して目標URLを設定しますが、

クロスドメイントラッキングの場合、正規表現を利用します。

^www\.a\.com/form/send.html
というような形式になります。

正規表現については以下のヘルプをご参照ください。

https://support.google.com/analytics/answer/1034324?hl=ja

お問い合わせフォームもないサイトの場合、何をコンバージョンに設定しますか？

コンバージョンという言葉とは少し異なりますが、目標値ということであれば、ページビュー、リピーターを増やす、回遊数を上げるなどの、目標設定はできます。
ただ、サイトの目的が分からないと、何を目標にするか、判断が難しいですね。

電話番号をクリックするイベント設定は電話をクリックした数ですか？クリックしてやめてものもカウントされますか？

今回紹介した方法は、クリック回数のカウントなので、クリックして掛けるのを止めた数も含まれてしまいます。

そのため、より正確に計測するには専用の電話番号を用意して、アナログでカウントするような対応が必要になります。

2019年4月23日（火）にTKPガーデンシティPREMIUM神保町 で開催したCSS Niteビギナーズ「基礎からのウェブ解析」のフォローアップとして、牧野 佐智子さんの『Googleの3ツールを使って、サイト改善、事業の成果につなげよう』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

セッション2を担当した牧野佐智子（サチコ）です。
ご参加いただいた皆様、ありがとうございました。
今回のセッションでは、Googleの3ツールで、ユーザーのことを一番理解しやすい「検索キーワード」を、
ご紹介させていただきました。

アクセス解析=Googleアナリティクスというイメージが強いですが、
これを機に、Search Consoleや、マイビジネスもぜひご活用いただければと思います。

Google検索エンジンは、これからもっとSERPS上でユーザーの課題を解決する方向で進んで行く傾向にあります。
まずは、自社やクライアントのマイビジネスがどうなっているかをご確認いただき、情報や説明文を追加してみて、効果を検証してみてください。

質問）

Search ConsoleのキーワードとGA内のSearch Consoleキーワードは同一なのか、どちらを見たほうがいいのか？

　見えるキーワードは同一です。
セグメントや比較て、キーワードや数値を確認したい場合は、Search Console本体側見るのが、おすすめです。
CSV形式でエクスポートして、並び替えや色付けしてキーワードをグループ化して、ユーザーの傾向を検討してみてください。

質問）
Googleマイビジネスは、ネットショップのみの運営で実店舗がない人でも登録したほうがよいのでしょうか？

　ネットショップの状況によりで、運営会社や事務所を登録するのはありかと思います。
個人のネットショップで、住所を明かしたくない場合はなどは、登録しないようがよいです。
（マイビジネス登録時に住所が必要です。）

質問）
住所は掲載したくないクライアントさんの場合どうしたらよいか？
ポータルサイトとかのGoogleマイビジネスは使えませんよね？

　住所を入力しないと登録できず、登録した住所はGoogleマップに掲載されてしまうため、登録できません。
原則、営業時間内に顧客と対応できるサービスでないとGoogleマイビジネスは使えないです。
そのため、ポータルサイトはマイビジネスに登録が難しいです。

質問）
Googleマイビジネスで悪いコメントを入れられてしまった場合の対処方法はありますか？

　Googleのポリシーに違反するクチコミであれば、削除依頼ができますが、削除するかどうかの判断はGoogle側です。

　お客様が、実際に来店して感じれたことを書かれていると思うので、書かれたことに対する真摯な対応をするのが、おすすめです。
クチコミに対する対応方法も事前に社内で決めておくこととよいと思います。

　禁止及び制限されているコンテンツ
https://support.google.com/contributionpolicy/answer/7400114

　不適切なクチコミを報告する
https://support.google.com/business/answer/4596773?hl=ja

参考URL）

• 「Search Analytics for Sheets」アドオンを使えばサチコのデータを一括で抜き出せる
  https://web-generalist.com/search-console-data-suction/
• Google Search Consoleヘルプ
  https://support.google.com/webmasters/community?hl=ja
  
• Googleマイビジネスヘルプ
  https://support.google.com/business/?hl=ja#topic=4539639
• すべてのGoogleマイビジネスポリシー
  https://support.google.com/business/answer/7667250?hl=ja
• Googleナレッジパネル完全攻略！ 究極の「虎の巻」【前編】 〜標準24項目
  https://webtan.impress.co.jp/e/2019/03/11/32023
• Googleナレッジパネル完全攻略！ 究極の「虎の巻」【後編】〜特別11項目＋チェックリスト13項目
  https://webtan.impress.co.jp/e/2019/03/18/32029

2019年4月23日（火）にTKPガーデンシティPREMIUM神保町 で開催したCSS Niteビギナーズ「基礎からのウェブ解析」のフォローアップとして、井水 大輔さんの『ビジネスの成果につなげるためのウェブ解析』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

CSS Nite ビギナーズ「基礎からのウェブ解析」にご参加いただきありがとうございました。

今回はウェブ解析のプロセスや分析のポイントについてお話しました。 セミナー内では、「KPI立て方」や「仮説を立てる」といったところはサラッと流して進みましたが、実際皆さんが行う際にはもう少しじっくりやることで気づきが多く生まれるはずです。ぜひ実践してみてください。

アンケートを拝見した中でも印象に残っているキーワードとして「データを先に見ない」、「仮説検証」や「KPI設計が大事」と書いてくれている方が多かったですが、なぜか？ということをちゃんと理解いただけたようでホッとしました。

これらを通して一番伝えたかったことは、データを活用することは手段であって目的ではないということです。
あくまでウェブ解析の目的はビジネスで成果をあげることです。
データにとらわれすぎず、目標（KPI）を立ててそれを達成するためにデータを活用してください。

いただいた質問に関して

社団法人などアイテム販売ではないサイトの場合のKPIの設定で悩んでます。何か良い案などありますでしょうか？

サイト内で販売をしていなくとも、社団法人としてのミッションがあるはずです。
その目標を軸に「サイトの役割」はこうだな、と定めてそれを達成したかを判断できる指標を設けると良いでしょう。
具体的な内容がわらからないので少し曖昧になりますが、
少なくとも、こういった人（ターゲット）に、こうなってほしい！という想いあるかと思います。その場合サイトのこのページの内容とこのページの内容を読んでくれた人は「〇〇は理解いただけた。」「〇〇の行動に移す可能性がる」と判断し、それらのページを見た人の数をKPIにするというのも良いでしょう。

仮説を立てる時点でペルソナやカスタマージャーニーも意識すべきでしょうか？

まさに仮説を立てる際にペルソナができているとより確度の高い仮説が考えられますし、カスターマージャーにも仮説は大事です。
しかし、こちらに関しては卵が先か鶏が先かに似ています。

分析結果より仮説を立てカスタマージャーニーを作成するのか、カスタマージャーニーを活用しつつ分析を深掘りしていくのかというどちらが正解とはいいづらいですが、どちらも課題発見や施策立案の助けになるものなのでうまく合わせて使ってください。

クライアントさんがデータ（訪問数や電話数や売り上げなど）を出してくれない場合、どうしたら良いでしょうか？

必要なデータを共有してくれないのであれば、クライアントがあなたに期待しているポイントがずれている可能性があります。
その場合い「何を期待していますか？」と聞いてみて下さい。
仮に売上結果の分析を希望している方であれば売上のデータを提供してくれないということはないはずです。

また漠然とサイトの分析をしてほしいという依頼の場合、信頼性の構築も必要なので基本的なことですがサイトの何を分析してほしいのか？「なぜ」分析してほしいのか？というところから経営的な悩みを引き出して下さい。

クライアントがコンサルタントやディレクターに対して「この人は本当にうちの会社のことを真剣に考えてくれているな」と思ってもらえれば必要なデータを提供してくれるでしょう。
＊必要なデータと理解してもらうためにロジックの説明もできるようにしておくとベストです。

セッション内で紹介した本やサイトのリンク

• 『Googleデータスタジオによるレポート作成の教科書』
• 『販売の科学』
• Grow with Google
• アナリティクスアカデミー

さいごに

今回の内容が1つでもみなさまの「アクション」の後押しになれば嬉しく思います。
一緒にウェブ業界を盛り上げましょう！

下記は私のソーシャルアカウントです、お気軽にフォローいただけると幸いです。

• Facebook : https://www.facebook.com/daisuke.imizu
• Twitter : https://twitter.com/ImiDai

2019年5月18日（土）、大崎ブライトコアホールでCSS Nite LP61「これからのフォントとウェブでの組版を考える日」を開催します。

フォントや組版をテーマにしたセミナーでイベントです。

• イベント詳細

筑紫書体のこれまで、と、これから／藤田 重信さん（フォントワークス）

昨年（2018年）8月にリリースした筑紫ヴィンテージ明朝、そして、来年にリリースを控えている筑紫アンティーク丸ゴシック等が、どのような背景や経緯で書体制作されてきたかをお話します。また、筑紫明朝の制作に着手した1999年当時の秘話や苦労話、その後、豊富なバリエーション展開を進めてきた筑紫書体シリーズの変遷や曲線美のこだわりも解説します。

さらに、Futuraに合うゴシックが欲しいとの声に応えて開発中の筑紫AMゴシック、筑紫楷書？ 筑紫宋朝？などの筑紫書体群も試作中。今後、果たして、どこまで広がっていくのだろうか。など、開発中の裏話も紹介します。

「疏」の部分的なデザイン処理。3番を採用します。
一定の滑らかさを保持するために。
全てを理屈通りにしてもデザインになりません。
（筑紫アンティーク丸ゴシックB） pic.twitter.com/OFjdDsG3xo

— 藤田重信 (@Tsukushi55) 2019年5月9日

最後にフーツラとの整合性を確認する。
近づいた和文ゴシックにはなっているがまだ生っぽい所があるよな……
筑紫AMゴシックB pic.twitter.com/5B1PwAsOKG

— 藤田重信 (@Tsukushi55) 2017年12月22日

クロストーク：書体デザイナー

各ベンダーの新進気鋭の書体デザイナー（4名）をお招きし、書体開発にまつわる裏側について伺います。モデレーターは「フォントおじさん」こと関口 浩之さんが担当します。 - 木龍 歩美さん（砧書体制作所） - 山田 和寛さん（nipponia） - 吉田 大成さん（アドビ） - 越智 亜紀子さん（フォントワークス）

フォントおじさんから

「フォントおじさん」でお馴染み、関口 浩之さん（ソフトバンク・テクノロジー）からコメントいただきました。

身近な存在だけど、日頃意識していないフォントや書体。コミニュケーションの主人公であるフォントを愛でて「フォントを深く学ぶ1日」にしましょう。

直接聴く機会が少ない書体デザイナーのお話をじっくり聴くと、みなさんのクリエイティビティに化学反応が起こります。そして、Webビジネスの戦闘力がアップします。デザイナーに限らず、ディレクターやエンジニアの方々にもおすすめの内容です。

コード体系化されたフォントが誕生しなかったら、情報革命やインターネット革命は起こり得ませんでした。そして、フォントや文字は人類の歴史であり、文化です。みんなで楽しく、フォントを語らいましょう。

私関口こと、フォントおじさんが基調講演させていただきます。松田 直樹さんのWebフォント講座、鷹野 雅弘さんのWeb組版講座、新進気鋭の書体デザイナーのクロストーク（山田 和寛さん、木龍 歩美さん、越智亜紀子さん、吉田 大成さん）、筑紫書体の藤田重信さんの90分オンステージのプログラム構成を予定してます。

フォントワークス藤田重信さんは、3年前に「NHK プロフェッショナル 仕事の流儀」にも出演されました。 今までのフォントの既成概念を変えちゃったかもしれない筑紫書体がなぜ誕生したのか、なぜ、過去に存在してなった新機軸の書体制作に藤田さんはチャレンジし続けているのか、アンカーポイントの少ないフォントはどのように作られるのか、これから筑紫書体はどう進化していくのか、美しい曲線のルーツは藤田さんの少年時代にさかのぼる？とか、90分語っていただきます。

藤田さんの話を聞くと、幸せな気分になります。書体やフォントが身近に感じるようになり、日頃のビジネスヒントになることもたくさん出てきます。フォント業界の異端児（←褒め言葉です）である藤田さんのお話、フォント初心者からDTPerやフォントマニアの方まで、皆さんにぜひ聞いてほしいです。

今回のイベントはセミナーだけではありません。Webフォントプラットフォーマー3社とフォントファウンダリー5社、合計8社（本日時点）が、受付エリアにてブース展示を行います。日頃、接することの少ないフォントメーカーの方々と意見交換したり、要望を伝えることもできる貴重なコーナーです。そして、たくさんの書体見本帳も入手できますよ。

そして、そして、フォントおじさんトートバッグの新作も全員にプレゼントします。

ぶっちゃけ、これだけフォントメーカーがブース出展して、書体デザイナーが5名も登壇するWeb系イベントは過去には無かったよね。また、Webフォントサービスを提供する複数の会社が同じスペースに肩を並べることも無かったよね。フォントメーカーの垣根を超えて、参加者と出展社、登壇者が一緒に楽しく学ぶ一日にしましょう。

こんなにフォントメーカーやWebフォントベンダーが集まることは珍しいかも。各メーカーさんも直接、使い手の声を聞きたいって言ってます。フォントメーカーと直接お話しする、そんな楽しみ方もある「CSS Nite LP61」にぜひ参加してねー！#cssnite #フォントおじさん https://t.co/J9sCLe18g8

— 関口浩之 (@HiroGateJP) 2019年4月17日

• Webフォントってなに？ 遅くないの？ SEOにはどうなの？ 「フォントおじさん」こと関口さんに聞いた。 | インタビュー | Web担当者Forum

ブース出展、見本帳の配布

• REALTYPE（リアルタイプ）
• DynaFont Online（ダイナコムウェア）
• FONTPLUS（ソフトバンク・テクノロジー）
• フォントワークス
• イワタ
• モトヤ
• タイププロジェクト
• スキルインフォメーションズ
• SCREEN グラフィックソリューションズ

フォントワークスの書体見本帖2019が完成しました！

もらって嬉しい見て楽しい、毎ページが展示のように鮮やかなフォントのポートフォリオになってます。

素敵なデザインは、LABORATORIESさん @katokensaku

コデックス装の製本で、開いた状態をキープできるのでとても便利です。 pic.twitter.com/BXSewH3kjX

— Fontworks / フォントワークス (@Fontworks_Inc) 2019年4月11日

見本帳の配布（全員）

• 砧書体制作所
• モノタイプMonotype
• 凸版印刷
• モリサワ
• 秀英体・大日本印刷（DNP）

2019年4月9日（火）、TKPガーデンシティPREMIUM神保町 プレミアムガーデンでCSS Nite LP60「ユーザーの感情に寄り添い、検索エンジンからも評価される『ドリル・ライティング』実践講座」を開催し、117名の方にご参加いただきました。

CSS Nite LPは、複数セッションで構成する「オムニバス」スタイルを基本としていますが、今回は、松尾 茂起さん（ウェブライダー）のソロ。ワークショップをまじえて4時間ですが、「非常に濃くて、あっといういう間だった」という反響を多くいただきました。

CSS Niteは、イベント終了後、90日後を目安に一般公開していますが、今回はワークショップ主体ということもあり、一般公開は行いません。

ご興味ある方は、「ウェブライダー式SEOライティング 超集中講座2019 動画版」をご検討ください。

2019年3月19日、LIFULL セミナールームでCSS Nite After Dark 2019 「現場で活用できるマイクロインタラクションの作り方」を開催し、45名の方にご参加いただきました。

池田 泰延さん（ICS）を講師に、2時間弱、マイクロインタラクションの定義から使いどころ、実装まで、サンプルや参考リンク盛りだくさんのセッションでした。

2019年2月22日に大阪で開催されたCSS Nite in Osaka, vol.49の再演版として開催したもので、会場を変更しての開催となりました。会場提供をくださったLIFULLさん、ありがとうございました！

ビデオ参加

大阪では4月に再演予定ですが、都内版の再演予定はありません。その代わりにビデオ参加を用意しましたので、ご興味ある方はお申し込みください。

2018年8月11日（土）UMEDAI 大阪梅田 会議室で開催したCSS Nite in Osaka, vol.45「All About XD」 w/YATのblog のフォローアップとして、轟 啓介さん（アドビ システムズ）の『ユーザーと歩むAdobe XDと今後の進化』セッションのスライドなどを公開します。

• スライド
• 動画

フォローアップ

コメント

ご参加ありがとうございました。 XDチームは「Design at the Speed of Thought」という開発ポリシーに基づき、世界中のユーザーさんからもフィードバックをいただきながら開発を進めています。日本からのフィードバックにも注目しているので、ぜひみなさんのご要望やアイデアをUserVoiceから教えてください！

URL

• 公式Facebookページ「Adobe XD Japan」

2018年、CSS Niteでは29回の関連イベントを通して125セッションが行われました。その中からベスト・セッション＋αを選びました。

CSS Niteベスト・セッション2018

• ベスト・スピーカー：
  • 草間 淳哉さん（ウェブエイト）
• ベストスピーカー（次点）：
  • 池原 健治さん（ソニー・インタラクティブエンタテインメント）
  • 佐藤 修さん（フラッグ）
  • 伊藤 由暁さん（まぼろし）
• ベスト3セッション（順不同）：
  • 枌谷 力さん（ベイジ）
  • 井水 大輔さん（エスファクトリー）
  • 鹿野 壮さん（ICS）

さらに、次のカテゴリもあります。

• ベスト10セッション（順不同）
• ベスト20セッション（順不同）
• ベスト・地方版イベント
• ベスト演出
• ベストパネル
• ベストモデレーター
• ベストチャレンジャー
• 新人賞

CSS Niteベスト・セッションについて

「全部はチェックしきれないので、これは！と思うものをチョイスして欲しい」という声をよくいただくため、2010年からベスト・セッションを選定して発表しています。

CSS Niteでは、ほとんどのセッションのスライドや音声を公開しています（無料版はすぐに、有料版は少し時間をおいてから）。参加した方だけのものにしておくのはもったいないので、これを機会にぜひチェックしてみてください。

また、やっぱりリアルタイムで生で聞くのがベストだと思いますので、ぜひ、リアルなセミナーイベントにもご参加ください。

裏話

2018年に登壇いただいた方の裏話的な記事にも注目ください。

• 登壇初心者が300人の前で自信もって話すために越えた壁-CSS Niteの舞台裏-｜macheri｜note
• 人見知りが登壇して得たもの｜けんじ / Web designer｜note
• THE プレゼンター「事前準備」と「伝え方」をマスターしてコミュニケーションの精度度をUP！｜osato｜note
• 100分の登壇のために270ページのスライドを用意した理由｜Tsutomu Sogitani｜note