2025年10月に開催された「全国アビリンピック」のホームページ部門で金賞を獲得するまでの軌跡をたどる連載、第6回です。今回は、ひとまず完成した全国大会用サイトを、職場の仲間やデザイナーさんに見てもらい、ありがたい意見と容赦ないダメ出しを浴びた日々についてお届けします。初めて読む方は、ぜひ第０回からご覧ください。
目次
ひとりよがりチェック、開始！
前回の記事で書いた通り、全国大会用サイト「職場とくらしの防災学び場」は、ひとまず形になりました。
メニューは動く。カルーセルも動く。フォームも動く。スクリーンリーダーでも確認した。スマホでも表示できる。自分としては、かなり手応えのある状態まで持っていけたつもりでした。
しかし、ここで思い出さなければならない言葉があります。
「ひとりよがりにならないこと」
敏腕デザイナーさんからいただいた、あの金言です。
自分では「最高にカッコいい」「これは審査員も驚くだろう」と思っていても、見た人が「何を見ればいいのか分からない」「使いづらい」「なんか疲れる」と感じたら、それはデザインとして失敗です。ましてや今回のテーマは防災。命に関わる情報を扱うサイトで、作り手の自己満足が前面に出すぎるのは本末転倒と言えましょう。
というわけで、私は完成したサイトを、ユニバーサル研究所の仲間たち、オーさん、上司、そしてデザイナーさんに見てもらうことにしました。
研究所のみんなから意見をもらう
まずは、私が所属しているユニバーサル研究所のみんなに見てもらいました。最初に受けた助言は、トップページに表示している「最新情報」についての意見でした。
「最新情報が直近3件しか見られない。過去のお知らせも見られるページがあったほうがいいのでは？」
たしかにその通りです。最新情報は、事前課題に書かれていた「直近3件」でいいと思っていましたが、防災サイトであれば、過去の更新履歴やお知らせをたどれることにも意味があるかなと思えてきました。
そこで、急きょ「最新情報一覧」ページを追加しました。これはPHPで共通パーツ化していたおかげで、スムーズに対応できました。続いて、こんな意見も出ました。
「イメージキャラクターがいるといいと思うんですよね」
イメージキャラクター……。
その助言をいただいたときは、正直絶句しました。これからキャラクターを作るとなれば、キャラの方向性、名前、使いどころ、表情、ポーズなどを考えなければなりません。
しかし、ものは試しです。これまで画像生成AIを使って散々画像を作ってきたわけだし、意外と簡単にキャラクターが出てくるかもしれない。そこで私は、生成AIにこんな感じのプロンプトを投げてみました。
「『職場やくらしの中で災害に備えるための知識を、誰にでも分かりやすく学べる防災情報サイトです』と書かれているウェブサイトがあったとします。このサイトのイメージキャラクターを生成してください」
すると、出てきたのです。
ヘルメットをかぶり、防災リュックを背負い、職場の防災感を全身から放つ、なんとも頼もしいキャラクターが。
こちらの雑な依頼に対して、画像生成AIが「こういうことですよね？」と完璧に汲み取って出してきました。あまりのクオリティに、私は画面の前でしばらく固まりました。
「……はい、これでよろしくお願いします……」
こうして、サイトのイメージキャラクター導入が決まりました。
さらに、コンテンツの見せ方についても意見をもらいました。
「コンテンツによって色を変えるなどして、カテゴリの違いを出すと分かりやすいのでは？」
これも納得です。サイトの概要や記事、SNSリンクなど、扱う内容が違うのにすべて同じ色味だと少し単調に見えます。そこで、記事カテゴリごとにアクセントカラーを変え、視覚的に別物と分かるよう調整しました。
ほかにも、
- 記事タイトルをもう少し工夫して、SEOを意識してはどうか
- ブラウザの幅によって、カルーセルのインジケーターとボタンが重なることがあってカッコ悪い
といった意見もありました。
SEO。検索エンジン最適化。「見た目」と「アクセシビリティ」に意識が寄りすぎて、記事タイトルのチューニングまで頭が回っていませんでした。これを指摘してくれた同僚の専門分野はSEO。さすがです……。というわけで、記事のタイトルは、サイトに訪れた人の不安を煽り（命に関わる情報サイトなので多少の煽りはご勘弁を……）、クリックせずにはいられない感じのタイトルに修正しました。
「職場の備えは大丈夫？見落としがちな5つの施策と個人でやるべき備え」
といった具合です。
そしてカルーセルのボタン重なり問題ですが、マジでご指摘いただき助かりました。この辺はかなり作り込んだつもりだったのに、特定の画面幅で見事に重なる。ここまで見てくれたとは、感謝しかないです。どこが原因なのかを特定し、あらゆる画面幅で重ならないよう調整しました。
仲間たちからの意見は、どれも「なるほど」と思えるものばかりでした。自分ひとりでは絶対に気付けなかった視点です。
ありがたい。しかし、修正項目は増える。
ありがたいけど増える。ああ、面倒くさい……。
嬉しい悲鳴とはまさにこのことだと思いました（笑）。
サイトの相棒「ジュンビィ」爆誕
さて、先ほど触れたイメージキャラクターについて、もう少し書かせてください。
画像生成AIが出してきたキャラクターは、どこか職場の安全衛生ポスターにいそうで、親しみやすい雰囲気を持っていました。まさに「職場とくらしの防災学び場」の案内役にぴったりでした。
ただ、キャラクターを採用するなら名前が必要です。
そこで、またもや生成AIに相談し、キャラクター名を30個ほど生成してもらいました。
その中から選んだ名前が、
ジュンビィ
です。こういうダジャレめいたネーミングは、採用するかどうか迷うところですが、防災という少し硬いテーマを扱うサイトだからこそ、肩の力が抜ける要素があっていい。そう考えました。しかも私は「ジュン」ですし……（笑）。ジュン同士、友情が芽生えると確信しました。
（彼は後日、貢献を認められ、アクリルキーホルダーになりました。世界に４つしかない限定品です！）
ジュンビィを追加したら、サイトの印象はガラリと変わりました。情報を伝えるだけのサイトから、「誰かが案内してくれるサイト」になった。この変化は思った以上に大きいものでした。
「面倒だな……」と思っていたキャラクターの追加が、気付けば一番愛着のある要素になっていました。生成AI、おそるべし。そしてジュンビィ、ようこそ我がサイトへ。
オーさん、核心を突く
続いて、東京大会からの戦友であり、そもそも私をアビリンピックへ引きずり込んだ張本人でもあるオーさんに見てもらいました。
オーさんは、ひと通りサイトを見たあと、実にオーさんらしい率直さでこう言いました。
「ジュンさん。色々なところから出てくるアニメーションが、正直うざいです」
うざい。うざい、ですか。
そこは私の見せ場なんですが。
そこに何日もかけたんですが。
iPhoneだとうまく動かなくて、何度も何度も調整して検証したんですが。
そこを「うざい」の一言で片付けますか、あなたは。
正直、イラッとしました。
私としては、「見た瞬間に『えっ！？』と思わせる」ことを狙っていました。だからこそ、要素がふわっと現れたり、重なったパーツがずれて表示されたり、スクロールに合わせて視線誘導が起きたりする演出にこだわっていたのです。
しかし、オーさんの指摘は無視できませんでした。
なぜなら、これはまさにデザイナーさんから言われた「ひとりよがりにならない」に直結する話だったからです。私が見せたい演出と、利用者が見たい情報。そのバランスが崩れているかもしれないという気持ちになってきました。
このサイトを見に来た人は「何を備えればいいか」「災害時にどう行動すればいいか」「職場で何を確認すべきか」を知りたくてやってきたわけです。アニメーションの演出は、その情報に気持ちよくたどり着くための補助であるべきで、邪魔になってはいけません。
そこで私は、涙を飲んでアニメーションの移動量を大幅に減らしました。体感で言えば、３分の１程度まで削りました。左右からビシバシ飛んでくるのではなく、申し訳程度に出現するようにしました。
でも、今振り返ると、この判断は大正解でした。
動きを減らしたことで、サイト全体が落ち着きました。情報が読みやすくなり、演出が「主役」ではなく「引き立て役」になったのです。オーさんの一言がなければ、私はきっと最後まで「派手に動くこと」に酔っていたかもしれません。
オーさん、あの時は毒づきましたが、改めて感謝しています。
デザイナーさんからの最後の助言
そして、全国大会前の仕上げとして、例の敏腕デザイナーさんに、サイトとワイヤーフレームを見ていただきました。とても丁寧に見てくださり、ワイヤーフレームについて重要な指摘をいただきました。ワイヤーフレームとは「ウェブサイトの設計図」のようなもので、デザイナーが制作会社に渡す資料のことを指します。
「ワイヤーフレームに、サイト全体の構成図があると、より分かりやすいと思います」
サイト構成図。つまり、トップページから各ページへどのようにつながっているのか、どのページがどのカテゴリに属しているのか、サイト全体の構造が一目で分かる図です。
言われてみれば、その通りでした。
私のワイヤーフレームは、トップページしか作られておらず、サイト全体を俯瞰する資料が不足していたのです。審査員（＝制作会社）にとっては、全体像が分かる資料があったほうが親切です。私は即座にサイト構成図を追加しました。トップページを起点に、最新情報一覧、記事ページ、お問い合わせページ、各カテゴリページがどうつながるのかを整理し、簡単な図にまとめました。
そして、デザイナーさんから温かい応援メッセージもいただきました。
大会当日、期待しています！
これまで積み重ねてきた努力が、今まさに輝くときです。
ジュンさんの技と情熱が、きっと審査員の心を動かすと思います。
自信を持って、思いきり挑んでください！
これは本当に嬉しかったです。
デザインに自信がなく、どこから手を付ければいいか分からなかった私に金言を授けてくれた方からの言葉です。胸に染みました。
私は、こんな返信をしました。
心強いお言葉、ありがとうございます！
当日の対策をすればするほど不安で呼吸が浅くなって息苦しい日々を送っていますが（苦笑）、深呼吸をしながら乗り切って当日を迎えられればと思っています。
良いご報告ができるよう自身の力を出し切りたいと思います！
双極性障害と付き合っていると、気分の波だけでなく、プレッシャーへの反応や対応にも注意が必要だったりします。目の前のことに脊髄反射で飛びつかず、一呼吸置く。やることを整理する。できるだけ淡々と、当日に向かう。
そう自分に言い聞かせながら、最後の準備を進めていきました。
CD-RとDVD-R、合計4枚の防災対策
そして、いよいよ事前課題の作品データをメディアに書き込む段階になりました。
全国大会では、作成した事前課題データを当日持参する必要があります。東京大会のときは、画像を持ち込む方が多い中、私は手ぶらで勝負していました。しかし今回は全国大会。データを持参しなかったら即詰みます。持ち込み前提の競技です。
ここで怖いのが、メディアの読み込み不良や相性問題です。
CD-RやDVD-Rという光学メディアでは、本当にたやすく不具合が起きます。書き込み速度、書き込みエラー、読み取るドライブとの相性……。不安要素はいくらでもあります。いざ現地で読めないとなると、何もかもが終わりです。
そこで私は、CD-Rを2枚、DVD-Rを2枚、合計4枚作成しました。
焼いた中身はすべて同じです。すべてのメディアのデータを複数台のPCで確認しました。どの組み合わせでも読み取れました。
この中のどれか1枚が読めればいい。光学メディアへの信頼が地の底にある人間の発想です。
さらに、この4枚をすべて自分が持つのではなく、うち2枚は介助者として同行してくださる上司に持っていただくことにしました。これなら、私がカバンを盗まれても大丈夫（……!?）。
こうして私は、全国大会へ向けた最後の準備を終えました。
サイトはできた。
さまざまな意見も反映した。
キャラクターも生まれた。
メディアも焼いた。
あとは、愛知へ行くだけです。
緊張と期待と不安とフィンランドを胸に、私は全国大会の地へ向かうことになります。
次回予告
いよいよ全国アビリンピック本番の地、愛知へ！
介助者として同行してくださる上司とともに、私は決戦の地へ乗り込みます。ようやくこの連載が始まると言っても過言ではありません（前置きが長過ぎたという説もあり）。上司と二人三脚の珍道中をお楽しみに！
関連リンク
前回（第5回）の記事を読む
アビリンピック 公式サイト（外部リンク）
内閣府 企業防災のページ（外部リンク）
文／ジュン
＜自己紹介＞
ハンドルネーム：ジュン
年齢：51歳
障害名：30代後半より双極性障害
趣味：サウナ、ボードゲーム
特技：すべてに感謝する姿勢（ふとコンビニの便利さに気付き涙したことも）
座右の銘：ゲームとは人生である