株式会社ピエラス様

ピエラス様での別ラインナップ製品の空間除菌清浄機サイトとなります。空気中の細菌と戦うをテーマとし、室内の菌やウイルス、シックハウス症候群の原因となる揮発性化合物、ダニの糞や死骸、ハウスダストなどのアレルゲン物資を集塵し、不活化する高機能な清浄機の製品のご紹介です。
URL:http://mediair.jp/

プロジェクトの流れ

構成について

シングルページのみでレスポンシブ対応です。主なライブラリとしてはカルーセル（スライダー）を多様しています。各コンテンツごとにストーリーをもたせるようにしてユーザーに対して製品をわかっていただけるように考えています。

デザインについて

テーマカラーは菌と戦うという製品なので製品はホワイト系でかぶらないようにグレー系を提案しています。お客様からはPDFの仕様書みたいにページをめくって展開するようなイメージを伝えてはという提案を考えカルーセル（スライダー）とアコーディオンを組み合わせてみせれるカタチをデザインにあてはめています。レスポンシブ時にはスマートフォンユーザーに対して、見やすくするため文章、カルーセルとわかりやすいカタチで繰り返しています。万が一、カルーセルの画像部分の構造に気づかれなくてもシンプルにコンテンツを繰り返しているので、振り返り戻っていただけるように考えました。カルーセルのデメリットのコンテンツが隠れてしまうのでスルーされてしますのを少しでも軽減できるのはないかと思っております。シングルページなので将来的にコンテンツの追加があってもいいようなデザインを意識しています。

コーディング・マークアップについて

レスポンシブにつきBootstrap4のフレームワークの導入をしています。今回はコンテツ幅もあればフルワイドの部分とミックスされています。箇所箇所で使い分けてマークアップをしています。フレームワークの部品で不必要なファイルはnpm時に取り除き必要なものだけをモージュルで読み出しています。これでファイル数も減り、使用していない不要コードもなくなり少しでも軽量化をはかっています。このWEBサイトでは多様にカルーセルを使用しているので読み込む順番や動く順番を考慮して細かいことをプログラミングしています。メインビュジュアルではパララックスをつかって演出し、目立たないですがアイコンをアニメーションさせてたり細かい工夫をしてコンテンツの邪魔にならないようにしています。SEOを意識したコーディングをしています。

運用について

更新はあまりすることがないサイトです。製品の仕様がかわるぐらいで資料の差し替えやテキスト 化しているので文字を打ち変えるなどで簡単に更新ができるように施しています。今後の経過も含めて楽しみなWEBサイトとしています。