3. アポクリート株式会社（薬局）　企業サイト　#１日１サイトレビュー

こんにちわ、ayakaです。

今回は、アポクリート株式会社の企業サイトをレビューさせていただきます！

トップページ | コーポレートサイト | アポクリート株式会社

サイト選びは下記から行いました。

Web Design Clip | Webデザインギャラリー・クリップ集

レビュー

⓪このサイトを選んだ理由: 

ファーストビューで、薬局の従業員、顧客である親子・サラリーマン・高齢者等が微笑む姿がピンクと水色の水彩画、その左には「笑顔のそばに。もっとずっと。　Smiles, always by your side.」というキャッチコピーが描かれていて、暖かさを感じた。今まで薬局の企業サイトでこのようなイラストベースで暖かい雰囲気を感じさせるサイトを発見したことがなかったため、このサイトのデザインをより詳しく分析してみたいと思ったから。

① サイト概要:

会社の基本情報、事業紹介、顧客向けのお知らせ、求職者向けの会社紹介、店舗一覧、お問い合わせフォーム

②予想ターゲット層:

全国の大学生や大学院生の求職者をメインとし、その他全国の子供から高齢者までの薬局利用者

③全体の印象:

・ニュース一覧の下の会社のロゴ写真、薬剤師の働く姿、ボランティア活動を行う地域の人々や従業員の姿、従業員が微笑む姿の写真に、ピンクと水色の水彩の枠がついていた。上記とファーストビューの水彩画を見て「笑顔のそばに。もっとずっと。　Smiles, always by your side.」というキャッチコピーが自然と連想された。

・キャッチコピーとデザインの連携により、キャッチコピーの重みがより心に響き、企業サイトの詳細までもっと見たいという欲求が強くなった。

・キャッチコピーとデザインの連携が強固で、メインコンテンツ1⃣の会社写真のロゴの色と企業サイトの会社ロゴの色が統一であることから、会社の外観と企業サイトに一体感が感じられた。

④配色:

コーラルレッド、紺、藍、黒

コーラルレッド

・ナビゲーションの上(PC版)又はハンバーガーメニューの中(iOS版)の「新卒ENTRYボタン」、ニュース一覧のカテゴリーを示すマーク、ニュースからメインコンテンツ1⃣から4⃣までの詳細ページへジャンプするボタン、1⃣から4⃣の番号自体、メインコンテンツ最下部の横並びの３つのENTRYボタン:

#EF857D

紺

・キャッチコピー、ニュースの英語見出し、メインコンテンツ1⃣から4⃣の英語見出しと日本語の大見出し、メインコンテンツ最下部のメニューのロゴ・グローバルナビゲーションに対応する項目名、関連企業名: #003364

藍

・メニュー最下部のローカルナビゲーションに対応する項目名: #637F9B

黒

・ファーストビューより下のメインコンテンツにおける本文: #333333

参考サイト:

コーラルレッド(#EF857D)の色見本と配色事例、合う色 | 色探 求人

【濃い青色種類】 藍色,紺色,ネイビー,コバルトブルー,セルリアンブルーの違いとは?

⑤フォント: 

・メインコンテンツ1⃣から4⃣の英語の見出し: Roboto

・キャッチコピー「笑顔のそばに。もっとずっと。」、メインコンテンツ1⃣から4⃣の大見出し（「アポクリートについて」、「アポクリートの使命」、「地域社会のために」、「愛される人になろう。」）:

えり字に近いフォント(日本語対応の手書き風フォント)

・キャッチコピー「Smiles, always by your side.」、ニュースの英語見出し:

Ink freeに近いフォント(英語対応の手書き風フォント)

・上記以外全て: 游ゴシック

参考:

えり字

【商用利用可】手書き風の日本語フリーフォント55選

Ink Free font family - Typography

⑥競合サイト:

 https://www.ainj.co.jp/

 http://www.phmirai.co.jp/

 https://www.aisei.co.jp/business/

  

⑦このサイトのデザインから学べる事:

・キャッチコピーを使う場合は、特にファーストビューでキャッチコピーの雰囲気に対応するコンテンツを埋め込むことが、閲覧者の感動につながるために大事だということ。

・現地で見て分かる会社の外観でのロゴの色を軸として、企業サイトで用いる見出し、ナビゲーション、ヘッダー、イラストで用いる色を決めることで、会社の色合い的なイメージを現地とサイトで統一できること。

現地とサイトで統一できると、会社のイメージをサイト上で大まかに知ることができるので、実際に店舗や会社に行ったときの雰囲気のギャップを防げると考えるので、統一は大事だと思います。今後企業サイトを作るときに大切にしたいです。

・メインコンテンツの写真に演出したい雰囲気に対応した枠付けをすることで、サイトの雰囲気をより演出できること。今回の場合だと、ピンクと水色の雲のような丸い枠で写真を囲むことで、キャッチコピー通りの笑顔を見守るような雰囲気を演出できている。

・サイトのコンテンツとして、水彩画のイラストを付す案もあること。

・優しい雰囲気のサイトには、えり字等の丸みのある手書き風フォントを用いることが有用であること。

最後までお読みいただき、ありがとうございました。