ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
UIがエロいMac App集
UIがとてもイケている『エロい』Macアプリを適当に挙げようと思う。 私が考えるエロいUIの条件： AppKitを利用したCocoa AppデスクトップアプリWebView, Electron, Flash, Javaなどの技術で構築しないHIGを守る／Apple純正アプリをリスペクトするWindowsのUIを基準にしないドラッグアンドドロップなど機能的にもMac OSの仕組みに従う独自UIで汚染しすぎないMac OSらしい色使いMac OSらしいアニメーション／インタラクションMac OSらしい言語表現（例えば「ウインドウ」「環境設定...」など）Mac OSらしいフォント（San Francisco, Helvetica Neue, Lucida Grande, Hiragino Sans, Menlo, Monaco...）標準的なメニューバーおよびキーボードショートカットよって例え
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
UIデザインという仕事 | ツクロア - DESIGN LAB
先日、東京造形大の授業でゲスト講義をする機会をいただき、メディア概論を履修している学生たちに「UIデザインとは？」という話をし、実際に体験してもらったので、せっかくなのでその話を少しだけしようとおもいます。 あるあるで有名な話だが、「デザイナーです」というと、「え、絵をかけるんですか？すごいですね」と返されることはいまでもよくある。それぐらい日本での「デザイン」という言葉はカオスだと思っている。 最近でこそ（わたしのまわりでは）あまりいう人はいないが、「Webデザイナー＝Photoshopでパーツをつくる人」と思っている人も、少なからずいる。 でも、UIデザインはそんなかんたんなものではない。 UIとは ではここで、改めてUIについて考えてみる。 UIとは、「ユーザーインターフェース」です。 ユーザインタフェース (英: User Interface, UI) は、機械、特にコンピュータと
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
iOS ヒューマンインターフェースの原則 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が
Instagramの利用率を大きくアップさせた、わずかなコードの変更とは？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
上： iOSのInstagramアプリ上の写真家Lisa Bettany氏(@mostlylisa)のページ Image Credit: Ken Yeung/VentureBeat Facebook が所有する写真共有アプリ Instagram を開発するソフトウェアエンジニアたちは、アプリのパフォーマンスをいかに改善できるか常に模索している。パフォーマンスの改善というのは、完璧主義の行いのようにも聞こえるかもしれない。だが、実際にそうした行為が重要な指標の改善にもつながる。たとえば、ユーザーの利用が増えるというように。 それこそ、まさに最近起きたことだ。エンジニアは、モバイル端末上でInstagramの各写真に20個のコメントを表示させるという機能に疑問を抱き始めた（「全てのコメントを見る」をタップしたときに、コメントがより速くロードされるように）。彼らは、コメントの数を3つに減らす決断
あなたは今も犯している！？モバイルUXの7つの失敗 - ふろしき Blog
ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ
「iOSってなんですか？」という質問が来てハッとした
アプリのUIデザインで一番重要なのは、ボタンやメッセージに使われる言葉だと思う。 ここでは、他の文章と違い、権威付けや、自分を賢く見せるためにあえて難しい言葉を使う人は皆無だと思う。とにかく分かりやすく、できるだけ短い方がいい。 でも、これが簡単なようで、本当に難しい。 アイコンで代替できないか まず最初に考えるのが、文字ボタンをアイコンに変更できないかということ。アイコンに変えられるなら、世界中の人がわかるし、翻訳の手間も減る。 でも、一般的に普及しているアイコンと、していないアイコンがある。例えば、進む戻るの矢印アイコンならば分かりやすいけど、あまり見慣れないアイコンになった瞬間、押してみないとわからない状態が発生する。 アイコンを使う時は、本当に誰でもわかるアイコンかを何度も考える必要がある。押してみないとよくわからない状態は良くない。 短くするのは難しい まず、メッセージは短くない
SPECTRE // UI
Rushes were tasked with designing and creating all on-set UI screen graphics for SPECTRE. Over a 13 month period of working on the 24th Bond film, from pre-production through to post, in total Rushes MGFX Studio created more than an hours’ worth of unique animations and motion graphic sequences that furnished over 300 screens, across 23 scenes in the film. Rushes are proud to be part of the franc
プログラマーがSketch3を使ってみた
最近はあるアプリのUIを色々検討中でして、Sketchとにらめっこすることが多い。 Sketch は画像編集アプリで、買い切りの$99の製品。 Adobe製品を使うほどでもないけど、そこそこ画像を作りたい場面もある...のでこれを使っています。 他のツールを全然使っていないので比較はできないですが、 Sketch便利機能を紹介 @iOSアプリ開発プログラマーの目線 1. 複数サイズの画像を一気に出力できる @2x, @3x とサイズの違う画像を用意するのが簡単。 出力メニューはこんな感じになっていて、2倍だったらファイルのSuffixに@2xをつけるなどの設定ができます。 一度設定すれば、再出力する際も Export ボタンを押すだけ。 画像の修正を繰り返す私にとっては、とても嬉しい機能。 1倍、2倍以外にも 幅が120pxで...という指定も可能です。 2. 角丸を作るのが簡単 少し角丸
Your UI isn’t a Disney Movie
My previous short article about gratuitous animation really struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations with overly animated UIs. To be clear, I’m not anti motion design for UIs. Far from it. I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is
インターフェイスの説明書|Mac Fan
編集部の倉庫から、「Apple Human Interface Guidelines:The Apple Desktop Interface」という本が発掘されました。 出版された年がわかりませんが、巻末の記述を見ると「Macintosh Plusで作られています」と書いてあることから、1986年以降に発売されたものでしょう。 これは当時のMacintoshのために作られたヒューマン・インターフェイスのガイドラインです。ヒューマン・インターフェイスとは、一言でいえば「操作感・操作性」のこと。この本は「ボタンをどこに配置するか」「『OK』ボタンはどのように使うのか」など、操作の基礎を規定したガイドラインで、Mac用のソフトの開発者はこの本を読んで、開発するソフトのインターフェイスを作っていました。 このガイドラインがあったおかげで、Mac OSでは搭載された標準ソフトとサードパーティ製ソフト
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの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要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
#Illustrator と小数と私
Illustrator は印刷物で使う「ミリ」や「インチ」を使用するイメージが強いと思いますが、ウェブデザインやアプリケーションデザインなど、ディスプレイで表示することが目的のデザインを行う場合、一般的に「ピクセル」という単位をベースに作業を行います。この「ピクセル」をベースにした作業で一番重要なポイントが「数値の小数」です。今回は、Illustrator のピクセル単位で作業するときに発生する小数について、レベルにあわせてまとめてみます。（以下、Illustrator CC 2014 で検証した結果です。） Illustrator と小数値 入門編 小数が入るとどうなるの まず、100px × 100px の矩形を描いてみます。この矩形の座標を小数にし、100%表示してみましょう。 座標に小数が入っている矩形 このように、端に意図しないアンチエイリアス（疑似的になめらかにみせるためのボケ
UI考（番外編） AppleWatchについて、あまり語られてない視点 | fladdict
AppleWatchの発売まであと10日。「Apple Watch誰もつかわねーよ！」「いやiPhoneのときもみんなそういってたじゃん」という論争される今日この頃。 色々な立ち位置から多用な意見が展開されているが、いくつか大きなことが見落とされてると思う。特にスマホのUIUX系文脈で、一目瞭然性（グランサビリティ）とかワンタップといった、Appleのガイドラインをコピペしてるだけの人が多い印象。個人的に、もう少し気になっていることについてメモ。 「iPhoneは片手で操作できる」 vs 「AppleWatchは操作に両手を使う」 まず、Apple Wach本当に手早くハンディなのかについて。 Apple Wachの利点は、1アクションで「画面を表示できる」ことであり、1アクションで「操作できる」ではない。見落とされている点は、iPhoneは片手で操作できるということ。でもApple Wa
iOSカメラフィルターアプリをつくるならチェック！撮影画面UIまとめ
カメラアプリをつくる上で避けて通れない 撮影画面のお話。 こんにちは！ わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。 去年から OH (http://wariemon.com) という名前でも活動中です。 昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、もう触りましたか？ FILTERS が気になるかたはこちら！ 今回は、フィルターカメラアプリの制作時に役立つ 「カメラフィルターアプリの撮影画面UIまとめ」のお話をします！ あなたのつくりたいカメラアプリはどのパターン？ カメラフィルターアプリにはまず大きくこの2パターンが存在します！ この2パターンに分類して、UIの参考になりそうなアプリをまとめていきます。 1. フィルターをかけながら撮影できるアプリ 2. 撮影後にフィルター（編集）をかけるアプリ あなたのつくりたいカメラアプリはどち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【連載】Amebaクリエイティブディレクターが語るスマホアプリのデザイントレンド - MdN Design Interactive
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
