ico_gvoice

Category: UX経験談

2014.07.07
0

『末日少女』クローズドテストの破れる服が大好評!クローズドテスト調査大公開

【ガマニアニュース】ガマニアの最新国産ブラウザゲーム『末日少女』が先日行ったクローズドテストでは、スタートと同時に多くのユーザーがログインし、さらに初日にはあっという間に「サーバーに突撃」イベントの最高目標に達してしまいました。このことから『末日少女』がユーザーの期待に応え、愛されるゲーム作品であることが確かにわかります。今回のクローズドテストでオフィシャルは実施したいくつかの興味深いデータ調査をユーザーと分かち合うだけではなく、7月24日には「ゾンビハンター少女を救え!」の選抜イベントを開催し、ユーザーの一番のお気に入り美少女パートナーを目の前に召喚できるチャンスがあります! 100万点の服が破れるゾンビハンティング! ゾンビの殲滅が『末日少女』のもっとも中心となるゲーム内容です。3日間という短い時間にユーザーは美少女と協力して約90万体の恐ろしいゾンビを退治しています。これは平均して1分あたり416体のゾンビを倒していることになり、ユーザーの敵を倒すスピードにはたいへん驚かされます!そして、美少女とゾンビとの戦いで破れた服も100万という記録を突破し、クローズドテスト中にユーザーは合計128万点の衣服を破ったことになります。1点の服を1センチとして計算すると、積み重ねた高さは台北101ビル25棟を重ねた高さになり、今回の調査におけるもっとも注目されるポイントとなっています。また、ユーザーをもっとも手こずらせたゾンビは「ビッグハンマーコーチ」ではないでしょうか。このゾンビは5千回以上もユーザーを負かしており、新人キラー王という呼び名があります。 ▲最大の攻撃力を持つゾンビ「ビッグハンマーコーチ」は多くの美少女の服を破ってきた! 人気美少女の壮絶バトル! 戦闘結果の統計だけではなく、オフィシャルは3人の美少女主役と美少女パートナーについての好感度統計も行いました。主役については、凛とした正義感をもつ「白石薫」が美人であるだけではなく、落ち着いた視線と悪を恐れない正義感のあるイメージで多くのユーザーが彼女の魅力のとりことなっています。 ▲半数以上のユーザーがクローズドテストの際に「白石薫」(右)でキャラクターを作っている。彼女は現在最高の人気を誇る主役だ。 また、美少女パートナーの統計ではセクシーお姉さんの「雨宮京子」、天然ボケの女子学生「早乙女梓乃」、ピンクのツインテールの萌えっ娘「伊織奈奈」がユーザー召喚頻度の高いトップ3を獲得しています。 ▲「雨宮京子」、「早乙女梓乃」、「伊織奈奈」が最もユーザーに使われている美少女パートナーだ。 ゾンビハンター少女を救え 人気美少女を召喚しよう!

TW ガマニュース
2014.07.03
0

「未来」から「現在」を見つめる─映画で学ぶPCレッスン

推薦映画:《バック・トゥ・ザ・フューチャー II》、《フィフスエレメント》 映画はいつでも人間の想像力を開く扉です。テクノロジーの進歩とともに、数多くの過去に想像した未来の姿が現実に人々の目の前に現れています。『バック・トゥ・ザ・フューチャーII』の自宅監視制御システム、立体投影、テレビ会議を覚えていますか?1985年に描かれた2015年の状況を2013年の現在から見てみると、すべてただの想像ではありません。『フィフスエレメント』の中で空中を飛び交い、Milla Jovovichが奪う多くのシーンの車は、人類の未来の世界の移動方法に対する希望をはっきりと証明していませんか?予測できる未来が実現しないと誰が保証できるでしょう? 推薦映画:《マイノリティ・リポート》、《ザ・パージ》、《アイアンマン》 Tom Cruiseが『マイノリティ・リポート』で、スクリーンに向かって手足を動かし、画面上のウインドウを移動させる姿は、多くの人にとって未来のテクノロジーを代表する典型的なシーンとなりました。特に手の動きと体感は、現在のゲーム市場で人々が虎視眈々と狙っている金塊です。映画中、行動パターンと犯罪パターンの予測はデータを膨大なデータに転換する究極の発展ではないでしょうか?『ザ・パージ』中の上流社会で使用する自宅セキュリティシステムは、すでに当たり前です。自分が人ごみの中で誰にも気づかれず、一瞬にして消え去る一粒の砂だなんて思わないように!『アイアンマン』ではさらに、大量のデータ処理はすでに基本装備で、さらに山でも海でもどこでも自由自在、そしてスタークの最も頼れるアシスタント、人工知能を超越するJ.A.R.V.I.S。この存在無くしてアイアンマンは自由自在に戦うことはできません! 推薦映画:《キック・アス》 もちろん、上述の映画と比べて、より私たちに深い印象を与えるものに、SNSと映画音楽の娯楽サイトの威力があります。『キック・アス』中の主人公は携帯電話で撮影され、YOUTUBEにアップロードされて爆発的人気になります。テクノロジーの発展のもと、ソーシャルネットワークの力が具現化され、現実社会の多くの人々が携帯電話、パソコンのスクリーンで人気となってテレビ、映画のスクリーンに登場します。こういったパターンは私たちに、誰がスターになれるか自分が決めることがき、もう従来のメディア、映画会社のオーナー、レコードプロデューサーが決めるのではなく、ツールをうまく使いこなせるということを前提に、すべての人に15秒以上有名になるチャンスがあるということを伝えています。 推薦映画:《アバター》、《ライフ・オブ・パイ》

ガマコラム ガマニア推薦
2014.07.03
0

『末日少女』リリース記念! プレイヤーが「東京恐怖学園」のリアルなゾンビの追撃を体験

ガマニアの国産オリジナルオンラインゲーム『末日少女』が8月15日にオープンベータテストをスタート。多くのプレイヤーが『末日少女』に参加し、初日の起動でサーバーが大混雑する熱狂ぶりを見せ、さらにたった3日間でクローズドテスト3日間での90万近くというゾンビ撃退記録を突破しました!  ▲『末日少女』のオープンベータテストは大成功!プレイヤーの支持に感謝。 美少女がゾンビとバトル 実際に恐怖を体験! プレイヤーの『末日少女』への応援に感謝し、8月19日にコスプレイヤーの「米砂 Misa」と「ぷにぷに少女 Neneko」扮する「花堂乙葉」と「波間七海」が3名のラッキーなプレイヤーを連れ、勇敢に「東京恐怖学園」に挑戦。美少女たちと一緒にゾンビに追撃される恐怖の快感をリアルに体験しました!ゾンビを題材として、日本のスタイル、学園要素を共通点とする『末日少女』と「東京恐怖学園」が今回コラボし、プレイヤーは精神の極限に挑戦しました! ▲ コスプレイヤー「米砂 Misa」と「ぷにぷに少女 Neneko」、ラッキーなプレイヤーが一緒に勇敢に「東京恐怖学園」に挑戦。 ▲「東京恐怖學園」主題館氛圍詭譎

TW ガマニュース
2014.07.03
0

テクノロジーとともに進化するCM制作、その未来は?

役者がアイスティーを飲む表情、これをどう演じるか?ピシっとしたスーツを着てStarbucksの飲み物を握る広告主の代表が、すました態度で偉そうに「紅茶のボトルをもう少しカメラに向けて、商品をもっとはっきりと映して。私たちの商品はとても美味しいんだから、役者さんはもっと美味しそうに飲んでください。」と言い、そばにはハイヒールを履き、サングラスをかけ、スカーフを巻いたクリエイティブアドバイザーが「たっぷり飲んでその後に、あ~~~と一声挙げるような爽快感を表現して、それからサムズアップ!これで商品の美味しさを表現できるわ!」ディレクターチェアに座り、黒ぶち眼鏡とクマのある監督が、両手を組んでモニターを見ながら助監督に「役者に伝えて、次のシーンで飲み干した瞬間に瞼を閉じて一度ぐっと力を入れた後、両ほほを少し膨らませて、飲み口は口に入れたままで外さないで、こういう風に2秒停止してから飲み物を口に入れるリアル感を保つ。これで見た人の食欲をそそることができる…」。 広告主、広告代理店、撮影監督、この三人のキャラクターは、自身の専門と消費者(見る側)に対する経験に基づき、コマーシャル内の役者にどのように表現するか、異なる考えを提示します。これは十数年来コマーシャルを撮影してきた中で、目の前で何度も繰り返された場面です。三人のキャラクターは幾度も綱引きを繰り返し、通常最後には広告主の意見に従わなければならないものの、心の底では負けたくないと思っています。     広告の未来のトレンド:個人の広告 このような行為のシステムは、学理上「Customized」と呼ばれ、売り手が消費者のために作るカスタマイズ広告です。カスタマイズは、今後恐らく「Personalize」に進化しなければならず、広告の制作は、必ず広告主の消費者に対する予測から進化し、消費者の需要を完全に理解した後、各消費者の「個人の広告」が生まれ、もう「この層の消費者に向けた」という広告は生まれません。 言いかえれば、現在広告宣伝の従来のやり方は、テレビCMを撮影してテレビで一カ月放送する。或いはFlash banner広告を作ってヤフーの娯楽ニュースのトップページに三週間掲載するといったように、私たちが思う消費者グループに対して見せています。今後進化する方向はきっと、コード004394に基づいて消費者が各ウェブサイト、インターネット、アプリ上に残した文字或いは各ビジュアルデータを、パソコンを通じて解読した後、どのメディアでコード004394に属する消費者の広告を流すか決定します。コード004394の消費者とコード009395の消費者が同じ時間にCTVニュースを開いても、目にする広告は別のもの。これもまた完全なる「Personalize」です。 この様な「Personalize」の時代、メディア費と広告制作費は爆発的に増えるのか?それとも有効に運用されるのか?これはまだ観察する必要がありますが、少なくとも期待できるのは、恐らく広告主により精確なビジネスチャンスをもたらし、より「各消費者」に合った広告情報が提供可能であり、最終的に商品の販売確率が効果的に増えるということです。  

ガマコラム 広告への呟き
2014.07.03
0

『末日少女』オープンベータテスト大爆発 美少女を現実世界に召喚! 超人気コスプレイヤー 米砂、Neneko がセクシー衣装で街中に登場

8月15日オープンベータテストがスタートしたガマニアの国産オンラインゲーム『末日少女』。今年の夏最もアツい美少女とゾンビのバトルが話題を呼んでいます。クローズドテスト以来支持していただいたプレイヤーへ感謝の気持ちを込め、16日に一番人気の萌美少女キャラ「波間七海」と超人気美少女パートナー「花堂乙葉」を招き、二人がファンと至近距離で交流!同時に『末日少女』のテレビCMをプレイヤーにいち早く公開しました! 実写版「花堂乙葉」、「波間七海」が登場 『末日少女』は先日「対ゾンビ最強少女」の投票イベントを開催し、総計延べ1万回を超える投票数を集める熱狂ぶりでした。「花堂乙葉」が一番人気の美少女パートナーの栄誉を獲得し、特別に「花堂乙葉」同様、「守りたくなる」イメージを持つコスプレイヤー「米砂 Misa」に演じてもらいもらいました。さらにロリ萌オーラを放つ「波間七海」は、幼さが抜けない清純な姿に内なる正義の魂を秘め、コスプレイヤー「ぷにぷに少女 Neneko」とそっくり。「波間七海」を演じるには彼女以外考えられません。 ▲「波間七海」、「花堂乙葉」の一致度100パーセントのコスプレイヤー「ぷにぷに少女 Neneko」と「米砂 Misa」。 8月初旬に二名の人気コスプレイヤー「米砂 Misa」と「ぷにぷに少女

TW ガマニュース
2014.07.03
0

『末日少女』アップデート計画を大公開!2人の隠れキャラを追加

『末日少女』の開発チームがプレイヤーの応援に感謝し、特別に今後のアップデート企画について語りました。よりバラエティに富んだ内容が続々と公開され、プレイヤーの期待度が大いに高まること間違いなしです! ▲末日少女の研究開発チームが多くのプレイヤーの支持に答え、豊富な内容を続々と展開することを約束。 Q:『末日少女』の8月22日の新バージョンの内容とは?プレイヤーが期待できるポイントは? プロデューサー:今回の新バージョンのポイントは『生死のバトル』、『伝授』、『隠れキャラ』、『隠れコスチューム』です。『生死のバトル』とはPVPシステムで、終末少女たちの生存バトルのイメージを十分に表現するものとなっています。プレイヤーは次から次へと持久戦を繰り返し、ダウンして失敗するまでHPは次のバトルに持ち越されます。『伝授』は旧パートナーの経験値と能力を新たなパートナーに受け継ぐことができるシステムで、パートナーの変更を生かしてよりスムーズにゲームを進めることが出来ます。その他最も期待されるのは何といっても隠れキャラの登場でしょう。名前は『牧瀨美知子』で、ストーリーを経験したプレイヤーはきっとこの名前にビビっとくるはずです!みなさんぜひ期待してください!それから、8月22日のもう一つの注目ポイントは、主役の一人、雨宮京子の水着スタイルの正式公開です。さらに、最初に収集アルバムに加えると、このコスチュームが当たるチャンスを獲得できます。きっと次のゲームのビッグウエーブを生み出せるでしょう!  ▲ 隠れキャラの牧瀬美知子、新バージョンの新たな注目ポイント雨宮京子の水着スタイルを大公開! Q:『末日少女』が先週リリースされましたが、プレイヤーからはどんな反応や意見が? 企画チーフ:プレイヤーの反応は非常に大きいです。一番感動したのは心からこのゲームが好きだといったコメントです。もちろんマイナスの反応も沢山目にしました。実はこれを見た時はプレッシャーが大きく、非常に落ち込みました。しかしこういったプレイヤーの意見は今後の新バージョンにとって重要なポイントとなるので、すべて見逃すことはできません。プレイヤーにとって国産ゲームの一番の利点は、みなさんの意見をすべて見ることができる点だと思います。そして新バージョンをより面白いものにしなければなりません。CBをプレイしたプレイヤーもOBをプレイしたプレイヤーもきっと、意見が届いていると感じていただけるはずです!私が一番期待しているのはプレイヤーと研究開発間のよい循環で、台湾の国産ゲームの品質が世界レベルを超えることです! Q:以前のインタビューで美術チーフが触れましたが、『末日少女』の美少女キャラクターは沢山の日本の作品を参考にしたそうで、ではゾンビのインスピレーションはどこから来ているんですか? 美術チーフ:今ゾンビはテーマとして人気で、とても有名なウォーキング・デッドがあるように、参考とする作品には事欠きません。ゲーム中初期にゾンビを描く時、過度にグロテスクな描写は避け、強調したいのは血まみれのゾンビの群れでなく、変異後の感染体寄りのイメージものでした。

TW ガマニュース
2014.07.03
0

「ガマニア剽悍勲章賞5月受賞」:《リネージュ》チーム

《リネージュ》はオンラインゲームの先駆けで、ガマニアの顔とも言えるタイトルです。しかし、近年はモバイル、ブラウザゲーム等多方から影響を受け、以前よりもさらに厳しい試練を前にしている状況です!この大きな環境の影響は避けられませんが、《リネージュ》チームはひるむことなく、新記録を打ち立てることに力を尽くし、今年の剽悍勲章を受章しました。今期の《G!VOICE》では深く切り込んだインタビューを通じて、みなさんと一緒に彼らの成功の方程式を探っていきます! プレイヤーの熱がダウン イベント参加率も下降 長年来、《リネージュ》はすでにゲームスタイルを確立し、プレイ方法或いはイベントにおいても完璧なプロセスを築きました。すべてプレイヤーにとってはおなじみとなり、新鮮な感覚や感動の度合いが以前ほどではなくなりました。さらにイベントでは古い物から新しい物へと、古い装備の価値は往々にして新しい装備に取ってかわられることが多く、毎回時間とお金を費やして得る感動が低下し、新しいイベントでも彼らを刺激し、魅了することができず、イベント参加率も次第に下降しました。 「古い物から新しい物に」全く新しい超お得感 《リネージュ》チームは現在の問題を探り、新しいタイプのイベントを打ち出すことに決め、新たにプレイヤーの《リネージュ》への情熱を喚起しました。彼らはプレイヤーにとってバーチャルトレジャーが金銭的価値のある商品だということを理解し、価値の維持、機能性等各方面を考慮すると、実は市場の生活消耗品とそう変わらず、消費市場のマーケティング方法を念入りに調査した後、「古い物から新しい物へ」という主となる切り口を見出しました。今回のイベントでは、古くからのプレイヤーはこれまでのように新しい装備を買う必要がなく、古い装備をお得な新装備のパッケージに換えることができます。さらに、古い装備は当初鍛えたレベルが高いほど、より良いパッケージに交換することができます。古くからのプレイヤーは、今回のイベントを通じ、自分の装備の価値が下がったり、淘汰されるのではなく、古い物で新しい装備を獲得して強化できるといういまだかつてないお得感を感じることができます! 多様な装備効果で需要を満足させる その他、今回のパッケージで発表された装備-新タイプの靴は、PVP(Player v.s. Player,プレイヤー間の対戦を指す)をターゲットに増益効果(力の増加、アンチめまい等)をデザイン。様々な戦闘状況に足りない機能装備が何でもそろい、プレイヤーがこぞって参加し、一人あたり平均で3.2足の異なる機能の靴をゲットし、消費意欲を大いにそそりました! ▲「秘密のアスクレーの靴」のイベント中、初めて古い装備を新しい装備に交換できるサービス、多様化したPVP属性設定、装備レベルの衝突でダウンしてリスタートすることがないといったことを行いました。プレイヤーの心理から生まれた新たなプレイ方法で、《リネージュ》のイベントの新たな局面を切り開きました!

ガマニアの栄誉
2014.07.03
0

【2013涼しい季節に集まろう・ガマニア】中秋パーティーナイトが熱く開催!

ガマニアの中秋パーティーが9月13日に華やかに催されました!ミカンの房のマスクを着けた「スーパーガマニアン」とうちわを手にした美しい浴衣の少女が次々と華中橋の下に集まり、現地の人々も騒然としました。草地と音楽、花火の3つの要素が溶け合った超前衛的な中秋バーベキューパーティーは大きな盛り上がりを見せ、激しいゲーム競争、素晴らしいバンドのステージ、心温まる誕生日パーティー、熱い映画鑑賞などガマニアンたちは皆心行くまで遊び、食べても十分満足し、楽しさを満喫していました。それでは『G!VOICE』と一緒に素晴らしいイベントを振り返ってみましょう! ミカンマスクV.S.浴衣の注目のオープニング 盛大なパーティーにはもちろん入場の招待が必要です。ミカンのマスクを着けてそれを証明しましょう!今年の福利委員会が心をこめてデザインした「ミカンマスク」でガマニアンたちは一晩「スーパーガマニアン」になります。月夜の下、ミカン色のコスチュームが溢れている様子はたいへん壮観でした。中秋の名月にミカンを置いてもけっこう似合うじゃないですか(笑)!また、浴衣を着て入場した夏の風情に満ちたガマニアンにはオリジナルうちわがプレゼントされました。さあ、皆がどれだけ素晴らしい格好をしてきたか、ご覧ください! ▲中秋の名月のスーパーガマニアンはカッコいい! ▲優雅な浴衣娘はバーベキューパーティーの注目の的! 楽しいゲームで思いっきりハイに おいしいものを食べるだけではなく、パーティーは楽しいことがたくさんありました。体を動かすのが好きなガマニアンたちは皆負けず嫌いで、ミニゲーム場は満員で笑い声が絶えませんでした!ゲーム「君は僕の目」では同僚同士の阿吽の呼吸が試されました。参加者はミカンマスクで顔を覆い、仲間の声を頼りに光る柔らかい棒でスイカを叩きます。「そんなにラッキーなわけがない」では、今年の幸運度を試し、究極パスワードを勝ち取った人は悪運をそばにいる人に渡すことができ、水をかけられる運命から逃れられます。会場ではある人はフラフラしながらみっともない姿をさらし、ある人は大胆に「ずぶ濡れショー」を演じ、クレイジー、お笑い、ホット、セクシーというガマニアンの知られざる姿が見られました。 ▲方向が全く分からないながら、たいへん激しい「君は僕の目」。 ▲中秋の名月の祭りには、涼しさはお約束! 数々の素晴らしいステージ

TW ガマニュース
2014.07.03
0

新たなiOS 7を語ろう!

先日WWDC 2013で、誰もが期待するAppleのiOS 7がそのベールを脱ぎました。かつての木の材質のフレーム、皮のメモ或いはGame Center内の緑のテーブルなど全てが無くなり、以前常用されていたスキュアモーフィックデザイン(Skeuomorphism)が大幅に減少し、それに取って代わったのが、この二年で次第に主流となってきたフラットデザイン(Flat Design)です。全体の形状、色、アイコンから文字まで、iPhoneの誕生以来最大の変化と言えます。 このような大きな変化には当然二極化の評価が存在し、ある人は、新しいUIはよりシンプルでスタイリッシュ、躍動感があると述べ、またある人は新しいスタイルは女子の憧れのようなスタイルの「乙女心」だと評価しています。どのような評価であれ、人それぞれの美的感覚と持ち味に対する観点は異なり、むしろこの大きな変更の背景にある決定や勇気こそ今回私たちが探る価値のある方向ではないでしょうか。   Why Flat Design?

UX経験談 ガマコラム
2014.07.03
0

蝶々おねえさんがボクサーネネちゃんに  『クレヨンしんちゃんOnline』リリースを盛大に発表!

今年の夏、爆笑ゲーム『クレヨンしんちゃんOnline』が8月15日にパワフルに登場。特別にキュートな蝶々おねえさんと笑いのセンス抜群の「クレヨンしんちゃん」を招き、プレイヤーに「かすかべ防衛隊」に加わって悪者を退治しようと呼びかけました。イベント会場では初めて『クレヨンしんちゃんOnline』の最新コマーシャルムービーがお披露目され、「クレヨンしんちゃん」の決して見逃せないコミカルな魅力を感じてもらいました!▲蝶々おねえさんがボクサーネネちゃんに変身。「しんちゃん」と一緒に『クレヨンしんちゃんOnline』のリリースを盛大に宣言!   蝶々おねえさんXクレヨンしんちゃん プレイヤーが長い間待ち望んだ『クレヨンしんちゃんOnline』がパワフルに登場し、さらに映画版『クレヨンしんちゃん:バカうまっ!B級グルメサバイバル!!』が23日熱々上映されたことを祝して、蝶々おねえさんと映画版の料理人の衣装を着た「クレヨンしんちゃん」がコンビとなってノリノリでダンスを披露。会場の沢山の人達から可愛いと大絶賛され、このアニメエキシビジョンで最も注目されました!美人のおねえさんを見るとすばやく反応する「クレヨンしんちゃん」。今回さらに特別に蝶々おねえさんのためにボクシンググローブを準備し、おねえさんをゲーム中で最もキュートなボクサー「ネネちゃん」に変身させました!▲きれいなおねえさんが大好きな「しんちゃん」が優しく蝶々おねえさんにグローブをつけてあげた。 蝶々おねえさんは、「私は『クレヨンしんちゃん』の大ファンです。小さい頃から『クレヨンしんちゃん』を見るのが大好きで、今の子供たちがとっても羨ましいです。夏休みは最新の漫画だけでなく映画もあり、長い休みの間楽しませてくれます。それからオンラインゲームでも遊べて、全然退屈しません。今日もボクサー「ネネちゃん」に変身してイベントに出席できて本当に嬉しいです。ネネちゃんが敵をやっつける姿はすごく面白いですから。今日からオンラインでゲームを体験できますよ。」と語りました。 ▲蝶々おねえさんと「しんちゃん」がプレイヤーに「かすかべ防衛隊」参加を呼びかけた。 ▲「しんちゃん」本人を見て大盛況の会場。     爆笑西遊記 しんちゃんが牛魔王と激戦

TW ガマニュース
2014.07.03
0

ブランドポジションは誰が決める!

  「スタイリッシュ流行ブランド」が「ホームレスのトップブランド」に? もし消費者にあなたが必死に運営してきたブランドを、『ホームレスのトップブランド』と位置付けられたら、あなたはどうしますか? 流行に敏感な男女の多くがきっと『A&F 』というブランドを知っているでしょう。スタイリッシュな服のデザインだけでなく、販売員はまるでモデルのような美男美女。また18から22歳のおしゃれな若者にターゲットを絞って販売し、サイズは標準のみ…。   ▲まるでスポーツ選手のような体系の男性店員。これはオーバーでしょう! 本来ならこれはマーケティング戦略の一部にすぎず、ブランドが何をしようと勝手です。しかしこの時代、ある人がA&Fのやり方を受け入れられず、個人の力で群衆を動かし、このブランドを『ホームレス界のファーストブランド』にすることができるのです。 Greg Karberというあるネットユーザーが、A&FのCEOの『私は外見に最も目を引かれる

ガマコラム セールストレンド
2014.07.03
0

祝Summer School サマースクール五周年!

Summer School サマースクール五周年を迎えました!今年財団は9月7日に西門紅楼で2013 Summer Schoolサマースクール成果発表会を開催。生徒が互いに学んだことを持ち寄って交流し、さらに会では特別に先輩とネット著名人のTerryを招き、夢を実践する過程を共有して、青少年のみんなの信じる心、果敢に夢を追う姿を応援しました! 成果発表会の他、紅楼一階のホールで同時に「サマードリーム展」が両日行われました。歴代の生徒たちの夢を追う過程と青少年の夢の物語が展示され、沢山の人たちが積極的にイベントに参加しました。イベントに参加できなかったって?大丈夫!『G!VOICE』で一緒にみんなのストーリーを見てみましょう!   2013 Summer School成果発表会

TW ガマニュース
2014.07.03
0

Happy Moon Festival!月ウサギガマニアン登場

月に関する物語は話しきれないほどあります。子どもの頃の月の上にいる可愛い月ウサギの伝説を覚えていますか。子どもたちが目を細めて月を指さしながら大人に「ウサギさんはどこ?」と尋ねる様子はとっても可愛いものです!ずっと遊びを愛し、子ども心を持ち続けているガマニアの今年の中秋節は月ウサギガマニアンの姿で登場しました。この子供のころの記憶の中の重要なキャラクターと一緒に家族みんなでお月見をしましょう!   超カワイイ月ウサギ えっ!ガマニアンの看板、ミカンの顔が無くなった?慌てないで。ただふわふわしたウサギの帽子をかぶっているだけです。大きな耳が活き活きとしてコミカルです。これ以外にもガマニアンの体は、中秋の名月の季節限定の月ウサギのコスチュームを身に着けています。白く細い手足にピンク色の可愛い丸いお腹で、誰にも愛されるでしょう。 ▲月ウサギガマニアンがサプライズ登場!一緒に楽しい中秋の名月の時を過ごします。   創意工夫の月のパッケージ 精緻なフィギュアだけではなく、今回はパッケージもストーリーでいっぱいです。フィギュアの外箱は丸い月の造形で、箱を開けると臼と杵のボール紙内装があり、不老不死の薬を作る月ウサギだけの小さな舞台となっており、おとぎ話の雰囲気にあふれています!   ▲精緻な月のパッケージという完璧な組み合わせで感動的な中秋の物語を訴えかけます。

ガマデザイン
2014.07.03
0

カスタマイズ3Dプリント!夢のブランド体験を実現!

あなたもきっと毎日写真や資料をプリントするでしょう。テクノロジーが発展する今日では、リアルな3Dの人の姿さえも「プリント」できてしまいます!3Dプリントの発展はとても早く、最近工業、医療、文化クリエイティブ等の各領域で広く利用され始めています。現時点ではまだ普及しておらず、機器の製造費も安くはありませんが、賢いマーケティング担当はすでにブームになる前に先んじて消費者の間に次から次へと話題を生み出しています!では、コカコーラとVolkswagenがどのように3Dプリントを利用して消費者により近づいているのか見てみましょう!   コカコーラを飲んでミニバージョンの自分に出会う ミニバージョンの自分に会ってみたいと考えたことはありませんか?コカコーラがイスラエルでのミニボトル発売のに伴い、自分とそっくりな3Dプリントフィギュアをゲットできるという宣伝キャンペーンを行いました!参加者はまずアプリで自分のミニバージョンのビジュアルを作ります。大会で勝てば、無料でコカコーラ本部の3Dプリント実験室に行き、オーダーメイドのミニバージョンのフィギュアを作ることができるのです!このイベントは大小バージョンのコカコーラと大小バージョンの自分のイメージを相互にリンクさせ、双方をコントラストに、ミニバージョンも本質、楽しさは変わらないという概念を伝え、コカコーラブランドの一貫したスタイルを延長しています。さらに、ミニバージョンのフィギュアがもらえるという貴重な経験だけでなく、コカコーラの本部に入り、すべての制作過程に参加できることもまた消費者とコカコーラにとって特別なブランドの記憶となるでしょう!     あなたの車 オリジナルのスタイルに 車選びは一つの楽しみですが、もし自分でデザインした車で走り回れたら、それはきっととても自慢に思える事でしょう!Volkswagenは昨年「The Polo Principle」キャンペーンを行い、オンラインでそれぞれの特徴を持った車をデザインするだけで、3Dプリントで作り出したものが記念として贈られるのです!さらに展示会で発表され、自分がデザインした車を運転するチャンスまで!Volkswagenは3Dプリントの機能を十分に利用し、消費者の唯一無二の体験を創造しています。たとえ小さな模型の車でも、受け取った人はきっとブランドに対して深い印象を受け、高感度も爆発的に上がるでしょう!

ガマコラム ブランド観察

わからないわけがない!UI/UXプログラマーが陥りがちな思考の盲点

思考の盲点により多くのミスをしてしまいがちになります。同じようにUI/UXプログラマーである私たちは客観的な方法と心持ちでクエスト達成するのですが、時としてプログラマー特有の問題に陥り、思考の盲点を作り出してしまいます。これらの盲点がいくつかの問題を生み出します。小さなところでは製品リリースのスケジュールに影響し、大きなところではチームの調和を乱し、悪い企業文化や製品開発面でミスを引き起こします。読者の皆様も陥ってしまってはいないでしょうか、今回大舌頭は敢えて整理してみました。UI/UXプログラマーは製品開発のプロセスにおいて、思考の盲点に一番陥りやすいもの。みなさんの参考になればと思います。 よくある思考の盲点: 1)完璧主義 ▲画像引用元:https://eurofree3.files.wordpress.com/2014/03/nitpicking.jpg プログラマーを形容するときに一番よく耳にする単語、それが完璧主義です。一般人の定義では、行き過ぎた完璧主義はマイナスの意味を含むことがありますが、プログラマーにとって、自分が完璧主義と言われるのは内心嬉しいことなのです。すなわち、プログラマーのディテールへのこだわりとクオリティーへの要求の表れです。こういった特徴が、製品やブランドの最終的な発展を促進することには違いありません。ただ、プログラマーがプロジェクトの修正に執拗なにこだわりを持つ場合、往々にして手持ちの「リソース(時間、資金、人手など)」がどのくらいあるか、という問題の考慮を忘れがちになります。「リソース」はベンチャー企業にとって生死を分けるカギとなります。 UI/UXプログラマーの考え方はハイスピードで変遷するソフト開発の初期段階において、よりサービスプログラマーに似ており、ユーザーに注目する以外に、関連権益を有する人やビジネスモデルについても思考を巡らせなければなりません。インターフェースもある要素の微調節にこだわるべきではないのです。これには、背景のカラー、フォントのサイズやレイアウトにおける完璧性の追求などが含まれます。むしろ、制作プロセスの順調さとユーザーに価値(MVP)を与えられるかどうかという点に重きをおくべきなのです。つまり、プログラマーにはビジネス思考が不可欠であり、それぞれの製品段階で自分がどのような役割を果たすべきかを理解し、そこになんらかの価値を提供すべきなのです。 もちろん、ビジネスモデルが市場で行けると検証されれば、プログラマーは完璧主義を200%発揮し、絶妙なプログラミングとgrowth hackチームとを組み合わせ、ユーザーに多様な試験を実施し、その結果に従い製品を調整し、最大の効果と利益を生み出せばよいのです。 製品の完璧さにこだわるのは悪いことではありませんが、度を超すと大きな間違いを引き起こしかねません! 2)傲慢な態度と毒舌 ▲画像引用元:http://hbz.h-cdn.co/assets/16/14/1600×800/landscape-1459776449-hbz-anthony-vacarrello-00-index.jpg 私たちがメディアでプログラマーの写真や報道を目にする時、どこか偉そうで普通の人と違う感覚、崇高な理想を目に輝かせ、天才と呼ばれても臆さないような感じを覚えることはありませんか。または、その輝かしい外見から、スターのような近寄りがたい印象を受けることもあるかもしれません。しかし実際のところ、良いプログラマーとは優れたマーケティングのプロのこと。運営的に対外イメージをわざと作っているのかもしれませんが、自分のスタイルを打ち出すことで、プロとして物事に対する敏感さを表現しているのです。ですから、プログラマーの外見的なイメージに決してまどわされないようにしてください。高圧的な態度はプログラマーの絶対的な特徴ではありません。 ソフト業界において、プログラマーは製品の成功を左右する唯一の要素ではありません。つまり、親しみやすさ以外にも、コミュニケーション力および総括能力がUI/UXプログラマーになるための必須条件と言えるでしょう。しかし、高圧的な態度は、テーマに対するプログラマーの度の超えたこだわりにつながることがあります。妥協の余地がなくなれば、誰もが納得できるような解決プランは見つからなくなってしまいます。高圧的な態度ではプログラムの達人になることはできません。それどころか、皆の協力体制を崩してしまうことになるでしょう。 また、プログラマーの多くは独自の美的センスを持っているため、物事を違う角度で見ることがあります。高圧的という印象は往々にして話し方がきつく偏っていることによるものかもしれません。このように客観性を失うと、他の角度から観察するチャンスも放棄してしまい、より多くの発展の方向性を失ってしまいます。 3)オリジナルにこだわる ▲画像引用元:http://content.wallpapers-room.com/resolutions/1920×1200/B/Wallpapers-room_com___Be_Original_blue_by_Adam_Betts_1920x1200.jpg プログラマーは「コピー」や「インスパイア」といった言葉に特に敏感で、製品のプログラムは唯一無二であるべきと考えているもの。これは他人の知財権の尊重以外に、プログラマーとしての尊厳を守るためでもあります。ただ、ソフト分野では、インターフェースとインタラクティブでのオリジナルは本当にレアであり、多くは素晴らしい製品のプログラムをスタックまたは修正したもの(例、フレームをインポートして最適化)です。もう一つの理由として、たくさんの無料テンプレートが使用できるので皆の作品がどんどん似てくるということがあります。また、あまりに斬新なオリジナルのプログラムは、必ずしもユーザーに好まれるものではありません。というのも、彼らが過去の経験と結び付けて操作できず、消化不良になってしまうのです。 そして、コピーやインスパイアされたインターフェースも、別の業界で使用された場合、その効果が同じではないことがあります。例えば、左右にスクロールして友達を選ぶソフト—Tinder、多くの業界のAPPは、そのオリジナルのインタラクティブ方法で人気がありインスパイアされましたが、所属業界の特徴に適しているかどうかを考えない(例、Eコマースがユーザーに写真によって比較できるようになっていて、1枚1枚選ぶわけではありません)と、想定した効果を得られないことがあります。ですから、大舌頭は、プログラマーが他人にコピーされたとき、または別の作品をインスパイアして作ろうと考えたとき(ただし大舌頭の意図を誤解しないでください。他の人のプログラムを必ずコピーせねばならないというわけではありません)、まず「必ずオリジナルである」という原則の下、あなたが提供する服装や作品タイプに合っているかどうかをより良く最適化できるプログラミング方法の有無を考えなければなりません。 最後に、ビジネス面において、大舌頭は「オリジナル」という言葉には保護性がないと感じ、いかにして特許による保護を強化すべきかを考えました。目下、主な国(米、中、台湾など)はみなレイアウト、連続するUI変化やアイコンを特許申請しており、特許のプログラミング価値を明らかにする方法とされていますが、この分野は逆にUI/UXプログラマーが意に介すことのない、最も見慣れないものでもあります。 プログラム特許に興味がある読者の方は、下記の文書を参考にしてください。「人に頼まず知的財産権を保護し、インターフェースプログラマーの3分でわかるプログラミング特許(保護智慧財產不求人,介面設計師三分鐘看懂設計專利)」 4)好き嫌いだけを重視 ▲画像引用元:http://jsleeper.com/DM203/@DM203_IMAGES/_0000_1.jpg 多くのプログラマーは非常に個性的で、個人のスタイルを持ち、物事の好き嫌いがはっきりしています。そのため、好きなものに対しては大いに褒め、嫌いなものはけなし(例、数年前のリアルとSDタイプの争い)、中途半端なものは相手にもしません。この二極化は、場合によってはプログラマー独自のスタイルを打ち出すこともありますが、場合によっては作品が独りよがりなものとなり、なかなか人に受け入れられなくなることもあります。ビジネス的な商品については、より多くの配慮が必要となり、プログラマー個人の好みによってプログラミングすることはできません。もしプログラマーが自分の好みに過度にこだわり、その他の重要でより優先すべきことを軽視すると、いつしかチームの運営に問題が生じ、成功のチャンスを逃すこともあるかもしれません。 また、好きか嫌いだけを極端に気にかけると、より良いインスピレーションを失うことにもなりかねません。その中間にある曖昧なものの方が、より多くの可能性や大らかさを備えているものだからです。また、それによってスタイルや方向性、スキルなど、自分の発展を制限してしまうことにもなりかねません。プログラマーは、自分の感性や直観を信じる以外にも、データによって証明や調整できるもの(例えば、UXインタビューの結論、マーケティングチームのA/B Testなど)もあるという事実に驚くことでしょう。

どうしてインターフェイスデザインでユーザーの個人のアイコンは大部分が円形なのですか?

みなさんは、ますます多くのプラットフォームあるいはAppで「円形」のユーザーアイコンを好んで使っていると思いませんか?近頃のデザインの流行でしょうか?それとも大部分のインターフェイスデザイナーの好みでしょうか?あるいはその他特別な理由があるのでしょうか?設計大舌頭はネットコミュニティの専門家と討論したり、アンケート結果の分析したりした結果、この秘密が徐々に整理されてきました。素晴らしい内容なので、見逃さないでくださいね~ アイコンの定義と発展: ネットユーザーグループが急速に増加するにつれ、彼らはプラットフォームによってその他のユーザーとのインタラクティブな動きをしたいというニーズが次第に高まり、そのため多くのインタラクティブなことができるプラットフォームタイプ、例えばフォーラム、メールボックス、チャットルーム、ブログなどのコミュニティが発展しました。中でもすべてのユーザーが独特な個体(本当の身分または偽のキャラかに関わらず)を表していて、これらの個体には相応のデータやアイコンがあります。 またアイコンは、通常個性化(ユーザーが自分を表現していると思う)のシンボルなので、大部分が平面か3D画像で表現されます UI 上のアイコンを英語ではプロフィールピクチャーまたはアバターといいます。中でもプロフィールピクチャーは、表記からも割と理解しやすいですが、アバターは読者のみなさんにわかりにくく、みなさんのアバター対するイメージは、映画のアバターかもしれませんね。(青いアレ XD)。techpediaプラットフォームの説明によると、アバターという言葉は1985 年、ルーカスフィルム(Lucas Film)のオンラインキャラクターゲーム(Habitat)の専門スタッフ(Chip Morningstar & Joseph Romero)が言い始めました。この言葉の由来はインドの教え「 聖人降臨(a descent of the Supreme Being)」で、英語では「化身 (incarnation)」または「代表(manifestation)」を意味しています。 ▲写真出典:http://goo.gl/sSCCs3 ネットユーザーのアイコンの形の選択についての観点: 実際にはどんな形を選ぶかの話し合いはすでに目新しいものではなく、関連のフォーラムに意見や討論を発表する専門家も多くいます。設計大舌頭は彼らがQuoraとStack Exchangeプラットフォーム上での討論と発表した内容を抜粋や整理しました。簡単な分類は次の通りです。ただ、設計大舌頭は先にハッキリと言っていますが、以下の内容の順番は話題になった回数の統計ではなく(ただの無作為な順番)な上、何回かコメントしたもの検証や研究資料とは関連がないので、みなさんは異なる「観点」として参考程度にしてください。 感覚と認知

UIデザイナーがプログラム言語を学ぶ 経験談(二)

前回のUIデザイナーがプログラム言語を学ぶ 経験談(一)から5ヶ月程経ったでしょうか?!真面目に練習を続けていますか?何か困った事は起こりませんでしたか?もしプログラムの学習がすべて順調だったなら、それはあなたに才能がある証拠です。それはさておき、今日は引き続き次のステップに進みたいと思います~今日は比較的『硬い』内容で、しかもより多くの学習コストが必要です。そのため啓発という角度で私のプログラム学習の道のりをお話ししようと思います。 基礎である HTML と CSS をマスターしたら、非常に重要ないくつかのポイントは下記の通りです: CSSハック CSS最適化とメンテナンス性(SASS/css sprite/image compression/class name) CSS Framework(Bootstrap) バージョン管理(git) CSSハック ブラウザをまたぐ際に最初に思いつくのは CSSリセットでしょう。各ブラウザのデフォルトのパラメータをゼロにし、標準化するものです。現在よく目にするCSSリセットには2つあります。1つは世界的に有名なCSSマスターEric A. Meyer が整理したReset CSS、もう1つはCSS Normalizeです。これらの主な違いはHTMLタグの様式がリセットされてゼロに戻るかどうかです(例:h1~h6 の様式)。違いについてはreset cssのさらに別の選択 –

Gogoro X Design Tongue – アプリを見ていかに二輪車の使用経験を改善するか

Gogoro都市新探索BETA PROGRAMイベントが終わり、その過程でDesign Tongueの記憶に残ったのは熱血以外に何でしょうか?そう、ユニークな体験です!前回のライディングレポート(Gogoro X Design Tongue – 未来の二輪車生活体験)をお読みいただき、すでにGogoroについてご存じの方もいらっしゃるかもしれません。そして今回Design Tongueは、Gogoroアプリの体験と拡張応用について簡単にご紹介し、みなさんにGogoroアプリのUIインタラクション方式と今後の発展の可能性についてご理解いただきたいと思います。 アプリUI操作性 二輪車に接続し、二輪車のカスタマイズと車両チェックを行うのが、Gogoro app の主な核心的機能です。中でも、カスタマイズされた項目は多元的で、UI設計においては複雑なプログラムの簡素化が必須です。さらに提良好な操作関連、フィードバック、即時性(アプリと二輪車カスタマイズ間の対応とインタラクションの関係)を提供しなければなりません。Gogoroはどのようにして提供できたのでしょうか?続きをお読みくだされば分かります!Design TongueはUIの操作フローとトランジション効果(動画)をシェアしました。 ▲アプリ機能プレビュー GOSTATION GOSTATIONはライダーに付近の充電スタンドを知らせ、電池の予約ができるため、交換のために電池が持って行かれて、もぬけの殻になってしまうといった状況を防止します。ユーザーがGOSTATIONを開くと、すぐに位置情報機能が起動し、位置情報地点の付近の充電ステーションを走査します。この過程においては、レーダー走査のような動態効果により、待っている際の『煩わしさ』を低減し、製品の『テクノロジー感』を向上させました。検索が完了すると、位置情報地点を円心として、周囲の充電ステーションの情報が表示されます。ユーザーが付近の道路状況に不慣れな場合、ナビゲーション機能を起動すれば、充電ステーションを見つける手助けをしてくれます。 全体的には、ユーザーが遭遇するシーンについて、設計者はほぼ考慮しているものの、さらに特殊な状況が発生する可能性があります。例えば、 充電ステーションの営業時間と状態に関する情報(24時間営業のところもあれば、閉店して使用できないところもある)を提供しておらず、ライダ―が現地まで行ってもバッテリーを交換できないといった状況が起こる可能性がありました。 また、フル充電されたバッテリーの数量が表示されるものがベストです。ステーションで半分しか充電されていないバッテリーに交換した後で、さらに次のステーションでフル充電されたバッテリーに交換しなければならないといった事態を避けることができます。もちろん、個人のライダーがこの状況に遭遇する可能性は高くありません。しかし、大勢のライダーが一緒に出かける(集団ツーリングが流行しています。)となると可能性が出てきます!この情報があれば、ライダーたちはそれぞれ別のステーションに行き、バッテリーを交換するよう計画することができます。 また、ユーザーが位置情報地点から10キロ以上ある GOSTATIONを調べることはできません。デフォルトの範囲を超えるとシステムが通知します(設計時には、バッテリーがなくなりそうになった時に優先的に表示する情報は一番近い充電スタンドだったのかもしれませんが、ユーザーがこの情報を参考にし、新たに走行ルートをプランニングすることは考慮されていません)。この問題についてはすでに修正されています。修正後のUIはアイコンの透明度で距離を表し、不透明の場合は10キロ以内、半透明の場合は10キロ以上の充電ステーションを表します。操作の自由度が増し、使用の過程でもより便利になりました。 個人設定 個人設定はこのアプリの最も魅力的な機能の一つで、ユーザーに二輪車のスタイルのカスタマイズと、走行の習慣の調整をさせます。ユーザーはアプリから二輪車を設定するため、ペアリング(mapping)の感覚と操作は直感的なものである必要があります。例えば、アプリでは『フロントフォグランプ』を設定することができますが、ほとんどのユーザーはこの機能をご存じないのではないでしょうか?それからフロントフォグランプは車体のどの位置にあるのでしょうか?そのためGogoroのUIでは、上部を3Dがメインで文字で補足する二輪車概略図、下部を調整・制御部という2つの部分に分けています。このような設計により、ユーザーは機能と二輪車モジュールをすばやく結びつけることが可能となり、自然と学習コストも低減します。 この他、いくつかの設定可能項目についても、プレビュー画像と音声等により、ユーザーが設定後の効果と状態を理解する手助けをします。

「十年一剣を磨く」テンセントのユーザー体験の発展

近頃、ユーザー体験、ユーザー研究というフレーズをよく耳にしますが、どの企業も必ず関連の担当者を数名採用する必要がありそうです。UX/UI デザイナー等の不足は雨後の筍のように次々と現れ、これらの欠員の業務内容は果たして職名と一致しているのか、デザイナーであればきっとよくわかっているはずです。悠識が主催する MIX2015 フォーラムでは、テンセント初の専門インタラクションデザイナーである陳妍氏を招き、テンセントのユーザー体験の発展について、テンセントのような大企業がどのようにして体験デザインを進めているのかシェアして頂きました。 MIX 2015 モバイル体験デザインフォーラム – ユーザーが求めるイノベーション主導型デザイン開催日:2015/05/15主催:悠識 UserXperスピーカー:陳妍氏 / テンセント ユーザー研究及び体験デザイン部部長テーマ:テンセントにおけるユーザー研究 – 大デジタル時代のユーザー研究イノベーション 十年一剣を磨く テンセントは、中国で最も早期のインターネットインスタントメッセンジャーソフトの開発業者です。インターネットを通じて人々のライフクオリティを向上させることを使命とし、1999 年に QQ メッセージソフトをリリースして以来、その発展は、中国の数億人のネットユーザーのコミュニケーション方式と生活習慣に影響を与えてきました。 QQ が人と人とを結ぶものとするなら、WeChatは人とサービスをつなぐことを目的とし、便利なプラットホームを提供して、様々な生活機能、社会サービス機能、ビジネスの応用の統合に力を注いでいます。 中国のその他二大企業の主な利益獲得モデルと比較すると、百度は広告、阿里はeコマースを手段とし、テンセントはユーザーの課金で利益を上げた初のインターネット会社です。現在約 10% のユーザーが課金しており、ユーザーの重要性は一目瞭然です。また、ユーザー研究は、テンセントにおいて中核であり、製品にユーザー体験を導入してから既に10年を経ています。そのため、スピーカーの陳妍氏は「十年一剣を磨く」を今回の講演のテーマとしました。

UIデザイナー学習プログラム言語経験談(1)

タイトルからもわかるように、これはcodeが書けなかったのが少しそれなりに書けるようになった、ホームページの励ましの文です。(う~)。 まず筆者は自己の背景を紹介します。大学と研究所共に工業設計です。大学の頃は実体の製品設計に専念し、研究所に入ってからはユニバーサルデザイン、高齢者用マンマシンインターフェイス、認知心理学などの領域を始めました。卒業後は、非実体のデザインに対して興味(UIとUXなど)を持ち始めたため、IT業に入りUI Designerとなりました。しかし、分野が違うと全く見当が付かず、物事は馬鹿な者(筆者)の想像するような決して簡単なものではなく、勉強してきた設計理論を実務に応用するまではしばらく苦しい時期がありました。 ▲写真元:www.adhamdannaway.com ウェブページの基礎知識: 全くホームページデザインに触れたことがない人にとって、960grid systemという専門名詞を聞いても、その時頭の中には画面は全くないし、その他よくある元素用語も聞いても分かりません。チームのコミュニケーションを円滑にするため、私は時間を見つけてはエンジニアからこっそり勉強したり、知らないキーワードを耳にしたらすぐGoogleし、時には資料があまりにも多くて消化するのに何日もかかりました。しかし実際にやりながら勉強するという方法で早く成長できたので、おせっかいながらこの経験をみんなに共有します。 ▲写真元:http://960.gs/demo.html モジュール化、デザイン規範: まず、みなさんには先にモジュ―ル化とデザイン規範の概念を理解してもらいましょう。デザインの角度から見て、この2つの名詞は大部分が“ブランドの識別”上で応用されます。たとえばプラットフォーム全体の色、押しボタンの形式、フォントと間隔などを定義し、デザイナーはその定義に従ってプラットフォームの元素libraryをデザインします。これらの元素が構成するデザイン規範がこのプラットフォーム(ブランド)の識別です。先端のエンジニアによると、これらのデザイン規範はもっともモジュ―ル化しやすく、つまり元素が繰り返し現れてもCSSを上書きする必要がないということです。もし何名かで力を合わせて特別なケースを作っても、間違って書いたり、元のデザインと異なるということを避けることができます。こうなると、開発過程はより簡潔に、時間を省けます。(デザイナーがデザイン規範を設計するデザインの前期では、かなり時間を使っていて、且つ詳しい文書を提供しなければなりません。しかし長期的に見たところ、企業あるいは製品のブランドを作り開発の効率を考えると、これは絶対に必要だ) ▲写真元:UI kits(from dribbble.com/) HTML & CSS: 開発チームとのコミュニケーションを円滑にするため、先端言語(HTMLとCSS)から始めたが、どんどん底なし沼へ落ちていくとは思ってもいませんでした~ 私達みんなが知っているように、新しい知識を学ぶ前にはよい教材を準備しなければなりません。筆者が同僚達の意見を総合し、基礎の翻訳書籍をみつけました:HTML&CSS:ウェブサイト設計は優化の道を作り、この本の最大の特色は図も文章も内容が豊富ですばらしいため、デザイナーに推薦します! ▲写真元:『HTML and CSS: Design and Build Websites』

情報はこうやって組織する!

もし誰かに突然「8か国連合軍ってどの8か国?」と尋ねられたら、卒業してから長い年月が流れているあなたはどれだけのことを覚えていますか?学生時代から遠く離れてしまっていても、多くの人はすぐに答えられると思います。その答えは、ロシア、ドイツ、フランス、アメリカ、日本、オーストリア、イタリア、イギリスです。かつて「語呂合わせ」で私たちの「資料の組織」を手助けしてくれた偉大な歴史の先生に感謝しなければなりません。 次の方法で8か国連合軍について改めて復習しましょう!俄(ロシア)、德(ドイツ)、法(フランス)、美(アメリカ)、日(日本)、奧(オーストリア)、義(イタリア)、英(イギリス)餓(『俄』と似た発音)、的(『徳』と似た発音)、話(『法』と似た発音)、每(『美』と)、日(『日』)、熬(『奥』と似た発音)、一(『義』と似た発音)、鷹(『英』と似た発音) 「お腹が空いたら毎日鷹を一羽煮る(餓的話每日熬一鷹)」としたら、だいぶ分かりやすくなるのではないでしょうか。 実は情報を組織することの重要性は、全く関係が無いように見える情報を論理的な方法で整理し、構築することによって大脳に情報をより容易に受け入れさせ、吸収させやすくすることができるのです。 ファイブ・ハット・ラック Five Hat Racks ファイブ・ハット・ラックという言葉はTED主席/執行ディレクターWurmanが1989年に提案したものです。「帽子」は情報を表し、「ラック」は組織方法を示します。これは情報の対象が何であるかを問わず、地点、アルファベット、時間、種類、または階層という5種類の方法で全て情報の組織化ができるというものです。 アルファベット(Alphabet)  字典や百科事典などのようにアルファベットの順序をもとに情報を組織することを指します。 アルファベットで組織化された情報は強烈な指示性を持っており、非線形の情報に適用します。通常私たちがカラオケに行くと、アイウエオ順に歌手を探します。電話帳の氏名分類もアルファベットを使った組織法です。 時間(Time) ある一定の時間内の物事を表現・対照するとき、時間の前後で情報を組織することができます。HBOの放映映画のタイムテーブルや銀行の取引記録検索などはいずれもこの種の分類法に属します。 地点(Location) 情報の方角が重要である時は、その地理的位置と空間によって情報を組織します。例えばMRTの地図は自分の所在地と出口の方向を示してくれるのに役立ちますし、旅行書は近くにある観光地を地図に描いて、観光客に参考として提供します。これらはいずれも地図分類法に属します。 種類(Category)  相似性または関連性に従って情報を組織します。例えば、人材バンクの職業分類またはオークションサイトの商品カテゴリはこの方式で情報を表現しています。 階層(Hierarchy) 情報間の互いの関係を明確にする必要がある時は、階層組織法(例:最大から最小、最高から最低、最も高価から最も廉価)を使います。オンライン書店の売上ランキングや検索エンジンのランキングなどは全てこの階層法で情報を組織しています。 ファイブ・ハット・ラックの応用 ここでファイブ・ハット・ラックの法則をbeanfun!オフィシャルサイトに応用します。 アルファベット(Alphabet)フレンドリストはアルファベットまたは中国語の画数で配列を進めています。時間(Time) ステップ型のページ(例:登録ページ)には、手順の順序を明確に示すことが必要です。地点(Location) GASH+代理店の位置を地図に表示します。種類(Category) ゲームのメニューを分類します(例:RPGゲームまたはアクションゲーム)。階層(Hierarchy) ゲームリストを時間もしくは人気度によって排列します。 終わりに ウェブサイト、ガイドマニュアル、もしくは売場の整備のいずれにしても、ほとんどがファイブ・ハット・ラックの法則を使って組織されています。ユーザーの情報に対する見方は組織方法によって影響されます。 ファイブ・ハット・ラックは多くある組織化方法の理論の一つにすぎません。最も重要なことは情報に対する設計者の分析能力です。情報を得た時、その情報が強調したいポイントは何かをまず思考しなければコンテンツとユーザーの最も効果的なコミュニケーションと交流はできません。

2015年のウェブデザインの5大トレンド

活字、Web、インタラクティブ、或いは製品のデザイナーであれ、2014年のデザイントレンドは多様でバラエティに富み、スキューモーフィズム(Skeuomorphism)がフラットデザイン(Flat Design)に取って代わり始め、シンプルなスタイルがますます流行し、インフォグラフィック(Infographic)も単純な文字よりもさらに注目を集めたと感じませんでしたか。さらに、モバイルデバイスの普及で、レスポンシブWebデザイン(Responsive Web Design)が次第に広がり、スタティックな味気なさよりも、動きとインタラクションがWebにさらなるサプライズをもたらしました!これらすべての変化が生活にデザインをもたらし、より素晴らしい体験が生まれ、生活を豊かにしています。 2015が始まり、古いテクノロジーは次第に凋落し、新たに生まれたモバイルデバイスのトレンドとWebビジネスチャンスには無限の可能性があります。そこで、本章にて2015年のWebデザインの大まかな方向とトレンドを予測してみましょう! レスポンシブWebデザインは必然 レスポンシブWebデザインとは一体何か?簡単に言うと、異なる解析度の状況下でWebの植字とレイアウトを変え、異なる機器でも同じWebを正常に閲覧できるようにし、また、最適なビジュアル体験を提供するもので、モバイルデバイスの多様化によって考え出された対応方法です。レスポンシブWebデザインはすでにWebデザインの新スタンダードとなっており、より多くのWebビジネスチャンスやユーザーを失うまいと、ますます多くの企業や団体がこれを採用し、Webの最適化を進めています。つまり、これはすでに新たなデザインのブーム、トレンドなのです。 ぐっと注目を集めるカルーセルと動く背景 きっと1枚の絵が千の言葉に勝るという言葉をよく耳にすることでしょう。そうです!この格言はまさにWebにぴったりの言葉で、映像はメッセージを伝えやすく、また強く印象づけることができます。現在ますます多くのWebサイトのトップページで大きな写真が背景として使用され、動くもの、或いはスライドの映像を使用しているものまであり、Webを観賞し、内容を読んでもらうよう興味を引いています。エネルギッシュなすばらしい画像の視覚効果で、完全に視線をとらえ、さらにピンボケ、ぼかし、或いはフィルターで加工した写真に個性的な書体を合わせるスタイルが今年の主流のひとつとなることは間違いないでしょう。 ▲http://magazine.rolexawards.com/laureate/francesco-sauro ▲ http://ricardodelablanca.com/site/ パララックスとスクロールでより面白い効果が生まれる ここ数年で広がり始めたとても人気のあるスタイル、それはスクロール式タイムラインのWebデザインです。一般的に製品紹介、ストーリーの叙述、或いは歴史の変遷等に使用され、スクロールとともに画面に動きのあるパララックス効果が現れ、Webをさらに面白みのあるものにしています。ますます多くの人々がモバイルデバイスでWebを閲覧するにつれ、Web上のクリックがさらに減り、スクロール効果がより突出し、視覚体験をより豊かにします。 ▲ http://www.ok-studios.de/home/ 文字と植字のフレキシブル度が非常に重要 過ぎたるは猶及ばざるが如し。Webデザインで内容を伝えたいと考えるのは当然ですが、文字が多すぎると、嫌悪感や読みにくさを感じさせてしまいます。そのため、限られたスペースの中で効果的に情報を伝える場合、書体の選択と植字デザインはデザイナーにとって重要な課題のひとつとなることは間違いありません。今年のWebデザインは、シンプルでエレガントなビジュアルスタイルに依然として需要があり、同時にフラットデザインの要素、例えばシンプルな配色、個性的な書体或いは内容のグラフィック化もまた大いに好まれる表現手法となるでしょう。 ▲ http://www.bevisionare.com/ ▲ http://www.econocom.com/en 非常にやりがいのあるピンタレストスタイルデザインの双方向性 Pinterestが大ブームとなり、ピンタレストスタイルのWebデザインが一時SNSやニュースメディアのWebサイトに王道であるとみなされましたが、多くのeコマースや共同購入サイトにも集中的に採用されたため、一時期のWebはどれも似たり寄ったりになってしまいました。もしあなたのWebサイトが写真中心で、内容を補足するタイプであれば、ピンタレストスタイルのデザインを利用することで、Webが豊富ですっきりとしたものになり、また同時に多機能性も備え、これはまさに現在のインターネットのニーズであると言えるでしょう。 2015年は必ずやデザイナーがデザイン能力を発揮する1年になるでしょう。様々なタイプの製品が古いものから新しいものへ取って代わり、各デザイナーもまた、デザインの上で革新と面白さを求められるだけでなく、新旧のトレンドを融合させ、最高のデザインを発揮し、そして最も重要なこととして、誰もがより素晴らしい生活を送れるよう、より優れたユーザー体験を創造するということを忘れてはいけません。

iOSとAndroidのクロスプラットフォーム体験設計

このごろ多くの人が、iOSやAndroidプラットフォームのアプリを開発後、別のプラットフォーム上でも使えて、Appleファン、Androidファンが一緒に使うことのできるアプリを望んでいます。しかし、クロスプラットフォームを開発設計中、開発チームはハードウエア/ソフトウェアの違い、スクリーンの解像度やユーザーインターフェースの違いなど、とても大きな課題に直面することがあります。私達はiOSとAndroidソフト/ハードウエアの規格を変えることはできませんが、「インターフェースと操作体験」のテクニックで、AppleファンもAndroidファンにもすばらしい操作性を体験してもらうことができます。 続いていくつかのクロスプラットフォームアプリの設計実例を通して、これらのアプリでどのようにAppleファン、Androidファンが操作体験に満足するか、見てみましょう。 製作前に異なるプラットフォームの設計規準を理解していると、アプリの使用性を向上することができます。 アプリを設計する際に多くのユーザーの操作慣れを考えると、ユーザーが簡単に早く慣れ、このアプリを長く使ってもらえるようにすることが必要です。それぞれのプラットフォームの操作と設計規準がすべて異なる場合、もし時間もコストもなく、ユーザーの操作研究ができないなら、各プラットフォームのサイトから設計規準をチェックすることから始めると良いでしょう。 「戻る」を例にすると、iOSのインターフェース上のガイドの左上にはっきりと「戻る」ボタンがあり、これはアプリにおいて「戻る」の操作を行う際に用います。 しかしAndroidプラットフォームでは「戻る」の操作方法は2つあります。(1) インターフェース左上の「戻る」ボタン(2)ナビゲーションキー上にも「戻る」の機能があり、ホームに戻ることができます。 Andriod上の機能操作は非常にフレキシブルで、どんな状況でも「戻る」ボタンが押せるのですが、うっかりホームに戻ってしまうことがよく起こります。そのためAndroidのアプリはインターフェース設計上でナビゲーションバーを表示し、ホームに戻ってしまう回数を減らします。 操作の流れを統一し、ユーザーが何度もやり直すことを減らします。 ユーザーが同じ製品に対して2パターンの操作方法に悪戦苦闘しており、精一杯学んでも、首をかしげてばかりいたら、アプリを削除してしまうかもしれません。 Pocketを例にすると、iOSとAndroidクロスプラットフォーム設計において、視覚、操作の流れや動きなどが最も一致しているアプリです。記事をPocketに保存するには、iOS/Androidともに、たった3ステップで完了です!(1)ホームページを開く(2)シェア機能をスタート(3)Pocketにシェアを選択 iOS – 記事を保存するプロセス Android – 記事を保存するプロセス 良い操作機能があればそれを他のプラットフォームへ応用しましょう! 異なるプラットフォーム上ではもともと開発ツール、プログラム言語、フレームワークも異なるため、機能の操作方法も違います。「リフレッシュ」(Refresh)の機能を例にすると、引っ張って更新(Pull down to refresh)は、iOSの比較的新しいバージョンに内蔵されている機能です。しかし、Androidからしてみると、引っ張って更新機能はプログラムを書き直す時間がかかり、またコストもかかるため、通常はリフレッシュ機能ボタンをつけることで代用しています。 もしも良い操作方法でユーザーの満足度をアップすることができるなら、何故異なるプラットフォーム上での使用制限をなくさないのですか? FacebookはAndroidのみに手動リフレッシュ機能がありましたが、プルリフレッシュ機能をiOSとAndriodに応用していますます。2つのプラットフォームのユーザーは同じ操作で、ユーザーは便利に状態をリフレッシュできます。 クロスプラットフォーム設計の開発は大きな作業です。異なるシステムのユーザーの操作慣れをよく理解することが必要で、異なるプラットフォーム操作の特性を有効に使って、クロスプラットフォームのインターフェース上の制限を取り払うことにより、異なるプラットフォームのユーザーにスムーズに操作してもらうことができるのです。 作者紹介エルゴノミックデザインセンター /

インタラクティブインターフェースデザインはとっても簡単?

まずは、このようなイメージを頭の外に置いて下さい。インターフェースデザインで画面の美しさは確かにとても重要ですが、操作しやすいかの優先度は、実は美しい画面よりも高いのです。純粋なグラフィックデザインでは人との「相互のコミュニケーション」については考慮する必要がありませんが、インターフェースデザインにおいては、「相互のコミュニケーション」の概念を取り入れなければなりません。これはユーザーのあらゆる操作に対する反応とフィードバックが必要で、限られたハードの制限内で、ソフトの利便性に対し最大の合理化が必要です。そのため、ビジュアルと機能の間でいかにして最高のバランスを獲得するか。これこそインターフェースデザイナーが頭を悩ませる問題点です。 では、優れたインタラクティブインターフェースデザインとは何でしょうか? Designing for interaction一この本の中で、優れたインタラクティブインターフェースの7大ポイントについて述べられています。 1. 信頼できる Google MapとApple Mapを例にとると、IOS7でApple は自身でデザイン、開発した地図を採用しました。比較すると、Apple Mapの画面デザインは美しいですが、しばしばユーザーをミスリードし、自分も知らないような場所へ連れて行ってしまうという事が起きており、たとえもっと美しくできても、不信感が生まれてしまいます。そのため、選択肢としては多くの人が昔からなじみがあり、精度の高いGoogle Mapを選ぶでしょう。 ▲ 左はGoogle Map、右はApple Map 2. 親切 CNNのウェブサイトを例に挙げると、これは各国の文化、社会情勢、政治等…異なる要素に対応しています。サイトの操作とデザインレイアウトに違いが見られ、異なるバックグラウンドのユーザーに対し、適応する上での負担を与えません ( 英語系の国では文字を読む方向が左から右、アラビア語系の国では右から左というように、文字の書き方や読む方向が全く違う二つの国家に対応しており、ウェブデザインのレイアウトにおいて違いが見られます) ▲ 左はCNNの英語版、右はCNNのアラビア語系版 3.

まぶしく魅了されるMotion Graphics (モーショングラフィックス)

あなたは映画またはテレビゲームのオープニング映像で衝撃を受けたことはありますか? あなたは広告のビジュアル効果またはMVの中のオーディオビジュアルを融合させたストーリーに引き込まれたことはありますか? これらのまぶしく魅了される、そして人の目を釘付けにする重要な担い手が–Motion Graphics(モーショングラフィックス)なのです。 Motion Graphics(モーショングラフィックス)とはなにか? 動画には2種類あって、一つはアニメーションで、映画またはドキュメンタリーが主軸で、直接モーショングラフィックスを商品として販売します。このようなムービーを私たちは動画映画と呼び、有名な《モンスターズ・インク》または《カーズ》はこのカテゴリーの動画になります。 もう一種類とはMotion Graphics(モーショングラフィックス)で、ウィキペディア百科の定義によれば:「Motion Graphicsはムービー素材と動画テクノロジーを利用して動態のフィーリングを創造し、映像と音声のリズムを組み合わを重視し、いつでもビジュアルが動いている状態…」としています。簡単に言えばMotion Graphicは実は平面のGraphic Designを動態化して表現したもので、すべての画面が平面デザインの基本要素に符合するほか、さらに時間の概念を加味し、ひいては動態の感知を創造し、さらには人と機器のインタラクティブテクノロジーの融合を応用して、さらに多元的な表現形式をもたらすものです。これとGraphic Designは同じようにメッセージを伝達して人のコミュニケーションの表現方式ですが、ただ、さらに強烈になったものです。 日常生活でいつも触れるMotion Graphics 最もよく目にするのがMotion Graphicsを広告、映画、MV、ウェブサイトをインターフェイスとしてチャンネル番組をパッケージするのが主軸です。特に米国等欧米ではMotion Graphicsを広告とテレビ局のイメージ製作によく利用されています。ここ数年、 Motion Graphicsはこのビジュアル伝達効果を強め、製作時間を短くし多元的なクリエーティビティを表現する手法はすでに米国の広告の実態を変え、小規模のデザイン会社でも独特のクリエーティビティと美学で大企業のために広告が作れるようになったのです。 数多くの映画、テレビ、ゲームまたはウェブサイトではよくとてもクールな動画を目にします。オープニングムービーから休憩前のムービーにもMotion Graphicsが利用されて表現されています。これらのとビジュアルに関連する応用メディアはこれによってメッセージ伝達並びにマーケティングとエンターテイメント等の効果を発揮します。基本的に、モニターがある場所であればMotion Graphicsが存在できるのです。この他、現在Motion Graphicsがカバーできる範囲は非常に広く、VFX(特殊効果)からStop Motion(ストップモーション)さらの3D動画までと、これら大量の応用はまさにMotion

UI、その関わりとは?

高度情報化の新たなモバイル時代において、人々は情報の利便性を追求するだけでなく、そのニーズはますます高まっています。例えばスマートフォンを利用してどこでもアプリをダウンロードしたり、面白い出来事を撮影してはFacebookで友達と共有し合ったりしています。どんなデバイス(device)でハイテクのもたらす便利さや情報の恩恵にあずかるにしろ、それはすべてUIを通して実現することなのです。 UI(User Interface)とは? UIは我々の生活にあふれています。人と物、人と人のやり取りをつなぐものであればそれはUIです。イラストやマーク、音声やジェスチャーなどが含まれます。例えば運転中に赤信号だと止まります。バスでカードを使うとカード機が音声で反応して、感知の状態や残高の有無を知らせてくれます。 ▲UIは我々の生活にあふれている! UIデザインの重要性とは? 普段の生活で目にする日用品の多くに優れた直感式のUIデザインが採用されています。使い方を覚えなくても自然に使えるようにできています。例えばハサミの持つ部分は大小二つの輪になっています。それで小さい方には指を一本、大きい方には残りの指を入れるということがわかって、ハサミをうまく使えるようにしています。 ハイテクの進歩によって5年後、10年後には情報がどれほど複雑になるか想像もつきません。情報を得るのにデバイスは必要なくなるかもしれません。例えば指で窓に触れるだけで現在の気温と降水確率が窓に表示されるとか。生活に密着した情報は今後ますます増えていくでしょう。あらゆることが生活に結びつき、ユーザーはハサミと同じようにUIを楽に使いこなせる未来がやってくるはずです。UIとは有用性(Usability)と相互性(Interaction)でもあり、情報をすばやく手に入れ理解するための重要なカギを握ります。 ▲東京に次いで世界2位の使用率を誇るモスクワの地下鉄システム。上は改善前の路線図。地上の路線まで複雑に入り組んで、見ていると目が回りそう! ロシアのデザイン会社Art. Lebedev Studioによる新しいデザインの「モスクワ地下鉄路線図」 1.  路線はすべて直線デザインに。 2.  環状線とカーブは滑らかにしてソフトなビジュアルに。 3. 不規則な環状線は円形にしてよりシンプルに。 4.  図には区別しやすいように罫線を入れ、縦と横のマスにはそれぞれ番号を振って駅の位置の把握が便利に。 改善後の地下鉄路線図はずいぶん人に優しくなっていませんか? ▲信号には残り秒数の表示のほか、音声機能も追加され、視覚障害者の歩行も便利に。 ▲ICカードの感知機。感知の状態や残高の有無を音声で! 景観の美化のため、バス停のポールを減らして路線図の見づらさを改善。台北市公共運輸処と聯営バス管理委員会が共同で新しいバス標識をデザイン。 従来のバス標識 バス路線図には線や文字がびっしり書き込まれている上、高い位置にあって視力の弱い人や身長の低い子供には見えにくいものでした。また1枚の標識には最大3つのバス路線しかなく、バス停に多くの路線のバスが止まる場合は上図のように従来の標識ではあちこちに分かれて不便な上、道路の空間を狭くするものでした。

GDCでのUI Team

今年のGDC (Game Developer Conference)は2月末から3月初めにかけてSan Francisco Moscone Centerで開かれました。幸いエルゴノミックデザインセンターもこの世界中のゲームデザイナーたちが集まる催しに参加できました。盛大な催しではすばらしい経験を分かち合うことができ、カジュアルからハードコア、モバイルやコンソールからオンライン、プログラム、美術、サウンドからマーケティングまでと、いずれもゲーム業界の各方面での専門知識を共有できました。 しかし、今回お伝えしたいのは1週間にわたるGDCで学んだカリキュラムではありません。(そう言うと失望するかもしれませんか?)カリキュラムについては今後グループでまとめて勉強会を開く予定です。(乞うご期待!)今回はもっとリラックスできる内容にしたいと思います。 Design In SF, design in life (下を向けばデザインが落ちている) 西海岸のSan FranciscoにはNew YorkやBostonのような東海岸の都市が持つ多様化したクラシックとモダンの芸術的な雰囲気はありません。またParisやRomeのようなヨーロッパ都市の深い歴史と文化の洗礼も受けてはいません。しかしSan Franciscoは初期の西洋列強の殖民、ゴールドラッシュ、戦後のヒッピー文化、そして最近ではDot Com産業の発展を経てきました。それはオリジナリティ、多民族の融合、メインストリームとサブカルチャー、伝統と反伝統、アートとデザインを併せ持つスタイルへとつながりました。芸術は人々が崇め奉る高尚なものではありません。SFでは美術館だけでなく、街角のいたるところで下を見ればアイデアやインスピレーションが転がっているのです。 サンフランシスコに来るなら花を忘れずに。 GDCに来るならIndependent Games Festivalを忘れずに。Independent Games Festival (独立系ゲームフェスティバル)

機械と話すのはイヤ—ユーザーを喜ばせるダイアログ

    機械と話すのはイヤ—ユーザーを喜ばせるダイアログ   インターネットで起こる突発事態のうち、回線の中断やPCのフリーズを除けば、よくあるのは「システムメッセージ」でしょう!システムメッセージは様々なものがあって、「CapsLockキーを押したよ」と注意してくれるものや、「今、回線が切れて接続できないぜ」、「このアカウントは誰かが使っているぞ」と教えてくれるものがあります。そのほとんどは温もりのない冷たいメッセージになります。しかし、以下のメッセージにはニヤリとさせられるでしょう。 「念のため、あなたが人間なのかどうか確かめなければなりません。」 これは、twitterにログインする時に、IDとパスワードを3回間違えると現れるメッセージです。 とてもユーモアを感じませんか?こんなにユーモアあふれるメッセージを読めば、たとえ相手のシステムにエラーがあっても、何か許せるように感じることでしょう!   微笑ましいメッセージを読んだあと、今度は思わず眉間にシワが寄るメッセージを見てみましょう! うっかりIDとパスワードを間違ってしまいました。そして、表示されるエラーメッセージは、このように細々したものが現れてきます。パスワードを思い出すだけで頭が痛いのに、こんな文字の塊を読み終えたら、ログインしようなんて思わないことでしょう…必死でそのメッセージをじっくり読むと、そこに述べられている手順が非常に多いことに気がつきます。メッセージウィンドウを閉じれば、それらの手順を覚えているはずがなく、ユーザーには大した助けにもなりません。   そのほか、もっとも知られているシステムメッセージは、会員申請する時の申込書を記入する際に現れるシステムチェックメッセージを置いてほかにないでしょう。システムは入力されたアカウント名が使えるかどうか、パスワードの安全性が十分かどうかをチェックし、認証メールの確認を通知する・・・など様々なことをします。 文字に溢れた申請ページは、入力バーの下に多すぎるほどの注意書きがあります。入力を終えても自分で右側にある「チェック」ボタンを押さなければなりません。それは少し疲れませんか?そのうえ、まずいことにほとんどのユーザーはそれらのメッセージを最後まで読みません!実は、私たちはよりよい方法でユーザーに近づくことができるのです。もう規格化されたテキストフレームだけでユーザーに今の状況を知らせるのではなく、より生き生きとした言葉を使うことができるのです。 「このアカウント名は使えます。」を「いい名前ですね」に変えます。 「パスワードの安全性:弱・中・強」を「完璧なパスワード」にします。 メッセージの内容は必ずユーザーの分かる言葉でなければなりません!そのほか、ユーザーフレンドリーな言葉遣いは、ユーザーのエクスペリエンスをよりよいものにでき、その結果、そのサイトとより身近になろうとする考えが生まれ、温もりと気持ちをより感じることができ、そのサイトに対する印象もさらに深まります。   温もりもない冷たい機械と会話することを好む人はいません。一部のサイトはそのようなクールなスタイルが合っているかもしれません。しかし、今、インターネットを使っている年齢層はすでにどんどん広がっており、小学生からお年寄りまで、さらには飼っているペットまでインターネットをするという人も現れています!私たちはどのようにユーザー達(ペットを含まない!)に寄り添い、ユーザーのインターネット世界におけるトラベルをより快適なものにして、これほど多くの理解不能なシステムメッセージを恐れさせずに、私たちの気持ちを届けるべきなのでしょうか?   メッセージ送信における基本要素を以下にまとめました。   1. シンプル:30文字以内で完全な意味をすべて表現します。必要でない限り余計な文字を使いません。 2.

知っておきたいユニバーサルデザイン

  良いデザインは人々に快適な生活をもたらしてくれます。今回の2011年台北世界デザイン展南港展覧館内で活気に溢れる「ユニバーサルデザイン館」を見つけましたか?展示されている製品は、小さいものは日用品から、掲示板や家具といった大きなものまで多種多様で「人を以って出発点とする」をコンセプトに健康状態やお年寄り、身体障害者を問わず誰でも快適に利用できるデザインとなっています。   この「複合式多機能栓抜き」は、「テコの原理」を用いて、力の弱い女性や年配の方でも簡単に飲み物のフタを開けることができます。その他にもネイルアートをした女性の場合、缶ジュースのフタを開ける際、爪に傷がつくんじゃないかと心配になりますが、これには三角に尖った部位が付いていて、これを使えばいくら缶ジュースを開けても、もう怖くありません。     その他に面白い商品として「U型スポンジ」があります。この商品はユニバーサルデザインの特賞を獲得しています。デザイナーは濡れたスポンジが陰干しでは乾きにくく、また細菌も繁殖しやすいことを考慮し、スポンジには一センチ幅の切れ目を入れています。またユーザーはスポンジの窪みを使い一度に皿や鍋の淵を無駄なく洗うことができ、洗い終わった後は立てておくかキッチンの棚に干しておけばOKです。     大勢でパーティーをする時、いつもどれが誰のコップか分からなくなってしまいます。これは紙の折り曲げれる性質を利用した「Who's Cup」で、カップの淵に数字が印刷されており、パーティーの際は自分の数字を決めて折り曲げれば大人数でも誰のコップかがわかり無駄をなくしてくれます。     買い物をして紙幣と硬貨でお釣りをもらうことがよくあると思います。そんな時、この「分」があればお釣りを財布に入れるだけで、硬貨だけが小銭入れに自動で落下し、次に小銭を使う際は反対側を開けるだけでOKです。これで小銭と紙幣を分ける手間が省けます、便利だと思いませんか。     ユニバーサルデザインには七項目の原則があり、三項目以上が当てはまっていればその作品はユニバーサルデザインといえます。     ユニバーサルデザインの基本原則   1. 公平な使用への配慮:どのような使用者にも適した設計を心がけ、可能な限り使用者を選ぶような設計を避け、一目瞭然の設計が望ましい。   2.

プレイヤーの心理を探る-心理生理学

  はじめに プレイヤーのゲームに対する気持ちと考えを如何にして読み解くのかは、ずっと各ゲームメーカーの議論の的になっています。現在使われている方法は、概ねアンケート調査・インタビューあるいはパネルディスカッションなど定量化した市場調査法で進められています。プレイヤーがゲームをした後のゲームに対する評価や満足度はわかりますが、プレイヤーがゲームをしているときの反応については、より直感性のあるツールで測定することが比較的欠けています。しかし、そのほかの産学分野で従来使われている心理生理学(Psychophysiology)なら、あるいは私たちにプレイヤーの考えを読み解くのに適した方法を与えてくれるかもしれません。そこからさらにプレイヤーのユーザーエクスペリエンスを向上することになります。     心理生理学とは   心理生理学は1960年から1970年の間に起こった心理学の一分野です。その理論の基は主に人体から生まれる生理反応シグナルを用いて、メンタルモデルを読み解く手助けとすることです。すなわち、人の体を使って、その人の感情及び心理状態を評価することです。ゲームのテスト及び研究をする担当者に言わせれば、心理生理学は直接プレイヤーの反応からデータを取得する研究の方法であり、アンケートあるいはインタビューなどを通した主観的な方法ではありません。このほか、心理生理学のもう一つの優れた点は、ユーザーの生理シグナルを測定することで、ユーザー自身も感じていない感情や反応を発見でき、尚且つ測定のプロセスを中断しなくてもいい点です。   心理生理学の測定装置 心理生理学の測定装置を紹介する前に、感情と感覚の違いを明らかにする必要があります。現在、多くの研究において、感情と感覚は二つの異なる概念であることが指摘されています。感情は主に身体の心理状態を指し、生理のシグナルを通じて測定できるものです。例えば、心拍数の上昇は身体が興奮状態にあると読み解くことができます。そして、感覚は人体が感知した感情の状態を指しています。言い方を変えれば、人体はある種の感情の状態を生む可能性があるものの、自分がその感情の状態にある事を意識できずにいるのです。心理生理学が測るのは主にこの人体の感情です。 現在、心理生理学で主要な評価ツールの幾つかを以下に紹介します。: 1.脳波図装置(Electroencephalogram 略称:EEG) 脳波図は現在、人体の中枢神経を評価するときに最も簡単に使える測定ツールです。これまで使用されてきた機能的磁気共鳴映像装置(略称FMRI)のように被験者を高価な機器に寝かせてから測定が始まるのとは異なり、被験者の頭に電極を装着することで、脳が発する電波を測定します。主要なものはα波(比較的覚醒状態にある事を示す)、β波(比較的緊張状態にある事を示す)、δ波(睡眠状態にある事を示す)及びθ波(α波よりさらにリラックスした状態にある事を示す)などです。   2. 筋電図装置(Electromyography 略称:EMG) 脳波図と同じく、筋電図も電極を通して人体の筋肉の活動を測定します。例えば、筋肉の緊張やリラックス状態です。中でも顔部筋電図は、被験者の測定プロセスにおける顔部の状態を測るのに役立ち、それが表す感情反応を推測することができます。通常、顔部筋電図が測定する箇所は、1.眉部:皺寄せを測定します。ネガティブな感情を表します。2.頬:主に頬骨の部分です。大笑いあるいは驚きを主に表します。3.目の付近:主に嬉しいあるいは楽しい感情を測定します。 3. 皮膚電位計(Electrodermal Activity 略称:EDA) 皮膚電位計は主に皮膚の電流変化を測定します。それは感情反応の指標でもあります。緊張しているときは、交感神経の活動が強くなり、汗腺の分泌も増えるため、皮膚の導電量の増加を測定できます。通常、皮膚電位計は被験者の二本の指に装着されます。心理生理学測定ツールの中で装着が簡単な上にコストが比較的低い測定ツールでもあり、現在ではうそ発見器への応用がよく知られています。   4. 心拍変動測定(Heart

スマートフォンUI設計の原則

今日の携帯電話開発ベンダーは、通常そのウェイトをハードウェアの向上に置き、機能の実践に過度に焦点を置いています。例えばより高速なCPU、より多くのフラッシュメモリなどを追加しますが、ハードウェア自体の操作体験こそそれらのハードウェア機能が実用的か否かの鍵となる、ということは疎かにされがちです。 Iphoneは現在のスマートフォンの中で大きな人気を誇っています。IOSを除く、そのハードウェア機能はどのスマートフォンベンダーでも製造できますが、オペレーティングシステムの親切で直観的なデザインは一般のモバイルデバイスベンダーには真似ができないものです。 ソフトウェア設計の過程で、UIデザインは常に最も疎かにされやすい部分です。しかし、最近ではスマートフォンが雨後の竹の子のように続々と出現しており、設計不良のUIはユーザーに迷惑と抵抗感をもたらし、小さなスクリーンの中でより拡大されて見られてしまいます。 Iphoneの使用経験では、開発者はユーザーの多くがすでにIPhoneが提供するジェスチャーとコンポーネントの定義に慣れていることを知っていなければなりません。反対に携帯電話のソフトウェアへの要求もそれに伴って高くなっています。もしIPhoneで指をスライドさせてページをめくったり、拡大・縮小を行うことができなければ、そのソフトウェアが淘汰される確率は自然と増加します。そのため、開発者は必ずユーザーの角度からユーザーのニーズを理解することが必要となります。ユーザビリティとユーザーのニーズを一つにすることで最高のユーザーエクスペリエンスが創り出せるのです。しかし、ユーザーにマッチするUIはどうやって定義すればよいのでしょうか。ユーザビリティとインタラクティブ性を重視したデザインは、スマートフォンがスムーズにマーケットに進むことができるか否かの重要な鍵となっています。これら設計の細部は具体的に実現することは難しいのですが、必要な作業でもあります。業界の開発者によって開発された製品が、同じエリート分野において潜在ユーザーの使用時に発生する使いやすさの問題が見つからないということを避けるために、実用的なインタラクティブアクションとユーザビリティ設計の製品のUI開発は開発者の大きな学びと疑問として厳然と存在しているのです。 良いUIが注意すべきいくつかの事項 1.ユーザーの操作に対するモチベーションを高める 良いUIはユーザーに適切な刺激を与え、操作してみようというモチベーションを高め、ユーザーが継続して操作する動力となります。訓練されないユーザーはいません。そのため、スマートフォン使用時、ユーザーのほとんどはその頭の中に既定の操作モデルが存在しています。もしユーザーの習慣に従って設計し、ユーザーを刺激できなかった場合、ユーザーはそのソフトウェアを操作しようとする気持ちを失くし、その他の代替製品を探すでしょう。     画面ICONの振動により、自然とユーザーに継続操作のモチベーションを与える。 2.ユーザーの操作簡易性の提供 シンプルなデザインのインターフェースによって、ユーザーが便利に操作できるようにし、直観的な理解を加えることで、ユーザーの操作ミスの可能性を低減します。 3.全体の統一されたインターフェースのデザイン 優れたデザインのユーザーインターフェースは全体性と一致性のメリットが具わっているべきです。インターフェースのデザインアーキテクチャは必ず明確で統一性を具えていなければなりません。スタイルのデザインにおいてもソフトウェアコンテンツとの一致性が必要です。 4.ビジュアルデザインでユーザーに直観的な理解と操作を提供 開発者は一部のユーザーインターフェースにおいて美しいデザインを施しますが、デザインはユーザーの立場を出発点にして考えられなければならないことを疎かにしがちです。そのため、ユーザーにはっきりと分かりやすく、正しく使用してもらうことを最も基本とし、また最も注意すべきこととするべきです。 5.秩序あるインターフェースの配列 インターフェースのデザインは秩序立っているべきです。整ったインターフェースはユーザーがより気軽に使用することができます。 秩序のある配列はユーザーの操作をより気軽なものにする。 6.安全性 ユーザーの選択は単一ではなく自由です。しかもどの選択も可逆性を具えています。これ以外にも、ユーザーが危険な選択をした時には、警告を行うシステムメッセージを提供します。 7.ヒューマナイズされたオプションの提供 ユーザーインターフェースはユーザーが個人の習慣に基づいてインターフェースを設定できることが必要であり、プロフェッショナルなレベルのものと入門クラスの使用システムを具えているべきです。効率の良さとユーザーの満足度はヒューマナイズの程度の高低を示すものです。 以上いくつかのポイントを議論すると、デザインの優れたUIはユーザーに直観性と明確で高度な理解をもたらすだけではなく、更にユーザーをハードウェア自身のシステムの制限を飛び越えさせ、またユーザーにハードウェアのメリットを体験させながら、いささかのマイナスの影響も感じさせません。  

ユーザーと企業を結ぶ-UXデザイン

近年、ユーザーエクスペリエンスデザイン(User Experience design、略称UXデザイン)というキーワードが世界を席巻しています。それと同時に、私たちはユーザーの消費現象が次第に変化し、消費はすでに生理的な要求から心理的な満足に転換していることを発見しました。製品の開発とデザインはもう「機能と外観」を強調するのではなく、ユーザーの体験を強化し、そのうえ企業のDNAとユーザーを繋ぎ合わせなければなりません。     製品の開発とデザイン=企業ニーズ+ユーザーニーズ   1つの優れた製品は企業ニーズとユーザーニーズを結びつけなければなりません。脳科学の角度から見ると、ヒトの脳は2つに分けることができ、左脳(赤い部位)は論理力、右脳(青い部位)は直覚・感受力を代表しています。企業は非常に優れた左脳を持ち、思考・論理・判断力で以て様々なプロジェクトおよびミッションを処理して、企業の利益獲得をサポートします。そして、ユーザーは強烈な右脳を持っており、単純に使いやすく快適を感じることを求め、満足感を得ます。   どんな企業も製品を開発あるいはデザインするときに、よく企業目標とユーザーニーズの間に些細な衝突及びギャップが生じます。それはまさに左脳の理性と右脳の感性が衝突した結果です。如何にその間のギャップを減らし、最良のバランスを見つけるかは、すべての企業がぶつかる問題です。   UXデザインの過程から企業のニーズとユーザーのニーズを知る   IDEOがスペインのBBVA銀行のためにデザインしたATMのケースから、IDEOがどのように企業ニーズとユーザーニーズを結びつけたのかについて分析してみましょう。一味違ったATMのエクスペリエンスを示し、ユーザーがATMを使用するときの「プライバシー、シンプル、カスタマイズ、お金の取り出し、喜び」の全く新しい体験と気分を十分に満足させた上、BBVA銀行の企業経営理念も伝えました。   (1(1)企業の経営理念とサービスについて理解する 「理解」は製品を開発する前の課題です。プロジェクトチームはBusiness Requirementを理解しなければならず、技術・市場の区分・ターゲットの選定などを用いることができます。その後に構造の構築を行い、進捗を計る基準を定めます。 実際にBBVA銀行のもともとのATMデザインを観察し、ATMが提供する機能をまとめた。こんなにたくさんのボタンと注意メッセージを見ると、どう手をつければいいのか分からなくなる。   (2(2)実際にユーザーの使用習慣を観察する 1つの優れた製品はデスクの前に座っているだけで作り出せるものではありません。革新または製品を改善する過程において、エンドユーザーがだれであるかを考え、実際に彼らの使用目的・過程・表情それと気分を観察しなければなりません。私たちはだた「ユーザーの製品機能及び特色に対する満足度」を発掘するのではなく、さらに「ユーザーの製品を使用する本質とエクスペリエンス」をより深く発掘するのです。 デザインチームはスペイン・メキシコ・アメリカのBBVAユーザーがATMを使用する過程を取材した。同時にガソリンスタンドの自動支払装置、スーパーの自動レジ、電車の自動券売システムなどの類似設備を観察した。それは、ユーザーに最も便利で日常経験に適した操作方法を探り出すためだった。   (3(3)デザインのアイデアを出し、絶えず問題を収集・整合する

エモーションからデザインを見る

  ショッピングサイトではどうすれば店に「リピーター」が訪れるのか?YahooショッピングサイトとPChomeショッピングサイトを見ると、Yahooの店舗数が多いのはなぜか?実は、それは感情におけるある種の複雑な関係なのです。人間は感情で物事を考える動物です。この感情が製品とお客さんの関係も繋ぎとめており、店を利用した事のない客でも、商品に帰属意識を持たせることができます。そして、ユーザーのサイトに対する熱中度にも同じような感情のつながりがなければなりません。     エモーション-アクションの反応関係 心理学の点からすれば、感情は身体が外的刺激を受けた際に起きる反応です。逆に言えば、内在の感情が外的刺激を受けて、内在する気持ちが引き起こす生理及び行為における反応です。では、なぜアクション反応というのか。ユーザーのアクション反応において、私たちはユーザーの表情または身振りにより他人に対する感情反応を読み取ることができます。例えば、バットを振り回している選手は、怒り狂ったように殴りかかろうとしているのか、あるいはバッティングしようとしているのかなどです。   刺激 > 認知反応 > 感情反応 > 行為反応 > 反応の結果   Example: 敵に遭遇する > 危険を察知する> 恐怖を感じる> 逃げる > 別の獲物を探す

なにっ!!404エラーページが。さてどうする?

ウェブページやブラウザゲームを表示する際、「ページが見つかりません」(略称404ページ)に悩まされた経験は誰しもあるでしょう。404 Labの統計では、「404ページが表示されたら、どんな気持ちになりますか?」との問いに、39.88%の人が悲しくて声も出ないと答え、36.92%の人は前のページに戻って404ページの存在を忘れると回答しています。この統計データは興味深いものですが、誰もが404ページに悩まされた経験があることを示唆しています。 404エラーページが表示されるのは、ユーザーにページのリンクが無効であること、ページが削除されていること、ユーザーが入力したアドレスが正しくないことを知らせるためです。ウェブデザインのプロセスにおいて、大多数のウェブサイトがデフォルトの404ページを採用しており、404ページをデザインし直すことはありません。デフォルトの404ページのグラフィックやコンテンツでは、ユーザーが次に行う操作がわかりにくくなっています。 実は、404ページのデザインを改善し、直感的で工夫を凝らした方法でユーザーに次のステップを提示することができます。優れた404ページなら、ユーザーが探している情報が手に入りやすくなります。あるいは、その他の便利なソリューションやオプションを提供して、ページが見つからないことによるユーザーの失望や不信を抑えることができます。さらに、ユーザーが自分でサイトのコンテンツを探し出せるよう後押しします。 ここに分類した404ページデザインは、主に「ユーザー同士のやり取りをリンクし、ユーザー情報を正確に提供して、次のステップを提示する」ことをアピールしています。では、デザインの方向性のポイントを簡単に紹介していきましょう。 1.     ユーザーの親近感をキープ サイトの構成では、すべてのページで共通のグラフィックやサイトロゴなどの情報を表示します。これによりユーザーは同一サイトのページを表示していることが簡単にわかります。また、404ページにもそのサイトのグラフィックやサイトロゴなどの情報を取り入れます。なぜなら、ユーザーはサイト内外のいずれから404ページに飛ばされたのか、はっきりしないからです。ユーザーが見慣れたカラーやグラフィック、ロゴであれば、安心感が生まれ、ページを閉じられる恐れがなくなります。 – larknews:このページが表示された理由を面白おかしく説明し、怒りを静める。ただし、larknewsの404ページにはサイトのカラーやグラフィック、ロゴがなく、面白ページを開いたと思われる。 – Spore:sporeゲームの独創性を余すことなくアピール。オリジナルの404モンスターが404エリアに入ったことを知らせてくれる。早く立ち去らねば! 2.     エラー情報をはっきり表示 ユーザーが404ページにジャンプした場合、エラー情報がはっきりと表示されなければなりません。はっきりと表示されるエラー情報は、ユーザーを脅かすものではありません。現在のトラブルを明確に伝え、ユーザー自身に過失があると思わせないようにして、次のステップの実行をサポートします。 – Rockettheme:強烈な色彩と特大サイズの文字で、ユーザーは404ページであることが一目瞭然。また、エラーメッセージで現在の状態を簡単に説明している。 – abduzeedo:宇宙空間の漂流がテーマ。わかりやすいテーマと画像のグラフィック効果に、ユニークなセリフを組み合わせている。「ヒューストン基地、トラブルが発生した!!我々は目的のページにたどり着けない:(」。 – 31three:様々なチョウのグラフィックデザインで、ユーザーの視覚が混乱する。現在の状態について詳しい説明がなく、404ページであることがわかりにくい。 3.     代案をはっきり提示 代案をきちんと提示することは、404ページの設計に大切な要素の一つです。ユーザーが適切に次のステップやリンク先を選べるようにし、「迷子」にならないようにします。代案は数多くの要素で計画と設計ができますが、よく用いられる方法には次のようなものがあります。  ●  メインメニューや検索機能を提供:ユーザーが早く正確に別のページにジャンプできるようにする。  ●

ヒューマン設計センターUX LAB(User Experience Laboratory)新落成

  人の設計によってより良きものに変える便利機器―UX LAB起動! ヒューマン設計センターUX LABが正式に起動したぞ!ユーザーの経験を検討することは、今後、グループ各部署にとって、必ずや助けとなるだろう。ユーザーがセンターのUIデザインコンセプトに溶け込み、グループが作り出す色々なものへの助力となるよう願ってやまない。UX LABとは、どのようなサービスを提供するのか、どのような特色があるのか、ラボの環境はどうなのか、全てみんなのために一つ一つお答えしよう。   UX LABの検討範囲 UX LAB(ユーザー経験ラボ;User Experience Laboratory)はユーザーの体験したことを各検討の起点として、「プロの評価」(Expert Review)、「フォーカスグループディスカッション(ある特定の共通点を持つグループへの取材)」(Focus Group Discussion)や「ユーザーテスト」(Usability test)などを含み、それによりラボを設置したりする。 ゲーム開発から言えば、開発段階にプロ(Expert)がユーザーの観点から、そのゲームのUI設計プロセスの完成度やその内容度を評価するが、プロが開発したものを量産する段階に入る際(内容が完成した時)、プレイヤーを募集して遊んでもらい、各UI設計に対するプレイヤーの反応を収集したりする。   UX LABのサービスはどこが違うのか。 専門的実行と科学的分析、これがUX LABが己に課す約束である。   専門的実行―プロの研究チームによる企画と実行研究

元気を与えるフッターの作り方!!

この文章を語る前に、NOKIAの広告にあった「テクノロジーは常にヒューマニズムから」というフレーズを思い出しました。生命をもたない製品が人と製品の間の感情により設計され、製品にフレンドリーな感覚が瞬時に生み出され、製品やサイトが冷たくなくなります。実際、我々は設計過程において常に斬新な概念、または古臭い手法を用いているわけではありません。そうではなく、一人ひとりの潜在意識に深く入り込んでいるのです。恐らく誰も熱心にフッターを見たことはないと思います。このフッター設計は、よく見逃されたり、重視されない設計項目です。サイトのヘッダーこそがサイト設計における焦点と考えられています。人を惹きつけるヘッダーやコンテンツを製作するために全力を注ぎ込み、従来の版権声明と免責声明のフッターを設計すればいいだろうという考えであれば、このように終わるかもしれません。しかし、ユーザーが最後のフッターまで見たときの事を考えたことがありますか?   フッターはコンテンツを書けるような大きな空間ではありませんが、サイトデザインにおいて、GPS、ツイッター、最新情報といった面白い方法を用いて設計することができます。次に、フッターにおける新しいデザイン例をご紹介します。 VIMEO: Vimeoではとてもクールなフッターを目にすることができます。表示されている情報は少なく、ユーザーがVimeoに参加してくれることを望んでいるだけです。しかし、基本的に主要フッターが存在し、綺麗な挿絵風に表示されています。 Putzengel:美しいライン、各種スタイル、そしてマウスを滑らした時のビジュアル効果により、最後に会社の地図、企業情報と問い合わせ先情報がレイアウトされています。全てがモニターに表示されることにより、全体的に統一感がもたらされています。 Jan Ploch:とてもクールな個人サイトです。フッター設計がサイト全体まで延長され、アルコールのボトルデザインになっており、フッターではラベルで問い合わせ先を表示し、飲み干す効果が加えられ、非常にユニークで、ヘッダーからフッターまでのデザインがはっきりと続いています。 Ok Studios:サイト全体が上下層交差の動画となっており、マウスの動きと連結したビジュアル効果をもつサイトです。ユニークなイラストスタイルを採用しており、フッターには白黒の動物イラストが表示されています。 Adventure World:わくわくする冒険世界の体験で、まず地球からスタートとするシーンをフッターとしており、ボタンをクリックすると画面の上方向にシーンが延長されます。フッターをトップページのコンテンツに使用した非常に特別なサイトで、巧みにフッターを活用してシーンを作り上げています。 Atlantis:1962年に消滅したアトランティス大陸を探索。海洋プレートからカプセルに乗り込み、フッターまで探索します。 The Pixel:もう一つの興味深いブログフッターで、樹木の頭部が下に延び続けます。下に伸び続けると元々は樹木と村落であったことが判明します。 まとめ どのようなフッターデザインであれ、サイトデザイナーの優れたテクニックが強調され、デザイナーの巧みなテクニックを用いてサイトのビジュアルデザインとドッキングされることが望まれています。この文章内で、各種フッターデザインに彼らの創意が表わされています。またフッターはユーザーフレンドリーで、簡単に見つけられるものであるべきです。これらの目的は、驚くべき体験を提供し、ユーザー体験が改善されることだけを願うものです。 サイト上のフッターはすでにシンプルな一部分から、版権情報の承認と付加リンク以外にも、多機能エリアとして広がっています。ここでは、ツイッターの更新といった各種サイトの豊富な機能を確認することができます。         参考データ: http://www.flashuser.net/inspiration/ http://www.flashuser.net/web-design/

インタラクティブデザインで素晴らしい生活を作ろう

休日の午後に、あなたは心地良くカフェのオフホワイトソファにすわっています。優しい日射しがあなたの背中を包み込み、外の緑の蔓を眺め、周りの人々の囁きと笑い声を聞きながら、キュートなジャズ音楽が流れています。そして手に持っている呼び出しの受信機が軽く振動し、あなたは受信機を持ち、カウンターへ向かい、香りで満たされたコーヒーを持って戻ってきます。「お客様、コーヒーができました。」といった店員の叫ぶ声もなく、他の客の注文と間違ったりすることなどの混乱はありませんでした。 手に持っている小さく、そしてあなたをビックリさせた受信機はインタラクティブデザインの一つでした。   インタラクティブデザインとは? 更に簡単な言葉で説明すると、直感、面白さ、イノベーションと有用な方法を使い、人と人、物事、もの、空間の相互作用をデザインし、さらに効果的に使用できるように作るのが、インタラクティブデザインです。 食事をしに行くだけでも、注文を待ち、並び、順番の呼び出し、受付番号札、上述な振動受信機などは全部インタラクティブデザインからの発想で、更により素晴らしいアイデアが見つかるかもしれません。   新しい体験を生み出そう! 実に私達とインタラクティブは最も身近で、最も分かりやすいのは現在一番流行っているモバイルデバイスです:   –キーロックを解除する: 皆が「キーロックを解除する」機能を使ったことがあるだろう!この画面を見て、懐かしいと思いましたか?スマートフォンの時代に入って以来、このようなロックを解除する方法は段々少なくなりました。よく知られている方法ですが、惜しいことに直感ではわからず、使用するには学ばなければならないので、どうやって進化してきたのか見てみましょう。   –スライドしてロック解除: これはロック解除界の一大進歩であったのです。単にキーを押したり、パスワードを入れたりすることなく、スライドだけでロックを解除し、子供でも簡単に使える機能です。   –図形を描くことでロック解除: 人の脳が図形に対する記憶は数字より強いため、図形の記憶は数字より直感的と言えます。これはキーロックとスライドロックを融合した機能で、更に便利になりました。 –図形を描いてロック解除+ビジネスモデル: 図形に沿って描いたらロックの解除ができます!しかも図形認識にビジネスモデルを加えています!     インタラクティブなビジネスのチャンスは無限 我々の生活には、どこにでもインタラクティブなところがあります。バスに乗ること、駐車代を払うこと、朝食を買うこと、ミーティングなどの小さなことから、イベントへの参加、綺麗な街に出ることなどの大きなことまで、世界と相互作用しています。そのままの形に拘らなく、更に試しに素晴らしく面白くしたりして、一緒に今あるものを変化させましょう! –インタラクティブな自動販売機:

「デザインシンキング」 – ユニークなアプリの作り方

  クリスマスが近づき、店にどんな特別な贈り物が並んでいるかと誰もがわくわくする季節です。 クリスマスプレゼントを自分で作れたら、これほど特別な贈り物はないでしょう。 2011年11月にユーザーエクスペリエンスセンターは、参加者がクリスマスを題材にしたアプリを自分でデザインできるイベント《クリスマス・デザインシンキング》を開催しました。 「デザインシンキング」のコンセプトを盛り込んだプレイ方法を次に実例を挙げてご紹介します。     1. デザイナーと受け手になって ロールプレイをしよう!   ロールプレイング(役割演技)は、効率的に対話を生み出し問題を発見するための近道です。2 2人一組でペアを作り、1人がデザイナー、もう1人が受け手になります。     2. デザイナーは耳を傾ける – 日々の暮らしから必需品を見つけ出す 耳を傾けるとは、着手している製品の機能性や外観、色を考え出すということではありません。デザイナーは自分の考えを排除して、相手の言うべきことを真剣に聞かなければならないのです。聞くという行為は常に最も難しいことですが、的確な質問をし、限られた時間で正しい解決法を見つけ出すことにつながっていきます。必要なことをできる限りはっきりと浮き彫りにすることです。私達は「なぜ」と理由を聞く方法により、受け手が期待するものについてインタビューを行いました。そして、彼らのアプリの利用をさらに大きなユーザーコミュニティを映す鏡として捉え、理解を深めていきました。ユーザーの個人的習慣を考慮することも重要なことなのです。 3. デザイナーは整理する – 優先事項をふるい分ける  

図形と記号―インターフェースによる意思伝達と機能の要素

生活のいたる所に様々な記号はあふれており、人種、言語、国を問わず、記号と図案の設計を通じ、人、事物を象徴することによって、容易に迅速かつ有効な認識と意思疎通ができます。インターフェース設計において、記号は機能、ガイド、説明を表し、さらにインターフェースの雰囲気を伝えるのに用いられます。私たちの感覚器官での認識を経て、それが伝えるべき情報をユーザーに即座に認識させます。 記号学(Semiotics)とは、簡単に言えば、記号と記号のシステムとその意義についての研究領域で、主にいかにして記号がより人類に容易に理解されるかを研究するものです。 UIにおいてなぜ図案が記号として簡素化されなければならないのか。 左端の図はそのままを描写した人の顔で、右端は図形化した概念の顔です。UI設計時、通常私たちが一つの機能の考えや概念のポイントを伝える場合、左端の顔は情報が過剰で、私たちが伝えたい機能がブレやすくなってしまいます。 反対に、もし顔のディテールが簡素化されすぎてしまうと円だけになり、正確な情報を伝えることができなくなってしまい、同様にユーザーの困惑を招きます。 Cognition 認知/理解 Confusion困惑 Detail ディテール 記号を設計する際、通常ユーザーを困惑させる図案には、すべてディテールが荒いかもしくは細かすぎる点が見られます。つまり、設計の際にはどのようなディテールの表現がユーザー認識に有効なのかを理解し、そうした図形の記号化を考えることで、正確な情報伝達を実現する必要があります。 記号はいかにして設計されるのか― 記号は、1.代表項(図形デザインのデザイナー)、2.対象(物体そのもの)、3.解釈項(物体の抽象的概念)の3つから構成されます。デザイナーの思考転換を経て、記号が生み出されます。電池の例(以下の図)で見ると、電池はこの3つによって構成され、物体の形を記号に簡素化した後、デザイナーは私たちがよく目にする電池記号を創り出します。 記号学者が考える記号の3分類とは… Icon : 類似した物体を表現した記号。 Index : 記号が物体そのものであるか、物体と実質的に関連するもの。 Symbol : 物体と慣例や規定によって結び付けられている記号。 図形デザインに含まれる重要なポイントとは。 UIの世界で、効果的な図案には一目で認識できるという特質を備えていることが必須ですが、全てのものが必ずしも容易に図示化できるわけではなく、デザイナーによるディテールの調整と抽象化を経る必要があります。また、多くの画像を同一のUIで応用させるという一致性についても考慮しなければなりません。UIの図形を設計する際、以下のいくつかの原則に注意する必要があります…… 即時認識(Immediacy)―効果的な図案は一目で認識できなければならない。 普遍性(generality)─あるものについて普遍的に象徴する、もしくは通俗的に理解される図案である。       一致性(cohesiveness)─図案は通常単独で存在することはまれで、システム全体の視覚的効果を

ユーザーを理解し、スマートな建築家になる

情報があふれるこのインターネット時代に、情報を検索しなければならない場合、まず思いつく手段がインターネットであることは意外ではないでしょう。競争相手がこんなにも多いインターネットの世界で、あなたの提供するサービスに対しユーザーが不満を抱くとすれば、きっとユーザーの忍耐度は1分間にも満たないでしょう。 そのため、どうすればこの情報の大海原の中から、ユーザーにとって直感的かつ効果的な検索方法を提供することができるか、これは非常に重要な課題です! 特にインターネットサイトは大量の情報を提供するサービスなので、スマートな建築家になり、ユーザーの情報検索パターンを理解してインターネットサイトの情報規画に取り組まなければならないのです。   ユーザーの情報検索行動パターン ユーザーがどのような方法で情報検索を行うか理解していますか? 通常ユーザーの行動は閲覧、キーワードを入力して調べる、関連する情報をたどって探す、他の人に質問して回答を得る等のいくつかの手段に限られます。では、検索行動のパターンはどうでしょうか? Step 1 凱さんはbooksを通じてダンテの著書神曲を購入したいと思い、検索エンジンでキーワード「神曲」を入力 Step 2 検索結果一覧から項目に目を通し、その中の著書推薦を調べましたが、まだ目的の本は見つかりません Step 3 もう一度キーワードを「ダンテ神曲」と入力しなおして検索 Step 4 購入したい本が見つかりましたが、その本は売り切れだったので、カスタマーサービスにメールを送信しました ユーザーは繰り返しこの3つの方法で情報検索を行います。これらの方法を通じて複雑多様な行動パターンが形成されます。このような変化に富む情報検索パターンについて、Marcia Bates博士がまとめ、発展させたのが-情報探索理論-いちご摘み理論(Berry-picking Model)です。 上の図が示しているのは、ユーザーが情報を検索する際にまず検索するターゲットとなるもの(Q)があり、次に自らの考え(T)で検索を進め、求めていた内容(documents, information)を見つけ、それから次のターゲットの検索を進めます。Batesはテキストの位置がまるで果樹園のいちごのようであることを発見し、ユーザーが認知する位置において情報が適切に配置されていれば、ユーザーは検索と閲覧の2パターンの動作を繰り返し、情報を十分に得た後離れていきます(E)。  

選択肢が多ければ多いほど良いだろうか?

    画像引用元:http://www.hidabroot.org 現代のウェブサイトはホームページをますます簡素化していく傾向にあるが、豊富な内容を要求され、それぞれウェブサイトの目立つところに自分が推薦する製品や情報を置き、閲覧率を増やし、すべての商品をユーザーに見てもらうことができるが、掲載した物が多ければ多いほど、ユーザーはほしい物をみつけることができず、かえってすぐにウェブサイトを離れる可能性があることに気がつきました。シーナ・アイアンガーが提唱した「ジャム理論」の研究に基づき、テスト結果で多くの選択肢があると、人は最後に何も選ばないと証明されました。(ジャム理論の研究内容)   いかにしてユーザーの必要な物を探しだす手助けをするかは、ウェブサイトにとって重要なことであるが、ユーザーは多くの時間を費やしてホームページを閲覧することはなく、はっきりと目的を持っているユーザーは検索や分類から探し出します。しかし実際には多くのユーザーは目的が曖昧で、ウェブサイトが推薦した商品が、ユーザーの需要に当てはまれば、ユーザーは大海原から針を探し出すような苦労をしなくてよくなります。さらにユーザーが商品を良く知るこができるだけでなく、ウェブサイトへの好感、信頼度が増すことになる。   以下、3つの事例を挙げてみます。いかにして製品を推薦し、ユーザーに選択させるか。     実例一:同じ人気商品を、どのような方法で簡単に選択させることができるだろうか。   A.人気商品  B.  人気商品 数からみると、Bの人気商品の項目は更に多く、ユーザーに選択肢の幅を広げています。もしユーザーのそれぞれの商品対する注目度が同じであれば、選択コストから考えてみると、10から1の選択コストは、3から1の選択のコストよりも更にかかります。多くのユーザーが初めて商品を見たとき、商品をあまりよく理解しておらず、商品のパッケージと名前で評価します。そのため、推薦する時、推薦商品を少なくし、ユーザーが躊躇する時間を短縮し、コストを減らすよう、検討したほうがよいです。     実例ニ:同じようにジャンル別にして推薦する場合、どのような推薦方法がより良いか?   A.ジャンル別推薦 B.ジャンル別推薦 Aのジャンルのテーマははっきりしているが、視覚的に突出したキーポイントがなく、選択肢が多くて、クリックしたいと思わないです。Bの推薦方法は元々のジャンル別テーマを残しているが、階層に分けて一部分を強調し、ページ上で上下層で差別化し、視覚的にはっきりとさせています。このため、ユーザーは簡単に選択することができます。    

情報はこうやって組織する!

もし誰かに突然「8か国連合軍ってどの8か国?」と尋ねられたら、 卒業してから長い年月が流れているあなたはどれだけのことを覚えていますか? 学生時代から遠く離れてしまっていても、多くの人はすぐに答えられると思います。その答えは、 ロシア、ドイツ、フランス、アメリカ、日本、オーストリア、イタリア、イギリスです。 かつて「語呂合わせ」で私たちの「資料の組織」を手助けしてくれた偉大な歴史の先生に感謝しなければなりません。   次の方法で8か国連合軍について改めて復習しましょう! 俄(ロシア)、德(ドイツ)、法(フランス)、美(アメリカ)、日(日本)、奧(オーストリア)、義(イタリア)、英(イギリス) 餓(『俄』と似た発音)、的(『徳』と似た発音)、話(『法』と似た発音)、每(『美』と)、日(『日』)、熬(『奥』と似た発音)、一(『義』と似た発音)、鷹(『英』と似た発音)   「お腹が空いたら毎日鷹を一羽煮る(餓的話每日熬一鷹)」としたら、だいぶ分かりやすくなるのではないでしょうか。  実は情報を組織することの重要性は、全く関係が無いように見える情報を論理的な方法で整理し、構築することによって大脳に情報をより容易に受け入れさせ、吸収させやすくすることができるのです。     ファイブ・ハット・ラック Five Hat Racks ファイブ・ハット・ラックという言葉はTED主席/執行ディレクターWurmanが1989年に提案したものです。「帽子」は情報を表し、「ラック」は組織方法を示します。これは情報の対象が何であるかを問わず、地点、アルファベット、時間、種類、または階層という5種類の方法で全て情報の組織化ができるというものです。     アルファベット(Alphabet) 字典や百科事典などのようにアルファベットの順序をもとに情報を組織することを指します。 アルファベットで組織化された情報は強烈な指示性を持っており、非線形の情報に適用します。通常私たちがカラオケに行くと、アイウエオ順に歌手を探します。電話帳の氏名分類もアルファベットを使った組織法です。 時間(Time) 

顧客を透視する:ユーザーシナリオ法

今日における資本市場の競争は非常に激しく、企業のリーダーたちは自らの店舗が永遠に多くの客を集め、注文商品は早くも消費者から予約完売し、次々と注文を受けることを望んでいます。頭の良い営業担当者は顧客の考えを一目で見抜いて商品の販売に成功し、多くのマージンを稼ぎたいと心から願っています。この時代にビジネスに携わる人なら、顧客が何を考え、何を必要とし、どうすれば顧客に財布の中からお金を出してもらえるかを知りたいと誰もが考えています。今回皆さんにご紹介するのは、顧客の真のニーズを洞察するユーザー研究の方法-ユーザーシナリオ法(Contextual Inquiry)です。   ユーザーシナリオ法はBeyerとHoltzblattが人類学(Anthropology)と民族誌(Ethnography)の方法論に基づいて研究対象の生活の場に対して深く観察し、体験するように発展した研究方法です。今日ではユーザー中心設計UCD(User- Centered Design)において人気があり、また欠かせない技術の一つとなっています。     ユーザーシナリオ法-誰の心の中にも名探偵が一人いる ユーザーシナリオ法は簡単に言うと、自ら優秀な探偵となって目標の人、物、事に対して事細かに観察し、問題のありかを探り、合理的に問題の経緯を推理するというものです。 研究を始める前に、解決しようとする問題が何かを確定しておく必要があります。例えば、革新的なコンシューマーエレクトロニクス商品を設計したいのでしょうか、または全く新しい食べ放題のビジネスモデルを発表したいのでしょうか、それともシルバー世代のための24時間体制電子看護サービスをカスタマイズすることでしょうか?研究するテーマを決めなければ研究対象を選択することができません。そのため、先に設定した主題に基づけば、その研究対象はコンシューマーエレクトロニクス商品マニアのエンジニアであるかもしれないし、食べ放題が好きで美味しいものを食べることを楽しんでいる妙齢の熟女かもしれないし、慢性疾患の処方箋を受取っているおじいちゃんおばあちゃんたちかもしれないのです。その後は思い切りお金をばらまいて研究に参加してくれる取材対象者を各地から幅広く集めるのです。   研究サンプルの募集が終わったら、取材対象者とアポイントをとり、フル装備で研究対象の生活環境に飛び込んで彼らの行動を観察します。ユーザーシナリオ法の目的はユーザーの完全な行為と交流の情報を収集することであり、単に彼らに対する意見や考え方に対して要約的な記録を行うことではありません。そのため、研究者は必ず手元にカメラや録画器具、またはノートなどのツールを用意して、観察したポイントを詳細に記録します。取材対象者が携帯する身の回りの品や環境の中における物品の配置、そして取材対象者のスペース内における行動ルートなどの情報も詳細に観察することを推奨します。   集めたユーザーのデータは非常に膨大であり、雑多です。データを整理する際は洞察した問題を平叙文(statement)の方法で付箋の上に速記して簡略化した後にまとめ作業を行うことを推奨します。もしくは、各ユーザーのデータを読みやすく、流通性の高い行動モデルにグラフィック化(Beyer & Holzblatt, 1998)すれば、開発チームの研究員、デザイナー、エンジニアやPMなどにこれらの豊富で詳細な概要情報が素早く取得並びに消化してもらうことができます。最後に開発チームは数度にわたるブレーンストーミング(Brainstorming)会議を実施して、洞察した現象と問題点についてユーザーの潜在的なニーズと将来における製品、またはサービスのイノベーションの可能性を発掘し、さらに新商品や新たなサービスモデルのプロトタイプに発展させていきます。     ケースのシェア   バンク・オブ・アメリカ(BOA, Bank of

GDC台北サミットでガマニアUXのエネルギーが爆発

Gamania UX Design Center Inspires Game Vision 台湾のゲーム開発者に言わせれば、6月の台北はいつもと違う!ようです。 1988年から開催されている、ゲーム業界最大規模のゲーム技術交流会であるゲーム開発者会議GDC(Game Developer Conference) は26年の歳月を経ました。そして大きな期待のもとついに第1回GDC TAIPIEI SUMMITが開催されたのです! 台北では初の試みとして、アメリカ、ブラジル、オーストラリア、日本、シンガポール、香港、マカオ、中国等12の国と地域から約660名のゲーム開発のプロが集まり、また20名の国内外の講演者が参加し、相互交流が行われました。 以前は出席者としての身分でこの国際サミットに参加していましたが、今年は光栄にもエルゴノミックデザインセンター監督のMichelle がUX Designer莛莛(Ting Ting)及びUI Engineer敏哲(Shawn)を引き連れて、ガマニアの代表としてGDC国際サミットにおいて、ガマニアがいかにしてユーザー中心のデザイン理念をゲームデザインに導入したのかを皆様にお伝えしました。 ユーザーをゲーム産業の中心に取り組み、ゲームの新しい視野を広げる サミットが始まると、Michelleはユーザーを中心にデザインすること、「新世代のユーザーに対話型インターフェースを提供するためのデザインのソリューションとして、ユーザーを中心にしたデザインを取り込んだガマニア製品について」提示しました。 「ユーザーを中心にデザインすること(User-Centered Design)」はソフトウェア産業ではすでに何年も言われていることですが、ゲーム産業ではまだ初歩段階であります。特にこの観念(User-Centered Design)は台湾ゲーム産業においては未知の領域です。しかしガマニアは初めてユーザーを中心にした製品(サービス、インターフェース等を含む)を導入し、ユーザーの全面的な体験(Total

図表やデータはもはや味気ないものではありません 超目を引くInfographics

▲図表化されたアメリカ:各州の特色を各種カラーの組み合わせとイラストで表現し、非常に豊かなビジュアルをもたらしている。     Infographicsとは?   Infographicsとは、Information(情報)とGraphic(グラフィック)が合成された複合語です。簡単に言うと、Infographicsは特定の資料、情報、知識を図で表現したものです。例えば、日常でよく目にする地図、MRTやバスの路線図、新聞上のデータ図、更にはExcel上の各種図表も全てInfographicsです。   元々、Infographicsは雑誌の記事やニュースで多く使用されており、主に事件の成り立ちや発生経過を明確に説明するための一種の手法でした。1970~90年代、英国の雑誌『The Sunday Times』で美術編集を担当していたPeter Sullivanが大量にInfographicsを用いて原稿を編集し、この手法がトレンドとなりました。2000年以降、Infographicsは動画やモーショングラフィックを用いた表現方法に進化し、人々から注目を集めるようになりました。そのため現在、教育においても、技術説明においても、マーケティング戦略やニュース報道においても、Infographicsが深く浸透している方法を目にすることができます。元々は味気ない資料を精彩なものへと整理し、実用的で新鮮且つ面白い図表に解析し、必要とする人に明確に伝達します。   The World of Social Media(ソーシャルメディアの世界)     Mobile Technology(モバイルテクノロジー)       Infographicsの作成方法とは?

FLAT UI DESIGN-平面化インタフェースのデザイン美学

最近、携帯端末の普及により、電車でも、会議中でも、食事中でもテレビを見ていても、スマホやタブレットでネットやゲームをして端末を手放せなくて、我々の生活はもはやこのような携帯端末から離れなくなってきました。それによって、アプリが増え、本物に見せかけたものやシンプルなもの、色んなインタフェーススタイルが現れてきました。その中で、あるデザインスタイルが流行り始め、大量にアプリのインタフェースに使われてきました。それは極シンプルですっきりした単純なデザインで、平面化デザイン(Flat Design)といいます。 平面化デザインとは 簡単に言うと、長年流行っていた斜め、グラデーション、影、艶出しなど、本物に見せかけるビジュアル効果をやめ、もっと平たく見えるインタフェースをデザインすることです。20世紀、建築界がシンプリズムを始めて、平面化デザインスタイルを始めました。「Form follows Funtion」や「Less is More」など当時から有名なスローガンは今でもよく聞きます。ミケランジェロがどうやってダヴィデ像を作ったかを聞かれたときが、「簡単さ。余分な石を削り、必要な部分だけ残したのさ」と答えたように、インタフェースデザインも同じ原理です。 有名な自動温度調節機NESTは、元Apple社、iPodの生み親が作った製品です。そのウェブサイトから製品とそれに関わる応用環境など現実の要素は、平面化デザインのサイトに取り込んでいることが分かります。虚構と現実を融合させることによって、ユーザーがほかのビジュアル要素に邪魔されず、製品に注目することができます。 ▲Metro UI   Metro UIはマイクロソフト社のWindows 8のデザインスタイルで、スイスの平面デザイン原則に基づいたものです。その鮮やかな色使いとすっきりしたレイアウトのインタフェースは平面化デザインに似ていて、インタフェースの材質ではなく、文字などの情報の内容に力を入れています。このシンプルなスタイルでより質感のあるビジュアルを提供できます。 平面化デザインVSスキュアモーフィズム アップル社のインタフェースデザインには、よくスキュアモーフィズムスタイルが使われています。メモ帳からリマインダー、iBookの本棚まで華やかでリアルにみえて、実物にリンクされやすくしていて、ジョブズ氏もこういうスタイルを推進していました。 しかしアップル社の中で別の一派のデザイナーは過度のスキュアモーフィズムが華麗なだけで、機能性がない上、ユーザーを惑わせるだけであり、すべてのインタフェースは機能的に作るべきだと考えています。ジョナサン・アイブ氏もその1人です。最新のiTunesもその方針でよりシンプルに作られています。 デザインの良し悪しを決めるのは美学だけではない 平面化でも、スキュアモーフィズムでも、デザインスタイルを最終的に決めるのは、製品の具体的な働きや、プロセスが完全かどうかや、使用体験などであり、ビジュアルだけの問題ではありません。どのようなスタイルを採用しても、最適なインタフェースデザインになるにはいくつか共通の原則があります: 一致性:一致するデザインモードとビジュアルスタイルがあること。配色やアイコンの大きさ、レイアウトなどを合わせることで、ユーザーがより関連性を作りやすくなり、製品が使いやすくなります。段階化:インタフェースデザインでは、コアな機能を重視し、ほかの操作要素を二次的な位置に置き、インタフェースをシンプルで効率よくすることです。ユーザーにすばやく機能と情報の関係を認識させ、次のステップで何をするのかはっきり認識させることが一番大事なことです。 フィードバック:クリックしたとき、ユーザーにすばやくはっきりとしたビジュアルやアニメや通知音でフィードバックすることで、ユーザーが戸惑うことなくタスクを完了でき、操作後の満足度もあがります。 障害を減らす:どんなビジュアルスタイルでも、インタフェースを簡略化し、目的タスクを完了するのにかかるステップを減らし、操作をスムーズにする必要があります。操作上の障害や余計なステップは複雑さを増し、ユーザーがインタフェースで戸惑うだけです。    

デジタルバーコードが携帯電話をより便利にさせる

最近生活の中でよく見かけるQRコードの応用、今最も流行しているLINEでさえも、QRコードを使っての読み取りが可能です。実際の生活で、私達はQRコードのアイデアに関連したものをすでによく目にしています。QRコードのマーケティングモデルは、私たちの生活やインターネット上にだんだんと浸透してきているのです。QRコードの応用を簡単にお伝えします: QRコードとは? QRコード(Quick Response Code)とは、バーコードの一種で、撮影機能やバーコード解読機能のついたソフトウェアを使うだけで、バーコードの中に保存されているデータを得ることができます。主に、携帯電話の撮影機能と共に使用され、文字情報を提供することによって、キーワードの入力という動作の手間を省きます。現在、QRコードが応用されているのは、観光ガイド、映画チケットの購入、製品情報や名刺などです。 携帯電話の進歩によって、ネットワークサービスの利用も比較的整ってきたため、QRコードの用途はたくさんあります。続いて、QRコードのいくつかの応用例を皆さんに紹介します:   1.LEXUS ALL NEW GS QR CODEインタラクティブ技術の革新 製品が載っている広告上のQRコードを携帯電話でスキャンすると、本物そっくりな3Dのモデルをウェブサイト上で見ることができます。   2.韓国eMart Sunny Sale 一般的なQRコードは、恐らくただスキャンするだけでしょう。韓国eMartは、昼時の売上げを増加させるため、日光を利用して、3Dの太陽照射角度が昼の12:00~1:00の間にしかQRコードをスキャンできないようにしています。このようにして、巧みにネットワークサービスを利用して売上を伸ばしています。     3.ドイツNerdindustries動態のQRコード広告 このドイツの会社では、QRコードの15%の誤り訂正能力を利用して、静態写真を復元させるだけでなく、スキャンによってQRコードを動画に伴って変化させています。    

一つの問題からの始まり

よく人から聞かれるのが「UX Designとは何ですか。」ということです。 この問いに答える前にちょっと説明する必要があります。User Experienceとは、ソフト・ハードウェア、ビジュアルアート、インタラクティブセンサー、行動認知、社交心理、カスタマーサービス等々(まだまだあります)多くの異なる領域に関係する学問なのです。人に関係する活動、デザイン、ビジネス行動、教育、サービスでありさえすればいわゆる「User Experienceユーザー体験」から離れることはできないのです。 ですから私たちはUX Design(ユーザーエクスペリエンスデザイン)はもはや単純な一つの専門分野と定義することはできません。これは提供する当該製品またはサービスに関係する人々(エンジニア、美術スタッフ、企画者、研究者、カスタマーサービス、広報担当者、イベントマーケティングスタッフ、等々)がそれぞれの専門分野で「ユーザーを中心」にした態度で行うそれぞれの仕事の一部なのです。 こう尋ねる人もいるはずです。では、何が「ユーザーを中心とする」ということなのでしょうか。 一番簡単な言い方をすれば、それは「ユーザーの角度から考える」ということになります。 それはどういうことでしょうか。 デザイナーやサービスの提供者として、自分のロジックや便利さで構想したり製品やサービスを提供することは避けられません。私はこれを「自分勝手」なデザインと形容しています。「ユーザーの角度から考える」デザインではないのです。例えばプログラミング作業は、プログラミングのロジックが合理的でわかりやすい使用のフローを犠牲にしてしまっています。または既定のフローの分業(SOP)を順守し、コストを抑えるためにカスタマーサービスはよりヒューマニスティックでオーダーメードしてユーザーの問題を迅速に解決することができなくなっています。 ですから、多くの専門性を持つチームの中では誰もがユーザーエクスペリエンスデザイン(UX Design)の能力をもっていなければ、製品やサービス全体の細部でユーザーの満足度を最大限まで高めることはできません。 ユーザーエクスペリエンスがたいへん多くの異なる分野に展開できるのならば、私たちはどのようにして自らのユーザーエクスペリエンスデザインにおけるKnowHowを育成することができるでしょうか。以下は私が参考に提供するいくつかの方法です。   1. すべては観察から(観察->振り返り->学習) 観察?何を観察するのか? 初めに、他人を観察します。 人があることをどのようにしているかを観察してから(どんなものを使っているか、関係する人や物事、環境とのやり取り)、人の反応がどのようなものかを観察します(喜怒哀楽や困惑、驚き、失望、期待など…)。 生活は大きな実験室です。他人の行動と反応を観察することによって、私たちはあることについて人々がどのようにするか(How they do it)をいうことを理解することができます。どのような環境の下でどのような特別な時間(Where and

新たなiOS 7を語ろう!

先日WWDC 2013で、誰もが期待するAppleのiOS 7がそのベールを脱ぎました。かつての木の材質のフレーム、皮のメモ或いはGame Center内の緑のテーブルなど全てが無くなり、以前常用されていたスキュアモーフィックデザイン(Skeuomorphism)が大幅に減少し、それに取って代わったのが、この二年で次第に主流となってきたフラットデザイン(Flat Design)です。全体の形状、色、アイコンから文字まで、iPhoneの誕生以来最大の変化と言えます。 このような大きな変化には当然二極化の評価が存在し、ある人は、新しいUIはよりシンプルでスタイリッシュ、躍動感があると述べ、またある人は新しいスタイルは女子の憧れのようなスタイルの「乙女心」だと評価しています。どのような評価であれ、人それぞれの美的感覚と持ち味に対する観点は異なり、むしろこの大きな変更の背景にある決定や勇気こそ今回私たちが探る価値のある方向ではないでしょうか。   Why Flat Design? 今回Appleは新しいiOS 7でかつて愛用したスキュアモーフィックデザインを取り去り、フラットデザインスタイルに一新しました。そのバックの魂的人物こそデザイン部門のベテラン副社長Jonathan Iveです。Iveはモダニズムデザインをバックグラウンドとし、シンプルなデザインを好み、Steve Jobsの重用を受け、さらにAppleの大多数の製品に参与し、無数の賞を獲得しました。彼は余計な装飾を取り除き、複雑な機能に秩序を持たせることを主張し、フラットデザインのUIを用いてより内容を明確にし、機能を重視しました。 AppleのiPhoneが発売されたばかりの当時、スマートフォンはまだ普及していませんでした。そのため、UIのデザイン上、Appleはスキュアモーフィックデザインのスタイルを多く採用し、ユーザーにどのようにして触れ、操作するかを教えることを目的とし、人と機械の心の交流を重視しました。現在周囲を見渡せば、みなスマートフォンを使い、ユーザーはUIが人間的かどうか、機能がより多くの問題を解決できるか等…により注目しています。つまり、AppleももうこれらのスキュアモーフィックのUIによる操作や触れ方を示す必要は無く、スマートフォンがあれば、パソコンはいらないということを伝えなければならないのです。 その他、フラットデザインのスタイルが広がるにつれ、Google、Facebook、Pinterest等のブランドも続々とこのタイプのデザインのトレンドに加わり、Appleはモダニズムデザインをリードする先駆けとなり、必然的にこのトレンドに続き、より大きな波を創造し、フラットデザインを現代の主流へと導いています。もちろん、フラットデザインのポイントはやはり無駄を除き、デザインをシンプルに、内容と機能を際立たせ、さらに有意義な点を重視することにあります。Iveの発言のように「デザインの含みは外観だけにとどまらない」のです。 What’s New in iOS 7?   今回全体を大胆にフラットデザインに変更した他、より豊富なバリエーションと鮮やかな配色方式を使用し、天気の動画と効果等の要素を追加。またより精細なHelvetica Ultra Lightのフォントを用いてRetina