COLUMN

よく検索されるキーワード

ホームページの第一印象を決める「ヒーロービジュアル」の作り方|3秒で伝わるトップデザインの法則

ホームページの第一印象を決める「ヒーロービジュアル」の作り方|3秒で伝わるトップデザインの法則

ヒーロービジュアルとは?役割と重要性 ホームページの最上部に配置される大きなビジュアル。それが ヒーロービジュアル(Hero Visual) です。 ユーザーはサイトに訪れて 3秒で第一印象を判断します。この3秒で、 何の会社か 自分に関係があるか 信頼できそうか この先を読む価値があるか を決めています。 つまりヒーロービジュアルは、企業の顔であり、ブランドを象徴する最重要エリア です。 良いヒーロービジュアルに共通する3つの条件 ① 誰に何を提供する会社かが一瞬でわかる 抽象的すぎる言葉や写真はNG。 例:×「未来をつくる」○「地域企業の売上アップを支援するWeb制作会社」 機能+価値 が伝わるコピーが理想。 ② 強み・魅力が一言で伝わる ユーザーは理解できないと読み進めません。 例:「実績350社」「地域密着」「短納期対応」「採用に強い」「LP特化」など。 数字・具体性は信頼の裏付けになる。 ③ 写真や画像に“世界観”がある 中小企業ほどここで差がつきます。 明るい写真 統一されたトーン 余白のあるデザイン 主語がはっきりした構図 企業の雰囲気が伝わる 適当なフリー素材を使うと違和感が出ます。 ヒーロービジュアルを作る際のステップ 掲げるメッセージを決める ここが最重要ステップです。 メッセージは“ユーザーのメリット” を主語にします。 NG例:「私たちは〜〜します」「理念・想い」だけの抽象ワード OK例:「採用に強いホームページで応募数UP」「職人の技術を伝えるブランディングデザイン」 世界観を定めた写真・画像選び 写真はヒーロービジュアルの印象を80%決めると言われています。 ポイント: 実際のスタッフ写真が最強 業務風景が“リアル”を伝える 画質は高く、余白を残す 背景がごちゃつかない フリー素材を使うならテーマを統一 “誰が・何をしているのか”がわかる写真がベスト。 レイアウト・余白・タイポの基本 デザインルールは以下の通り: 文字を詰めすぎない 左寄せ or 中央寄せを明確化 10〜15字以内の短い言葉で伝える サブコピーで具体化 ボタン(CTA)は強調色を使う 高級感を出したい場合は“余白”を増やす ヒーロービジュアルは「視線の流れ」を意識することが重要です。 成果につながるヒーロービジュアルの実例 成果が出ている企業に共通する特徴は以下。 ■ 実例①:採用サイト(応募率1.7倍) 改善点: 働く人の写真に変更 キャッチコピーを“メリット型”に CTAを「まずは見学へ」に変更 ■ 実例②:BtoBサイト(商談数1.4倍) 改善点: 業務中の写真を起用 実績数を記載 CTAをページ上部に追加 ■ 実例③:美容サロン(予約率UP) 改善点: トーンをベージュ系に統一 メッセージを“価値訴求型”に変更 ボタンの色を調整し視認性アップ 失敗しがちなヒーロービジュアルの特徴 × 抽象的なキャッチコピー 何をしている会社かわからない。 × 豪華すぎるスライダー 読み手の注意が分散するため逆効果。 × フリー素材の多用 どこでも見たことある印象になり、差別化ができない。 × CTAが目立たない 導線が弱く、問い合わせにつながらない。 まとめ:ヒーロービジュアルは“企業の顔”になる ヒーロービジュアルは“第一印象で勝つための最重要エリア”。 メッセージ 写真 余白 レイアウト ボタン配置 これらを戦略的に設計することで、サイト全体の成果が大きく変わります。「一瞬で価値が伝わるトップページ」を作ることが、Webサイト成功の第一歩です。 成果を生むページ構成の考え方についてはこちらの記事でも詳しく紹介しています。コンバージョン率を上げる導線設計とは?成果を生むページ構成の考え方(→https://refu.co.jp/column/conversion-design/) 無料相談 Refuでは、キャッチコピー制作、写真撮影ディレクション、デザイン制作までブランド価値を高めるトップページ制作 を提供しています。「第一印象で選ばれるサイトを作りたい」という企業様はお気軽にご相談ください。  👉デザイン改善のご相談はこちら

UI/UXとは何か?成果を左右するユーザー体験設計の基本|使いやすさで変わるサイトの成果

UI/UXとは何か?成果を左右するユーザー体験設計の基本|使いやすさで変わるサイトの成果

UIとUXの違いとは? まず最初に押さえておくべきポイントは、UI と UX は別物であり、役割も違う ということです。 ■ UI(ユーザーインターフェース) =「画面の見た目・操作性」例: ボタンの形 配色 文字の大きさ レイアウト メニューの位置 クリックのしやすさ ■ UX(ユーザー体験) =「サイトを使って得られる体験全体」例: 迷わず目的を達成できるか ストレスなく情報が探せるか 信頼できるか “また使いたい”と思えるか UIは“見た目・操作性”で、UXは“体験そのもの”。 どちらか一方が欠けても成果は出ません。 UI/UXがサイトの成果を左右する理由 UI/UXの改善は、問い合わせ率・離脱率・回遊率などほぼすべての数字に影響 します。 理由は単純で、 ユーザーは「わかりにくい」「使いづらい」だけで離脱する からです。 特に中小企業のサイトでは、 情報が散らばっている メニューが複雑 文字が小さい スマホで押しにくい CTAがわかりにくい などの理由で“意図せず機会損失”が起きています。 UI/UX改善は、広告費を使わず成果が上がる最もコスパの良い改善です。 UI改善の基本ポイント ボタン・文字サイズ・操作性 UI改善で最も効果が出るのは、“操作性を高めること”。 基本の改善ポイント: ボタンサイズは44px以上(スマホ基準) 主要CTAは色を変えて強調 文字サイズは16px以上 行間は1.6〜1.8 余白を広く取る アイコンを活用して視認性UP 特にスマホでの見やすさは絶対条件です。 見やすさを決めるレイアウト ユーザーは文章を“読まない”。流れで理解しています。 デザイン改善ポイント: セクション分けをはっきり 重要情報は上部に 長文はボックスで区切る 図解・写真を活用 同じレイアウトルールで統一感を出す レイアウトの整理だけで、離脱率が大きく改善します。 UX改善の基本ポイント ストレスのない導線設計 UXの根幹は「迷わせない設計」。 改善ポイント: ユーザーの目的に合わせた導線 最短で目的ページに到達できる構造 ペルソナごとの導線(例:料金・事例・サービス) スマホでの操作を優先 フッターにも主要リンクを配置 スクロール後もCTAが常に見える設計 導線改善はCVRを最も大きく押し上げる施策です。 情報の優先順位と理解のしやすさ UX改善では「何を、どの順で見せるか」が重要。 ポイント: ファーストビューで“誰に何を”伝える 課題 → 解決策 → 実績 の流れ 判断材料(料金・事例・実績)を上部に 難しい説明は図解に置き換える 文章の量を最適化(多すぎても少なすぎてもNG) ユーザーが“スムーズに理解できる流れ”を作ることがUX改善の目的です。 UI/UX改善が成果につながった実例 以下は実際の企業での改善例を元にした共通パターンです。 ■ 実例①:相談フォームのUI改善でCVR2倍 改善前: スマホで入力しにくい 必須項目が多い ボタンが小さい 改善後: 入力項目を半分に スマホ最適化 CTAボタンを強調 → 相談件数が月2件 → 月5件に増加 ■ 実例②:UX導線改善で問い合わせ1.7倍 改善前: 実績にたどり着けない ページが長く読みにくい 情報の優先順位が逆 改善後: 実績を上部に セクション整理 CTAの設置場所見直し → 問い合わせ率が1.7倍に改善 ■ 実例③:BtoBサイトのUI改善で滞在時間1.5倍 図解を追加 写真を入れ替え レイアウト整理 メニューを簡易化 → 商談につながる“質の高い流入”が増加 まとめ:UI/UXは「使いやすさ × 迷わせない設計」で成果が決まる UIは“見た目の使いやすさ”、UXは“体験全体”。 どちらもWebサイトの成果に直結します。 操作しやすいUI 理解しやすい情報設計 迷わせない導線 スマホ最適化 統一されたデザイン この5つが整えば、ユーザーはストレスなく目的を達成でき、問い合わせ率は確実に上がります。 成果を生むページ構成の考え方についてはこちらの記事でも詳しく紹介しています。コンバージョン率を上げる導線設計とは?成果を生むページ構成の考え方(→https://refu.co.jp/column/conversion-design/) 無料相談 Refuでは、UI/UX改善・導線設計・サイト構造改善など成果につながるサイト改善サポート を行っています。「UI/UXを改善したい」「問い合わせ率を上げたい」企業様はお気軽にご相談ください。  👉UI/UX改善のご相談はこちら

採用サイトで企業の魅力を伝えるデザイン手法|応募数が増える“伝わる採用設計”の作り方

採用サイトで企業の魅力を伝えるデザイン手法|応募数が増える“伝わる採用設計”の作り方

採用サイトは「集客サイト」と同じくらい設計が重要 採用サイトは、単なる情報ページではありません。企業の魅力を伝え、応募へとつなげる「採用の入り口」です。 求職者は必ずと言っていいほど、 サイトの雰囲気 働いている人の表情 会社の理念 成長環境 を見て応募を判断します。 つまり採用サイトは企業ブランドと求職者の心理を理解したデザイン設計が必要です。 求職者が採用サイトで知りたい5つのこと 採用サイトの目的は「不安を減らし、魅力を増やすこと」。 求職者が知りたがる情報は以下の5点です。 ① どんな会社なのか 雰囲気・働く人のタイプ・組織風土。 ② どんな仕事をするのか 具体的な仕事内容、1日の流れ、現場のリアル。 ③ どれくらい成長できるのか キャリアステップ、スキルアップ環境。 ④ 職場の人間関係はどうか 社員インタビュー、チームの雰囲気。 ⑤ 報酬・待遇はどうか 給与・福利厚生・制度面。 魅力が伝わる採用サイトのデザイン手法 写真とビジュアルで“雰囲気”を伝える 採用では、文章よりも写真の印象が応募率に強く影響します。 ポイント: 笑顔の多い自然な写真 働く現場のリアルな様子 役員・社員の人柄が見える写真 トップ画像は「働く人の写真」を中心に 余白を使い、明るく清潔感のある構成に 写真は“企業の空気感”を伝えるための最重要要素です。 仕事のリアルが伝わるコンテンツ設計 求職者は、仕事内容が曖昧だと不安になります。 改善すべき構成: 1日のスケジュール 実際のタスク 現場の写真 どんなスキルが身につくか チーム構成 仕事のリアルさは応募率を大きく左右します。 働く人を中心にしたストーリーづくり 採用サイトの主役は「会社」ではなく “人” です。 おすすめコンテンツ: 社員インタビュー チームインタビュー 入社理由 業務のやりがい 社長の想い(短めに) 特に“社員の声”は求職者の信頼獲得に直結します。 キャリアステップと成長機会の見せ方 求職者が最も気にするポイントのひとつが将来どう成長できるか。 見せ方: キャリアステップ図 教育体制 入社後のステップ例 昇給・昇格のモデルケース “未来が見える採用サイト”は応募率が高いです。 福利厚生・制度の伝え方 福利厚生は羅列では魅力が伝わりません。写真・アイコン・図解を使い、視覚的に伝えることで印象が格段に良くなります。 例: 各制度の利用率 働きやすさの取り組み 休暇制度の具体例 スマホ最適化が応募率に直結する理由 求職者の7〜8割はスマホで採用サイトを見ています。 スマホで離脱しやすい原因: ボタンが押しづらい 文字が小さい 写真が見えない スクロールが長すぎる スマホ最適化を行うだけで応募率が1.5倍に増えた事例も多くあります。 成果が出る企業に共通する“応募が増える採用サイト”の特徴 実際に応募数が増えている企業には、次の共通点があります。 ✔ 働く人の魅力が前面に出ている → 人柄・雰囲気が伝わる。 ✔ 仕事の理解が深まる構成 → 不安が消える。 ✔ ビジュアルの統一感がある → ブランドとして魅力が上がる。 ✔ キャリア・成長環境が明確 → 将来をイメージしやすい。 ✔ CTA(応募ボタン)がわかりやすい → 応募への導線がスムーズ。 まとめ:採用サイトは「魅力の言語化 × デザイン」で成果が決まる 採用サイトの本質は“企業の魅力をどれだけ正しく伝えられるか”。 魅力そのものが弱いのではなく、伝わっていないだけで損をしている企業が多いです。 写真 ストーリー 情報設計 導線 スマホ最適化 これらが整うだけで応募数は必ず増えます。 伝わるデザインの条件についてはこちらの記事で詳しく紹介しています。制作会社が語る、伝わるデザインの条件とは?(→https://refu.co.jp/column/effective-design-conditions/) 無料相談 Refuでは、採用サイトの企画・構成・撮影ディレクション・デザインまで企業の魅力を最大化する採用サイト制作 を提供しています。「応募数を増やしたい」「採用ブランディングを強化したい」企業様はお気軽にご相談ください。 👉 採用サイト制作のご相談はこちら

問い合わせが増える!フォーム改善の具体的テクニック

問い合わせが増える!フォーム改善の具体的テクニック

フォーム改善が成果に直結する理由 ホームページのゴールの多くは、「問い合わせ数を増やすこと」 にあります。 その中でも問い合わせフォームは最終的なコンバージョンポイント(CV)。 フォームが改善されるだけで、広告費・SEO・LPなどすべての施策の成果が向上します。 💡 事実、多くの企業で「フォーム改善だけ」で送信率が1.3〜2倍に向上した事例は珍しくありません。 入力完了率が下がる“3つの要因” フォームの離脱原因には共通点があります。 ① 入力項目が多い 人は「面倒だ」と感じた瞬間に離脱します。特にスマホでは、入力項目の多さは致命的です。 ② スマホで入力しづらい 小さすぎる入力欄 タップしづらいボタン フォーム全体が見づらい→ これらは離脱の原因になります。 ③ エラーが分かりにくい 「どこを直せばいいのか」が分からないエラー表示はユーザー体験を悪化させます。 送信率を上げる具体的な改善ポイント 入力項目を最小限にする 問い合わせフォームで必要なのは、後からヒアリングできない情報だけです。 例: 名前(必須) メールアドレス(必須) 問い合わせ内容(必須) 電話番号や会社名は「任意」にするだけでも、完了率が上がります。 スマホで入力しやすいUIにする スマホユーザーが過半数を占める今、フォームの改善は“スマホ前提”で考える必要があります。 改善例: 入力欄を画面幅いっぱいに広げる ドロップダウンではなくボタン式を採用 キーボードの種類(数字・メール)を適切に切り替える “スマホで3秒迷うフォームは、ほぼ離脱される” エラーメッセージを分かりやすく エラーメッセージは「何が間違っているか」ではなく「どう直せばいいか」で伝える ことが重要です。 悪い例:「エラーがあります」 良い例:「メールアドレスが未入力です」「@を含めてご入力ください」 送信ボタンのデザイン最適化 CTAは“押したくなる設計”が重要です。 色はブランドカラーの中でも視認性の高いもの サイズは指で押しやすい大きさ テキストは「送信する」より「無料で相談する」など具体的に CTAの改善は最も効果が出やすい改善ポイント。 BtoB企業がやりがちな“逆効果パターン” 企業向けサイトで特に多いのが以下の3つ。 ❌ 入力項目が10項目以上 → 「面倒」ではなく「信用できない」と感じられることも。 ❌ 会社情報を必須にしてしまう → 初回接触の段階でハードルが高すぎる。 ❌ プライバシーポリシーが読みにくい → 不信感を与える原因に。 BtoBほど、入口を“軽く”することが成果につながります。 フォーム改善の効果を測る方法 フォーム改善は“感覚”ではなくデータで判断します。 見るべき数字: 入力開始率 入力完了率 離脱ポイント 離脱ページ 送信数/過去比較 ツール例: Googleアナリティクス ヒートマップ Googleタグマネージャー サーチコンソール 改善は“施策 → 計測 → 再改善”を繰り返すことで成果が最大化。 まとめ:小さな改善が大きな成果につながる 問い合わせフォームは最終的な“売上の入口”です。 入力項目を削る スマホ最適化 エラー表示改善 CTA改善 こうした小さな改善の積み重ねがお問い合わせの圧倒的な増加につながります。 ホームページ集客の基本についてはこちらの記事で詳しく紹介しています。SEO対策って何?初心者が知っておくべきホームページ集客の基本(→https://refu.co.jp/column/seo-basics/) 無料相談 Refuでは、フォーム改善によるCVR向上施策・UI改善・分析サポートを提供しています。「問い合わせを増やしたい」「フォームの離脱を改善したい」方はご相談ください。 👉 フォーム改善・CVR向上相談はこちら

コンバージョン率を上げるための改善ポイント5選|成果が伸びるUX改善と導線設計

コンバージョン率を上げるための改善ポイント5選|成果が伸びるUX改善と導線設計

コンバージョン率(CVR)が伸びない理由は「設計」にある 「アクセスはあるのに問い合わせが増えない…」多くの企業が抱えるこの悩みは、“コンテンツと導線設計の問題” がほとんどです。 CVR(コンバージョン率)を上げるには、大がかりなリニューアルよりも、まず ページのどこで離脱しているか を把握し、ピンポイントで改善していくことが効果的です。 CVRは、デザインの良し悪しより「情報の伝わり方」で決まる。 改善ポイント①:ファーストビューで“誰向けか”を明確にする ユーザーの約70%は、ページを開いて 3秒以内 に判断します。 そこで確認しているのは、 自分に関係あるサービスか このサイトを見る価値があるか 信頼できる会社か です。 改善すべきポイント: キャッチコピーを「誰に」「何を提供するか」で明確化 写真やイメージをターゲットに合わせる メリットを最初に伝える 例:×「未来を創るWeb制作会社です」○「中小企業の“成果が出る”Webサイトをつくる制作会社」 改善ポイント②:CTA(行動導線)を適切に配置する CTA(お問い合わせ・資料請求ボタン)は、CVR向上に直結する最重要パーツです。 改善ポイント: スマホでは常時固定(sticky CTA)を活用 各セクションの最後に配置 ボタン色は背景とコントラストをつける CTA文言は“行動を促す”形に変更 例: ×「送信」 ○「無料で相談する」「1分で簡単入力」 CTAが適切に見えていれば、ユーザーは迷わず行動できます。 改善ポイント③:信頼情報を加えて不安を解消する 問い合わせを迷う理由は、「本当に大丈夫?」という漠然とした不安。 その不安をなくすのが信頼情報です。 入れるべき要素: 実績(数値・企業名) お客様の声 受賞歴 会社情報 スタッフ紹介 写真を多く使った“顔が見える”情報 BtoBサイトでは、信頼情報の改善だけでCVRが1.5〜2倍になることも。 改善ポイント④:読みやすい情報構造(UX)に整理する ユーザーは「読む」のではなく「流れで理解」します。そのため、UX改善が非常に重要です。 改善ポイント: 文章を短く区切る(1文40文字前後) 箇条書きを多用 セクションごとにメリハリをつける 画像と文章を組み合わせて直感的に理解させる 「よくある質問」を入れて不安を解消させる UXが悪い=読まれずに離脱になってしまいます。 “企業の想い”をユーザーに正しく伝える方法についてはこちらの記事で詳しく紹介しています。ストーリーブランディングで“企業の想い”を伝える方法(→https://refu.co.jp/column/brand-storytelling/) 改善ポイント⑤:スマホ最適化で離脱を大幅に減らす Webサイトの 70%以上がスマホ閲覧 という企業も増えています。 よくある課題: ボタンが小さくて押しづらい フォントが小さく読みにくい 改行が少なく読みづらい ページ速度が遅い 改善ポイント: 文字サイズは16px以上 CTAボタンは指で押しやすいサイズに 行間をしっかり取る(1.6以上推奨) 画像最適化で読み込みを改善する 「スマホで読みやすいかどうか」がCVR改善の要。 まとめ:小さな改善の積み重ねがCVRを2倍にする コンバージョン率は小さな改善を積み重ねることで劇的に伸びます。 ファーストビュー CTA UX 信頼情報 スマホ最適化 この5つを改善すれば、ホームページの成果は確実に変わります。 成果を出すアクセス解析の活用法についてはこちらの記事で詳しく紹介しています。成果を出す企業が必ずやっているアクセス解析の活用法(→https://refu.co.jp/column/web-analytics-best-practice/) 無料相談 Refuでは、CVR改善に直結する導線設計・UI改善・コンテンツ最適化 を提供しています。「問い合わせが増えない」「どこを改善すべきかわからない」とお悩みの方はお気軽にご相談ください。 👉 CVR改善・導線設計の相談はこちら

BtoBサイトのデザインで意識すべきポイント5選|“選ばれる企業”になるための信頼設計

BtoBサイトのデザインで意識すべきポイント5選|“選ばれる企業”になるための信頼設計

BtoBサイトは“信頼のデザイン”が最優先 BtoBサイトはBtoCと違い、「比較検討・意思決定者の多さ・リスク回避」 を前提に見られます。 そのため、BtoBでは“おしゃれさ”より“信頼と理解”が圧倒的に重要。 実際に商談につながるサイトは、 事例が豊富 導線が分かりやすい 文章が整理されている 情報不足がない このように“読み手が判断しやすい状態”を作っています。 中小企業のビジュアル設計術についてはこちらの記事で詳しく紹介しています。写真の力で信頼を伝える!中小企業のビジュアル設計術(→https://refu.co.jp/column/photo-branding-small-business/) BtoBサイトで意識すべきデザインポイント5選 信頼を生む“ファーストビュー設計” BtoBの訪問ユーザーは、「この会社は安心できるか?」を3秒で判断します。 ファーストビューで必要なのは: 何を提供している会社なのか 得意領域・強み 実績数や経験年数 メインCTA(資料請求・問い合わせ) 例:「製造業向けシステム開発|導入実績450社」 数字は信頼の裏付けになるため強力です。 実績・事例の見せ方 BtoBでは 事例が最強のコンテンツ です。 意識すべきポイント: 業界別の事例を載せる Before/After 解決した課題 導入後の効果 客観的データ(数値) 特に「自分たちと同じ業種の事例」は、読み手の共感につながりやすい。 企業理解が深まるコンテンツ構成 BtoBは意思決定までに「社内承認プロセス」があるため、複数の人がサイトを見ます。 そのため、以下の情報は必須: 事業内容 料金イメージ 代表メッセージ 実績 お客様の声 会社概要 導入フロー・対応範囲 セキュリティ情報(クラウド・情報管理など) “内部で説明しやすい資料”としてサイトが機能する状態が理想です。 スマホ最適化と見やすさ BtoBでもスマホ閲覧比率は40〜60%に上昇しています。 改善ポイント: 文字サイズ16px以上 読みやすい余白 改行・箇条書き 表・図解を活用 スマホのCTA固定(お問い合わせボタン) スマホで読みにくいサイトは、その時点で候補から外されてしまうことがあります。 導線のわかりやすさ BtoBユーザーは“迷ったら離脱”します。 意識すべき導線: 主要導線(資料請求/相談/お問い合わせ)を全ページに サービス別導線を分かりやすく 実績 → サービスページ → CTA の流れを作る フッターにも主要導線を配置 導線=商談への道筋のこと。ここが整理されている企業は問い合わせが多い。 BtoBサイトは“資料請求型”の導線が最も強い BtoBでは、いきなりの問い合わせより「資料請求 → 商談」 の流れが最も成果が出やすいです。 理由: 社内共有がしやすい 比較資料として使われやすい ハードルが低い 営業につながりやすい 資料請求フォームを設置するだけでCVが1.5〜2倍になった企業は多く存在します。 成果が出る企業に共通するサイトデザインの特徴 以下は実際に問い合わせが増えている企業に共通するポイントです。 ✔ 企業の強みを“言語化+ビジュアル化”している → 抽象的ではなく、具体的に伝えている。 ✔ 業界別・用途別の導線がある → 読み手が「自分向け」と感じやすい。 ✔ とにかく事例が多い → 説得力が圧倒的に増す。 ✔ 表や図解を多用している → 情報の理解が早くなる。 ✔ CTAがわかりやすい → 決裁者が迷わない。 まとめ:BtoBサイトは「誰に」「何を」伝えるかがすべて BtoBで成果が出ているサイトは例外なく、 信頼性 事例量 導線設計 情報の見やすさ スマホ最適化 この5つが徹底されています。 デザインは単なる“見た目”ではなく、商談につながる仕組みそのもの。BtoB企業は、この5つのポイントを押さえるだけで問い合わせ数を大きく伸ばすことができます。 ブランドらしさを伝えるデザイン戦略についてはこちらの記事でも詳しく紹介しています。トーン&マナーの整え方|ブランドらしさを伝えるデザイン戦略(→https://refu.co.jp/column/tone-and-manner-design/) 無料相談 Refuでは、BtoBサイトの企画・情報設計・デザイン・導線改善まで成果につながるWebサイト制作 を一気通貫で支援しています。「問い合わせの増えるBtoBサイトを作りたい」企業様はお気軽にご相談ください。  👉制作相談はこちら

ストーリーブランディングで“企業の想い”を伝える方法

ストーリーブランディングで“企業の想い”を伝える方法

なぜ今「ストーリーブランディング」が注目されているのか 近年、企業ブランディングにおいて「ストーリー」が強い力を発揮しています。商品やサービスがあふれる今、ユーザーは“機能”ではなく“共感”で選ぶようになっているからです。 💬 たとえば——「この会社が好きだから買いたい」「この想いに共感できる」 こうした感情のつながりを生み出すのが、ストーリーブランディングです。 ストーリーとは、“企業の存在理由”を伝える最も人間的な手段。 企業が語るべき“3つのストーリー” ストーリーブランディングを成功させるには、企業の本質を軸に物語を設計する必要があります。以下の3つのストーリーが基本構成です。 種類内容例原点ストーリー創業の想い・きっかけ「家族の笑顔を守りたい」から始まった成長ストーリー失敗・挑戦・乗り越えた経験「お客様の声に救われた」経験未来ストーリーこれから実現したいビジョン「地域とともに成長する企業へ」 💡 ポイント: 感情が動くのは「課題→挑戦→成長→未来」の流れ。単なる沿革ではなく、人のドラマとして構成することが大切です。 共感を生むストーリーの構成要素 ストーリーを効果的に伝えるには、“感情と論理のバランス”が必要です。 【1】登場人物のリアリティ 代表・社員・顧客など、具体的な人物の声を入れることで臨場感が生まれます。 【2】葛藤と解決 順風満帆な物語よりも、課題に立ち向かう姿が共感を生みます。 失敗を隠すより、どう乗り越えたかを語ることが信頼につながる。 【3】価値観の提示 「何を大切にしている会社か?」がストーリーの核です。企業理念や文化を、言葉ではなく“行動の描写”で見せましょう。 ストーリーブランディングを成功させる4ステップ ステップ内容実践ポイントSTEP1ブランドの目的を明確にする「何のために存在しているか?」を定義STEP2企業の歴史・想いを掘り起こす代表や社員へのヒアリングSTEP3物語構成を作る原点→課題→成長→未来の流れSTEP4各媒体で統一して発信HP・パンフレット・SNSで一貫した物語展開 📘 Refuの実務ポイント: ストーリーは「HPだけ」ではなく、採用ページ・SNS・動画・会社案内などにも展開することで、ブランド力が格段に高まります。 成功企業の事例:想いを形にしたブランディング戦略 事例①:製造業 課題:製品力は高いのに、Webでは差別化できていない。施策:創業者の「職人魂」を軸にストーリーを構成。結果:閲覧時間が2倍に増加、商談率も向上。 事例②:福祉施設 課題:「どこも同じ」に見られていた。施策:施設設立の背景にある「家族の想い」を発信。結果:地域からの信頼が向上し、応募者数が1.5倍に。 💬 成功の鍵は“共感できるリアリティ”。 美辞麗句よりも、「実際に何を感じ、どう動いたか」を語ることが重要です。 まとめ:ストーリーは“理念を伝える最強のツール” ストーリーブランディングは、企業の“魂”を見せるマーケティング。数字では伝わらない「想い」「背景」「努力」が、人の心を動かします。 ストーリーがある企業は、ファンが生まれる。 中小企業だからこそ、“人の温度”を感じるストーリーを大切にしましょう。 企業ブランディングについてはこちらの記事でも詳しく紹介しています。企業ブランディングで差をつける!信頼を高めるホームページの作り方(→https://refu.co.jp/column/branding-website-tips/) 無料相談 Refuでは、企業の想いを掘り起こし、ストーリーブランディングとして形にする企画・取材・ライティング支援を行っています。「自社のストーリーを整理したい」「ブランドの想いを言語化したい」方は、ぜひご相談ください。  👉ストーリーブランディング相談はこちら

ブランドサイトとコーポレートサイトの違いとは?目的別設計の考え方

ブランドサイトとコーポレートサイトの違いとは?目的別設計の考え方

そもそも「ブランドサイト」と「コーポレートサイト」はどう違う? 「うちのサイトはどちらなのか?」Web制作の現場でよく聞かれる質問のひとつです。 一見同じように見えても、ブランドサイトとコーポレートサイトは“目的”がまったく違います。 サイト種別目的主なターゲットコーポレートサイト企業情報・信頼の発信取引先・採用候補・株主ブランドサイトブランドの世界観・価値訴求顧客・ファン・市場全体 コーポレートサイトが「企業の顔」なら、ブランドサイトは「企業の想いを語る舞台」です。 目的で分かれる2つのサイトタイプ Webサイトは、「誰に」「何を伝えるか」で設計が変わります。 コーポレートサイト: 会社全体の概要・信頼・事業内容を伝える。 ブランドサイト: 商品やサービスの魅力、ブランドストーリーを伝える。 💬 たとえばメーカー企業であれば: コーポレートサイト → 「会社の信頼性」 ブランドサイト → 「製品の魅力と世界観」 両方を分けて設計することで、企業の情報もブランドの想いも“深く”伝えられます。 それぞれの特徴と設計の考え方 コーポレートサイト:企業の「信頼」を伝える コーポレートサイトは、会社の“公的な情報源”。ビジネス上の信頼を築くための設計が求められます。 ✅ 重視すべきポイント: 企業概要・代表挨拶・沿革などの基本情報 事業内容や実績紹介による信頼性 採用情報・IR情報などの公式情報 法令遵守・コンプライアンス・個人情報保護の明示 📘 デザインの方向性: シンプル・誠実・クリーン。「安心感」を重視し、明瞭なナビゲーションを意識しましょう。 ブランドサイト:価値と「共感」を生む ブランドサイトは、“世界観”と“ストーリー”を伝えることに特化したサイトです。 ✅ 重視すべきポイント: ブランドコンセプトや想いの発信 プロダクトやサービスのストーリーテリング 写真・動画・コピーなどで感情を喚起 SNSやECとの連携でファンを育てる 💡 デザインの方向性: 印象的なビジュアル・大胆な余白・動きのある表現で“感情に響く体験”を演出。 ブランドサイトは「心を動かすデザイン」。コーポレートサイトは「信頼を築くデザイン」。 成功するサイト設計の3つのポイント ポイント内容意識すべきこと情報整理コーポレート/ブランドの役割を分離目的の重複を防ぐ導線設計互いのサイトをリンクでつなぐブランド→企業、企業→ブランドへ継続運用一貫したトーン&マナーを維持カラー・フォント・写真トーンの統一 📈 Refuの実務ポイント: 両サイトを同時にリニューアルする場合、共通のデザインガイドラインを作成することで、コストを抑えつつブランド統一を図れます。 どちらを優先すべき?判断の基準 限られた予算や期間で「どちらを先に作るべきか」悩む企業も多いでしょう。 状況優先すべきサイトまず企業としての信頼を確立したいコーポレートサイト既に知名度があり、ファンを広げたいブランドサイト新サービス・新商品をリリースするブランドサイト採用や取引がメイン目的コーポレートサイト 💬 Refuの推奨順: 企業全体の土台=コーポレートサイト 魅力を拡張する舞台=ブランドサイト 土台を整えてから「想いを発信する」。これが成功の流れ。 まとめ:2つを使い分けて“企業の全体像”を伝える ブランドサイトとコーポレートサイトは、どちらも企業の価値を支える大切な存在。 コーポレートサイト:信頼の基盤 ブランドサイト:共感の拡張 目的を分けて設計しながら、ビジュアルとトーンを統一することで、“企業全体のブランディング”が完成します。 企業ブランディングについてはこちらの記事でも詳しく紹介しています。企業ブランディングで差をつける!信頼を高めるホームページの作り方(→https://refu.co.jp/column/branding-website-tips/) 無料相談 Refuでは、コーポレートサイト・ブランドサイトの目的別設計と一貫ブランディングをトータルで支援しています。「どちらを作るべきか迷っている」「両サイトの設計を整理したい」方は、ぜひご相談ください。  👉ブランド/コーポレートサイト設計相談はこちら

採用サイト制作で応募数を増やす!デザインとコンテンツの戦略

採用サイト制作で応募数を増やす!デザインとコンテンツの戦略

採用サイトの役割とは? 採用活動の中心は、求人媒体やSNSだけではありません。今や多くの求職者が「応募前に企業の公式サイトを確認する」のが当たり前。 採用サイトの目的は、応募数を増やすことだけでなく、“会社の魅力を伝えること”です。 採用サイト=求職者に“働くイメージ”と“信頼”を与えるメディア。 デザイン・構成・コンテンツの作り方次第で、応募の質も量も大きく変わります。 応募数を増やすための3つの戦略 デザインで“働くイメージ”を伝える 採用サイトで最も大切なのは、「視覚的に伝える力」。 求職者は写真やレイアウトから“雰囲気”を感じ取っています。 ✅ デザインで伝えるべき要素 社内の空気感(オフィス・チーム写真など) 職場のリアルな表情(社員スナップ・インタビュー) カラーやトーンで企業文化を表現 💡 ポイント: “おしゃれ”よりも“自分が働く姿を想像できるか”が鍵。 コンテンツで“共感”を生む 採用サイトのコンテンツで最も響くのは「ストーリー」です。企業理念や制度説明よりも、実際の社員の声・リアルな体験談が求職者の心を動かします。 📌 コンテンツ例: 社員インタビュー(入社理由・成長エピソード) 1日のスケジュール紹介 キャリアステップ図解 経営者メッセージ(言葉の温度を伝える) “働きたい”ではなく、“この人たちと働きたい”と思わせる構成を。 導線で“行動”につなげる どんなに良い内容でも、応募までの導線が遠いと離脱します。 理想の導線設計は以下の流れ: トップページで興味を引く 社員紹介・制度・仕事内容で共感を深める 応募フォームへスムーズに誘導 💬 ワンポイント: 応募ボタンは常に画面内(固定ボタンなど)に配置し、“行動を邪魔しない”設計を意識。 成功する採用サイトの実例 事例①:医療系企業/応募数3倍 Before:求人媒体のみ掲載。応募ゼロ。 After:採用専用サイトを制作し、社員インタビューを追加。→公開3か月で応募数が3倍に。 事例②:製造業/採用ミスマッチ減少 Before:仕事内容が抽象的で離職率が高かった。 After:1日の流れ・仕事内容を動画で可視化。→「想像と違う」離職が減少し、定着率UP。 📈 成功の共通点:「情報を増やす」のではなく、「伝わる形に変えた」。 成果を出す中小企業ホームページの共通点についてはこちらの記事でも詳しく紹介しています。成功事例から学ぶ!成果を出す中小企業ホームページの共通点(→https://refu.co.jp/column/successful-small-business-websites/) 採用ページとコーポレートサイトの違い 比較項目採用サイトコーポレートサイトターゲット求職者顧客・取引先コンテンツ社員・職場・理念事業内容・実績トーン共感・温かさ重視信頼・安心重視ゴール応募・エントリー問い合わせ・契約 💡 結論: 採用サイトは“もう一つのブランドサイト”。求職者の目線に立った表現が欠かせません。 制作前に整理すべき3つのポイント 採用したい人物像を明確にする  →「どんな人が活躍しているか」を言語化。 強み・魅力を洗い出す  →給与・福利厚生よりも“人間関係・働き方”が鍵。 写真・インタビュー素材を準備する  →取材・撮影の段階で「企業らしさ」を引き出す。 🧭 制作会社への依頼時にこれらを整理しておくと、制作の精度が格段に上がります。 まとめ:採用サイトは「会社のもう一つの顔」 採用サイトは、単なる求人ページではありません。 “会社の価値観”と“人の温度”を伝えるメディアです。 デザイン・コンテンツ・導線が一体となった採用サイトは、「応募が集まる」だけでなく、「共感する人が集まる」仕組みになります。 信頼を高めるホームページの作り方についてはこちらの記事でも詳しく紹介しています。企業ブランディングで差をつける!信頼を高めるホームページの作り方(→https://refu.co.jp/column/branding-website-tips/) 無料相談 Refuでは、採用サイトの企画・取材・デザイン・運用までワンストップで対応しています。「応募数を増やしたい」「魅力を伝える採用サイトを作りたい」方は、ぜひご相談ください。 👉 採用サイト制作のご相談はこちら

Contact us

WEB制作に関するお悩みがある方は
お気軽にご相談ください。