ホームページのデザインは、何を基準に決めるのですか？
見た目の好みより先に、そのページで誰に何をしてほしいかを基準にします。私たちはAIに配色などの候補を出してもらいます。そこから、取材で知ったお店らしさと、来てほしいお客様の動きに合うものを人が選びます。仕上げでは、スマホで開いたときに重くならないかまで確かめます。
- 見た目の前に、誰に何をしてほしいページかを決める
- 配色の候補はAIが出し、お店らしさで人が選ぶ
- 写真の美しさと、スマホで開く速さを両立させる
デザインは、見た目の好みで決めるものですか？
デザインで最初に決めるのは、色や形ではありません。そのページを見た人に、どう動いてほしいかです。
架空の味噌蔵を例に、AIだけでトップページを試作してみます。すると、見た目の整ったページが数分でできあがります。商品写真を大きく載せて、「商品一覧を見る」というボタンを置いたページです。
画面はきれいで、文章にも間違いはありません。けれども、このお店が本当に来てほしかったのは、週末に蔵を見たい人でした。AIはお店を通販の店だと思い込んでいました。そのため、画面全体が「買ってもらう」ための作りになっていたのです。
目的が決まってはじめて、どこを目立たせて何を控えめにするかが決められます。物語では、代表が店主と30分話し、ページの目的を「通販」から「蔵見学」に切り替えました。デザインも、それに合わせて組み直しました。ボタンは「蔵見学を予約する」に変わり、見学の案内はページのいちばん手前に移っています。
デザインは、前の工程で作ったワイヤーフレーム（ページの骨組み）をもとに進めます。どの順番で何を見せるかは、設計の段階で決まっています。デザインではそれを、目で見て迷わない画面に仕上げることに力を注ぎます。
色や写真は、どうやって選ぶのですか？
色と写真は、取材で知ったそのお店の素材や空気から選びます。AIが出す候補は、選ぶための材料として使います。
味噌蔵の例では、デザイナーが色を木と麹の色に寄せ、主役の写真を商品から蔵の中に替えました。「写真は『味噌』より『蔵の中』」という判断は、見学に来てほしいというお店の目的から出てきたものです。
このときAIには、配色を12パターン出してもらいます。そのなかから、この店らしさに合うものを人が選びます。候補を短い時間でそろえるのは、AIの得意なことです。人だけで考えるよりも、多くの選択肢を見比べたうえで決められます。
写真と色は、互いに影響し合います。主役の写真が蔵の中の木の色なら、ボタンや見出しの色もそこから浮かない色を選びます。そうすることで、ページ全体がひとつのお店の空気としてまとまります。並べた候補にしっくりくるものがなければ、選ぶ基準を見直し、AIに候補を出し直してもらいます。
色や書体の印象は、言葉で説明しにくいものです。気に入っているサイトや、反対にしっくりこないサイトを見せていただくと、好みの方向をすり合わせやすくなります。ロゴやお店で使っている色が決まっている場合は、それを土台にして全体の配色を組み立てます。
スマホで見る人のことは、どこまで考えるの？
デザインの段階から、スマホでの見え方と軽さを前提に考えます。お店を探す人の多くが、スマホで見ているからです。
物語の味噌蔵でも、見学先を探す人の多くは移動の合間にスマホでページを見ていました。小さな画面を、片手で送りながら読むのです。パソコンの大きな画面で整って見えるデザインでも、スマホでは文字が小さすぎることがあります。予約のボタンが見つけにくくなることもあります。
ボタンの置き場所も、スマホで見る人を前提に決めます。味噌蔵の例では、画面上部のメニューにも、最初に目に入る見出しのすぐ下にも見学予約のボタンを置きました。読み始めてすぐに、予約へ進めるようにするためです。
写真の重さにも気を配ります。蔵の写真は美しくても、そのままの大きさで載せるとページが開く前に戻るボタンを押されてしまいます。私たち自身、写真3枚の埋め込み方を間違えて、ページの重さを9MBにしてしまったことがあります。スマホで開くのに時間がかかるページを作ってしまったのです。この失敗も記録に残しています。デザインのあとには、見た目を落とさずに画像を軽くする工程を設けています。
予約フォームの入力項目を3つまでに絞ったのも、スマホで片手のまま予約を終えてもらうためです。見た目を整えることと、お客様が迷わずゴールまでたどり着けることは、デザインの段階で一緒に考えます。
文字と背景の色の差や、文字の大きさにも気を配ります。画面の文字を音声で読み上げる機能を使う方や、文字を大きくして見る方にも伝わるようにするためです。
デザインの確認は、いつ、どうやって行いますか？
デザインはテスト用のページで、実際の画面として触っていただきます。細部まで確かめてから公開します。
私たちは、いま動いているホームページをいきなり書き換えることはしません。デザインを組み込んだページは、まず別のテスト用の場所に作ります。お客様には、スマホやパソコンで実際に触っていただきます。画像で見るより、文字の大きさやボタンの押しやすさを確かめやすくなります。
お客様の確認で出た修正は、テスト用のページに反映してから、もう一度見ていただきます。本番のページに触れるのは、確認が済み、公開してよいと判断できてからです。
細かいところほど見落とされがちです。実際にあった例では、検索結果に小さく表示されるアイコンが、別の会社のロゴになっていたことがありました。地味な場所ですが、信用に直結します。そのため、ページの中だけでなく、検索結果やSNSで見えるところまで確認します。
公開してからも、写真の差し替えやお知らせの追加など、デザインに手を入れる場面は続きます。物語の味噌蔵では、店主からの「写真を替えたい」という連絡に、サポートの担当が翌日に対応しました。
公開の前には、品質チェックの担当が「この写真、まだ重い」のように、表示の速さとリンク切れを最後に確かめます。公開してよいかは、人が判断します。デザインの方向性で迷っていることがあれば、今のホームページを一緒に見ながらご相談ください！
AIと人の分担
この段階の1工程のうち、AIが主に担うものが0、人とAIで進めるものが0、人が担うものが1です。
AIAIが担うこと
- 配色の候補をまとめて出す（味噌蔵の例では12パターン）
- ページの型やレイアウトの案を複数並べる
- 全ページの表示崩れやリンク切れを自動で点検する
- 写真を、見た目を保ったまま軽くする
人人が担うこと
- ページの目的に合わせて、目立たせる場所を決める
- 色と主役の写真を、お店らしさで選ぶ
- 予約ボタンの位置と文言を、来てほしいお客様に合わせる
- テスト用のページで見え方を確かめ、公開してよいか判断する
この段階の1工程
- 24
デザイン 人
ページの目的に合わせて、色・写真・文字の大きさ・ボタンの位置を決めます。配色などの候補はAIが出します。お店らしさと来てほしいお客様に合うものを、人が選びます。
よくある失敗
AIの試作をそのまま採用する
お店の目的とずれた作りになりがちです。きれいに整っているため、そのずれに気づきにくいのです。味噌蔵の例では、見学に来てほしいお店なのに「商品一覧を見る」が主役のページになっていました。
パソコンの画面だけで確認する
パソコンでは整って見えても、スマホでは文字が小さく、ボタンが見つけにくいことがあります。確認はスマホの実機でも行います。
写真を大きなまま載せる
美しい写真ほど重く、ページが開く前に帰られてしまいます。私たちも写真3枚の埋め込み方を誤り、ページを9MBにしてしまったことがあります。
デザインについてよくある質問
テンプレートを使ったデザインではだめですか？
見た目を整えるだけなら、テンプレートでも形にはなります。ただ、目指すのは、見つけてもらい、読んでもらい、連絡をもらうところまでです。そのためには、ページの目的に合わせて、目立たせる場所や予約までの道筋を決める必要があります。テンプレートを土台にするかどうかも含めて、最初にご相談ください。
デザインの好みを、うまく言葉にできません。
言葉にしていただかなくても進められます。気に入っているサイトや、お店の雰囲気が分かる写真を見せていただければ、そこから方向性をすり合わせます。AIで出した配色の候補を並べ、選びながら決めていくこともできます。
スマホとパソコンで、デザインは別々に作るのですか？
同じページが、画面の大きさに合わせて並び方を変える作りにするのが一般的です。私たちは、スマホで見る人が多いことを前提にしています。スマホでの読みやすさとボタンの押しやすさを確かめながら仕上げます。
写真は、どんなものを用意すればいいですか？
お店の様子や、お客様に体験してほしい場面が伝わる写真が役に立ちます。味噌蔵の例では、商品の写真より蔵の中の写真を主役にしました。手元にない場合は、撮影の段階でどの場面を撮るかを一緒に決めます。