オーラルアカデミー様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

独自のコンテンツ「口腔トレーニング器具」を充実させることで、競合他社との差別化をはかったことが最大のポイントです。口腔トレーニングという新たなコンテンツを設け、さらに介護向けと美容向けでディレクトリを分けることで、口腔トレーニング器具が歯科治療のほかにもさまざまな用途で利用できることを表現し、これまでになかったターゲット層にも訴求する設計にいたしました。また、口腔トレーニング器具の紹介エリアでは美容向けと介護向けそれぞれのおすすめ商品を、イメージ写真、ロゴ、使い方付きで画面いっぱいに掲載しており、詳細ページを見る前に、どのような製品なのかがひと目でわかるエリアとなっております。

製品情報ページでは商品をカテゴリーごとに分類し、おすすめの商品を写真付きで並べることで、ユーザーの目的に合ったアイテムを直感的に見つけられるよう工夫いたしました。CMS管理画面から商品登録が簡単にできるほか、ユーザーへ特に訴求したい製品をカテゴリーごとに４つずつピックアップして表示できる機能を組み込んでいるため、臨機応変に変更ができる柔軟さを備えたシステムとなっております。また、フッターにはオレンジ色で強調したお問い合わせのリンクバナーをはじめ、ご注文申し込み、電話番号の各動線を固定し、ユーザーがどこから閲覧してもCVに繋がるよう工夫しており、ホームページ公開後は「商品の注文数が増えてきた」と喜びの声をいただいております。

デザイン面では、ベースカラーにすっきりとしたホワイト、サブカラーに爽やかなライトブルーとライトグレーを使用することで、企業イメージに合わせたクリーンな清潔感を演出いたしました。また、画像やバナーの角を取ったり、タイトル付近に丸みのある装飾を加えたほか、テキストカラーを黒に近いグレーに設定することで、デザイン性と安心感を両立したサイトに仕上げました。

モバイル用サイトでは、一人ひとりのユーザーが用途に合った商品をすぐに見つけられるよう、ページ上部に動線を設置するなど製品のカテゴリーへの動線を増やしたことがポイントです。また、画面サイズの小さいスマートフォンでもすっきりと見やすいよう、アコーディオンや横スクロールを導入したり、リンクバナーのサイズを大きくすることで訴求イメージを整理したことがポイントです。分かりやすさや操作性を高めるためナビゲーションメニュー内の訴求コンテンツには画像やアイコンを使用し、背景色や枠線を付けるなど、自然と目に留まりやすいよう細部まで工夫をこらしております。PCサイトと同様にフッターには各CV導線を固定しており、モバイル用サイトでは電話番号をリンクバナーにすることでユーザービリティを考慮し、スマートフォンでもお問い合わせしやすい設計にいたしました。

デザイン面では、全体的に控えめなカラーを使用しつつ、シンプルになりすぎてしまわないよう背景にはホワイト一色ではなく、ドットやパターンなどさりげなく装飾のある背景を使用していたり、動線や英字タイトルにグラデーションカラーを用いているほか、マウスオーバー時に動きのあるアニメーションを使用して全体を引き締めるなど、単調にならない工夫を取り入れております。