ホームページ制作で不安になりやすいのは、完成するまで「どんな見た目になるのか」「本当に自分の事業に合うのか」が分かりにくいことです。
今回紹介するのは、Re:Connect Style（リコスタ） の制作過程です。
リコスタは、紙の名刺、NFCデジタルカード、ミニホームページ、ヒアリングを組み合わせて、名刺交換を「配って終わり」ではなく「仕事につながる入口」に変えるサービスです。
このホームページでは、最初から1つのデザインだけを出して終わりにはしませんでした。
目的を整理し、参考デザインの方向性を読み取り、複数のトップページ案を実際のページとして作り、さらに「この画像の方向性が良い」という反応から追加案まで作りました。
制作の流れを読む前に、まずは実際の比較ページを開くと分かりやすいです。
このページでは、トップ画面の複数案をそのまま見比べられます。完成イメージを言葉だけで想像するのではなく、「この方向が好き」「これは少し違う」と見ながら選べるのが大きなポイントです。
制作前に整理したこと
まず整理したのは、「リコスタは何を売っているサービスなのか」ではなく、「お客様がどう変われるサービスなのか」です。
制作時に見えていたリコスタの価値は、次のようなものでした。
- 紙の名刺で、相手の記憶に残る
- デジタルカードで、あとから情報を見返してもらえる
- ミニホームページで、SNSやプロフィールをまとめられる
- ヒアリングで、自分の強みや人柄を言葉にできる
- リコスタメンバーやコミュニティにつながり、紹介や応援が生まれやすくなる
つまり、ただのデジタル名刺サイトではありません。
「名刺交換をしたのに、仕事につながらない」
「SNSやプロフィールがバラバラで、自分の魅力が伝わらない」
「交流会で会っても、あとから思い出してもらえない」
そんな人に向けて、出会いを次の相談につなげる仕組みを作るホームページが必要でした。
参考デザインは、世界観を翻訳するために使う
今回、参考にしたデザインのひとつが、近鉄の「まわりゃんせ」ページのような、明るく楽しいパンフレット感のある構成でした。
参考サイトの画面を見ながら、色・余白・写真の重ね方・パンフレットのような楽しさを確認しました。
ここで大切なのは、参考サイトをそのままコピーすることではありません。
「なぜそのデザインが良く見えるのか」を分解し、リコスタの事業に合う形へ翻訳することです。
今回なら、参考にしたのは次のような空気感です。
- 見ていてワクワクする
- 説明が固くなりすぎない
- 色や図解で直感的に分かる
- 旅行パンフレットのように、次に見る場所が自然に分かる
- サービスの使い方が楽しく想像できる
リコスタの場合は、それを「名刺交換ガイドブック」のような見せ方へ置き換えました。
名刺、デジタルカード、ミニホームページ、コミュニティ。
これらを難しいITサービスとして見せるのではなく、「自分のつながりを育てる道具」として見えるようにするためです。
1案で決めず、見ながら一緒に選ぶ
最初に出したのは、現行に近いやさしい案と、インパクトを強めた複数案でした。
ただ、実際に見ていく中で「トップにもっとインパクトがほしい」という方向性が見えてきました。
そこで、比較ページを作りました。
この比較ページでは、現行案、A案、B案、C案、D案をまとめて確認できます。
しかも、PCだけではありません。
スマホで見たときの第一印象も、同じページで確認できるようにしています。
これは、ホームページ制作ではかなり大事です。
PCで見たら良いけれど、スマホで見ると印象が弱い。
逆に、スマホでは良いけれど、PCで見ると余白や迫力が足りない。
そういうズレは、実際のページで見比べるとすぐ分かります。
だから、ストーリー型HPプロジェクトでは、できるだけ「言葉だけの説明」ではなく、見える形で提案することを大切にしています。
添付画像の方向性が良かったので、2案を追加
制作の途中で、リコスタの世界観に合いそうな画像として、こちらのチラシ画像が共有されました。
この画像には、リコスタらしさがかなり出ていました。
名刺交換に対するモヤモヤ。
「結局、自分の強みって分かっていないんよな」という本音。
そして、nearbyカードの明るくポップな印象。
ここから、「この方向性をトップに活かしたら、もっと一瞬で伝わるのでは」と考えました。
そこで追加したのが、チラシビジュアルを活かしたC案と、漫画ビジュアルを活かしたD案です。
これは、単に「画像を差し替えた」だけではありません。
トップページの役割そのものを見直しています。
最初の一瞬で、次のことが伝わるようにしました。
- 名刺交換で覚えてもらえない悩みがある
- リコスタは、紙とデジタルでその悩みを解決する
- 起業初期や交流会に出る人に関係がある
- 実績や相談導線まで見える
- 明るく、話しかけやすい雰囲気がある
「この画像がいいですね」で終わらせず、その良さをホームページの構成・コピー・導線に反映する。
ここが、制作過程でとても大事なところです。
採用されたトップページ
最終的に、チラシビジュアルを活かしたC案がトップページとして採用されました。
大きなコピーは、次の言葉です。
自分の価値が伝わる名刺を、出会いの入口に。
これは、リコスタの価値をかなり短く表しています。
名刺を作ることが目的ではありません。
デジタルカードを持つことが目的でもありません。
交流会で出会った相手に、あとから思い出してもらい、相談につながる入口を持つこと。
それが、リコスタが届けたい変化です。
だからトップページでは、細かい機能説明より先に「自分の価値が伝わる名刺を、出会いの入口に。」という未来を出しました。
そのうえで、紙名刺、デジタルカード、リコスタの考え方、実績、公式LINE相談へ自然につながる導線を置いています。
仕組みまで見えるようにする
リコスタのホームページでは、ファーストビューだけでなく、サービスの仕組みも図解で伝えています。
紙の名刺で記憶に残す。
NFCカードやミニホームページで記録に残す。
さらに、公式LINEやコミュニティを通じて、つながりを続ける。
この全体像が見えると、読者は「ただカードを作るサービスではないんだ」と理解できます。
良いホームページは、機能を並べるだけではありません。
読者が「だから自分に必要かもしれない」と納得できる順番で見せる必要があります。
4コマで、読者の本音を先に言葉にする
リコスタのようなサービスでは、読者がまだ自分でも言葉にできていない悩みがあります。
名刺交換はしている。
でも、仕事につながっていない。
SNSもある。
でも、相手の記憶には残っていない。
この感覚を、文章だけで説明すると少し固くなります。
そこで、4コマや図解を使って、読者が「これ、自分のことかも」と感じられる入口を作りました。
売り込みから入るのではなく、読者の本音を先に受け止める。
それができると、ホームページは読みやすくなります。
WordPressで、あとから育てられる形に
完成したリコスタサイトは、見た目だけの静的ページではありません。
WordPress化し、運用しながら育てられる構成にしています。
今回入れた主な内容は、次の通りです。
- トップページ
- サービスページ
- 制作実績ページ
- 実績の個別ページ
- コミュニティページ
- お知らせ・ブログ投稿
- 代表ストーリー
- お問い合わせ
- プライバシーポリシー
さらに、制作実績は25件、コミュニティは4件を初期データとして登録しました。
管理画面から、制作実績やコミュニティ情報を増やしていけるようにしています。
ホームページは、作って終わりではありません。
リコスタの場合も、実績が増えるほど信頼が増え、メンバーが増えるほどコミュニティの魅力が伝わりやすくなります。
だから最初から、あとで育てられる構造にしておくことが大切です。
この制作過程で伝えたいこと
今回のリコスタ事例で一番伝えたいのは、デザイン案をたくさん出したことそのものではありません。
大切なのは、依頼者の反応を見ながら、理想に近づけていったことです。
最初に整理した目的があります。
参考にしたいデザインがあります。
実際に作ってみた案があります。
それを見て、「もっとインパクトがほしい」「この画像の方向性が良い」と分かる。
そこから、追加案を作り、比較し、納得して選んでいく。
この流れがあると、依頼する側も安心できます。
「なんとなく違う」と感じたときも、その違和感をもとに次の案を作れるからです。
ストーリー型HPプロジェクトでは、AIもフル活用します。
リサーチ、参考サイトの分析、コピーライティング、ページ構成、図解、画像、WordPress化、運用しやすい投稿設計まで、必要に応じてまとめて考えます。
ただ作業を早くするためのAIではありません。
依頼者の理想を、具体的なページにするためにAIを使います。
自分のホームページも、見ながら相談できます
ホームページを作るとき、最初から完璧に説明できなくても大丈夫です。
「このデザインが好き」
「この画像の雰囲気がいい」
「もっとインパクトがほしい」
「うちのお客様には、ここを先に見せたい」
そういう言葉をもとに、構成やコピー、デザイン、導線へ落とし込んでいきます。
今回のように、実際のページで比較できると、選びやすくなります。
そして、完成後の姿が見えると、依頼する前の不安もかなり減ります。
自分の事業でも「こういうふうに一緒に考えてほしい」と感じた方は、まずは相談してみてください。