トイディア様(コーポレートサイト)|Web制作実績 レスポンシブ対応|制作実績
”綿密な設計”と”最新トレンドデザイン”により、ホームページの効果を最大化
クライアント | 株式会社トイディア様(東京都千代田区) |
---|---|
制作プラン | Meta定額制30プラン |
カテゴリ | コーポレートサイト コーポレートサイト・事務所 製造・開発・IT・AI 求人・リクルート強化 その他 |
URL | https://www.toydea.com/ |
制作チーム |
|
POINT
制作のポイント
大人気のローグライクゲームをはじめ、数々のオリジナルタイトルを生み出し続けているゲーム開発会社「トイディア様」のコーポレートサイトをリニューアルいたしました。
今回リニューアルの目的として、「ブランドイメージを向上したい」「採用を強化したい」という2つのご要望を頂きました。
お客様はご紹介からの集客がメインですので、「トイディア様がどのような会社なのかを詳しく知りたい企業のご担当者」をメインターゲットに設定し、PCとスマートフォンの使用比率は6:4と想定しPCファーストで設計いたしました。
まずは、ブランドイメージを向上するため、お客様の魅力が伝わるよう専任のライターが原稿・キャッチコピーの作成を行っているほか、主要コンテンツの「製品・開発実績」を見やすく整理いたしました。一つひとつのゲームに専用の個別ページを設けているだけでなく、各製品をカテゴリごとに分けて情報を整理するなど、ユーザーにわかりやすく表現しております。こちらはお客様専用の管理画面をご用意しておりますので、リリース情報などを、いつでも簡単に最新の情報として更新いただけます。
「オリジナルタイトルのゲームを自社開発している」というお客様の特徴をホームページで表現するため、枠にとらわれず独自性の高いデザインにこだわりました。例えば、全体のレイアウトにはあえて枠から飛び出した「ブロークングリッド」を採用しているほか、アルファベットが自動でスライドするアニメーションや、実際にお客様のゲームに登場するキャラクターを取り入れるなど、ゲーム制作会社ならではの「オリジナリティ」と「わくわく感」の両方を感じられるデザインに仕上げました。
PC用サイトでは、画面が大きいという特徴を活かし、楽しそうな社員写真や情熱溢れるキャッチコピーを強く押し出すことで、職場の明るい雰囲気を表現いたしました。まずは、Webの写真専門のカメラマンが様々な構図やシチュエーションをご提案しながら社員やオフィスの写真撮影を行いました。複数枚のお写真をバランスよく配置したデザインや自動スライドのアニメーションなど、多様な表現方法を使って訴求し、楽しい会社の雰囲気がホームページ全体から伝わるよう仕上げております。さらに、印象的なキャッチコピーを大きなサイズでダイナミックに表現することで、メッセージの視認性を高めながらも、トレンドを感じられるデザインにまとめました。
また、採用応募アップのため、CVから逆算をした綿密な導線設計を行いました。具体的には、明るいイエローで彩った採用情報コンテンツへの導線バナーをページ上部に固定表示することで、求職者ユーザーが最短導線で目的のページを閲覧できるよう設計しております。さらに、採用情報ページではエントリーページへの導線に切り替えるなど、スムーズな流れで採用応募していただけるよう、綿密な導線設計をいたしました。
システム面では、お客様がブラウザ上で簡単に更新していただけるよう、「お知らせ」「製品・開発実績」にCMSを取り入れております。そのため、ホームページ公開後も継続してコンテンツを増やすことができ、CVをアップさせるためのツールとしてご活用いただけます。
デザイン面では、ポップな装飾やアニメーションを取り入れつつ、訴求したいコンテンツを自然と際立たせるための視覚効果を意識しております。例えば、トップページでは「採用情報」、採用情報ページでは「ゲーム創り」など、それぞれの主要コンテンツへの導線にアルファベットが回転するアニメーションを配置しているほか、重要な情報は読みやすさを最優先するため、装飾を控えつつ魅力的なキャッチコピーで訴求するなど、コンテンツに合わせて装飾でメリハリをつけることで、CV率をより高めるための戦略的デザインを行いました。
Webデザイン
モバイル用サイトでは、特にリクルート目的のユーザーが多いため、採用コンテンツへの導線をより一層強化いたしました。通常の「採用情報ページ」への導線だけでなく、「代表メッセージ」「トイディアのゲーム創り」など採用関連コンテンツへの導線をイメージしやすいサムネイル付きで配置することで、ユーザーが直感的な操作で目的の情報を閲覧していただけるよう工夫しております。さらに、訴求コンテンツへの導線を大きく設置することでタップエリアを広く設け、視覚効果とユーザビリティを高めるための設計をいたしました。また、採用関連ページ全体の回遊率を高めるため、採用ページ専用のメニューをページ上部に固定表示しております。
また、CV率向上の対策として、ユーザーが目的の製品をすぐに購入できるよう、製品詳細ページには購入サイトへの導線ボタンを設置しております。こちらのページにはオリジナルCMSを導入しており、専用の管理画面からいつでも簡単に更新していただけます。設計デザインからシステムまで社内一貫体制ですので、CV率を最大化するために、お客様に合わせた柔軟なシステム構築をご提案させていただいております。
今回、「キャリア登録ページ」を新設しました。募集中の職種とは自分のキャリアがマッチしなかったユーザーでも、簡単な情報登録だけでご自身の経歴や実績をアピール出来る形になっております。優秀な就職希望者を逃さない新しいコンテンツとして期待いただいております。
さらに、国内ユーザーに向けたゲームの開発をメインに行う他社とは違い、「全世界に向けたオリジナルゲームを開発している」というお客様の特徴を強く押し出すことで、他社との差別化をはかりました。具体的には、専任ライターが作成した「印象的なキャッチコピー」を、トレンドの「デカ文字」でメリハリをつけて表現することで、お客様の強みを効果的に強調しております。
デザイン面では、「好きなおもちゃに囲まれたような、わくわく感のあるサイトにしたい」というリクエストをいただいたため、全体的にカラフルでポップなデザインにまとめました。また、カラフルな色合いの「稚拙な印象になりやすい」という懸念を解消するため、落ち着いたトーンの色味で統一することで、ゲーム会社ならではのわくわく感を表現しながらもコーポレートサイトの誠実さを感じられるデザイン???仕上げております。ほかにも、お客様のオフィスの壁紙に合わせて、ページ下部のフッターにさりげなく南国風の装飾をあしらっております。
Web制作・運用サポート一覧
PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、jQueryコーディング、PLESKサーバー、ヒアリング取材、原稿作成、アフターサポート
BEFORE AFTER
劇的ビフォーアフター
旧サイトにメスを入れ、お問い合わせが絶えないホームページへ
PC DESIGN
PCサイトデザイン
お客様の特長を活かした、”世界にひとつ”のオリジナルデザイン
SMARTPHONE DESIGN
スマートフォンサイト
デザイン
ターゲットに最適なユーザビリティを考慮した、UI/UXデザイン
WORKS