お電話からお越しのお客様はこちら☎

WordPressのホームページに診断機能をつける Webサイト構築事例

  • URLをコピーしました!

「運営中のキャンペーン用ホームページで、診断機能を作ってほしい」とご依頼がありました。診断機能とは、「あなたはXXですか?」という質問に、はい/いいえで答えていくと、最後に「あなたは〇〇です!」と表示される機能のことです。

例えばこちらのTBS「月バラナイト『あなたはどれに当てはまる?スター★性格診断SHOW』」では、「9タイプ新性格診断」という診断ページを提供されています。

TBSテレビ
『あなたはどれに当てはまる?スター★性格診断SHOW』 TBS『あなたはどれに当てはまる?スター★性格診断SHOW』の番組情報ページです。

質問に答えていくと、最後に診断結果が表示されます。ぜひこちらから性格診断やってみてください!(^^)/

ご発注の概要

依頼内容WordPressのホームページに診断機能を追加する
お客様の業種広告・マーケティング業
期間2週間
ご予算20~40万円
目次

背景・課題

広告・マーケティング業を営むお客さまは、大手化粧品会社様の商品のキャンペーンを担当されていました。
商品の新CMに合わせてキャンペーンページを作成予定で、そのページに診断機能をつけたいと考えていらっしゃいました。お客さまの社内にデザイナーがいらっしゃいましたので、全ページのデザインを作るので、仕組みを構築できないかと相談いただきました

課題

  • 商品のキャンペーンで診断機能を作りたいが、技術者がいない
  • デザイナーがいるので、コーディングと機能作成を依頼したい
  • TwitterなどのSNSで拡散するために結果のページにシェアボタンをつけたい

提案・対応

  • デザイナーさんが作成いただいたデザインをそのままコーディング
  • 診断結果を拡散するためのOGPタグにしっかり対応

デザイナーさんが作成いただいたデザインをそのままコーディング

デザイナーさんがAdobeソフトで作成なさったデザインを、そのままの状態で画面に表示するようにコーディングいたします。デザイン時に使っているフォントがWebで使えないなど、気をつける点がいくつかあり、作業前にしっかりと確認していきます。

最近のWebサイトはPCとタブレットとスマートフォンの3サイズについて、レスポンシブデザインでコーディングすることが主流です。PC・タブレット・スマートフォンでの表示内容が変わっている点、余白や表示位置の確認もしっかり行って作業します。

診断結果を拡散するためのOGPタグにしっかり対応

診断機能で狙うのは、診断結果のSNSへのシェアです。診断結果の画像、URL、ハッシュタグなど、細かい仕込みをしていきます。キャンペーンによってどのくらい閲覧されたのか、どのくらい診断されたのかは、Google Analyticsなどいくつかの解析ツールを使いながら解析します。

診断結果ごとにシェアする文言をかえたり、画像やテキストをかえたりする細かいご要望にしっかりお応えしました。

成果

  • デザイナーさんのこだわりをきちんと画面に表示することができました
  • 診断結果がシェアしたときの表示にもしっかり対応しました

コメント

ツチノコ

診断機能はどのような診断をさせたいのかによって、作りが違うので、検討することがたくさんありました
診断機能はいろいろな業種やキャンペーンで利用可能です!
Webサイト制作に際して、自分たちではできないちょっと難しいことをやりたいとご検討中のデザイン会社様、ぜひご相談ください!

\ お話しいただければすぐに解決! /

スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次