株式会社seeDNA様(コーポレートサイト)|Web制作実績 レスポンシブ対応|制作実績
”綿密な設計”と”最新トレンドデザイン”により、ホームページの効果を最大化
クライアント | 株式会社seeDNA様(東京都足立区) |
---|---|
制作プラン | Meta定額制30プラン |
カテゴリ | コーポレートサイト コーポレートサイト・事務所 医療・美容・薬品 |
URL | https://seedna.net/ |
制作チーム |
|
POINT
制作のポイント
親子の血縁関係を中心に、最新解析システムを使って高精度のDNA鑑定をされている「株式会社seeDNA様」のコーポレートサイトをリニューアルいたしました。
今回リニューアルの目的として、「DNA鑑定のお申込みを増やしたい」「スマートフォン用サイトを最適化したい」「SEO対策を強化したい」「BtoCを意識したWebサイトにリニューアルしたい」という4つのご要望を頂きました。
まずは、DNA鑑定のお申込みを増やすため、主要コンテンツであるDNA鑑定ページの下部には、淡い暖色のグラデーションカラーで彩ったCV導線を固定表示しております。こちらは、親子の血縁関係などにお悩みのユーザーに「DNA鑑定」を前向きな気持ちで捉えていただきつつ、導線を最適化してCVを向上させるという2つの効果がございます。
ユーザーがお探しの情報をすぐに閲覧できるよう、「目的別に探す」ページを新設しております。「胎児の本当の父親を知りたい」「動物の血統を知りたい」など、特にご相談が多い10種類のお悩みをユーザー目線のやさしい言葉で表現しつつ、サムネイル写真付きの導線バナーとして配置いたしました。それにより、初めてのDNA鑑定に対する不安を取り除きながら、目的に合ったページに自然と誘導できるコンテンツとなっております。
PC用サイトでは、マウスオーバー時に多様なアニメーションを実装することでユーザビリティを高めております。具体的には、マウスの動きに反応して導線バナーが立体的に変形する「うねり」の動きを取り入れることで、導線がわかりやすいだけでなく、サイトを回遊しながら「ユーザー体験型」で楽しんでいただける新感覚のホームページにいたしました。
また、「ページが分散されており、必要な情報がわかりにくかった」旧サイトのDNA鑑定コンテンツを整理しました。まずは、旧サイトでは複数のページに分かれていた情報を1つのページにまとめるなど、「ユーザーの目的に合わせたページ分け」を行いました。さらに、キャッチコピーや導線ボタンなど、強調したい箇所にポイントにグラデーション加工を取り入れることで、訴求コンテンツに自然と目が留まるよう視覚効果を意識したデザインを取り入れております。ほかにも、「私的鑑定」「法的鑑定」という2種類の費用カテゴリーをタブ分けで表現することで、複雑になりやすい費用情報をコンパクトにまとめました。特に重要なコンテンツだからこそ、必要な情報を一目で認識していただけるようユーザビリティの高いデザインを意識しております。
DNA検査機関のホームページでは、「テキストと検査キットの写真だけ」で薄暗い印象のサイトが多いため、Web上の写真撮影を専門とするプロカメラマンを手配し、実際の研究所内の写真撮影を行うことで競合他社との差別化をはかりました。お客様は最新の検査機器をお持ちなので、検査風景の写真をポイントで配置することで、「高精度のDNA鑑定ができる」というお客様の強みにより説得力を持たせ、ユーザーに安心感をもってお申込みしていただけるコンテンツにいたしました。
デザイン面では、窪んだような立体感を演出できる「ニューモーフィズム」、すりガラスをイメージした「グラスモーフィズム」を背景や導線バナーにポイントとして取り入れることで、柔らかさとトレンド感の両方を兼ね備えたデザインを行っております。ほかにも、「丸形の切り抜き写真」や「透け感のあるグラデーション」の装飾を取り入れるなど、細部までサイト全体の統一感を意識しました。また、柔らかな雰囲気のデザインはユーザーに安心感を与えられる一方で、「ぼやけた印象になりやすい」という懸念があるため、コンテンツは縦横をそろえて規則正しく配置し、適度な余白バランスを設けることで、DNA鑑定機関としての信頼感をホームページのレイアウトで表現いたしました。
Webデザイン
モバイル用サイトでは、「テキスト量が多くコンテンツが縦長になりやすい」というデメリットを解消するため、ホームページ全体にアコーディオンを多く実装いたしました。専門的な説明文や比較的重要性の低い導線をアコーディオン化することで、小さな画面の中でユーザーに必要な情報だけをすっきりと表現しつつ、興味をもった箇所だけを重点的に閲覧しやすいよう、ユーザビリティの高い設計を行っております。
お客様はHP運用コンサルティングサービスをご契約いただいているため、検索キーワードを意識した「DNA検査の豆知識」コンテンツの有効的な追加方法を、専任のマーケティング担当がマンツーマンでサポートしております。当サービスでは、毎月のアクセス状況のご報告のほか、集客を増やすための新たな施策のご提案など、Googleのアクセス分析に強いマーケティング担当者が御社のホームページの運用をしっかりとサポートいたします。
システム面では、お客様がブラウザ上で簡単に更新していただけるよう、「お知らせ」「DNA鑑定の豆知識」にCMSを、「お客様の声」にWordpressを取り入れております。そのため、ホームページ公開後も継続してコンテンツを増やすことができ、SEO対策を強化し、CVをアップさせるためのツールとしてご活用いただけます。
デザイン面では、メインビジュアルに「ユーザー目線」「研究者目線」それぞれのイメージ写真を使用し、アニメーションを使用して切り替え表示を行うことで、ユーザーに「安心感」と「信頼感」の両方を感じていただけるファーストビューにいたしました。サイトに訪れたユーザーに対してご要望のイメージを一瞬で訴求できるよう、お客様ごとに試行錯誤しながらこだわり抜いたオリジナルデザインを行っております。
Web制作・運用サポート一覧
PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、WordPress開発、jQueryコーディング、PLESKサーバー、ヒアリング取材、原稿作成、アフターサポート
PC DESIGN
PCサイトデザイン
お客様の特長を活かした、”世界にひとつ”のオリジナルデザイン
SMARTPHONE DESIGN
スマートフォンサイト
デザイン
ターゲットに最適なユーザビリティを考慮した、UI/UXデザイン
WORKS