ホーム  >  WEBデザイン  >  問い合わせが来るようになった自社サイトリニューアルの裏側。制作フローとポイントをデザイナーが解説します!

問い合わせが来るようになった自社サイトリニューアルの裏側。制作フローとポイントをデザイナーが解説します!

問い合わせが来るようになった自社サイトリニューアルの裏側。制作フローとポイントをデザイナーが解説します!

WEB制作会社であるエレメントは、2023年8月に自社ホームページをリニューアルしました。

リニューアルの結果、問い合わせや求人応募数、講座の申し込み数が増加し会社にさまざまなメリットをもたらしました。

そこで今回の記事では、エレメントのホームページリニューアルを題材に、制作の手順と問い合わせが来るようになったポイントをデザイナー目線で解説していきます。

ホームページのリニューアルを検討している方は、ぜひ参考にしてみてください。

リニューアルを決めた背景

今回ホームページをリニューアルしたのは、以下の理由からです。

  • ホームページから受注に繋がる問い合わせを増やしたい
  • 採用に力をいれていきたい
  • 講座を始めるための土台をつくりたい

エレメントはもともと少人数のWEB制作・WEBマーケティング会社でしたが、メンバーを増やし事業を拡大するタイミングで、ホームページをより機能させ活用していこうと決めました。

ただ機能を足すのではなくて、WEBマーケティング・WEB制作会社としてのブランディングを高めていくためにも、全面リニューアルを選択しています。

ホームページのコンセプトを「北海道のWEB集客に悩む企業様が、エレメントのサービスの価値を理解し、信頼して次の行動に繋げてもらえるサイト」に定め、制作に踏み出しました。

リニューアルの手順

リニューアルの手順

どのようにホームページのリニューアルがなされたのか、手順をポイントごとに紹介していきます。

  1. 社内での意見・要望の収集
  2. 戦略を立てる
  3. 戦略をもとにしたサイト設計・デザインの作成

エレメントではディレクター、デザイナー、ライター、コーダーがチームになって進めていくため、今回も役割分担をしながら進めていきました。

1.社内での意見・要望の収集

まず、社内で「どんなホームページにしたいか」「今のサイトで気になっていること」など意見・要望などを集めました。

実際に「ブログページが複数ありわかりにくい」「自分たちの強みをもっと出した方が良い」などの声が上がりました。

意見をできるだけ多く集めることで、視野が広がり、リニューアルの課題がより見えてきます。

2.戦略を立てる

次にディレクターが、課題をもとにホームページの目的やターゲット、ゴール、コンセプトなどの戦略を立てていきます。

自分たちの強みをどのように伝えゴールまで誘導するか、方向性をしっかり決めることで、複数人で作業してもぶれずにホームページを作り上げることができます。

今回、ホームページのゴールを

  • 問い合わせ(無料相談)
  • 資料ダウンロード
  • メルマガの登録
  • 講座申し込み
  • 求人申し込み

に設定し、サイト設計をしていきました。

3.戦略をもとにしたサイト設計・デザインの作成

ディレクターが作成した戦略をもとに、ホームページを形にしていきます。

デザイナーは、情報の整理→骨組みの作成→デザインへの落とし込みの順で作業を行います。

今回はデザイナー2人で担当したため、コンペのような形でそれぞれデザインを作成し方向性を詰めていきました。下記画像は実際に出した初期のデザイン案です。

3.戦略をもとにしたサイト設計・デザインの作成

現在のサイトとはかなり雰囲気が違いますよね。初期案をベースに、配色や書体、イラスト、写真など、2人で話し合いながら修正を重ねていきました。

「ディレクターが立てた戦略を形にできているのか?」「ユーザーが使いやすいサイトになっているか?」という問いかけから、設計やデザインを納得がいくまで見直し、現在の形となりました。

また、サイトの文章は言語化のプロであるディレクターとライターが考えています。

デザイナー目線の結果を出すためのポイント

次に、目的を達成するホームページを目指し、デザイナーがこだわった部分を3つに絞って解説します。

メインカラーの変更

メインカラーの変更

もともと、エメラルドグリーンがコーポレートカラーであり、メインカラーでした。そのため初期デザイン案を出し合った際にも、ほぼ同じ配色で作成しています。

今回のリニューアルでは「信頼」が重要なキーワードになっていたため、コーポレートカラーから見直すことにしました。

メインカラーは信頼や誠実のイメージがあるネイビーにしました。また、キーカラーは目立たせるため、ネイビーの補色に近いオレンジを採用しています。

サイトのゴールに設定している「無料相談」と「資料ダウンロード」のボタンが目立ち、ユーザーを誘導しやすくする狙いがあります。

人物の写真で安心感と説得力を

人物の写真で安心感と説得力を

担当者やお客様など、人の写真を使用することを意識しました。

「生産者の顔がパッケージにのっている野菜は安心して買える」といったように、作り手の顔が見えると安心感や信頼感が高まります。

求職者に会社の雰囲気を伝え、採用にも繋げたいという思いもありました。

また、トップページには、エレメントがサポートさせていただいているお客様との写真を掲載させていただています。

実際にエレメントが、お客様とどのような関係性で仕事をさせていただいているのかが伝わりやすくなったかと思います。

回遊率を高める設計

エレメントはコンテンツマーケティングを行っている会社のため、SEO記事によるサイト集客を狙っています。

そのため自社ホームページでも、記事から流入したユーザーが他の記事や情報に興味を持ち、サイト内を回遊してもらえる設計を意識しました。

回遊率を高める設計

記事ページにはサイドバーに記事カテゴリや検索窓を設置したり、最後に関連記事を表示したりすることで回遊の導線を作っています。

また、ブログページと実績ページのコンテンツを連動させました。サイドバーにサービス内容や業種、地域別に絞り込めるタグを設置することで、よりユーザーの悩みやニーズにあったコンテンツを提供できるようにしています。

リニューアル後の結果

リニューアルして約半年が経ち、ホームページのゴールに設定していた、問い合わせや求人への申し込み、講座への申し込みが少しずつ増えてきています。

特に求人は、エレメントへの理解や興味が深まった状態でエントリーしてくれる方が増え、採用へと直結しやすくなりました。

実際に新入社員に聞いてみると、「採用ページだけではなく、ビジョンやブログページで理解を深めることができた」と答えてくれました。

最後に

今回は、実際のエレメントサイトリニューアルの事例を通して、私たちがどのようにサイト制作を行っているのかをご紹介しました。

エレメントのデザイナーがこだわっているのは、戦略を形にし、それを言語化することです。

デザインは課題解決のための手段であるため、どのように課題解決しゴールに導くかを、客観的な根拠を用いて説明することを大切にしています。

もちろん、一度で全てうまくいくことはほとんどありません。エレメントでは作って終わりではなく、長期的な目標を立てて修正や更新を繰り返しながら、サイトを育てていきます。

ホームページのリニューアルを検討している方や、サイト集客に悩んでいる方はぜひ一度エレメントへご相談ください。

結果を出すためのホームページの運用をサポートいたします。

まずは無料相談から、お気軽にご連絡ください。

無料相談はこちら

お問い合わせ

WEBサイトに関するお悩みはお気軽にご相談ください

Tel:070-4337-8230 お問い合わせはこちら

資料ダウンロード

サービス内容をまとめた会社案内をご用意しております。ご検討の際ご活用ください。

資料をダウンロード

無料メールマガジン登録

講座の最新情報や会員限定のコンテンツを配信しています。

エレメントの無料メールマガジンでは最新情報などを受け取れます。ご登録は以下よりお願いいたします。