はじめまして、
やまざき ひろふみと申します。

浜松ホトニクス株式会社
日本・グローバルサイトリニューアル(2018)

製品の見つけやすさにこだわった機能的デザイン

2018

担当:コンセプト策定/アートディレクション/デザイン/撮影ディレクション
工数:5人月

スマートフォンなど身近な製品から、先端医療・学術研究を支える製品に至るまで、光センサ、光源、計測装置、画像解析システムなどを展開している浜松ホトニクス。 リニューアル前のWebサイトは紙カタログを展開しただけにとどまっており、目的の製品が探しにくいという課題を抱えていました。そのため、情報構造最適化、検索機能強化、パーソナライズ機能開発など、マーケティング機能を強化する必要がありました。また、マーケティングだけでなくブランド強化も重要視しており、しっかりとしたコンセプトの可視化も求めていました。私は、デザインコンセプトを固めるためのワークショップ推進からデザイン最終化までを担当しました。

製品の見つけやすさにこだわった機能的デザイン

アプローチ

浜松ホトニクスでは各事業部メンバーが横断的に集められた14名がWeb推進チームとして活動していました。彼らの関係は良好でありつつもそれぞれの事業部の立場・重要視することがあり、利害のある状態でした。

14名と大人数になると、それぞれの温度感や性質も様々です。そのため、「デザインコンセプトを都度振り返り認識を合わせること」「それぞれの考えを軽視せず受け止めた上で、どのような論点になるのか整理し最終的に納得度の高い最適解を導くこと」を意識して推進していきました。

提案時は最適解となりうる複数の仮説を構築することに全力を注ぎました。マーケティング機能を強化する目的を達成するため、特にナビゲーションや絞り込み機能などのパーツはクライアントにプロトタイプを触ってもらうことで、精緻な判断をしてもらえるように注力しました。

自社のイメージを他のモチーフを用いて可視化したデザインワークショップ

「ブランドビンゴ」という手法を用いて、自社を他のモチーフに例えて解釈していくワークショップを実施。14名を3つのチームに分け、思考を発散してもらいました。ワークショップ中はすぐにクロージングせず、発散につながる問いを投げかけることに注力しました。

ワークショップ 1 ワークショップ 2 ワークショップ 3 ワークショップ 4 ワークショップ 5 ワークショップ 6 ワークショップ 7 ワークショップ 8 ワークショップ 9 ワークショップ 10 ワークショップ 11 ワークショップ 12 ワークショップ 13 ワークショップ 14 ワークショップ 15

端的にまとめず、説明書のように文脈を詳細化したデザインコンセプト

抽象的な言葉だけでは、プロジェクトメンバー間の意思疎通を図ることは難しいと考えています。そのため、文脈を添えていくことを意識し、具体的に記載。人の印象変化と同様に、第一印象とそれ以降という切り口でもどういった世界観が最適か記載しました。デザイン提案時には「拠り所」として機能するだけでなく、サイト公開後も拠り所として活用いただき、数年経っても世界観を保つ効果を発揮しています。

デザインコンセプト 1デザインコンセプト 2デザインコンセプト 3デザインコンセプト 4デザインコンセプト 5

デザインコンセプトを拠り所に写真に求められる役割を定義して進めた撮影ディレクション

ミニマルな世界観だからこそビジュアルの質を高める必要があったので、撮影ディレクションも実施しました。デザインコンセプトに基づいて写真に求める役割を明確化し、1週間で150点の撮影を3名のカメラマンとおこないました。

撮影ディレクション 1撮影ディレクション 2撮影ディレクション 3撮影ディレクション 4撮影ディレクション 5撮影ディレクション 6撮影ディレクション 7

CMSとの連携、多言語展開、アクセシビリティ、UIの機能拡張などを意識したモジュールデザイン

抑えるべき点を踏まえながら、メガメニューやメインビジュアルのスライダー、問い合わせにつなげるためのサイドボタンなど、使い勝手につながるUIが機能美として成立することを重視して進めていきました。

各デバイス幅に対する展開パターン

各デバイス幅に対する展開パターン

機能系のモジュール一覧

機能系のモジュール一覧

リンク付き画像のモジュール一覧

リンク付き画像のモジュール一覧

フォーム系のモジュール一覧

フォーム系のモジュール一覧

メガメニューデザイン

メガメニューデザイン

アイコンデザイン

アイコンデザイン

機能美が感じられ、自然体で過度に主張しすぎないミニマルな世界観で体現

デザインコンセプトで定義した「スマートで自然に感じられる知性や、控えめだが内に秘めた想いを持つイメージ」を元に書体や罫線、余白など各要素ごとに選択肢を提示。言語化されたコンセプトを基に視覚化されるとどのような世界観が最適なのか、比較検討しながら一緒に決めていきました。

グローバルサイトトップページ

グローバルサイトトップページ

製品カテゴリトップページ

製品カテゴリトップページ

製品一覧ページ

製品一覧ページ

製品検索結果一覧ページ

製品検索結果一覧ページ

© Hirofumi Yamazaki