表示速度やスマホ対応は、なぜ制作の工程に入っているのですか？
ページが開く前に戻るボタンを押されると、文章も写真も読まれないまま終わってしまうからです。私たちは、画面幅ごとの崩れの洗い出しと画像の圧縮をAIに任せています。写真の質感やボタンの押しやすさは、人が確かめています。公開前には表示の速さを測り直し、重いページはその場で直します。
- 開く前に帰られないようにするのが、表示速度の目的
- 写真は質感を見比べながら、重さだけを削っていく
- 公開前に測り直し、重ければ公開を止めて直す
ホームページの表示が遅いと、何が起きるのですか？
ページが開く前に、戻るボタンを押されてしまいます。中身を読んでもらう前に、お客様が離れていくのです。
写真がなかなか出てこないページを、最後まで待ってもらえるとは限りません。物語の味噌蔵で見学先を探していた人の多くは、スマホを使い、移動の合間にページを開いていました。
蔵の写真は美しいのですが、撮ったままの状態では重すぎました。ページが開く前に戻るボタンが押されてしまえば、それで終わりです。丁寧に書いた文章も、取材して撮った写真も、読まれないままになります。
表示の速さは、文章やデザインのように目に見える成果物ではありません。そのぶん後回しにされやすい工程です。けれども私たちは、制作の工程にはっきり組み込んでいます。ほかの工程で積み上げたものを、お客様に届けるための入口だからです。
物語のチームでも、公開ボタンを押す直前に品質チェックの担当が「この写真、まだ重い」と手を止めました。表示の速さは、最後まで気にかけ続ける項目です。
スマホ・タブレット対応では、具体的に何をしますか？
画面の幅に合わせて、文字の大きさや並び方を組み替えます。拡大しなくても読めて、指で押しやすい表示にします。
スマホ対応は、パソコン用のページをそのまま小さく縮めることではありません。画面の幅に応じて、横に並んでいた要素を縦に積み直します。文字は拡大しなくても読める大きさに、ボタンは指で押し間違えない大きさにそろえていきます。
リニューアルの相談の裏には、使いにくさが隠れていることがよくあります。物語の店主が最初に口にしたのも、「ホームページが古いので、新しくしたい」という言葉でした。けれども少し奥には、「スマホで見ると、文字が小さくて読めない」という不満がありました。
はみ出しや重なりの洗い出しは、AIが得意とする作業です。スマホ、タブレット、パソコンの幅で、同じページを開いていきます。そのうえで、予約ボタンがスマホの画面のどこにあれば片手でも押しやすいかは、人が実際に端末を持って確かめます。
画面の幅は機種ごとに少しずつ違います。そのため特定の機種に合わせて作るのではなく、幅がどれだけ変わっても崩れない組み方にしています。こうしておけば、新しい機種が出るたびに作り直す必要がありません。
画像を軽くすると、写真の見た目は悪くなりませんか？
画像の軽量化は、ファイルの大きさだけを削る作業です。見た目を落とさない範囲を探りながら進めます。
デジタルカメラやスマホで撮った写真は、そのままホームページに載せるには大きすぎることがほとんどです。表示する枠の大きさに合わせて縮め、WebP（ウェブピー。写真を軽く保存できる画像の形式）に変えます。そうすることで、見た目をほとんど変えずにファイルを小さくできます。
物語の中で写真1枚が4.8MBから180KBになる場面は、説明用のイメージです。ただ、軽量化で起きることをそのまま表しています。写真が何枚も並ぶページでは、1枚ごとの差が積み重なります。その差が、開くまでの待ち時間を大きく左右します。
どこまで圧縮するかは機械的に決められる部分が多く、AIに任せています。ただ、その店にとって大事な質感が失われていないかは、人が画面で見比べて決めます。蔵の木目や味噌の色つやのような質感です。軽くしすぎて写真の魅力が消えてしまっては、軽量化をした意味がなくなってしまいます。
私たちは、次に打つ手を三つに分けて考えています。画像を軽くする作業は、お客様の判断を待たずに進めてよい「任せていいこと」に入ります。AIが進めて、仕上がりを人が確かめるという分担です。
撮影の段階から、どの写真をどの大きさで使うかが分かっていると、軽量化もスムーズに進みます。ページの冒頭に大きく使う写真と、一覧に小さく並べる写真とでは、必要な大きさが違うためです。
物語の店主から「写真を替えたい」と電話があったときも、サポートの担当が翌日に対応しています。差し替える写真も、載せる前に同じように軽くしてから入れ替えます。
表示速度の調整は、一度やれば終わりですか？
作ったときだけでなく、公開の直前にも重さを測り直します。写真の差し替えやページの追加で、重さは変わるからです。
表示速度の調整では、画像のほかにも、ファイルを読み込む順番や、使っていない部品の読み込みを見直します。画面の上のほうに見える部分を先に表示し、下のほうの写真はスクロールして近づいたときに読み込みます。こうした工夫を、ページごとに組み合わせていきます。
私たち自身も、写真3枚の埋め込み方を間違えて、ページの重さを9MBにしてしまったことがあります。スマホで開くのに時間がかかるページになり、自分たちの失敗として記録に残しました。
公開前の品質チェックでは、表示の速さとリンク切れを最後に確かめます。写真がまだ重ければ、公開ボタンを押す前に直します。
公開後も私たちは、止まっている仕組みがないか、外から見える弱点がないかの点検を機械で回しています。表示の重さも同じように、作った日で終わりではなく、見守り続ける項目だと考えています。公開後に写真を入れ替えたときも、重さは変わります。開くのが遅いと感じるページがあれば、お気軽にお知らせください！
AIと人の分担
この段階の3工程のうち、AIが主に担うものが3、人とAIで進めるものが0、人が担うものが0です。
AIAIが担うこと
- スマホ・タブレット・パソコンの幅で、はみ出しや重なりを洗い出す
- 写真を表示する枠に合わせて縮め、WebPに変換する
- 読み込む順番や、使っていない部品の読み込みを見直す
- ページの重さと表示の速さを測り直す
人人が担うこと
- 予約ボタンの位置を、端末を手に持って押しやすさで決める
- 軽くした写真に、木目や色つやが残っているか見比べる
- 公開前に、まだ重い写真を見つけて公開を止める
- お客様に、普段の端末で見たときの印象を聞く
この段階の3工程
- 28
スマホ・タブレット対応 AI
画面の幅に合わせて、文字の大きさや要素の並びを組み替えます。指で押しやすく、横にはみ出さない表示にします。崩れの洗い出しはAIが行い、押しやすさは人が端末で確かめます。
- 29
画像の軽量化 AI
写真を表示する枠の大きさに縮め、WebPなど軽い形式に変えます。見た目を保ったまま、ファイルを小さくします。木目や色つやが残っているかは、人が見比べて判断します。
- 30
表示速度の調整 AI
画像に加えて、読み込む順番や使っていない部品の読み込みを見直します。そうして、ページが開くまでの待ち時間を短くします。公開前に測り直し、重ければ止めて直します。
よくある失敗
AIが示す数字だけを見て、写真を軽くしすぎる
ファイルの小ささだけを目標にすると、木目や料理の色つやがつぶれた写真になります。表示の速さの数字が良くなっても、写真の魅力が消えてしまっては逆効果です。
公開後に写真を差し替えて、また重くなる
撮ったままの写真をお知らせ欄などにそのまま載せると、制作時に軽くしたページでも重さが戻ります。更新の手順の中に、写真を縮める一手間を入れておきます。
タブレットの幅を確かめ忘れる
スマホとパソコンでは整っていても、その中間の幅で文字が重なったり、画像がはみ出したりすることがあります。画面の幅は段階的に変えて確かめます。
表示速度・端末対応についてよくある質問
うちのホームページが遅いかどうか、どうすれば分かりますか？
まずはご自分のスマホで、Wi-Fiを切った状態でトップページを開いてみてください。写真が出そろうまで待たされると感じたら、見直す余地があります。ご相談いただければ、ページの重さを測り、どこが原因かをお伝えします。
プロに撮ってもらった写真でも、軽くするのですか？
プロが撮った写真ほど画質が高く、ファイルも大きくなります。そのため、ホームページに載せる前に軽くします。元の写真はそのまま残し、ホームページ用のファイルを別に作ります。チラシなど印刷物への使い道は変わりません。
スマホに対応していない古いホームページは、作り直すしかないですか？
作りによっては、いまのサイトを生かしたまま、スマホでも読めるように手を入れられる場合があります。作り直すか直すかは、現在のサイトの中身を拝見してからご提案しています。