明朝体フォントをアクセントに。IVARA LEARNのランディングページデザイン

当サイトにwebの制作実績として紹介させていただいている実績は、基本的にデザインとコーディングの両方を担当させていただいた制作案件がメインなのですが、webデザインのみ提供させていただいた案件も多数ございます。

昨年夏ごろの実績になりますが、いつもお世話になっている獣医療関連の出版社であるEDUWARD Pressさまが提供する「3D解剖アトラス IVALA LEARN」のLP（ラインディングページ）デザインです。

IVALA LEARNは平面から立体（3D）での操作により、動物の骨格・筋肉・内臓などを360度観察することができ、解剖学をより身近に感じることができる革命的なサービスとなっています。元々は海外で利用されているサービスでしたが、日本でも提供が開始されることになったようで、日本版のLPデザインをお任せいただきました。

海外のページを日本向けにアレンジ

LPの内容自体は海外ですでに存在しているページを参考にし、基本的なテイストもそこから逸れることなく、日本用にアレンジして制作していきました。

メインビジュアルで訴求するメインキャッチにはwebフォントは使わず、ブランディングと訴求力を高めるため、太めの明朝体を用いてwebフォントでは再現できないタイポグラフィにて制作。

タイトルやキャッチなどの文字サイズ大きめの文言に「」（カギカッコ）を使う場合は、フォントのものを使用せず罫線で表現するのが基本です。フォントのものを使うとどうしてもモッサリ感が出たり、字間が広めにとられてしまいますが、罫線にすることでよりスマートにスッキリ読ませることができます。

かなり専門的な分野であるため、提供いただいた画像の種類もあまり多くなかったのですが、その中でもできる限り、最大限活用して制作させていただきました。

ページに使用するカラーはロゴで使用されているカラーから抽出。
メインカラーは背景にしている暗めのネイビーで、アクセントとしてグリーンやピンクなどの蛍光色を使用しました。

ページ全体のゴールとしてのCTA（コール・トゥ・アクション）のデザインも背景にパターンを用いてデザイン。

3D操作のためPC向けのサービスではありますが、学生さんの利用者も想定しているため、スマホデザインも同様に各要素しっかりと制作しました。

今までにないサービスであることと、利用料もかかるので（学生さん以外は年間18,000円）、高級感と信頼感を出すために各領域のタイトルで使用するフォントも厳選しながら、余白も意識してページ全体を丁寧に制作。仕上がりはクライアントさまにも満足していただくことができました。

今回はコーディング対応無しのページデザインのみの制作でしたが、お任せくださりありがとうございました。

※ページデザインはAdobe XDにて制作しました。

IVALA LEARNのLPはこちらから

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。