HTML 5

CSS 3/SASS

jQuery

PHP

Isucare

ウェブサイトのデザインおよび開発

Isucare は、Laboratoires Salem が販売するハイパフォーマンスの血糖値監視デバイスです。この製品を販売促進するために、カタログサイトをデザインし開発するよう依頼されました。

in_browser
img-project-center

ウェブサイトのコンテンツ階層のスケッチ

img-project-center

ウェブサイトのレイアウトの詳細スケッチ

01
コンセプト

テンプレート作成

デザイン開発チームの1員としての私の任務は、Salem Laboratory製品ラインアップの製品サイト第一版制作のお手伝いでした。そしてその製品は、Isucareという血糖値監視デバイスでした。
同ウェブサイトは他の一連の製品サイトの1つになるということで、均質のビジュアルアイデンティティを作り上げ、かつ同開発プロセスを容易にするために、私達はIsucareを他のすべての製品サイト用のテンプレートとすることに決めました。

02
デザイン

ウェブサイトのプランニング

同サイトをデザインするにあたりまず最初に私達が行ったのは、コンテンツの決定でした。このサイトで私達は何を言おうとしているのか?まずサイトの目的を決定してから、そのメッセージを伝えるのに最も効果的な方法を探し始めました。

クライアントがお望みなのは、製品の利点やラインアップの概要を説明し、見込み客が同社に連絡しやすい方法を提供するカタログサイトであることは明らかでした。上のサイトマップでご覧いただけるように、私達は3つの部分に分かれたシングルページのサイトでいこうと決めました。ユーザーが1つのリンクをクリックすると、同ページの正しいセクションへとスクロールダウンされます。

img-project-center

03
デベロップメント

すべてを合わせる

同サイトはフロントエンド用に HTML/CSS と JavaScript 、バックエンド用に PHP を使用して開発されました。フルページスクロール効果を作るのには、jQuery プラグイン Fullpage.js を使いました。