メディコートさんのサイトを分析してみた

メディコートさんが紹介するドックフード等の商品を紹介するサイト。明るい配色とシンプルな表現、愛犬と飼い主の生活を切り取った画像を使用することで、愛犬家に響くような安心感を与えるデザインになっています。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

デザイン分析元の基本情報

商品の特徴：安心・安全にこだわった、国産プレミアムドックフード
#愛犬の日 #犬 #ドックフード #メディコート
URL：https://www.petline.co.jp/medycoat/
企業名：ペットライン株式会社

トップページ

日の光を感じる画像を多く使用し、テキスト部分はシンプルにまとめられています。背景画像も薄く使っているためまとまった印象になっていて、商品に対して信頼感が生まれるデザインになっています。

-ファーストビュー

中心に犬・シャボン玉・キャッチコピーがまとめられており、背景をぼかすことで中心が引き立つようになっています。キャッチコピー は大胆な大きさで画像にかぶせていますが、文字の線が細い点、透過されている点から邪魔にならずに画面に溶け込んでいます。

-コンテンツ

下層ページ

飼い主と愛犬の日々が詰まったアルバムのようなデザインになっています。最初のムービーから中央に残った波線は、スクロール時にナビゲーションに繋がるところがユニークな仕掛けになっています。

各商品ごとにページを作っています。ただ商品を宣伝するだけでなく、商品の栄養素を図解していたり、検証結果をグラフで表示しているので、安心してドッグフードを購入できるようになっています。

各ページが色々なテイストでかわいくデザインされていたので、見たくなるデザインになっています。SNS連動型のキャンペーンが多くありました。

写真

光がうまく使われていて、写真にも光と影が写っているためリアリティがあります。人と犬を一緒に入れることで身近に感じられ、安心感を与えてくれるため、商品購入へつながるようになっています。

動き

映像だけではなく水しぶきのようなアニメーションを入れることで、より元気でフレッシュなイメージが伝わってきます。

フォント

游明朝体ファミリー

Google Fonts

日本語デバイスフォント：游明朝
英語：Crimson Text
フォントのカラー：#0d0e0e

フォントの説明
明朝体やセリフ体を使用することで、上質で上品なイメージに。また、フォントサイズを小さくすることで写真が生きるデザインになってます。

カラースキーム分析

写真が目立つように色味の弱いグレー・白・黒などのシンプルな色味が中心です。また、商品ページではパッケージの色に合わせて1色メインカラーとして使用されています。

ファビコン

OG画像

タイトル

メディコート（Medycoat） 愛犬の健康維持に｜国産ドッグフード｜ペットライン

愛犬の健康維持には、国産ドッグフードのメディコート。食物アレルギー、下部尿路のケア、介護期用のフードなど、様々なお悩みに対応するラインナップがあります。安心安全にこだわった、ペットラインのドッグフードです。

この記事を書いているメンバーが働いている会社
よかったら見に来てください！