思考の盲点により多くのミスをしてしまいがちになります。同じように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デザイナーがプログラム言語を学ぶ　経験談（一）から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都市新探索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は人とサービスをつなぐことを目的とし、便利なプラットホームを提供して、様々な生活機能、社会サービス機能、ビジネスの応用の統合に力を注いでいます。 中国のその他二大企業の主な利益獲得モデルと比較すると、百度は広告、阿里はｅコマースを手段とし、テンセントはユーザーの課金で利益を上げた初のインターネット会社です。現在約 10% のユーザーが課金しており、ユーザーの重要性は一目瞭然です。また、ユーザー研究は、テンセントにおいて中核であり、製品にユーザー体験を導入してから既に10年を経ています。そのため、スピーカーの陳妍氏は「十年一剣を磨く」を今回の講演のテーマとしました。

タイトルからもわかるように、これはcodeが書けなかったのが少しそれなりに書けるようになった、ホームページの励ましの文です。（う～）。 まず筆者は自己の背景を紹介します。大学と研究所共に工業設計です。大学の頃は実体の製品設計に専念し、研究所に入ってからはユニバーサルデザイン、高齢者用マンマシンインターフェイス、認知心理学などの領域を始めました。卒業後は、非実体のデザインに対して興味（UIとUXなど）を持ち始めたため、ＩＴ業に入りUI Designerとなりました。しかし、分野が違うと全く見当が付かず、物事は馬鹿な者（筆者）の想像するような決して簡単なものではなく、勉強してきた設計理論を実務に応用するまではしばらく苦しい時期がありました。 ▲写真元:www.adhamdannaway.com ウェブページの基礎知識： 全くホームページデザインに触れたことがない人にとって、960grid systemという専門名詞を聞いても、その時頭の中には画面は全くないし、その他よくある元素用語も聞いても分かりません。チームのコミュニケーションを円滑にするため、私は時間を見つけてはエンジニアからこっそり勉強したり、知らないキーワードを耳にしたらすぐGoogleし、時には資料があまりにも多くて消化するのに何日もかかりました。しかし実際にやりながら勉強するという方法で早く成長できたので、おせっかいながらこの経験をみんなに共有します。 ▲写真元:http://960.gs/demo.html モジュール化、デザイン規範： まず、みなさんには先にモジュ―ル化とデザイン規範の概念を理解してもらいましょう。デザインの角度から見て、この２つの名詞は大部分が“ブランドの識別”上で応用されます。たとえばプラットフォーム全体の色、押しボタンの形式、フォントと間隔などを定義し、デザイナーはその定義に従ってプラットフォームの元素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) ゲームリストを時間もしくは人気度によって排列します。 終わりに ウェブサイト、ガイドマニュアル、もしくは売場の整備のいずれにしても、ほとんどがファイブ・ハット・ラックの法則を使って組織されています。ユーザーの情報に対する見方は組織方法によって影響されます。 ファイブ・ハット・ラックは多くある組織化方法の理論の一つにすぎません。最も重要なことは情報に対する設計者の分析能力です。情報を得た時、その情報が強調したいポイントは何かをまず思考しなければコンテンツとユーザーの最も効果的なコミュニケーションと交流はできません。

活字、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プラットフォームのアプリを開発後、別のプラットフォーム上でも使えて、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.

あなたは映画またはテレビゲームのオープニング映像で衝撃を受けたことはありますか？ あなたは広告のビジュアル効果または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