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

株式会社seeDNA様

https://seedna.net/

東京都足立区

PC

SP

Web制作のポイント

親子の血縁関係を中心に、最新解析システムを使って高精度のDNA鑑定をされている「株式会社seeDNA様」のコーポレートサイトをリニューアルいたしました。

 

今回リニューアルの目的として、「DNA鑑定のお申込みを増やしたい」「スマートフォン用サイトを最適化したい」「SEO対策を強化したい」「BtoCを意識したWebサイトにリニューアルしたい」という4つのご要望を頂きました。

 

まずは、DNA鑑定のお申込みを増やすため、主要コンテンツであるDNA鑑定ページの下部には、淡い暖色のグラデーションカラーで彩ったCV導線を固定表示しております。こちらは、親子の血縁関係などにお悩みのユーザーに「DNA鑑定」を前向きな気持ちで捉えていただきつつ、導線を最適化してCVを向上させるという2つの効果がございます。

設計・デザインのポイント

ユーザーがお探しの情報をすぐに閲覧できるよう、「目的別に探す」ページを新設しております。「胎児の本当の父親を知りたい」「動物の血統を知りたい」など、特にご相談が多い10種類のお悩みをユーザー目線のやさしい言葉で表現しつつ、サムネイル写真付きの導線バナーとして配置いたしました。それにより、初めてのDNA鑑定に対する不安を取り除きながら、目的に合ったページに自然と誘導できるコンテンツとなっております。

 

PC用サイトでは、マウスオーバー時に多様なアニメーションを実装することでユーザビリティを高めております。具体的には、マウスの動きに反応して導線バナーが立体的に変形する「うねり」の動きを取り入れることで、導線がわかりやすいだけでなく、サイトを回遊しながら「ユーザー体験型」で楽しんでいただける新感覚のホームページにいたしました。

 

また、「ページが分散されており、必要な情報がわかりにくかった」旧サイトのDNA鑑定コンテンツを整理しました。まずは、旧サイトでは複数のページに分かれていた情報を1つのページにまとめるなど、「ユーザーの目的に合わせたページ分け」を行いました。さらに、キャッチコピーや導線ボタンなど、強調したい箇所にポイントにグラデーション加工を取り入れることで、訴求コンテンツに自然と目が留まるよう視覚効果を意識したデザインを取り入れております。ほかにも、「私的鑑定」「法的鑑定」という2種類の費用カテゴリーをタブ分けで表現することで、複雑になりやすい費用情報をコンパクトにまとめました。特に重要なコンテンツだからこそ、必要な情報を一目で認識していただけるようユーザビリティの高いデザインを意識しております。

 

DNA検査機関のホームページでは、「テキストと検査キットの写真だけ」で薄暗い印象のサイトが多いため、Web上の写真撮影を専門とするプロカメラマンを手配し、実際の研究所内の写真撮影を行うことで競合他社との差別化をはかりました。お客様は最新の検査機器をお持ちなので、検査風景の写真をポイントで配置することで、「高精度のDNA鑑定ができる」というお客様の強みにより説得力を持たせ、ユーザーに安心感をもってお申込みしていただけるコンテンツにいたしました。

 

デザイン面では、窪んだような立体感を演出できる「ニューモーフィズム」、すりガラスをイメージした「グラスモーフィズム」を背景や導線バナーにポイントとして取り入れることで、柔らかさとトレンド感の両方を兼ね備えたデザインを行っております。ほかにも、「丸形の切り抜き写真」や「透け感のあるグラデーション」の装飾を取り入れるなど、細部までサイト全体の統一感を意識しました。また、柔らかな雰囲気のデザインはユーザーに安心感を与えられる一方で、「ぼやけた印象になりやすい」という懸念があるため、コンテンツは縦横をそろえて規則正しく配置し、適度な余白バランスを設けることで、DNA鑑定機関としての信頼感をホームページのレイアウトで表現いたしました。

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

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

劇的ビフォーアフターはこちら