「どんな見た目が好きか」に加えて、「何を相談できるサイトなのか」を伝えたい。TASUMIRAでは、3種類のデザインイメージを比べ、文字と構成を中心にしたB案を選びました。ここでは、選択から確認用サイトへの反映までを振り返ります。
先に決めたのは、誰のどんな悩みに応えるか
対象は、発信まで手が回らない小規模事業者やお店。業種は限定せず、「何を発信すればよいか分からない」「誰の役に立てるだろう？」「反応を改善したい」という悩みを入口にしました。
提供する支援は「AIでつくってみる」「考えと学びを届ける」「対話から一緒に試す」の三つです。Webサイト制作は、SNSや記事とつながるマーケティング支援の一部として位置付けています。
写真・文字・立体表現の3方向を比べる
- A案：写真を中心にした温かい表現。相談相手との距離感を近く見せる方向。
- B案：大きな文字と余白、SNS・記事・Webの制作イメージで伝える方向。
- C案：深い青と立体的なビジュアルで、つながりや存在感を表す方向。
比較の際には、B案について「何を依頼できるかが視覚的に伝わる」という見方を提示しました。その後、B案を採用し、大きなコピーと制作イメージを軸に実装へ進めました。
画像のイメージを、操作できるページへ
実装では、画像をそのままサイトに貼るのではなく、見出し・本文・リンク・制作サンプルをHTMLとCSSで組みました。スマートフォンでも文字を読めて、メニューから必要なページへ移動できることを重視しています。
右側の制作イメージも独自のサンプルへ置き換え、実際の納品実績と混同しないよう明記しました。写真中心の生成案から、文字と図形を使ったサンプルへ変えた部分は、採用した方向を実装上の表現に置き換えた箇所です。
確定したF3ロゴは、全ページのヘッダーとフッター、ブラウザーのアイコンへ反映しました。サービスや理念の説明にも、同じ配色と文字のルールを使っています。
表示の確認と、集客の検証は分ける
制作時には、全5ページを375px・768px・1440pxの幅で確認しました。横へのはみ出しや画像の読み込み、スマートフォン用メニューからのページ移動、よくある質問の開閉を確認しています。
一方、この確認だけで「問い合わせが増える」「売上につながる」とは言えません。現在は公開前の確認版であり、実機での操作、WordPressでの更新、問い合わせの送信・受信、本番公開は別工程です。
記事をSNSで紹介し、どんな切り口からサイトを訪れてもらえるかを記録する。記事を読んだ人の感想も聞き、次の改善へつなげます。これらは今後の実践予定で、実施結果ではありません。
自分のサイトでも使える比較の視点
- 最初の画面で、誰のための何のサービスかが分かるか。
- 見た目だけでなく、次に読んでほしいページへ進めるか。
- 公開できる事実と、仮の写真・文章・実績を分けているか。
- デザインの確認と、公開後の効果の検証を分けて考えているか。
まずは小さく作り、確かめて、学んだことを次へ戻す。このサイト自体も、その実践の場にしていきます。
AIで試していることと、これから一緒につくりたいことを紹介しています。
TASUMIRAの取り組みを見る ↗