ホームページのコーディングでは、何をしているのですか？
デザインの完成図を、ブラウザが読めるHTMLとCSSに書き起こし、実際に動くページにしています。コードの下書きはAIが速く書きます。ただ、予約フォームの順番や、止まったときの備えは人が画面を触って直します。読み上げソフトへの対応と、ブラウザごとの表示確認もこの段階で行います。
- コードの下書きはAI、使う人に合わせた順番に直すのは人
- 見えない書き方の違いが、検索と読み上げに効いてくる
- テスト用のページで、端末を変えて確かめてから公開する
コーディングとは、何をする作業ですか？
デザインの完成図を、ブラウザが読めるHTMLとCSSに書き起こす作業です。そうして、実際に動くページにします。
デザインの段階で決まるのは、あくまで「こう見せたい」という完成図です。その完成図を、パソコンやスマホのブラウザが読み取れる言葉に置き換えるのがコーディングです。ページの骨組みはHTML、色や配置はCSSという言語で書いていきます。
私たちは、コーディングを見た目の再現だけで終わらせません。見た目を再現するだけなら、画面の上では同じに見えるページをいくつもの書き方で作れます。ただ、書き方によって検索エンジンへの伝わり方が変わります。読み上げソフトでの聞こえ方や、のちの更新のしやすさも変わってきます。
たとえば物語に出てくる味噌蔵のページでは、いちばん大きな見出し（h1）をページに1つだけにしています。蔵の写真には「杉樽で寝かせる味噌」という説明を付けています。画面を見ている人は気づかない部分です。けれども、ここが整っていないと、次の段階の検索対策や計測の仕込みが組み立てにくくなります。
見学の予約ボタンには、押された回数を数えるための計測もあとから付けます。コーディングの段階でボタンの書き方をそろえておくと、その仕込みで迷わずに済みます。
AIが書いたコードを、そのまま使わないのはなぜ？
AIはコードの下書きを速く書けます。ただ、使う人が迷わない順番になっているかは、人が画面を触って確かめる必要があるからです。
コーディングは、私たちの工程のなかでAIと人が一緒に進める作業のひとつです。コードの下書きは、デザインをもとにAIが短い時間で用意します。画面を組む担当がそれを読み、実際にスマホで操作しながら直していきます。
味噌蔵のページでは、蔵見学の予約フォームを3項目までに絞りました。見学を予約する人が、スマホを片手に持ったまま最後まで入力を終えられるようにするためです。AIの下書きを、どの順番なら迷わないかという目で人が並べ直し、必要のない入力を削っています。
予約が入ったときに店主のスマホへ知らせる仕組みも、処理の下書きはAIがつくりました。そこにエンジニアが、通知が止まったときの逃げ道を書き足しています。動くコードと、止まっても困らないコードのあいだには差があります。その差を埋めるのが、この段階での人の仕事です。
私たちがAIの答えを信じすぎないと決めているのは、コードでも同じです。見た目がきれいで間違いもないものほど、使いにくさに気づかれないまま公開されてしまいます。だからコーディングのあとも、役割の違う人の目を何度か通してから次の段階に進みます。
読み上げソフトへの対応って、うちのお客様にも関係あるの？
コーディングの段階で、書き方そのものを整えておく作業です。画面を見ずに音声で内容を聞く方にも、ページが伝わるようにします。
読み上げソフトは、画面に表示された文字や画像の説明を音声で読み上げる道具です。目の不自由な方などが使っています。お客様の中にこうした方がいらっしゃれば、ページの書き方しだいで、伝わる内容に差が出ます。
ソフトが読み上げるのは、画面の見た目ではなく、裏に書かれたHTMLです。写真に説明文が付いていなければ、「画像」としか伝わりません。ボタンに見えるだけの飾りは、押せるものだと伝わりません。私たちは写真の説明文、見出しの順番、ボタンやリンクの名前を、コーディングの段階で一つずつ確かめています。
こうした点検は決まりに沿って抜けを探す作業なので、AIが得意とするところです。そのうえで、写真の説明文に何を書けばその店らしさが伝わるかは、取材をした人が判断します。この工程を紹介している物語のページにも、本文へ直接移動できる入口を用意しています。
読み上げに配慮した書き方は、検索エンジンにとって読みやすい書き方と重なる部分が多くあります。写真の説明文や見出しの順番は、検索エンジンがページの中身をつかむ手がかりにもなるからです。
ブラウザごとの表示確認では、どこを見ていますか？
見る人が使うブラウザや画面の幅が違っても、崩れずに表示されるかを確かめます。ボタンやフォームが同じように動くかも確かめます。
見る人が使っているブラウザ（ホームページを表示するソフト）によって、同じページでも見え方がわずかに変わります。文字の折り返しや余白などです。たとえば、iPhoneのSafariでは整っていた見出しが、パソコンの別のブラウザでは2行に割れることがあります。
表示の確認は、AIに任せられる部分が大きい作業です。ブラウザと画面幅を変えながら同じページを開いて、崩れやリンク切れを洗い出していきます。全ページの点検をAIが終えたあとで、公開してよい状態かどうかを品質チェックの担当が判断します。
コーディングを終えたページは、いま動いているホームページにいきなり上書きしません。まずいまのサイトを丸ごと保存し、確認の途中で問題が見つかっても元に戻せる状態にしておきます。そのうえで別の場所にテスト用のページを作り、お客様にも見ていただいてから本番へ移します。
ご自分のスマホで開いて読みにくいと感じたところがあれば、テスト用のページの段階で遠慮なくお知らせください！
AIと人の分担
この段階の3工程のうち、AIが主に担うものが2、人とAIで進めるものが1、人が担うものが0です。
AIAIが担うこと
- デザインをもとにHTMLとCSSの下書きを書く
- 予約が入ったときに知らせる処理の下書きをつくる
- 写真の説明文や見出しの順番の抜けを洗い出す
- ブラウザと画面幅を変えて、表示崩れとリンク切れを点検する
人人が担うこと
- 予約フォームの項目と並び順を、使う人の目で直す
- 通知が止まったときの逃げ道を書き足す
- 写真の説明文に、その店らしさが伝わる言葉を入れる
- 全ページの点検結果を見て、公開してよいかを判断する
この段階の3工程
- 25
コーディング AI×人
デザインの完成図を、ブラウザが読めるHTMLとCSSに書き起こす作業です。AIが下書きを書きます。人はスマホで触りながら、迷わない順番や止まったときの備えを直します。
- 26
読み上げソフトへの対応 AI
写真の説明文、見出しの順番、ボタンやリンクの名前を整えます。画面を見ずに音声で聞く方にも、内容が伝わるようにします。抜けの洗い出しはAIが行います。
- 27
ブラウザごとの表示確認 AI
ブラウザや画面の幅を変えて同じページを開き、崩れやリンク切れがないかを点検します。いまのサイトには触れません。テスト用のページで確かめてから本番へ移します。
よくある失敗
AIが書いたコードを、そのまま公開してしまう
動くことと、迷わず使えることは別のものです。AIのコードは、画面の上では整って見えます。けれども、入力の順番が使う人に合っていないことがあります。仕組みが止まったときの備えが抜けていることもあります。
見た目だけ合わせて、裏の書き方を気にしない
見出しの大きさを見た目だけで決めると、いちばん大きな見出しがページに何個も並びます。すると、検索エンジンや読み上げソフトにページの組み立てが伝わらなくなります。
制作する側の画面でしか確かめない
作った人のパソコンで整っていても、お客様が使うスマホや別のブラウザでは崩れていることがあります。確認は、実際に見られる端末とブラウザで行います。
コーディングについてよくある質問
WordPressで作る場合も、コーディングは必要ですか？
テーマと呼ばれるデザインのひな形を使う場合でも、コードは書きます。お店に合わせて、見た目や予約フォームを調整するためです。どこまで手を入れるかは、サイトの目的によって変わります。打ち合わせでご相談しながら決めています。
コーディングの途中で、見た目を変えたくなったらどうなりますか？
テスト用のページでご確認いただく段階で、気になるところはお知らせください。ただ、配置や色の大きな変更は、コードの書き直しが広がります。デザインの段階で固めておくほうが、全体は早く進みます。
読み上げソフトへの対応は、頼まないと入らないのですか？
私たちは、写真の説明文や見出しの順番の確認をコーディングの工程に含めています。特別な追加作業としてではなく、ページを正しく書くことの一部として扱っています。