tsukadan

塚田信秋

  • IoT時代のクルマとUX

    はじめまして、UIデザイン、情報設計を担当する塚田です。 3年前より「人間中心設計」についての学びはじめてから、 UXデザインやサービスデザインへの考え方を実務導入し、社内にファシリテートしています。 これなかなか理解得るのはむずかしい。。 2012年より某自動車メーカーのネットとつながるナビ端末のオーディオ部門の 試験研究に2年間ほど参画させていただいた経緯もありますので、 今回このテーマで自論(あくまでも自論だよ)をつらつらと書きます。 ◆今までのクルマのHMI(ヒューマン・マシン・インターフェース) ここ数年でクルマのカーナビのHMIは大きく変わってきていると感じています。 グーグルやアップルの車載機を開発参入により、 UIの見せ方や操作方法にも変化がおこりました。 日本の車メーカーのほとんどは、自動車工業会が規定するガイドラインに則って ナビのUIデザインを作成しています。 これは運転中操作における「安心」「安全」を最優先にユーザー操作が考えられているわけですが、 その反面、規制に則ったHMIデザインはどのカーナビメーカーも似たり寄ったりでした。 JAMA「画像表示装置ガイドライン」 http://www.jama.or.jp/safe/guideline/pdf/jama_guidelines_v30_jp.pdf その中でも国内最大手メーカーであるT自動車のガイドラインは世界でもトップクラスの ストリクトな規定となっており、僕らデザイナー泣かせな厳しい規制がありました。 そこに数年前、アップルの「apple carplay」が登場! 正直、それまでの国内のガイドライン規制を覆すような シンプルかつすっきりしたUIでした。 文字高:5.5mmに足りてないじゃ~ん。。 おまけに静電タッチパネルだからスマホ感覚でスルスル動く。。 これで国内のHMI規定通過するの??? と、まぁ衝撃を受けたんですが、 モーターショウで実機触ってみると意外に使いやすいではないですかァァ!! なぜ?! ガイドライン則ってればユーザビリティが良いってわけではないの?? ◆スマホ時代の新たな操作のアフォーダンス化 そう、僕らは8年程前にジョブズがiPhoneを発表してから、 僕らは知らず知らずのうちにタッチパネルの独自操作や アプリアイコンの形状や配列に慣れてしまっていたわけですね。 つまり僕らはアップル(iPhone)によって「新たなアフォーダンス」が備わっていたのです。 2000年代に入ってからあらゆるデバイスを日々日常の生活の中で 当たり前に触れる今日において、私たちのUXは日々刻々と進化していっているのです! 最近のシーテックなどではどこもかしこもIoT祭り・・・ 人々の生活において、つい10年ほど前まではスタンドアロンで完結していた製品すべてが 当たり前にネットでつながる世の中なのです。 さらには生活者の活動の多様性もあいまって、 今となっては既存の車のHMIガイドラインでは、 「ダサさ」と「使いづらさ」を助長する規制になりつつあります。 ◆今だからこそ「人間中心設計」によるユーザーの本質的欲求の見直しが必要 ITによるクルマの進化はこれからも続きます。 各社メーカーが自動運転技術に凌ぎを削り進化していく中で、ドライバーの運転中の行動や欲求にも変化が起きてきます。 ・走行中の操作が規制されていた動画やアニメーションUI ・1タスク操作完了までの8秒縛りルール ・1画面ボタン配置数と押下判定範囲サイズ もうこんなこと意識しなくたっていいじゃん!
    ...
  • 俺とfavicon(ファビコン)の面倒くさい関係

    こんにちは。UIデザイン担当の塚田です。 今日は、WEBサイトに付きもの**favicon(ファビコン)**についてお話します。 デザインやっててロゴデザイン開発とかサイトデザインは楽しく進められるんですが、 コーディングなどフロントエンドの構築はいつも別のスタッフに任せていました。 そして意外におろそかになりがちなのが、favicon(ファビコン)。。 一昔前は、PCのWEBサイトのブックマークとか、URL入力枠の横辺りにさりげなく サービスロゴが掲載されてるピクトアイコンという程度の認識でした。 最近とある案件で作成することになり、favicon(.ico)ファイルの作成方法を探していたら、 とあるブロガーがfaviconの種類について掲載されていました。 なんと!21個もあるとのことっ!! faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-310x150.png apple-touch-icon-57x57.png: iOS用 apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon.png apple-touch-icon-precomposed.png (以下、「IT探検記」さんのまとめより引用) こんなにあるんですね・・・^^; 10年くらい前までは、WEBサイトのファビコンはPCブラウザくらいを意識して設定しておけばよかったのですが、 8年ほど前にスティーブ・ジョブズがiPhoneを発表して以来、 iPhone、Android、iPad、iPod touchなど様々なマルチメディア端末が登場し、
    ...