
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
リンクをコピー
記事をブックマーク
次はちょっと話を変えて、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のケアも大事かなと思っています。
次はユーザーに選択肢を与えるということも大事にしています。OSにWindows 10とかiOS、macOSとかに動きをオフにする視差効果を減らすとかそういったオプションがOSにあって、これをWebのCSSで判定して検知できます。
CSSでいうとメディアクエリで書きますが、これをすることになって何ができるかというと、OSをふだん使っていて動きとかをあまり目立たせたくないというユーザーに対してWebコンテンツ側でそれに応じてあげられるんですね。こういうこともやっています。
次はダークモード対応ということで、OSの設定を切り替えたときにWebサイトの見栄えが変更するようにしています。ちょっと今お見せしますと、このICS MEDIAのサイトを、ちょっと今私の手元でOSの環境設定を開いていて、これをナイトモードとダークモードに切り替えようとしています。今切り替えたのわかりますかね?
ナイトモードにしたら、このChromeの外側だけでなくてWebサイトの中身も黒と白が変わるようにしています。こういうふうにユーザーの環境にレスポンシブに応じるというところも今の制作でよく意識して作っていることです。
他にもPWAといって、Webサイトをアプリケーションみたいにインストール可能な状態にする技術があって、それもやっています。例えばICS MEDIAだと右上のところのグラフマークを押すと、これはちょっと画面共有ができませんが、こんな感じでプラスマークを押したときに「アプリケーションをインストールしますか?」と、Webサイトをアプリケーションとして取り扱うという技術を、狭義でいうとそういう技術なんですが、そういったことも対応しています。
PWAは自体は去年や一昨年ぐらいでだいぶ火が付いてきたかなと思っていて、このPWAも作る度に必ず対応していますが、実際アクセス数というのがスタートURLを見ても0.11パーセントで、ほとんどこのPWAから起動している人がいないということがわかっています。
じゃあこんなほとんど役に立たないアクセス数も少ない機能も大事にするのかというと、ここは考え方なんですが、これもアクセシビリティの1つかなと思っていまして、数値がすべてではないという観点でもあるのかなと思っています。
「マイノリティーを無視すべきかの問題」と書いてありますが、そこまで大事ではないが、ちょっとこれは私の考えでもあるんですが、今の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をチェックするみたいなことも当然やっています。
それだけではなくて業界標準的なやり方もすごく意識しています。先ほどの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サイトはどうなっていくのかみたいなところで、予想みたいなものを適当に書きましたが、いくつか今後もどうなっていくか未来の見えないものではあります。予想してやっていくと次のステップのときにより快適にすぐに新しい技術を導入できるのかなと思いますので、みなさんもぜひ予想して取り組んでいくといいのかなと思っています。
ということで私の発表は以上になります。みなさんどうもご清聴ありがとうございました。
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.07
なぜ日本企業のDXは世界の先端企業から3周遅れなのか? 『ゼロ秒思考』著者が指摘する経営者に足りない決断
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10