iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

インスタは「妄想の検索エンジン」メルカリは「通販の検索エンジン」としてつかう。女子大生が教えてくれたスマホで「ビキニ」を買うまでの心理と経路。 女子大生の方に「スマホで買い物する過程」を詳しく聞いてみました。インスタで妄想してからメルカリでモノを買う…？？ まず「インスタ検索」で妄想を膨らませる。 スマホをつかって「最近買ったモノ」って何かありますか？ どういう経緯で買ったのかも知りたいです。 女子大生： このまえ、海外旅行のために「ブラジリアンビキニ」っていう、露出度の低いビキニを買いました。 まず、最初にやったことは「インスタでの検索」ですね。ハッシュタグ「#ブラジリアンビキニ」で検索して、実際に着ている人の写真を見てみました。 その写真を見ながら「わたしが着ても似合うかな？」って妄想するんですよ。日本人の体型でも似合うかな、自分が着てもカワイイかなって。笑 たしかに、通販サイトにも写

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

検索結果ページを読み込むタイミングが早すぎたりページの表示位置を変更したりすると、絞り込みプロセスが分断される。検索フィルターやファセットは、ユーザーエクスペリエンスがスムーズになるようにデザインしよう。 User Intent Affects Filter Design by Katie Sherwin on February 7, 2016 日本語版2016年4月27日公開 検索フィルター（編注： 条件による絞り込み検索機能）は、おそらく、インターネットができて以来のWebの最高のイノベーションではないか。このコントロールのおかげで、旅行サイトやECサイトのような情報量の多いサイトで、干し草の山の中から針を見つけ出すかのような、見つけるのが困難な情報を即座に見つけることができるようになった。そして、検索結果を効率的に絞り込む機能によって、さまざまなブランドが評価を確立してきている。検索

ハンバーガーメニュー（3本線メニュー）を利用しているモバイルサイトでは、移動を助けるサポートがサイト全体にわたって必要である。ユーザーがサイトのメインナビゲーションを見つけられなかったり、利用しないことがあるかもしれないからだ。 Supporting Mobile Navigation in Spite of a Hamburger Menu by Amy Schade on August 16, 2015 日本語版2015年10月26日公開 モバイルデザインでは、ハンバーガーメニュー（3本線メニュー）は一般的なツールで、小さな画面上ではナビゲーション用スペースが限られている、という課題を解決してくれるものである。メニューの裏にナビゲーションを置くことで、それを利用可能な状態で維持しておけるというわけだ。しかし、これ以外の手段でも、ユーザーが必要な場合には彼らがナビゲーションにアクセスでき

ショートカットキーはマウスより遅い 2015.03.22 Updated by Ryo Shimizu on March 22, 2015, 08:29 am JST CTRL+Xでカット、CTRL+Vでペースト。 ショートカットキーの使い方を覚えると、パソコンの達人になったような気分になりますよね。 しかし、実際にはショートカットキーを使用すると、マウスでメニューから「編集」「ペースト」を選ぶよりも平均2秒も遅いのです。 「そんなバカな」 と思いますよね。 しかし、これはTogことブルース・トグナッツィーニがAppleでMacintoshの開発を担当した際に行った膨大な実験の結果、解ったことなのだそうです。 これはTogのWebページでも詳しく紹介されています。 しかし2秒とはとても信じられません。 むしろ逆のようにさえ感じます。 しかしTogの主張によれば、我々ユーザはショートカットキ

ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての

スマートウォッチアプリは、ナビゲーション要素よりもジェスチャーに頼り、不可欠なものを優先し、ハンドオフをサポートし、目的に適合した、単独で用をなすコンテンツを作り出す必要がある。 The Apple Watch: User-Experience Appraisal by Raluca Budiu on May 17, 2015 日本語版2015年6月22日公開 私は昨年、Samsung Galaxyシリーズのスマートウォッチ、Gearを分析して、「スマートウォッチこそが未来である。しかし、Samsung Galaxy Gearはまだその途中経過にすぎない」と書いた。今、Apple Watchが多数の技術系サイトであふれんばかりの熱狂を引き起こしている。にもかかわらず、残念ながらそのUIは我々を未来にそれほど近づけてくれるものではない。今回の記事ではApple Watchについての所見と、デ

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます はじめに 「製品やサービスにおいてユーザーインターフェース（User Interface：UI）は大事な要素である」「これからの時代はユーザー体験（User eXperience：UX）を考えた製品やサービス設計が重要である」というようなことが言われ始めて久しい。 しかし未だにその意味や意義がきちんと理解されずに「なんとなく」で語られている場面も多く見受けられる。 例えば、UIとUXの"U"はどちらもUserを指すためこの二つがまとめてUI/UXとして混同したまま語られることも多い。UIとUXは全く別の種類の概念を指す言葉であるが、その違いをきちんと説明できるだろうか。 エンドユーザーが直接購入する製品やサービスについて使われることが多

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。

大型のタッチスクリーン向けのデザインでは、入力とフォーカス、プライバシーに特に注意を払う必要がある。 Large Touchscreens: What's Different? by Amy Schade on May 3, 2015 日本語版2015年6月3日公開 いろいろなサイズや寸法の画面のためにデザインするときには、最も小さな画面に重点を置くのが一般的である。デザインやインタラクティブな要素をスマートフォンやスマートウォッチのような小画面のデバイスに適合させて、機能させる必要があるからである。多数のデザインチームが、こうした小型デバイスでうまく機能するよう、メニューやインタラクション、コンテンツ、エクスペリエンスのサイズ変更や最適化を重視している。 ところが、この他のタイプのデバイスでは画面の大型化とタッチ対応が進んでいる。ノートブックやデスクトップのモニターにもタッチ対応になって

モバイルユーザビリティについての最新の調査から、モバイルのUXが改善していることが明らかになった。レスポンシブデザインの流行の影響により、サイトやアプリでUI要素よりコンテンツが重視されるようになり、重要なコンテンツや機能がモバイルにも取り入れられるようになってきている。 The State of Mobile User Experience by Raluca Budiu on March 22, 2015 日本語版2015年4月20日公開 モバイルのUXガイドラインについてのレポート第3版では、この分野が過去7年間でどう変化してきたかについて、深く考えさせられた。2009年当時、ニールセン博士はモバイルユーザビリティという言葉は表現として矛盾していると判断した。つまり、ほとんどのモバイルサイトのユーザビリティはひどいものだった。デザイナーがデザイン空間を探索して、さまざまな選択肢を試し

右から左に走るマリオ、すごい違和感…。 80年代、90年代に多く登場した、画面を横にスクロールして移動するテレビゲームがありますよね。スーパーマリオの動きです。なんで全部左から右に進むのだろう？と不思議に思ったことありませんか？ あれ、なんとなーく進んでいたのではなかったのです。そこには科学的な根拠がありました。脳の好みなんだと。 私たちの脳は左から右への動きを好む傾向にある、そう語るのはランカスター大学の物理学者Peter Walker氏。これは、何千という画像の動き、人々の感想を分析したWalker氏の結論で、ネタ元のPerceptionにてそのレポートが発表されています。 レポートでは、Walker氏がこれはアートの世界の慣習によるものだと説いています。曰く｢アートの慣習は、写真や絵などの画像にある動きをどのように捉えてきたか？ 例えば、前進するとき前屈みになる動きがある、より速いス

Googleの新しいデザインガイドラインとして先ごろ発表された「マテリアルデザイン」。早速この新しいトレンドを取り入れた事例や、スムーズに導入するためのフレームワークが紹介されたりするのを見かけますが、UIの開発に携わるクリエイターとしては、取り入れる前にその思想をしっかりと理解しておく必要があります。というわけで、思想の背景やデザインのポイント、注意点をまとめてみました。 マテリアルデザインが定義された背景 Googleの生み出すサービスは、もはやスマートフォンやタブレットやPC（Android OS）だけに限られたものではなく、腕時計やメガネといったウェアラブル（Google glass、Google Fit）、ハンズオンでの操作を可能にする自動車用システム（Android Auto）などなど、様々な分野に広がっています。 今後も更に様々なスクリーン環境、操作環境が増え続けるのは確実で

エンジニアの黒田です。 この度Android版「マネーフォワード」アプリをマテリアルデザインにフルリニューアルしました。 そしてなんと！！！ おかげさまでGooglePlayの「2014年ベストアプリ」に選出いただきました！ GooglePlay 2014年ベストアプリ アプリのDLはこちらから 家計簿マネーフォワード【投資・資産管理】 この記事ではマテリアルデザイン対応するにあたり、考えたことや実際に書いたコード、使ったツールなどあれこれと書いてみたいと思います。 マテリアルデザインとは マテリアルデザインとはGoogleが発表した新たなデザインガイドラインです。 モバイルに限らず、AndroidWearやAndroidTVなど様々なデバイスでもユーザーに対して同じ体験を提供することを目的としています。 マテリアルデザインに関する細かい説明は割愛しますが、GoogleMapやGMailな

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると

2014年7月26日　ヒューマンインタフェース学会SIG-DE UXデザインセミナー＠IMJ ユーザー調査で得られた結果から、アイデア発想を行い、UXコンセプトツリーを作成を行うまでの一連の流れをワークショップで学びました。