Interview Image

WSD-F10 開発者インタビュー

外装・UIデザイン 編

アクティブに 身につけ、 スマートに操作する。
ユーザーとの 共感を生み出す アウトドアデザイン。

アウトドアの本質を 凝縮したミニマルデザイン

——— プロダクトを語るうえで欠かせないのがデザイン。今回は、WSD-F10の外装デザインを担当された可知さんと、CMFデザインを担当された濱上さんにお話を伺いました。

 可知:商品企画や実装設計のインタビューでも話があったと思いますが、今回のWSD-F10の開発には、何年もの歳月がかけられています。そのため、プロジェクトの立ち上げから製品化に至るまで、開発に携わってきたメンバーも数多く、外装デザインに関しても、様々なデザイナーが関わっています。

そんななか、自分が外装デザインを担当したときには、すでにアウトドアというコンセプトが決定しており、今までの開発過程で積み上げてきたものをうまく継承しながら、新しいコンセプトに沿ったデザインをしようと心がけました。しかも、WSD-F10は、普段手掛けているアナログウォッチとは違い、文字板が全面液晶。UIデザインと連携をとりながら進める作業は、個人的にはなかなか刺激的な経験でしたね。

 濱上:また、プロダクトデザインに必要不可欠なのがCMF。Color、Material、Finishの略で、見た目の印象を決めるうえで重要な要素となる色、素材、仕上げのことです。WSD-F10では、アウトドアカラーの定番であるオレンジをメインに、計4色のバリエーションを揃えました。

時計事業部

可知 恒治

時計事業部

濱上 朋宙

——— 外装デザインのポイントについて、聞かせてください。

 可知:外装デザインに着手する際は、イメージスケッチやCADデザインなど、様々な手法がありますが、量産に先駆けてプロトタイプを作成。ケースやベゼルの形状、ビスの凸量といった各部の造形まで細かく作り込み、サイズ感や質感など、より最終形に近いイメージで提案しました。これをベースに、実装設計部門と検討を繰り返し、各パーツの素材、形状、寸法などを細かく決めていきました。

先行作成されたモックアップ先行作成されたモックアップ

 可知:WSD-F10には、スマートウォッチとアウトドアツールという二面性があります。それをいかにうまく融合させるか。基本的には、できるだけ加飾を廃したシンプルな造形とし、フェイスの視認性を妨げないよう考慮しました。そのうえで、細部の造形にこだわり、全体のバランスを整えていくという作業を繰り返しました。時計のデザインは、シンプルになればなるほど、ディテールの作り込みに注目が集まるので、そのあたりは気が抜けませんでしたね。

たとえば、ベゼルの形状。ガラスと接する縁の部分を見ると、上下左右の傾斜が浅くなっています。これは、スワイプ操作する際、指が引っかからないようにするためのものですが、同時にフェイスをより印象的に見せるという役割もある。傾斜の幅や角度など、微妙なニュアンスを出すのには苦労しました。

また、フロントビスにもこだわり、ネジ穴の種類やトップの形状などを吟味しました。最終的には、ウェアなどへの干渉を防ぐため、面取りを施したトップに三ツ矢のネジ穴を刻んだビスを採用しています。細かい部分かもしれませんが、手をかけられるところはすべてこだわりたかった。WSD-F10には、そんな想いが隅々に詰まっていますね。

操作イメージ操作イメージ

ベゼルおよびフロントビスの試作ベゼルおよびフロントビスの試作

——— CMFデザインには、どのようなこだわりがありますか。

 濱上:CMFデザインにあたっては、アウトドアウェアやツールとフィットする色調や質感を目指しています。

  • WSD-F10GN
  • WSD-F10RG
  • WSD-F10BK
  • WSD-F10RD

カラーバリエーション

 濱上:なかでも、こだわったのは、やはりベゼル部分の質感。樹脂素材のソリッドカラーをベースに、透過効果のあるメタリックコートと耐久性を高めるクリアコートを重ねた多層構造の塗装で、高級感のある金属調の質感を表現しました。ベゼルそのものが複雑な形状をしているので、光の反射によって様々な表情を見せてくれます。

この質感を出すために、メインカラーであるオレンジはもちろん、その他のカラー展開も視野に入れながら、新しい塗料の開発や塗装方法について、試行錯誤を重ねました。コート塗装は、塗料の種類によって色味が異なるのはもちろん、塗装の量によっても色調が変わります。塗膜が薄いとギラギラとした感じになり、厚すぎるとメタリック感がなくなる。デザイナーが意図する色味を正しく再現するまでには、相当な手間と時間がかかりました。

苦労したぶん、仕上がりには非常に満足しています。この質感を、ひとりでも多くの方に、その目で確かめていただきたいですね。

下地にメタリック+クリア塗料をコーティング下地にメタリック+クリア塗料をコーティング

専用プレートで塗装イメージを確認専用プレートで塗装イメージを確認

品質管理用の色サンプル品質管理用の色サンプル

——— プロダクト全体から、アウトドアギアらしい大胆さとスマートウォッチらしい繊細さが感じられるWSD-F10。そこには、造形、素材、色、仕上げなど、隅々までこだわりが込められているのですね。


見やすさ、 使いやすさ、 心地よさをひとつに

——— 続いて、WSD-F10の“顔”ともいえるUIについて、デザイナーの森谷さんにお話を伺います。

 森谷:WSD-F10のUIをデザインするにあたり、最も重要なポイントは、「腕時計であること」です。腕時計であるために、2つの点にこだわって開発を進めました。ひとつが、様々な情報をいかにすばやく、いかに直感的にユーザーに伝えるかということ。

もうひとつは、飽きのこないシンプルなデザインにすること。WSD-F10には、アウトドア中に使う機能が豊富に搭載されており、一般的なスマートウォッチに比べ、フェイスを見る機会がより多くなります。刻々と変化する情報と常に向き合うため、派手でポップな表示や過剰なアニメーション表現など、アウトドアユーザーにとってストレスになりかねない要素は、できるだけ廃除した方がよいと考えました。

この2つが、時計メーカーが出すスマートウォッチとして最低限の条件です。

これらの条件をクリアしたうえで、カシオらしいオリジナリティを感じさせるUIデザインに仕上げていく必要もあります。超えなければならないハードルは高かったのですが、そのぶんやりがいも大きかったですね。

デザインセンター プロダクトデザイン部

森谷 信一

——— WSD-F10のUIデザインについて、具体的な特長を聞かせてください。

 森谷:まず、先ほどお話しした、すばやい情報伝達力と飽きのこないデザインという2つの必要条件を満たすために、構成要素を必要最低限に絞り込むことにしました。とくに、使用する色に関しては、モノトーンに加えて2色に限定。ベースとなるのは、背景の黒と英数字の白のハイコントラストによる視認性の確保。そこに、アテンションカラーの赤、それを補助する青を加え、直感的な情報認識ができるよう工夫しています。時計のフェイスという限られたスペースでは、この色使いがベストだという判断ですね。このミニマルデザインの考え方が、「TOOL」の表示画面です。たとえば、フィッシングタイムの画面では、最もよく釣れる時間帯を赤、次に釣れる時間帯を青で表示しています。

また、「TOOL」には6つの機能があり、それぞれ異なる計測が可能です。これに対し、それぞれの機能に特長的な“顔”をミニマルな要素の中で構成することにもこだわりました。方位計測で北を指針する矢印などが、その代表ですね。自分が今、どのモードを使っているかが一目でわかります。

さらに、円形の液晶形状を利用したデザインも特長のひとつ。円周を24時間に見立てたり、360度に見立てたりすることで、時間の流れや空間の広がりを視覚化することができ、「TOOL」としての統一感を持たせながら、機能ごとの個性を表現できます。これは、個人的にも面白い試みだったと思います。ちなみに、日の出・日の入りの表示画面は、時刻と同時に、太陽が昇る方角と沈む方角も表示もできます。

UIデザイン時のイメージボードUIデザイン時のイメージボード

フィッシングタイムフィッシングタイム

方位計測方位計測

日の出・日の入り時刻日の出・日の入り時刻

日の出・日の入り方位日の出・日の入り方位

——— 色使いやレイアウトのほかに、こだわりはありますか。

 森谷:まず、使用しているフォントを独自に開発しました。ミニマルなデザインを目指しながら、個性を出すための工夫です。シンプルであるほど、こうしたディテールが生きてくる。時刻や計測値など、メイン表示で使う文字・数字は、目に入りやすい直線的で力強いデザインを採用し、アウトドアツールとしての特徴付けをしています。

フォント見本フォント見本

 森谷:また、背景などに、ローポリゴンをテーマにしたグラフィックを使用。三角形を規則的に配置することで、フラットデザインを基調にした平面的なデザインに、立体感を持たせるようにしています。高度グラフは山のイメージ、タイドグラフは波のイメージを表現するなど、機能によって配置のしかたに変化があるのもこだわりのひとつです。

高度グラフ高度グラフ

タイドグラフタイドグラフ

 森谷:そして、もうひとつ。忘れてはならないのがアニメーション。「TOOL」の表示画面は、いくつかのレイヤー構造となっており、起動時やスワイプ操作で表示を切り替える際、各レイヤーが個別にトランジションする仕掛けになっています。指の動きに追随するように、画面が生き物のように遷移していく動きは、我ながら何度見ても楽しいですね。これも、ローポリゴンと同じく、フラットデザインに奥行き感をプラスする効果を狙っています。

トランジションのアニメは、FLASH(動画作成ツール)で何種類ものパターン作成による試行錯誤を繰り返し、機能表示らしい無機質な動きではなく、有機的でエモーショナルな動きをすることで、日常生活で眺めても楽しくなるようなものに仕上がったと思います。このワクワクする感触を、たくさんの人に味わってもらいたいですね。

フラッシュで作成したデモ画面フラッシュで作成したデモ画面

——— 外装、CMF、そしてUI。同じアウトドアというコンセプトを軸にしながら、それぞれの視点で完成度の高いプロダクトデザインを目指す。もちろん、そこには商品企画、実装設計、アプリ開発など、開発陣の様々なアイデアも盛り込まれていますが、共通しているのは、自分が楽しいと思えるものをユーザーに届けたいという気持ち。WSD-F10を身につける喜び、操作する楽しさを、あなたもぜひ体験してみてください。