http://www.life-is-bitter.com/entry/ui_checklist
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
スターからハートに変更するのはなぜか？｜深津 貴之 (fladdict)
小さいですが、重要な変更のお知らせ。 noteの「スキ」アイコンが、スターからハートに変更されました。 これはnote全体のマナーを、モバイルの標準に合わせていく方針の一環です。 一般的なモバイルアプリでのマナー スター = 評価 ハート = ライク, お気に入り, リコメンド なぜ標準マナーに合わせる必要があるのか？ サービスが標準マナーに従うことで、ユーザーは直感的に操作できるようになります。学習することが少なくなるので、認知的な負担が軽減されるわけです。結果、ユーザーはスムーズにサービスを使えるようになり、継続率の上昇が期待されます。 今回の変更は、そのための小さな一歩です。今後、noteの中で変にオリジナリティが必要のない部分は、積極的にスタンダードに寄せていきます（その分、真に重要な部分にオリジナリティをつぎ込みます）。 短期的には軽微な混乱が発生するかもしれません。すぐになれる
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
モバイルアプリにおける５つのアニメーションの活用法
10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
第三話: デザイナーになりたい私が最初に学んだのはコーディングだった｜笠井枝理依｜note
2013年の4月､彼のもとで転職準備をするために､私はシリコンバレーに戻ってきた｡しかしその出鼻をくじくように入国審査官が立ちふさがり､晴れやかな気分になるどころか待合室のベンチで怯えることになってしまった｡パスポートを握りしめる手が汗ばむ｡ 無職の人間が､仕事や学校のために来たわけではなく､その上恋人の元で観光ビザでいられる3ヶ月全てを過ごすなどとおどおどした様子で言うものだから､そのままアメリカに不法滞在するのではと怪しまれてしまったのだ｡口角のすっかり下がった入国審査官が彼に電話するのを､私は黙って見つめるしかなかった｡ しばらく電話して入国審査官も納得したようだ｡ようやく待合室から解放されてバゲッジクレームに戻ると､他の乗客はもうすっかりいなくなっていた｡私のスーツケースだけがぽつんと残っているのを見て情けない気持ちでいっぱいになる｡そうして重たい荷物を引きずり到着ロビーで彼を見つ
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
女子高校生に人気のアプリ、『minimo』。ホットペッパー・ビューティーをディスラプトできるか
女子高校生に人気のアプリ、『minimo』。ホットペッパー・ビューティーをディスラプトできるか 日本国内外のProductを取り上げ、その展望を考察する、不定期連載。名前はProductAnalysisとでもしときます。 ProductAnalysis No.1は東洋経済の『女子高生が｢節約できるアプリ｣に夢中なワケ』でも紹介されたmixiが運営するminimo。 https://minimodel.jp/実際に使ってみて、美容師さんに話を聞いたが、驚きだった。 ・新規顧客獲得の経路がminimoとホットペッパー・ビューティーで半々 ・minimoのユーザー層は10~20代 ・ホットペッパー・ビューティー利用者は30代が多い 「ホットペッパー・ビューティーは若い女性にリーチできていない・・・？」 媒体の変化 （紙->PC->スマホ）の中で、ホットペッパー・ビューティーがリーチできていないス
UI設計とウンコの話。 - 笑顔を創りたいWebディレクターの日常
なんかすげー前の記事がバズっていて、なにか非常に自分がまっとうな人間な気がしてきて怖いので、バランスをとるために非常にバカな記事を書いておこうと思います。なんだそれって思ってるでしょうけど僕が一番そう思ってるのでわかってください（何を）。 というわけで、今日はUI設計とウンコの関係についての話。どんなわけだよ、ほんと。 ※ぜんぜん関係ないけどぱくたそさんにはキレイなトイレの写真が無かったので、増やしておくといいと思います（謎）ちなみに上の写真は足成さんより。 そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 まあ、ほんとにウンコの話をするわけではないですね（そりゃそうだ）。 ここで一つ質問。 「TOPページに来訪（ランディング）したユーザーの大半がグローバルナビで次のページに遷移した」 これは、良いことでしょうか悪いことでしょうか？ 僕の答えは「悪いこと」です。 TOPペー
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
Apple、Googleに続くデザインガイドライン、『Microsoft Design』について | DeNA DESIGN BLOG
こんにちは、今年度に新卒入社したデザイン戦略室デザイナーの貴島と申します。本稿ではデザインガイドラインに焦点を当ててご紹介をしたいと思います。 私達がアプリの設計をする上で最初に行うべきことは、プラットフォームのデザインガイドラインを理解・熟知することでしょう。 Apple社は『iOSヒューマンインターフェイスガイドライン』、Google社は『マテリアル デザイン』といった独自のデザインガイドラインを設けており、プラットフォーム上のアプリに対してデザインガイドラインに沿った設計を推奨しています。 またデザインガイドラインは端末毎の差異を含めて画面構成が設計されているため、結果的に各OSに合わせた最適なユーザーインタフェイスの設計を可能にします。 ( ※マテリアル デザイン』日本語版のガイドライン(PDF形式)が先日公開されました。 ) マテリアル – 日本語 - Material Desi
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
これからのUXデザインにおけるモーションデザインの重要性
モーションデザインとは空間の関係性や、機能性、あるいは意図を美しく流動的に説明する際に使われます。「モーション」というと大げさに聞こえるかもしれませんが、効果的に使用したものはさりげなく自然なものです。よく考えられたモーションデザインは、従来のデザイン要素よりもよりUXを高めることができるはずです。 今回はモーションデザインの基礎や、いつ、そしてなぜモーションデザインを使うべきなのか、そしてより良いUXのためにどうモーションデザインを使えば良いのかをお話ししましょう。 モーションを基盤としたデザイン モーションは物語を伝えることができます。アプリがどのように構成され、何ができるのかを表現できるのです。モーションはナビゲーションを再定義し、インタラクションに新たな深度をもたらし、より自然な体験を作り出すのです。クリックしたボタン、画面のトランジションのひとつひとつに物語があることを、モーショ
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
Web新時代！心地よいアニメーションを実現する6つの基本テクニックまとめ
機能的なアニメーション（英: Functional Animation）とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。 インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。 今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。 詳細は以下から。 01. レスポンシブなアニメーション UIデザインにおいてビジュアル・フィードバック（英: Visual Fee
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
