2015.05.28 | UX
なんて疑問、いまだに持っている人も少なくないのではないでしょうか?

「UX」という言葉は、特にここ数年ではいわゆるバズワード(業界専門的流行語)みたいになってるのかも知れません。実際に、デザイナーの肩書きの前に「UX」と付けただけの、自称UXデザイナーという人は、こちらでも多くいます。

確かにデザインシンキングの過程において、どこからどこまでがUXであるとか、その明確なラインは見えにくいのかも知れません。従って、デジタルデザインに関わるデザイナーは、UXも”できます”的になるのかもしれませんね。言い換えれば、シニアレベルのデザイナーであれば、誰でもUXを視野に入れてデザイン作業していることは間違いありません。

それでは、そもそも何故この「UX」は、バズワードになったのでしょうか?

もちろん、その理由は一様ではないと思いますが、下のイラストに、その背景、つまり「UX」が台頭してきたひとつの理由があるのではないかと考えます。このイラスト、実はかれこれもう10年ほど前に作られたもので、ひとつの典型的なプロジェクトをそれぞれ担当者の視点から面白可笑しく捉えてみたコミックです。もう少し新しいバージョンのモノもあるのですが、ここではオリジナルの簡素版を例に挙げて説明してみたいと思います。


 各イラストを上・下段、それぞれ左から説明すると:

1:どのようにお客様が説明したか。
2:どのようにプロジェクトリーダーが理解したか。
3:どのようにアナリストがデザインしたか。
4:どのようにプログラマーがコーディングしたか。
5:どのようにビジネスコンサルタントが説明したか。
6:どのようにプロジェクトがドキュメントされたか。
7:どのオペレーションがインストールされたか。
8:どのようにお客様が請求されたか。
9:どのようにサポートがなされたか。
10:実際、どのようなモノをお客様が望んでいたか。

と、なってます。

デジタルデザイン業界に携わっている人であれば、ちょっと苦笑いしてしまうのではないでしょうか。

確かに10年以上前には、クライアント、プロデューサー、ディレクター、デザイナー、プログラマー、コンサルタントが集まり、その叡智を結集させてプロジェクトを進行させ、ようやくプロダクトローンチまで辿り着いたにもかかわらず、その数ヶ月後には、もうすでにリデザインの新規プロジェクトの話が立ち上がっている…といったようなプロジェクトが、こちらでもかなり沢山あったようです。

そこで、いわゆるUXデザイナーが携わる様々なワークフローと、そこから造られる仕様書が重宝され始めたのです。競合分析などのリサーチから始まり、コンテンツモデル、エクスペリエンスマップ、メンタルモデル、ペルソナ、プロセスダイアグラム、シナリオマップ、タスクフロー、サイトマップ、ユーザビリティーテスト&レポート、ワイヤーフレーム、スタイルガイド、ユーザージャーニー、そしてプロトタイプ等々。

まずは何を実現したいのかという情報収集をしっかりとして、それに基づいたUXプロセスを着実に取り入れてプロダクトのゴールを定める。そして、各担当者の共通理解を得ながらそのゴールに向ってプロジェクトを進行させれば、そう、こんなイラストの結果にはならないハズですよね。

Read more
2015.05.07 | UX
ウェブサイトの寿命・ライフサイクルはどんどん短くなっており、情報、戦略の変化、新しいサービスにすぐに対応することが求められています。
そして、すべてのウェブサイトはレスポンシブ、またはモバイル専用サイトと併用でマルチデバイスに対応させるのは基本中の基本です。

そこで、速いサイクルで変化していくウェブデザイン業界の2015年のデザイントレンドを紹介します。
 
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

1) 縦スクロールに連動したアニメーション
 2014年に引き続き、さらに縦スクロールのサイトは増えて行くでしょう。
モバイルからのアクセスが増えたことでクリックという行為がゆっくりではありますが古いものとなってきていて、ユーザーはスクロールやスワイプの方が簡単で心地よいと 思い始めているというスタディもあります。 縦スクロールを利用したアニメーションを使う事で、ユーザーによりいっそう楽しさやウェルカミング感を与えています。
  
QED Group

 QEDは人材育成、教育、マネージメント、マーケティングなどのサービスを提供するチェコスロバキアのエージェント。モバイルファーストのナビゲーションが使いやすく、スクロールすると現れる、ふわっとしたタイポグラフィーのアニメーションが心地よく、縦スクロールも丁度良い長さ。イラストレーションも印象的です。
 
 2)とにかくBIG
横幅いっぱいの大きなイメージは沢山のウェブサイトで見られるようになりましたが、2015はタイポグラフィーもとにかくBIG。最初にサイトにアクセスした時のインパクトを強力にしています。
 
Born Group

 サンフランシスコ、NY、 ロンドン、シンガポールを拠点とするデジタルエージェンシー。とにかくゴリラとBig Experiencesの説得力がすごい。
  
3)手書きのイラストレーション
 シンプルでクールなイメージのデザインを多く見かける今、あえて手書きでパーソナル感を出す。クリエーターの心のこもった仕事は見ていて感動を与えます。
 
ただ手作り感をアピールするだけでなく、スクロールやマウスの動きと連動させた絶妙なタイミングのアニメーションを使って、ローテクとハイテクを融合させるのが大事なポイントです。
 
Mint Design Company
 
クライアントロゴまで手書きの細やかさ。デザイナー、モーショングラフィックアーティストJaphia Olison のポートフォリオサイト。
  
4)縦横スクロールの混在
今や縦スクロールは当たり前、次はコンテンツに合わせて縦横自在にスクロールさせて商品をアピールします。この場合やりすぎるとユーザーエクスペリエンスは悪くなるので注意が必要です。
  
QUO+

 The QUOヘッドフォンのプロダクトサイト。横スクロールでプロダクトの紹介、縦スクロールでカラーバリエーションを見せています。
 
 5)永遠のフラットデザイン
 ここ数年すっかり人気の定着したフラットデザインですが、その基本は
スイスデザインでしょう。
グリッド、ゴシックタイポグラフィー、幾何学的面と線の構成などを使った合理的で実用的な生活の中のデザインです。それを基本にしたフラットデザインはこれからも多くウェブデザインに使われて行くでしょう。
 
Swiss air
2014年にリニューアルされたSwiss air。 洗練された色使いとレイアウトはUIデザインのお手本になります。

これからサイト制作、リニューアルをお考えの方は、ぜひこれらのトレンドを取り込んでみてはいかがでしょうか。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
【サイト制作に関するお問い合わせ】
メール:
info@LeGrand.jp
電話:0120-066-898(フリーダイヤル)



Read more
2015.04.30 | UX
いよいよApple Watchの出荷も始まり、最新の最もアドバンスなタイムピース(精度の高い時計)として、これからその機能性などを耳にする機会は多くなるでしょう。

まず、Apple Watchは、他のアンドロイドウェアやサムソンギアと同様に、スタンドアローン(独立型)デバイスではありません。ですので、常にiPhoneとのペアリングが必要です。なお、このペアリングは電話一機に対して時計一機という1対1の関係で、複数のApple Watchを同じiPhoneにペアリングさせることはできません。コネクションは基本的にブルートゥースですから、電話から約10メートル程度が使用可能な範囲になります(もちろんWiFiを使うとこの限りではありません)。ですので、Apple Watchのスタンスとしては、あくまでもiPhoneのアクセサリー、もしくはセカンドスクリーンという感じですね。

では、どんなアクセサリーになるのでしょう?

時計機能に加え、基本的にはフィットネスのモニタリングやコミュニケーションツールとしての主な使用が想定されます。独自のディスプレイに加え、センサーとして、心拍センサー、加速度センサー、ジャイロメーターを備えていますが、GPSは掲載されていません。また、スピーカーとマイクを備えていますが、ヘッドフォーン用ジャックはありません。基本的なタッチポイントは通常のスマートフォンのタップやスワイプですが、ディスプレイの感圧タッチや、デジタルクラウン(右サイドにある竜頭型のコントローラー)による操作も可能です。

懸念されているのは、バッテリーの継続時間です。一晩の充電で最大18時間程度とのことですが、アプリの使用頻度により1日持つかどうか微妙です。ただし、ウォッチ用アプリの想定インタラクティビティー時間は、Appleの推奨で5~10秒ですので、既存アプリのスーパーライト版を使用するという想定です。なので、ずっと長時間続けてナビゲーションアプリを使用するとか、音楽を聴くとかでなければ、それほど問題ないのかもしれませんが、ちょっと心もとないですね。ちなみに、リチャージに必要な時間は、1時間半で80%、2時間半で100%です。

UXとしては、よりパーソナライズされた通知機能などは、即役立つ機能として使えるのではないでしょうか。
ロケーションベースで電車の発着時間を通知するようなアプリで、たとえば、「渋谷発二子玉川行きの最終電車は、あと5分で出発します、お急ぎください」と伝えてタイマーモードになる等、個人的なミニアシスタント機能は期待できます。

つまり、今までのように、電話を取り出してアンロックして、アプリを探して開いて...みたいなことは必要なくなるのではないでしょうか。

Apple Watch、タイムピース+タイムセーバー的なデバイスです。

以上、初期型モデルはあくまで電話のアクセサリーとしての高級オモチャ感は拭いきれません。また、ご存知のように、Appleはデベロッパーにハードのデモ版(サンプル)を支給する例はまれですから、初版のアプリはスロースタートになるでしょう。ただ、バッテリーやソフトウェアのアップデートとともに、これから改良を重ねて登場してくるアプリの数々、またそのスピードを考えると、やはりウォッチを含めたこれからのウェアラブルの可能性は計り知れません。

皆様もウェルカムビデオを見てみて、また実際に使用してみて、これからのUXインパクトを考えてみてください。LAデザインチームでは6月にサンフランシスコで開催されるApple主催の開発者向けイベント、WWDCに参加して、今後数ヶ月の進歩とさらなる進展を予感してみたいと思います。

Apple Watch公式サイトより


Read more
2015.04.09 | UX
円安の進行や、東南アジア諸国における訪日ビザの緩和・羽田空港からの国際線増強などの影響により、海外から日本を訪れる旅行客は急速に増加しています。

2020年の東京オリンピックに向けて、日本への渡航者はさらに増えると期待されており、急拡大が見込まれる「インバウンド消費」を取り込もうと、弊社にも多言語でのサイト構築や、マーケティング戦略の企画・実施に関するご相談も増えています。

とはいえ、日本語で作ったサイトを各国語に翻訳しただけでは、言葉も習慣も異なる外国人利用者のココロをつかむことは難しいでしょう。そこで、弊社がお薦めしているのが、ターゲットとなる国や地域の外国人ユーザに、実際にウェブサイトを利用してもらう「行動観察調査」です。

「行動観察調査」とは、被験者に実際にウェブサイトを利用してもらい、その様子を観察した上で、直接インタビューも行うことで、サイトのコンテンツや使い勝手に関する問題点や改善点を素早く洗い出すことができる手法です。アクセス解析に関する過去データの蓄積が充分でない場合や、異なるターゲットの属性毎に反応の違いを見たいといった場合には、特に有効な調査手法と言えるでしょう。

先日、弊社では、香港や台湾などアジア圏の女性ユーザを対象に、あるサイトの行動観察調査を行いました。調査は、まず、対象となるウェブサイト上で、被験者にどういう「タスク」を行ってもらうかという課題の設定から始まります。

まずは課題の設定から

 被験者が課題を理解したところで、いよいよ、実際にサイトを使い始めてもらいます。

被験者がサイトを利用する様子は、ビデオカメラで録画すると同時に、別室にあるモニターにもリアルタイムで映し出されます。弊社のコンサルタントやデザイナーは、それを見ながら、課題の中で与えられた「タスク」をこなすために、被験者が、どういうコンテンツを、どういう順序で読んでいくのか、また「タスク」を完了するプロセスの中で、被験者が迷ったり、動きを止めたりする箇所はどこか、といったことをチェックしていきます。

被験者がサイトを利用する状況を別室でモニタリング

さらに、「タスク」を完了した後は、被験者とインタビューを行い、サイトのコンテンツや使い勝手に関する印象や感想をヒアリングします。特に、被験者が戸惑ったり、間違った操作をした箇所については、「何かわかりづらかったのか」といったことも念入りに聴き取ります。

被験者からのヒアリングで生の声を収集

このヒアリングは、アクセス解析などのデータだけでは知り得ない、様々な情報を収集できる絶好の機会となります。

特に、外国人利用者をターゲットする多言語サイトの場合、日本人の観点から良かれと思って作ったコンテンツが、想定通りの評価や成果につながらないという場面にしばしば遭遇します。

たとえば、外国人が何に対して「日本らしさ」を感じるかといった点は、インタビューをしてみると、我々日本人の想像とは全然違ったフィードバックが返ってくることも少なくありません。

今回の行動観察調査でも、「サイトに記載する一部のコピーは、あえて日本語の表記を残すことで、クールな印象を与え、それは、日本の商品やサービスに対する高い品質を想起させる」といった意見も出され、サイトのコンテンツやデザインを考える上で、大変参考になりました。

拡大が見込まれるインバウンド消費の取り込みに向けて、多言語サイトの構築やリニューアルを考えている方は、ぜひ、一度「行動観察調査」を行い、外国人ユーザのココロをつかむウェブサイト作りに活かすことをお薦めします。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
行動観察調査・ユーザビリティ調査に関するお問い合わせ・お見積もりはこちらへ
メール:info@LeGrand.jp
電話:0120-066-898(フリーダイヤル)

Read more
2015.03.19 | UX
グーグルがマテリアルデザインを新しくリリースしてからほぼ半年。追加変更が繰り返され、かなりパワフルなツールに仕上がっている。今、UXを考えるとき、モバイルファーストや、クロスプラットフォーム対応というコンセプトを考慮しないことは極めて稀である。

そこで、今一度モバイルのガイドラインを参照するとき、既存のアップル iOS HIG (Human Interface Guideline) と並んで、もはやこのグーグルのマテリアルデザインは無視できない存在である。

マテリアルデザインとは、グーグルが2014年の6月、グーグル I/O カンファレンスで発表した、アンドロイド向けのデジタル・マテリアル・デザイン・ガイドである。それは、グリッドを基盤にしたレイアウト、レスポンシブなアニメーションやパッディング(スペーシング)、そして、ライティングやドロップシャドーのエフェクトに関する奥行きの定義など、UX/UI の多岐に渡る定義書であった。

このマテリアルデザインのリローンチ当初、「これはフラットデザイン移行への教書だ」「現行のトレンドデザインに関する理由付けだ」などと言われていたけれど、やはりそのような一義的なものには収まらなかった。今では、クロスプロダクト&クロスプラットフォーム・デザインのフィロソフィーとなるべく画一された、優れたガイドラインとなっている。

マテリアルデザインがカバーする項目は、UX/UI デザイナーが日々直面する様々なデザイン・プロブレムに言及している。特に、タッチジェスチャーや、そこから生じるトランジション・アニメーション等、マイクロインタラクションを含めたモーションデザインに関する訴求には、目を見張るものがある。UX/UI デザイナーやモダン・アプリケーションに従事するプロデューサーは、是非とも一読して指針にしていただきたい。

モバイル対応デザインと言えば、これまで当然のように、小さなスペース、スローなコネクション、そして限られたフィーチャー(機能)として考えられてきた。つまり、モバイルUXは、いわゆる Lesser Experience、リッチでない限定された機能として捉えられがちだったが、もはやそうではない。

さて、テクノロジーの可能性、イノベーション、そしてサイエンスに基づいたこのマテリアルデザインを大いに活用して、TVやウェアラブル・デバイスを含めた、新たなクロスプラットフォーム・デザインの領域にチャレンジしてみようか。

マテリアルデザインの三原則(グーグルウェブサイトより)

Read more