2025年10月に開催された「全国アビリンピック」のホームページ部門で金賞を獲得するまでの軌跡をたどる連載、第5回です。今回は、ついに公表された全国大会の事前課題と、それを受けて私がどのように準備を進めたのかをお届けします。初めて読む方は、ぜひ第０回からご覧ください。
目次
ついに公表された事前課題
全国大会に向けて「さあ来い」と身構えていた私のもとに、ついに事前課題が届きました。サイトの名称は、「職場とくらしの防災学び場」。テーマはその名の通り、防災の啓発と実践的な備えを紹介するウェブサイトです。
内容を読み進めると、単なる「防災豆知識サイト」ではありませんでした。職場で働く人の視点に立ち、災害に備えるための知識を届けること。さらに、職場や通勤時に実践できる防災対策を分かりやすく紹介すること。つまり、家庭だけではなく、「働いている最中に災害が起きたらどうするか」まで視野に入れた構成が求められていたのです。
これは正直、私にとって追い風のテーマでした。災害は誰にとっても他人事ではなく、しかも「情報の伝え方」がそのまま命に関わり得る。ウェブアクセシビリティ屋としては、燃えないわけがない。
そして事前課題の説明を読み込んでいくと、会場のPCにはXAMPP（Webアプリケーション開発に必要なApache、MariaDB、PHP、Perlを一度にインストールできる無料のパッケージソフトウェア）がインストールされており、競技で使ってよい技術としてWordPressと書かれていました。
「ほう……WordPress可、ですか」
WordPress（ワードプレス）とは、世界で最も広く使われているCMS（コンテンツ管理システム）の一つです。これを使えば、ウェブの専門知識があまりない人でもサイトを運営しやすくなります。注：ここからしばらく技術的な話が続くため、読み飛ばしたい方はこちらをクリックして次の章に進んでください。
WordPressは使っていいが、その代わり、自分でテーマを作らなければならないと記載がありました。これからお手本となるテーマを見つけたとしても、それを自分が満足するレベルまでカスタマイズして作り込むには、WordPress特有の高度な仕組みを理解し、実装する必要があります。
悩みに悩んだ末、私はWordPressを使わないことに決めました。理由は、イチからWordPressを学習してアクセシビリティを組み込むより、普通にコードを書くほうが確実だと判断したからです。さらに、現地のXAMPP環境やバージョンの違いで想定外の問題が起きた場合、自分が持ち込んだWordPress環境が展開できずに詰む、というリスクも回避できます。
ただ、ここで一つだけ気になることがありました。
「WordPressは使わないが、XAMPPのインストールで一緒に導入されるPHPだけを使うのはアリなんだろうか？」
PHPとは、Webサーバー上でプログラムを実行できるスクリプト言語の一つで、これが使えると、サイト上部のメニュー部分や下部のお問い合わせ先などのパーツをサイト全体で使い回せるため、戦略の幅が一気に広がります。そこで念のためJEEDへ確認したところ、PHPの使用は問題なしとの回答をいただきました。
うん、これで行こう。WordPressという大型客船には乗らず、PHPという機動力のあるモーターボートで進む。私の中で、戦い方がかなりはっきりしてきました。
そして、使用する素材についても悩みました。インターネット上にはフリー素材と呼ばれる画像やイラストが山ほどありますが、用途によって権利が制限されている場合があります。権利関係の解釈違いによるトラブルは絶対に避けなければなりません。そんなわけで今回は、自前で撮った写真と生成AIで作成した画像や動画でやりくりする方針にしました。防災サイトを作る前に、まず自分が炎上リスクに備える。これも一種の防災と言えましょう（笑）。
マインドマップで自分を管理する
さて、やることが見えてきたら、次はスケジュールです。
私には双極性障害に加え、軽度のADHD傾向もあり、頭の中に「やるべきこと」が複数浮かぶと、しばしば全部が同時に暴れ始めます。しかも「大事なこと」と「急に思いついたこと」が、脳内で同じ音量でしゃべり出す。これがなかなか厄介です。
そんな私にとって欠かせないのが、マインドマップツールです。
マインドマップツールとは、中心となるテーマから連想されるキーワードやアイデアを、枝分かれするツリー構造で図解・可視化し、思考の整理や構造化を支援するデジタルツールです。アイデア出し、ブレインストーミング、プロジェクト計画、学習の記憶定着などに利用されます。代表的なフリーウェアに「Freeplane」というものがあります。
「やりたいこと」「取得しなければならない技術」「フレームワークの作成」「カルーセル」「フォーム」「アクセシビリティ検証」「レスポンシブ調整」……といったタスクを全部可視化し、それをさらに一週間単位のタスクへ落とし込んでいきました。
ここまでやる理由は明確です。私は気分の波があるので、「時間がある日に何をやるか」をその都度考えていると、考えるだけで疲れてしまうのです。だから元気な日に設計し、しんどい日でも「今日はこのタスクだけやればオンスケだ」と分かるようにしておく。これは競技対策であると同時に、私自身のコンディション管理でもありました。
要するに、気合いだけで乗り切るのではなく、気合いに頼らなくても進める仕組みを先に作り込みました。
生成AIとの壁打ち生活、開始
設計が固まったところで、いよいよ実装フェーズへ突入しました。ここから私の生活は、かなりの割合で「生成AIとの壁打ち」に支配されることになります。
もちろん、丸投げではありません。私は「こういう見た目にしたい」「こう動かしたい」「でもアクセシビリティは崩したくない」という要件を投げ、生成AIに選択肢や実装の考え方を出してもらい、それを自分で咀嚼して検証し、必要なら作り直す――という使い方をしていました。
まず取りかかったのは、メニュー部分です。
私が狙ったのは、半透明で浮遊するナビゲーションでした。防災という重めのテーマを扱いながら、見た目まで重苦しくすると、サイト全体が「読む前から疲れる」ものになってしまう。だから、適度に軽やかで、しかしふざけすぎない。そんな絶妙なところを狙いました。実際に作ったものは以下になります。
よく見ると、背景がすりガラスのように透けて見えるのが分かると思います。そう、私は「半透明っておしゃれでカッコいい」と思う人種だからです。30年来のApple信者でもあります。
スマホ表示ではもちろんハンバーガーメニューに変化。三本線を押すとバツマークにアニメーションするようにしました。これは定番中の定番のアニメーションですが、なんだかんだやっぱりこれだな、ということで（笑）。
そして次に着手したのが、今回の最大の山場の一つ、カルーセルです。ウェブサイトの先頭にありがちな、自動で横方向にスライドする仕組みのことをカルーセルと言います。
カルーセルは華やかで便利な部品に見えますが、スクリーンリーダー（音声読み上げソフト）利用者にとっては情報が伝わりにくい特性があります。自動で動くと読み上げの邪魔になる。フォーカス移動が破綻しやすい。現在の状態やボタンの意味が曖昧になりやすい。うまく作らないと「見た目だけ立派で、使う人には不親切」という最悪の存在になりかねません。私はウェブアクセシビリティ診断業務を通じて、そんなサイトをたくさん見てきました。だから私は、カルーセルを徹底的に詰めました。
Bootstrapと呼ばれる便利ツールに搭載されているカルーセルをベースに、ボタンの位置、キーボード操作時の挙動、フォーカス状況による停止・再生の考え方、状態に応じたスクリーンリーダーでの読み上げられ方、などなど……。一つずつ検証しながら作り込み、こちらを直すとあちらが壊れるなどの不具合を乗り越え、最終的には、「これほどまでにアクセシビリティを確保したカルーセルには出会ったことがない」と言えるレベルまで持っていくことができました。全盲の方でも弱視の方でも情報に到達できるカルーセルが完成したのでした。
その後の記事ページの作成では、さらに沼にはまりました。私は前回の記事で「えっ！？」と思わせるサイトを目指すと書きましたが、そこに動き（アニメーション）の要素は欠かせません。要素がふわっと現れる。視線誘導が自然に起きる。スクロールすると「お、気持ちいいな」と感じる。そういう細かな演出を考え、実装し、改良を試みていったのです。複数の層に分かれたパーツが複雑に噛み合う気持ちよさ。それを実現したいと試行錯誤を重ねました。
しかし、こだわればこだわるほど、うまくいかない。
ある動きを直すと別の画面幅で崩れる。PCで綺麗でもスマホで違和感が出る。AndroidのChromeだと確実に表示されるのに、iPhoneのSafariで高速スクロールすると出てこない。「演出」と「安定」のせめぎ合いです。それでも私は思いました。
「ここで自分が100％満足できる動きを実装できなければ、金賞を逃したとき、一生悔いが残る」
その悔しさを味わうことにならないよう、生成AIと一緒に延々と壁打ちを続けたのでした。そして、ついに満足できる動きができ上がりました。
アクセシビリティを執念で積み上げる
全国で勝つには、見た目のインパクトだけでは足りません。むしろ私にとって本当の勝負どころは、その派手さを、どれだけ優しさで支えられるかです。
カルーセルに続いて力を入れたのが、お問い合わせフォームでした。
フォームは、作るだけならそこまで難しくありません。しかし、誰にとっても分かりやすく、エラー時にも混乱しにくい実装にしようとすると、一気に奥が深くなります。
私が特にこだわったのは、エラー文言の出し方です。エラーがあった場合、そのメッセージをフォームの上部にまとめて出す実装もありますが、それだとスクリーンリーダー利用者にとって「どの項目がどう間違っているのか」が追いにくいことがあります。
そこで私は、エラーのあった入力欄の直前にエラーメッセージを表示するようにしました。こうすることで、その項目にたどり着いたとき、何が問題なのかを自然な流れで把握しやすくなります。
また、エラーチェックは、できる限りパソコンやスマホ側（クライアント側）で完結させるようにしました。サーバ側でのみ判定する実装だと、送信後にページが再読み込みされ、場合によってはせっかく入力した内容が消えてしまうことがあるからです。ウェブアクセシビリティの国際的な標準規格である「WCAG（Web Content Accessibility Guidelines）」でも、エラーの特定や修正のしやすさ、入力内容の保持といった観点が重視されています。
2000年代初頭からECサイトを使っている人なら誰もがぶつかってきた『ちょっと間違っただけなのに、名前も住所も全部消えちゃった』問題。障がいの有無に関わらず心が折れるこの問題は、サーバ側の実装によって入力内容が保持されないことが原因になっている場合が少なくありません。クライアント側で一次チェックを行えば、エラー確認のためだけにページ遷移する必要がなくなり、入力のやり直しも大きく減らせます。
アクセシビリティというと、スクリーンリーダー対応やキーボード操作ばかりが注目されがちですが、こういう「やり直しのしやすさ」も重要なポイントになります。
さらに、全体の設計でも「珍しめな仕込み」をいくつか盛り込みました。
まず、表示されるすべてのフォントにユニバーサルデザインのWebフォント（UDフォント）を採用しました。UDフォントは、似た形の文字が識別しやすくなっていたり、文字の中の空間が広く設計されていたりするなど、高齢者、視覚障害者、子ども、外国人を含む多様な人々が正確に情報を認識できるよう設計されたフォントです。サイトにアクセスした際、このフォントを自動的にダウンロードして表示するようにしました。なにせ『アビリンピック』のホームページ部門ですので、ユニバーサルデザインへの配慮は確実に評価されるだろうと踏みました。
 一般的なフォント（フォント名：Noto Sans Japanese） |  UDフォント（フォント名：BIZ UDGothic） |
そして、すべての要素をスクリーンリーダーで検証しました。見出し構造が妥当か、フォーカスが目視できるか、入力エラー時の読み上げは狙い通りか、などなど……。この領域は私の仕事そのものですので、しっかり行いました。
私はこういった
「そこまでやるの？？」
を積み上げた先にしか勝機はないと思っていました。私の本業はウェブアクセシビリティ診断であり、プロのデザイナーでもなければウェブサイト制作者でもないので……。
見た目は攻める。ただし中身は優しく。敏腕デザイナーさんから教わった「ひとりよがりにならない」を意識しながら、自分が納得できるレベルになるまで必死で形にしていったのです。
フィンランドを脳に叩き込む
制作が進む一方で、私の心の燃料となっていたのが、やはりフィンランドです。
前回の記事で書いた通り、全国大会で結果を出せば、その先に国際アビリンピックという可能性が見えてきます。そしてその開催地がフィンランド。サウナーにとって、これは聖地巡礼です。
そこで私は、フィンランドに関するネットニュースやテレビ特番を見つけたら欠かさず見るようにしました。ヘルシンキの街並み、森、湖、そしてサウナ……。それらを自分ごととして真剣に摂取することで、自分の深層心理にフィンランド渡航後のイメージを刷り込ませていきました。VRゴーグル越しに映るストリートビューでヘルシンキの街を散策したりもしました。そして「そうか……僕は再来年、この街を実際に歩くことになるのか……」と感慨にふけりました。
笑ってしまうかもしれませんが、こういうのは大事だと思うんです。人間誰しも、目の前にあるCSSの不具合などを見続ければ心がすさむもの。だからこそ、遠くにある野望を意識的に脳に見せ続ける必要がある。
「この一行のコードの先に、フィンランドがある」
……だいぶ大げさですが、そのくらいの気持ちで自分を鼓舞していました。もっと言えば、もはや私は「全国大会で勝ちたい」のか「フィンランドに行ってサウナに入りたい」のか、自分でもよく分からなくなっていました。たぶん両方です。
ひとまず、戦うための土台ができた
そんなこんなで、数週間にわたる試行錯誤の末、ついにサイトの土台が完成を迎えました。
メニューは動く。カルーセルも動く。ページも形になった。フォームも動作する。スクリーンリーダーでも一通り確認済み。スマホ表示も問題なし。もちろん細かな調整はまだ必要ですが、「戦える土台」はできたと言ってよい状態まで持っていけました。
ここまで来た時、私はようやく一息つきました。
「とりあえず……スタートラインには立てた」
土台ができただけで、コンテンツはありません。サイト名は『職場とくらしの防災学び場』。指示に沿ったコンテンツを自ら考え、土台に組み込む必要がある。そして当然ながら、バリアフリー情報も盛り込む必要があるわけです。しかし私の職場は、障害者雇用の多い特例子会社。近くにヒントが転がっているはずだと思い、見慣れた職場のあちこちをフラットな視点で見直しました。案の定、ネタはそこかしこに転がっていました。
それらに加え、ネットで調べた情報なども組み合わせながら、記事に仕立てていきました。職場に転がっていない画像は、画像生成AIを駆使して作っていきました。思い通りに出力されない画像に対して修正を指示し、上がってきた画像にまた修正を指示する。あちらが直ると、こちらが壊れる……。昭和のドリフのコントみたいな作業を数日続けました。そして、すべてのコンテンツを一通り埋め込んだサイトが、ひとまず完成を迎えました。
あとはこれを、できるだけ多くの人に見てもらうこと。デザイナーさんの教え通り、ひとりよがりになっていないかを確かめなければなりません。
オーさん、上司、デザイナーさん、同僚――。はたして皆は、このサイトを見て何を感じるのか。私の「下心」は、ちゃんと伝わるのか。
それについては、また次回。
次回予告
ひとまず完成を迎えた全国大会用サイト。次回は、それをオーさんをはじめ職場のみんなに見てもらい、容赦ない（？）意見をもらう様子をお届けします。次回もお楽しみに！
関連リンク
前回（第4回）の記事を読む
アビリンピック 公式サイト（外部リンク）
マインドマップソフト：Freeplane（外部リンク）
内閣府 企業防災のページ（外部リンク）
文／ジュン
＜自己紹介＞
ハンドルネーム：ジュン
年齢：51歳
障害名：30代後半より双極性障害
趣味：サウナ、ボードゲーム
特技：すべてに感謝する姿勢（ふとコンビニの便利さに気付き涙したことも）
座右の銘：ゲームとは人生である