ユーザーが自由にWebサイトを変形できる時代に　ICSが意識的に取り組むUI体験の改善

UI体験の改善を意識的に行っている

次はちょっと話を変えて、ICSでこの2020年の脆弱の方針としてよく意識しているところなんですが、UI体験の改善を意識してやっています。1つはアクセシビリティの向上です。読み上げで記事の中身がちゃんと把握できるかとか、キーボードのみの操作で可能であるかというのをすごく大事にしています。

アクセシビリティでいうと、例えばやってはいけない実装として、リンクとボタンの＜a＞とか＜button＞にoutline: noneというCSSを書くとタブキーを押したときにフォーカスが当たっても、当たっているかどうかの視覚的な違いが出なくなるので、アクセシビリティが悪くなるという話です。＜div＞や＜span＞にonclick属性を仕込むことでボタンにできるのですが、フォーカスが当たらないのでそういうところは当然やらないようにしています。

他にも適切なマークアップ、role属性とかWAI-ARIAの実装のところは当たり前にやっています。だけど大事なのはJavaScriptでそれをやった上でさらにJavaScript側でもアクセシビリティの制御は必要というところもやっています。

例えばタブのユーザーインターフェイスを見てみると。Tabキーで押して、これは音声を読み上げているものの下に無理矢理文字表示をしているのですが、タブを押したときに切り替わって、違う読み上げ方をします。音声読み上げのときにこのタブが3つあって、ちゃんとマークアップしてあると今何番目にフォーカスが当たっているのかを読み上げられるんですね。そういうところをしっかりやっている。

なおかつ、フォーカスが当たっているタブというのは選択された項目というのを読み上げをされるように設定してあって、今どのタブが選択されているかというのをちゃんとJavaScriptでフォーカスをあてるようにしています。WAI-ARIAで実装するんですが、これはHTMLとCSSのレベルだけではできなくて、JavaScriptで動的に制御するということも大事で必要になるので、JavaScriptのケアも大事かなと思っています。

WebのCSSで判定して、OSごとに視覚効果を変更

次はユーザーに選択肢を与えるということも大事にしています。OSにWindows 10とかiOS、macOSとかに動きをオフにする視差効果を減らすとかそういったオプションがOSにあって、これをWebのCSSで判定して検知できます。

CSSでいうとメディアクエリで書きますが、これをすることになって何ができるかというと、OSをふだん使っていて動きとかをあまり目立たせたくないというユーザーに対してWebコンテンツ側でそれに応じてあげられるんですね。こういうこともやっています。

ダークモードにも対応

次はダークモード対応ということで、OSの設定を切り替えたときにWebサイトの見栄えが変更するようにしています。ちょっと今お見せしますと、このICS MEDIAのサイトを、ちょっと今私の手元でOSの環境設定を開いていて、これをナイトモードとダークモードに切り替えようとしています。今切り替えたのわかりますかね？

ナイトモードにしたら、このChromeの外側だけでなくてWebサイトの中身も黒と白が変わるようにしています。こういうふうにユーザーの環境にレスポンシブに応じるというところも今の制作でよく意識して作っていることです。

Webサイトをアプリケーションライクにする技術（PWA）にも対応

他にもPWAといって、Webサイトをアプリケーションみたいにインストール可能な状態にする技術があって、それもやっています。例えばICS MEDIAだと右上のところのグラフマークを押すと、これはちょっと画面共有ができませんが、こんな感じでプラスマークを押したときに「アプリケーションをインストールしますか？」と、Webサイトをアプリケーションとして取り扱うという技術を、狭義でいうとそういう技術なんですが、そういったことも対応しています。

PWAは自体は去年や一昨年ぐらいでだいぶ火が付いてきたかなと思っていて、このPWAも作る度に必ず対応していますが、実際アクセス数というのがスタートURLを見ても0.11パーセントで、ほとんどこのPWAから起動している人がいないということがわかっています。

じゃあこんなほとんど役に立たないアクセス数も少ない機能も大事にするのかというと、ここは考え方なんですが、これもアクセシビリティの1つかなと思っていまして、数値がすべてではないという観点でもあるのかなと思っています。

ユーザーが自由にWebサイトを変形させられる時代になりつつある

「マイノリティーを無視すべきかの問題」と書いてありますが、そこまで大事ではないが、ちょっとこれは私の考えでもあるんですが、今のWebサイトはWebサイト自体がコンテンツがあってそれをラッパーとして提供しているに過ぎないかなと思っています。

例えば先ほどのブログのようなサイトだったら原稿の記事自体がコンテンツで、それを提供している外側のWebサイトはただの殻であると。外側の殻はユーザーがもう少し自由に変形させてもいいし、そういう時代になってきているのかなと思っています。例えばニュース記事の中身だけSmartNewsとかで配信するとかもあるでしょうし、Safariとかでリーダーモードで文字を読むといったこともそうだと思います。

あくまでも側（がわ）は、ユーザーに自由度があってもいいという時代になってきていると思っています。ただそうなったらWebサイトは意味がないんじゃないかという話もありますが、そうではないと思っています。コンテンツを一番活かしきる、味を出す、雰囲気を出す、コンテンツの魅力を一番最適に伝えるということがベストなラッパーだと思っています。それはコンテンツを一番メインで作る制作会社ということなのかなと思っています。

開発体験の改善するためにコードの書き方のバラつきを解消する

あともう1つ拘っていることがあるので、それを紹介します。開発体験の改善ということもICSでは大事にやっています。開発の作り方ですが、当然コードをたくさん書きます。HTML、CSS、JavaScript、そういったところのコードの書き方のバラつきを解消したいというのはとても大事なミッションだと思っています。

バラつきが出るとプルリクエストのソースコードレビューで困ったりとか、引継ぎ後に保守で困るとかそういったところがあるので、自動化できることはツールに任せてどんどんコードの書き方を統一しています。Prettier、ESLint、Stylelint、TypeScript、TypeScriptもただstrictモードをオンにするだけでなくてtsconfigでさらに強度に指定できるオプションもあるのでそういうのをやってかなりガチガチに固めています。

このツールによるフォーマッターというのは、package.jsonのフォーマットコマンドを書いてVSCodeとかWebStormとかのフォーマットコマンドじゃなくて、こちら側のpackage.jsonに書いてあるやつでフォーマットさせて、GitにプッシュするときとかCIで受け付けたときにフォーマットのlintをチェックするみたいなことも当然やっています。

Twitterでコードの書き方のアンケートを実施して、業界標準的な書き方を意識する

それだけではなくて業界標準的なやり方もすごく意識しています。先ほどのLintなどのツールは細かいところはできますが、文化みたいなところはあまりチェックできません。そういったところは私がTwitterでアンケートを利用して「こういう書き方って今はどうなの？」みたいなのをけっこうアンケートで収集していたりします。

資料をお見せしますと、Twitterのアンケートで「JavaScript開発者に質問」とか「HTMLコーダーに質問」というような、Twitterのアンケートで簡単な4択で作っています。

例えば「metaタグのkeywords属性って、今それ使っても意味ないと思うんだけどやっている人いるの？」みたいな感じで聞いてみたり、デザイナー向けにだと「Photoshopのレイヤー名というのはスネークケースのアンダースコアで書くかケバブケースのハイフンで単語を区切るかとか、そのあたりのどこが多いのか」みたいなところをアンケートしています。

これによって自分たちのICSという10人ぐらいの会社で、この会社の中での文化ではなくて、より世の中の普遍的な作り方というのをある程度意識しながら我々の作り方をどんどん改善していこうというのを取り組みとしてやっています。大多数が常に正とは限らないので、そこだけちょっと注意点が必要かなと思います。

テストツールの取り込みも行う

あとは、2010年初頭というのはあまりテストツールはやらなかったんですが、今はかなりテストツールもやるようになっていて、単体テスト、E2Eテスト、ビジュアルテストみたいなところもJest、Puppeteerみたいなところを組み合わせて作っています。

過去の技術選定の成否を将来を見据えて繰り返してチェックして行くことが大事

話のまとめですが、そういったところで作り方の改善でコンテンツ自体の作り方の改善をやっていますが、将来を予想するということも大事で、そういったところも意識しながら今後取り組んでいくといいんじゃないかなと思っています。

ここを大雑把に説明すると、TypeScriptが流行ったかみたいなところで、今すごい流行っていると思って入れているんですね。AngularとかVueとかReactとかの盛り上がりの次にTypeScriptの盛り上がりが2018年とか19年で来たかなと思っています。

ICSだと2013年にTypeScriptの導入を決定していて、そこからほぼJavaScriptで作るコンテンツはTypeScriptで開発をしていました。そういった意味ではけっこう早めに手を付けて成功した予想だったのかなと思っています。

ダークモードみたいな対応とかもいくつかのサービスでどんどん導入もしているので、これもわりと早めに検知できたのかなと。

そういったところで、いくつか成功したものがあるものの失敗したものもある。それで見送ってよかったとか導入に出遅れて反省しているとかそういったことも以前Twitterに投稿したことがあります。常に自分の技術選定が正しかったのかよくなかったのかみたいなところを将来を見据えて繰り返してチェックするようにしています。

今後のWebサイトはどうなっていくのかみたいなところで、予想みたいなものを適当に書きましたが、いくつか今後もどうなっていくか未来の見えないものではあります。予想してやっていくと次のステップのときにより快適にすぐに新しい技術を導入できるのかなと思いますので、みなさんもぜひ予想して取り組んでいくといいのかなと思っています。

ということで私の発表は以上になります。みなさんどうもご清聴ありがとうございました。