科学を、まっすぐ伝える。「専門性」と「情報の見つけやすさ」を両立するウェブサイト刷新プロジェクト

Identity

“研究者としての専門性”を伝える

株式会社アイ・ティー・オーの代表取締役 伊東 忍会長は、ビタミンC誘導体を中心とした抗酸化研究に長年取り組んでこられました。その研究と専門性がアイ・ティー・オーの大きな強みとなっています。

原点調査を通じて、伊東会長がこれまでの研究やさまざまな学会でその成果を発表されていることからも、「研究者としての専門性をしっかりと伝えたい」という伊東会長の想いを基盤にリニューアルを設計していきました。

Structure

ユーザーごとに最適化した導線設計への刷新

株式会社アイ・ティー・オーが取り扱う医療機関専用のメディカルコスメや、医師が開発に携わるドクターズコスメ商品は、皮膚科などの医療機関で取り扱われています。サイトには一般ユーザーだけでなく、主に医師や医療従事者など、さまざまな立場の方が訪れます。

そこで、訪れるユーザーがそれぞれの求める情報へ適切にアクセスできるよう、製品購入の入り口は〈ITO会員制（クリニック専用）〉〈ドクターノコスメクラブ〉の2つの入口を設けました。ITO会員とは、アイ・ティー・オーの化粧品や取り扱い原料の購入、さらに化粧品および化粧品原料に関する学びを希望される医師や医療従事者の方を対象とした会員専用サイトです。ドクターノコスメクラブは、クリニックでのお取引の有無にかかわらず、医療従事者の方であれば誰でも無料で利用できる会員専用サイトとなっています。この2つの入口により、ユーザーは自身の立場に応じた情報へスムーズにアクセスできるようになりました。

多様なバックグラウンドを持つユーザーが訪れるウェブサイトだからこそ、一人ひとりが必要な情報を迷わず取得できる体験を設計しました。トップページにはサイドバーを設け、〈ITO会員制（クリニック専用）〉〈ドクターノコスメクラブ〉の2つの入り口を設置。製品情報ページに行かずとも、それぞれが求める情報へすぐにアクセスできるかたちにしています。アイ・ティー・オー様の専門性を保ちながら、情報の見つけやすさも両立したサイト構造を実現しました。

Design

専門性・清潔感・視認性を統合した“信頼感”のデザイン

サイトを制作するにあたり、「研究成果をファーストビューに織り交ぜた表現をしたい」というご要望をいただいていました。研究成果と製品の両方をバランスよく織り交ぜた世界観を実現するため、ビタミンＣを連想させる写真や製品写真をグリッドレイアウトで配置したデザインを採用し、構造の中に要素を整理してレイアウトすることで、ブランドの専門性がひと目で伝わるファーストビューに仕上げています。

サイトには多くの医師や医療従事者が訪れるため、「清潔感・信頼感」をデザインの軸に据えています。視認性を損ねないよう、ホワイトベースの配色と十分な余白を確保しました。スマートフォン版でも同様に余白設計を意識し、どのデバイスからでも心地よく閲覧できるデザインにしています。

カラー設計については、ブランドカラーである深いネイビーを引き継いだ、淡いブルーを基調色として採用しています。寒色系をベースに配色とすることで、カラーでも清潔感や信頼性を担保しています。サイト全体で色の統一感を持たせることで、デザインとしての一貫性も強化しています。

フォント選定や文字組み、情報のレイアウトについても、可読性に配慮しました。

Implement

ユーザー体験を高めるためのサイト構造と機能刷新

今回のリニューアルでは、まず製品情報を一元管理できるサイト構造へと刷新しました。商品管理部分では商品コードを入力せずとも新規商品を追加できる仕組みを構築。これにより更新作業のフローを簡略化し、運用負担の軽減と情報管理の効率化を実現しました。そして、高画質な画像を読み込む際に、ユーザーにフリーズしたのではないかといった不安を抱かせないためにも、「ローディング機能」という読み込み中であることを視覚的に伝える機能を実装しました。ユーザー体験の向上を目指しています。

さらに、取り扱いクリニック紹介ページでは、アイ・ティー・オー様からのご要望にもあったクリニック情報が郵便番号に基づいて自動的に並び替えられる仕組みを構築しました。これにより、新規クリニック追加時も正しい順序で反映される運用フローを実現しています。

そのうえで、日本全国を俯瞰できる地図から地域を選択すると該当エリアのクリニックが一覧表示される導線を採用。管理効率を保ちながら、ユーザーが迷わず目的のクリニックを見つけられる、より直感的で使いやすい検索ページを作り上げました。