パブリッシング（コーディング）

パブリッシングとデザイン、開発はどう分かれる？

デザインは画面の見た目を決め、パブリッシング（コーディング）はその見た目をブラウザが読めるコードに置き換え、開発は予約・決済のようにデータを保存・処理する機能を作ります。小さなホームページでは、1人が複数の工程をまとめて担当することもあります。

パブリッシングでは主に3つの言語を使います。HTMLは見出し・文章・写真といった内容の骨組み、CSSは色・サイズ・配置といった見た目の装飾、JavaScriptはメニューを開く・写真をスライドするといった動きを担当します。

オーナー様にとってパブリッシングが大切なのは、お客様が実際に目にするのはデザイン案ではなく、パブリッシングされた画面だからです。同じデザイン案でも、パブリッシングを丁寧に行えば、スマホで読みやすく速いホームページになります。

予約・決済のない紹介用ホームページなら、デザインとパブリッシングだけで完成することもあります。逆に予約・決済が入ると、パブリッシングした画面に開発した機能をつなぐ工程が加わり、スケジュールが長くなります。

パブリッシングの良し悪しは何で判断する？

見た目がデザイン案どおりかどうかより、さまざまな画面や状況で崩れないかどうかがパブリッシングの品質です。同じ画面でも、コードの書き方によって検索表示や表示速度が変わります。

こうした基準は目ですぐにはわからないため、ご自身で確認するのは難しいですが、制作会社に「どんな基準でチェックしたか」を聞くだけで十分です。Googleが無料で提供しているPageSpeed InsightsにURLを入れて、速度チェックの結果を一緒に見る方法もあります。

Webアクセシビリティは、障がいのあるお客様だけのためのものではありません。文字と背景の色のコントラストが十分で、ボタンの名前がはっきりしている画面は、日差しの下でスマホを見るお客様や、文字を大きくして使う年配のお客様にとっても使いやすくなります。

• 見出し・小見出しが実際の見出しタグになっていて、検索エンジンやスクリーンリーダーが構造を読み取れるか
• スマホ・タブレット・パソコンのどの画面幅でも、文字と写真が重ならないか
• 写真のファイルサイズが小さくしてあり、遅い通信環境でも速く開くか
• ボタンが指で押すのに十分な大きさか
• スマホの設定で文字を大きくしても、内容が切れないか

写真の説明文（alt）はどう書けばいい？

写真の説明文（alt）は、写真が見えない人に写真の内容を代わりに伝える短い文章です。写真が開かないときや、スクリーンリーダーでホームページを聞いているお客様に、この文章が読み上げられます。

「写真」「画像1」のように書いても、何の情報も伝わりません。カフェのメニュー写真なら、「いちごの生クリームケーキ1切れとアメリカーノ」のように、写真に写っているものを具体的に書きます。

Googleも画像検索において、altを画像の情報を伝えるもっとも重要な属性として案内しています。ただし、キーワードを無理に並べるのはかえって逆効果なので、写真を説明する自然な文章で書きましょう。装飾用の模様のように意味のない画像は、説明を空欄にしておくのが正解です。

パブリッシングされた画面はどうやって確認する？

パブリッシングの結果は、1台の端末で見るだけだと問題を見落としがちです。下の手順なら、10〜15分でほとんどの問題を見つけられます。

問題を見つけたら、どの端末でどんな画面だったかをスクリーンショットと一緒に伝えてください。パブリッシングの問題は特定の機種や画面幅でだけ起きることが多いので、端末名がわかればずっと早く直せます。

確認するときは、デザイン案を横に開いて比べるとよいです。ただし、画面幅の違いによる小さな差は自然なものなので、情報が抜けている箇所や順番が入れ替わっている箇所を中心に見てください。

1. 01オーナー様のスマホと、ご家族・スタッフの別機種のスマホで同じ画面を開きます。
2. 02スマホを横向きにして、レイアウトが崩れないか確認します。
3. 03スマホの設定で文字サイズを大きくしてから、もう一度開きます。
4. 04パソコンでブラウザのウィンドウをゆっくり縮めながら、ブロックが縦に積み重なる様子を確認します。
5. 05Wi-Fiをオフにしてモバイルデータ通信で開き、写真の表示が遅すぎないか確認します。
6. 06すべてのメニュー・ボタン・電話番号リンクを1回ずつ押してみます。

パブリッシングの段階でよく起きる問題は？

いちばんよくある問題は、デザイン案に入っていた短い仮の文言が実際の長い文言に置き換わり、枠からあふれてしまうケースです。美容室の施術名が長かったり、工房のクラス説明が長かったりすると、スマホで何度も改行されてレイアウトが乱れます。

料金表や時間割のように列の多い表は、スマホで横にはみ出して切れやすくなります。こうした内容は、スマホではカード形式に切り替えて見せるなど、別のレイアウトが必要になることがあります。

工房の商品詳細のように写真が多いページは、画面に近づいたときに写真を読み込む方式（遅延読み込み）を使うと、最初の画面が速く表示されます。写真が多いページの速度をどう確保するのか、制作会社に聞いてみてください。

• ファイルサイズの大きい元の写真をそのままアップし、最初の画面の表示が遅い
• スマホでポップアップが画面全体を覆い、閉じるボタンが見つけにくい
• フォントファイルが重く、文字の表示が遅れる
• パソコンでだけ見える情報が、スマホでは抜けている

パブリッシングについて制作会社に何を聞けばいい？

パブリッシングはオーナー様が別に選ぶものではありませんが、基準を聞けば、制作会社がどんな品質を約束しているのかがわかります。

公開後にスマホのOSやブラウザがアップデートされると、まれに画面の表示が変わることがあります。そうした場合に保守管理で直してもらえるかもあわせて確認しておくと安心です。

スマホの画面を同じホームページの中でレスポンシブに合わせるのか、スマホ専用の画面を別に作るのかも聞いてみてください。別に作る方式なら、内容を直すときに2か所とも直す必要が出てくることがあります。

• どの端末とブラウザで確認するのか
• 写真のファイルサイズを小さくし、速度をチェックしているか
• 写真の説明文（alt）・見出し構造など、検索・アクセシビリティの基本を入れているか
• 価格・営業時間などの文字をあとで直すとき、誰がどうやって直すのか