株式会社エス・ワイ・エス様(コーポレートサイト)|Web制作実績 レスポンシブ対応|制作実績

株式会社エス・ワイ・エス様

競合他社との差別化につながる設計・デザインとSEO対策の強化により、お問い合わせが増加

クライアント 株式会社エス・ワイ・エス様(東京都台東区)
制作プラン Meta定額制30プラン
カテゴリ コーポレートサイト コーポレートサイト・事務所 製造・開発・IT・AI 求人・リクルート強化
URL https://www.sys-inc.jp/
制作チーム
  • ディレクション
    Y.Muraji

  • Webデザイン
    Y.Muraji

  • システム
    R.Takimoto

  • マーケティング
    M.Hotta

POINT

制作のポイント

トレーディングカードを中心に、さまざまなニーズに合わせた特殊印刷をされている、株式会社エス・ワイ・エス様のコーポレートサイトをリニューアルいたしました。


今回のリニューアルの目的として、「企業のブランディングをしたい」「新規のお問い合わせを増やしたい」「サービス内容をわかりやすくしたい」「SEOを強化したい」「リクルートを強化したい」の5つのご要望を頂きました。


まずは、ブランドのイメージアップのため、テキストが羅列されただけでお客様のサービスの魅力が伝わっていなかった旧サイトのデザインを一新いたしました。例えば、サイトに訪れたユーザーが「特殊印刷に特化した会社」と一目でわかるよう、メインビジュアルのカラーチャート写真をはじめ、サービスや製品をイメージしやすい写真を多く取り入れております。会社の「明るく誠実な雰囲気」が伝わる写真を厳選し、一つひとつに細かなレタッチを加えることで、お客様の丁寧なサービスと鮮やかな製品を効果的に表現するデザインに仕上げました。

ディレクション
Y.Muraji

印刷会社の中でも複数の自社工場をお持ちの会社は強い訴求ポイントであるため、「首都圏内に4つの印刷工場を保有している」というお客様の強みを押し出すことで、競合の印刷会社との差別化をはかりました。具体的には、主要コンテンツに自社工場の設備として「自動調合」「スリッター機」など実際に使用している機器名のほか、大手玩具メーカーの認定実績や品質とセキュリティを保証する「ISO9001」「Pマーク」の取得を明記しており、ユーザーに安心感をもってご利用していただくためのコンテンツにいたしました。

また、PC用サイトでは、トレンド感のある余白バランスを取り入れたデザインの「コンテンツの境界がわかりにくい」というデメリットを解消するため、セクションの見出しに横スライドのアニメーションを取り入れることで、コンテンツの開始地点を自然と強調して見せる工夫をいたしました。動線をわかりやすくし、ユーザビリティを高めるため、マウスオーバー時に多様な動きのアニメーションを取り入れております。ほかにも、CV率向上のため、印刷に関する知識が豊富な法人ユーザーに向けて、ページ上部のヘッダーに「特殊印刷」「アッセンブリ」「ピロ包装」の3つのサービスへの動線を固定することで、お問い合わせまでの動線を短縮する工夫をいたしました。

さらにSEO強化とサービスを明瞭化するため、「サービス」「プロダクト」の2つの視点から、それぞれの独立ページを作成いたしました。これらのページを含め、ホームページ内のほとんどの原稿は専門ライターがZoomによるヒアリングのもと一から作成しており、SEO対策により多くの集客とCV獲得を目的としたWebサイトとなっております。

Webデザイン
Y.Muraji

関東圏内で「デザイン技術を活かせる仕事を探している方」や、身近な「印刷物やグッズに携わる仕事をしたい方」など、20代~40代の印刷業界への求職者をメインターゲットに設定しております。そのため、スマートフォンとPCの使用比率を8:2と想定し、モバイルファーストとして設計しております。

モバイル用サイトでは、特にリクルート目的のユーザーが多いため、採用ページを前面に押し出す形ことでユーザビリティを高めました。メインビジュアルのすぐ下に採用ページへの動線バナーを大きく配置しているほか、ハンバーガーメニュー内にも目立つように設置することで、最短の動線で目的のページを閲覧いただくための設計をいたしました。尚、導入事例やサンプル製品など複数のコンテンツを表示する箇所は横スクロールで表示し、スマートフォンで見ても情報が整理されていて、各ページを最後まで見やすいデザインにいたしました。ほかにも、カラーテキストでポイント部分を強調することで、重要な情報を直感的に認識していただけるよう表現しております。

また、採用関連ページ全体の回遊率を高めるため、採用ページ専用のメニューをページ上部に固定表示しております。新卒採用、中途採用、パートそれぞれのワーカーに焦点を当てた写真を使用することでリクルーターに親近感を感じていただき、ページの最後でもう一度エントリーフォームへのリンクバナーを設置することで、よりスムーズにCVしていただける設計を行っております。

印刷会社のホームページでは、技術やサービス内容だけを淡々と説明するサイトが多いため、「印刷を活かしてプロダクトをつくる」というお客様のポリシーを強く押し出すことで、他社との差別化をはかりました。具体的には、制作した製品をご覧いただける導入事例コンテンツを新設し、主要ページで強く押し出しているほか、全体的に製品のサンプル写真を多く使用することで、「プロダクト」を印象付けるための工夫を行っております。

Webデザイン
Y.Muraji

デザイン面では、画面いっぱいを使ってメインビジュアルを表現することでお客様の会社規模の大きさを表現いたしました。また、ユーザビリティを考慮し、左下にアニメーション付きの「スクロールボタン」を設置して下部のコンテンツの閲覧を促しております。さらに、キャッチコピーをスマートフォンサイトでは「白文字」、PC用サイトでは「黒文字」で配置することで、それぞれのデバイスでメッセージを強く印象付ける工夫をいたしました。ほかにも、「aboutページ」「サービスページ」「プロダクトページ」の3つの主要コンテンツを全体的に大きなサイズ感で表現することで、強調したいポイントの訴求効果を高めております。

エンジニア
R.Takimoto

システム面では、実際の制作物をご紹介する「導入事例ページ」を新たに設置いたしました。こちらは管理画面からの操作でカンタンに更新できるため、最新の事例をお客様のタイミングでホームページへ反映していただけます。プロダクトページと連携を行い、関連事例として掲載することで、サービスの特徴を読み進めていただいた後にクオリティの裏付けとなるためCVアップにも繋がる導線になっております。また、お客様はHP運用コンサルティングサービスにご契約いただいているため、専任のマーケティング担当による毎月のアクセス状況のご報告のほか、SEOに効果的なコンテンツの追加方法を随時サポートしていく予定でございます。

Web制作・運用サポート一覧

PC・タブレット用フルオーダーメイド設計、SP・タブレット用フルオーダーメイド設計オリジナルWebデザイン、PC用UI/UX設計、SP用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、jQueryコーディング、PLESKサーバー、アフターサポート

BEFORE AFTER

劇的ビフォーアフター

旧サイトにメスを入れ、お問い合わせが絶えないホームページへ

BEFORE

リニューアル前のホームページは、テキストベースでお客様の強みや魅力を訴求していたため、デザインを一新して魅力や強みが伝わるホームページにしたいとご希望されていました。また、潜在顧客へのアプローチを広げ、ホームページからのお問い合わせを増やしたいというご要望も併せていただきました。

AFTER

リニューアル後は、「特殊印刷に特化した会社」ということが一目でわかるよう、カラーチャートのお写真やサービス・製品をイメージしやすいお写真を多く配置いたしました。さらに、「HP運用コンサルティング」をご契約いただき、専門家によるSEO対策を強化することで、お問い合わせの増加につながりました。

PC DESIGN

PCサイトデザイン

お客様の特長を活かした、”世界にひとつ”のオリジナルデザイン

SMARTPHONE DESIGN

スマートフォンサイト
デザイン

ターゲットに最適なユーザビリティを考慮した、UI/UXデザイン

WORKS

よく似た制作実績

制作実績一覧