前回は、AIを使ってコーポレートサイトの構成を設計する方法についてお話ししました。
前回の記事は、こちらです。
AIでコーポレートサイトの構成を設計する方法とは？必要なページと作り方
今回は、その続きです。
テーマは、デザインです。
- サイト制作では、構成も大切です。
- 文章も大切です。
- でも、やはり見た目の印象も大切です。
特に今回のリニューアルでは、デザイン性を、重視しました。
理由は、今回のサイト自体が「AI時代のDIY」の実物だからです。
- 「AIを使えば、自作でもここまで作れる」
それを言葉だけでなく、実物で示したかったのです。
今回作ったコーポレートサイトはこちらです。
AIでサイトデザインを作るときに大切なこととは？
AIでサイトデザインを作るとき、大切なのは丸投げしないことです。
AIに「おしゃれなサイトを作って」と伝えるだけでは、なかなか思い通りにはなりません。
- おしゃれ。
- モダン。
- 美しい。
こういった言葉は、人によって受け取り方が違います。
だから、AIに伝えるときは、もう少し具体的にする必要があります。
今回、最初に伝えた方向性
今回の制作では、最初から次の方向性を大切にしていました。
- モダンであること
- 美しいこと
- 時代に即していること
- WordPress感を出さないこと
- 自作感を良い意味で裏切ること
- このは屋らしい思想が伝わること
- AI時代のDIYを実物で示せること
単にきれいなサイトを作りたいわけでは、ありませんでした。
今回の目的は、もっとはっきりしていました。
- 「スモールビジネスでも、AIと一緒なら、外注に依存せずにモダンなサイトを作れる」
その実例に、したかったのです。
ロゴに頼らないデザインにした
制作の途中で、ロゴを使わない方針にしました。
これは、結果的に良い判断だったと思っています。
- ロゴがないと、サイトが寂しくなるのではないか？
最初は、そう感じるかもしれません。
でも、ブランド表現は、ロゴだけで決まるわけではありません。
ロゴ以外でブランドを表現する
今回のサイトでは、ロゴではなく、次の要素で、このは屋らしさを出しました。
- 余白
- 文字
- 色
- 行間
- 写真ではなく生成画像を使ったヒーロー
- 静かな動き
- 言葉の選び方
- ページ全体の空気感
ロゴがなくても、サイト全体に一貫性があれば、印象は作れます。
むしろ、ロゴを大きく見せるより、余白や文字の方が印象に残ることもあります。
今回のトップページでは、その方向性を意識しました。
余白をかなり大切にした
今回のデザインで、かなり意識したのが余白です。
余白は、ただの空きスペースではありません。
- 余白があることで、文章が読みやすくなります。
- 余白があることで、見出しが強く見えます。
- 余白があることで、サイト全体に落ち着きが出ます。
余白で印象が変わる
同じ文章でも、余白が詰まっていると、少し窮屈に見えます。
反対に、余白が整っていると、読む前から落ち着いた印象になります。
今回のサイトでは、次の部分で余白を意識しました。
- ファーストビュー
- セクション間の余白
- 見出しと本文の余白
- カード同士の余白
- フッターの余白
- フォームまわりの余白
特にスマホ表示では、余白が少し違うだけで印象が変わります。
スマホは画面が小さいため、詰まりすぎると一気に読みづらくなります。
そのため、何度も表示を確認しながら調整しました。
色は、深い緑と朱色を軸にした
サイト全体の色は、かなり絞りました。
使った印象の中心は、深い緑と朱色です。
さらに、背景には紙のような、やわらかい色を使っています。
色数を増やしすぎない
サイトデザインでは、色を増やしすぎると、まとまりがなくなります。
特にコーポレートサイトでは、色数を絞った方が落ち着きます。
今回のサイトでは、主に次のような役割で色を使いました。
- 深い緑：落ち着き、信頼感、思想の深さ
- 朱色：強調、アクセント、熱量
- 生成りの背景色：やわらかさ、読みやすさ
- 白に近い文字色：暗い背景での読みやすさ
色は、装飾ではありません。
読む人に、どんな印象を持ってもらうかに関わります。
このは屋の場合は、強すぎる派手さよりも、静かな芯の強さを出したいと考えました。
フォントは、明朝とゴシックを組み合わせた
今回のサイトでは、明朝体とゴシック体を組み合わせています。
- 見出しには、明朝体。
- 本文には、ゴシック体。
この組み合わせにすることで、落ち着きと読みやすさの両方を狙いました。
見出しは印象を作る
見出しは、ページの印象を大きく左右します。
今回のサイトでは、見出しに少し余韻が出るようにしました。
例えば、使命・理念のページでは、言葉そのものが強く見えるようにしています。
見出しの文字が弱いと、ページ全体の印象も弱くなります。
逆に、見出しが整っていると、それだけでサイトに芯が出ます。
本文は読みやすさを優先する
本文は、読みやすさを優先しました。
どれだけデザインが良くても、文章が読みにくいと意味がありません。
特にスマホでは、本文の読みやすさが重要です。
今回のサイトでは、次の点を意識しました。
- 文字サイズ
- 行間
- 一行の長さ
- 余白
- 日本語の改行
あとから、スマホ表示の不自然な改行も、かなり調整しました。
これは地味ですが、とても大切な作業でした。
スマホ表示を何度も調整した
今回、かなり時間を使ったのがスマホ表示です。
今は、多くの人がスマホでサイトを見ます。
だから、PC表示だけ整っていても不十分です。
むしろ、スマホで自然に読めるかどうかが大切です。
スマホで気になったこと
スマホ表示では、次のような点を確認しました。
- メニューが開きやすいか？
- 文字が小さすぎないか？
- 見出しが不自然に改行されないか？
- 余白が詰まりすぎていないか？
- スクロール時にカクつかないか？
- フォームが入力しやすいか？
- フッターが読みやすいか？
実際、制作中には、いくつか問題もありました。
- 例えば、メニューを開いたときにコンテンツと重なって見えることがありました。
- スクロール時にカクつくこともありました。
- 見出しの改行が不自然になることもありました。
こうした部分を、ひとつずつ直していきました。
日本語の改行は難しい
特に難しかったのが、日本語の改行です。
日本語は、英語のように単語ごとにスペースで区切られていません。
そのため、スマホでは不自然な位置で改行されることがあります。
例えば、言葉の途中で切れると、かなり気になります。
- こうした改行は、読めないわけではありません。
- でも、美しくありません。
- 違和感が残ります。
そこで、スマホ表示だけ、自然に改行されるように調整しました。
これは、AIだけでは、判断しきれない部分です。
最後は、人間の違和感が大切になります。
OGP画像やfaviconも整えた
サイト本体だけでなく、周辺の画像も整えました。
OGP画像
OGP画像とは、SNSなどでページが共有されたときに表示される画像です。
ページの第一印象に関わります。
今回のサイトでは、専用のOGP画像も用意しました。
下層ページにも、それぞれ内容に合ったOGP画像を設定しています。
細かい部分ですが、こうした部分まで整えると、サイト全体の完成度が上がります。
faviconとapple-touch-icon
faviconは、ブラウザのタブなどに表示される小さなアイコンです。
apple-touch-iconは、iPhoneなどでホーム画面に追加したときに使われるアイコンです。
これらも、サイトの印象に関わります。
特にapple-touch-iconは、実際にiPhoneで確認すると画質が気になることがありました。
そこで、画像を見直して調整しました。
フォームの見た目も整えた
お問い合わせページやテンプレート申込ページには、フォームがあります。
フォームは、外部サービスを使っているため、完全に自由にデザインできるわけではありません。
それでも、できる範囲で整えました。
お問い合わせフォーム
お問い合わせページは、こちらです。
フォームでは、次の点を調整しました。
- 入力欄の見た目
- ラベルの表示
- 余白
- 送信ボタン
- スマホでの入力しやすさ
- reCAPTCHAの案内文
フォームは、最後の行動に近い場所です。
ここが雑に見えると、もったいない。
入力する人が不安にならないように、できるだけサイト全体の雰囲気に合わせました。
AIとデザインを作るときの注意点
今回の制作を通じて、AIとデザインを作るときの注意点も見えてきました。
1. 抽象的な言葉だけで終わらせない
「モダンにしてください」だけでは、AIも迷います。
もう少し具体的に伝えた方が、結果が良くなります。
- 余白を広めにしたい
- 落ち着いた色にしたい
- 明朝体を使って思想感を出したい
- スマホで見やすくしたい
- 売り込み感を弱くしたい
- 静かな高級感を出したい
このように伝えると、方向性が合いやすくなります。
2. 違和感をそのまま伝える
デザインを見て、何か違うと感じることがあります。
そのときは、遠慮せずに伝えた方が良いでしょう。
- 少し古く見える
- 余白が詰まっている
- 色が弱い
- 文字が大きすぎる
- スマホで読みにくい
- 少し売り込み感が強い
感覚的な言葉でも、大丈夫です。
AIは、その違和感をもとに、修正案を出してくれます。
3. 最後は実物で確認する
AIの提案だけで判断しないことも、大切です。
実際に表示して、確認します。
- PCで見る
- スマホで見る
- ページをスクロールする
- メニューを開く
- フォームを見る
- リンクを押す
実物で見ると、文章だけでは分からない違和感が見つかります。
今回も、実機スマホで確認したことで、いくつもの修正点が見つかりました。
まとめ
今回は、AIと一緒にコーポレートサイトのデザインを作り込んだ話をしました。
要点をまとめます。
- AIにデザインを丸投げしない
- 最初に方向性を具体的に伝える
- ロゴに頼らず、余白・文字・色でブランドを表現する
- 色数を絞ると、サイト全体にまとまりが出る
- フォントは印象と読みやすさに関わる
- スマホ表示は何度も確認する
- 日本語の改行は、人間の違和感で調整する
- OGP画像やfaviconも、サイトの印象に関わる
- フォームの見た目も、信頼感に影響する
AIを使えば、自作でもかなり高いレベルのデザインを目指せます。
ただし、AIに任せきりにするのではありません。
- 人間が方向性を決める。
- 違和感を伝える。
- 実物を確認する。
- そして、少しずつ整える。
この流れが、大切です。
実際のサイトは、こちらから確認できます。
次回は、WordPressではなく、HTMLサイトにした理由についてお話しします。
コーポレートサイトをWordPressで作るべきか？HTMLサイトで作るべきか？
その考え方を、今回の実践をもとに整理していきます。
