達生堂薬局様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

ユーザーが一目で認識できるよう訴求したいコンテンツを優先順位順に配置し、疑問点があればすぐ目的のページを見られるよう各導線を配置することで、滞りなくスムーズに情報を閲覧していただけるよう綿密なサイト設計を行ったことが最大のポイントです。また、商品名だけでなく症状からも検索できる製品検索窓をヘッダーに配置するなど、どの年代でも分かりやすく操作しやすいユーザーファーストな設計を行っております。ほかにも、イエローで強調したお問い合わせフォームへのリンクバナーをページ上部に固定し、ユーザーが思い立ったタイミングですぐCVできるよう工夫しております。

デザイン面では、丸みのあるやわらかいデザインの「可愛らしすぎる雰囲気や、だらけた印象になってしまう」というデメリットを解消するため、サイトイメージに合わせた写真を多く使用することでメリハリを付け、アクセントカラーで視覚的に引き締め、さらに強調したいエリアには装飾のある背景を使用するなど工夫いたしました。また、文字間隔を広めにとったり手書き風のパーツや水彩風のイラストを使用し、実店舗の持つ安心感や信頼感をサイトからも感じていただけるようなデザインに仕上げました。ホームページ制作後は「デザインがとても良く、見やすい設計になっていて満足しています」とお喜びの声をいただいております。

モバイル用サイトでは、情報量が充実しているためポイント部分をマークアップしたりサイト内の余白を広めにとることで、画面の小さなスマホユーザーでもストレスなく閲覧していただけるよう工夫したことがポイントです。また、「商品検索」「アクセスページ」「お問い合わせページ」それぞれの動線をヘッダーに固定することで、初めてサイトに訪問されるユーザーと常連のユーザーの両者が直感的な操作でより早く目的のページを訴求できるよう設計いたしました。ハンバーガーメニューにはさわやかな水彩風の背景を配置しており、ユーザーが分かりやすいようメニュー内にコンテンツの内容を連想させるアイコンを使用することで視認性を高めるなど工夫しております。

独自コンテンツ「零売薬局の特徴」では、零売に関する説明やメリット、ご利用の流れを詳細に説明しており、太字や色付きの下線でポイントとなる部分のマークアップを行い、さらに画像やイラストを多く使用し情報を直感的に認識できるよう表現することで、零売を認知していただくほか、ユーザーの疑問点や不安を解消し安心して零売制度をご利用いただくための後押しとなるページに仕上げました。

デザイン面では、清潔感のあるホワイトと淡いブルーをベースに、アクセントカラーにはロゴと調和させたイエローとグリーンを用いております。「零売」「薬のネット販売」に対してユーザーに安心感を持っていただけるよう、爽やかなイメージの人物写真を大きく配置したり、丸みあるパーツを使用するなど細部まで工夫を施しました。ほかにも、メインビジュアルの左側に余白をとることで、トレンドを捉えつつデバイスの多様性にも対応した、ゆとりのあるデザインにいたしました。