Top / Works / MICRA様 Webサイト制作
Webサイト制作

MICRA様 Webサイト制作

クライアント名
MICRA 様
業種・職種
浄水システム
対応領域
企画設計 サイト構築(LP・コーポレート)
スキル
WordPress PHP JavaScript HTML CSS Figma Photoshop Illustrator
担当者
企画・M.MIYUUディレクター・アートディレクター・デザイナー M.MIKUテクニカルディレクター・コーダー・エンジニア ZUMI構成 OHNO
サイトURLなど
https://micra-water.com/

プロジェクト概要

浄水器ブランド「MICRA」様の製品サイトにおいて、製品の魅力や考え方が正しく、そして心地よく伝わるよう、サイト全体の設計と表現に関わりました。
製品の信頼性が重視される分野だからこそ、清潔感のあるビジュアルと、情報が整理された構成を軸に、安心して読み進められるサイト体験を意識しています。
また、イラスト表現や繊細なアニメーションを取り入れることで、機能説明にとどまらず、ブランドの空気感まで感じられるサイトを目指しました。

プロジェクト背景

「正しい情報が、正しく伝わること」

浄水器は、性能・安全性・使い勝手など、確認したい情報が多い製品ジャンルです。
そのため、情報をただ並べるのではなく、理解しやすい順序と視線の流れを意識しながら整理することで、初めて検討する方でも内容を把握しやすい構成を目指しました。

コンセプト

「清潔感と信頼感が、自然と伝わるサイト」

余白を生かしたクリーンなビジュアル設計と、情報がひと目で理解できるレイアウト構成を大切にしています。
また、空気感を損なわない控えめで繊細なアニメーションを取り入れ、製品そのものの印象を妨げない、落ち着いたサイト体験を整えました。

情報設計・ビジュアル構成

製品の特長や仕組み、使用シーンが無理なく理解できるよう、情報の優先順位を整理しながらページ全体の流れを設計しました。
専門的な内容についても、段階的に理解が深まる構成にすることで、初めて浄水器を検討する方にも配慮しています。
また、構造や仕組みなど写真だけでは伝えにくい部分については、イラストを用いた表現を取り入れ、やわらかさと分かりやすさの両立を意識しました。

UI / インタラクション設計

スクロールや要素の切り替わりに合わせて、主張しすぎない繊細なアニメーションを採用しています。
視線の流れを妨げず、情報への集中を保ったまま閲覧できるよう、動きの量やスピードにも細かな調整を加えました。

デザイン・トーン設計

全体のカラー設計や余白の取り方は、清潔感と信頼感が自然と伝わるトーンを意識しています。
製品ジャンルにふさわしい落ち着きの中に、親しみやすさも感じられるバランスを大切にし、安心感のあるビジュアルにまとめました。

最後に

MICRA 様のWebサイトでは、製品の性能を強く押し出すのではなく、情報が整理され、自然と理解できることを大切にしました。
安心して使い続けるための製品であるからこそ、見る人にとってストレスのない、誠実な伝え方を意識しています。
訪れた方が自然と安心感を抱き、ここで過ごす時間をイメージできるような、やさしい世界観を大切にしています。

仕事の相談 その他の相談 LINEで相談