UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編- #Zaim｜akatsuki174
なぜこの記事を書くのかこんにちは。Zaim で iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、「iOS エンジニア以外の人もこれを覚えておくと良いかも！」と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UI をもっと理解したい方は、こちらも頭に入れておくと良いと思います。 注： ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。 ・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。 ・ほとんどHuman Interface Guidelines（以下 HIG）から情報を引
【アンケート企画】あなたのスマホの持ち方教えてください！2017【結果と考察編】
先月行った「あなたのスマホの持ち方教えてください！」のアンケートの結果を発表します。ご協力いただいた方はありがとうございました。 今回は341の回答をいただきました。あまり深くは考察しませんが、結果を1つずつ見ていこうと思います。
エンジニアにUIが分かりにくいと言われた - 並び替えボタン編｜ANDPAD Design Team｜note
ANDPADでデザインを担当している後藤です。 エンジニア 「このボタン、分かりにくいですね」 開発を進めてて、エンジニアにこう言われたことはありませんか？ 「このボタンって、どう動くんですか？」 「このボタン、気がつきにくいですね。」 そういったときに、どのようにUIの意思決定をしたか、説明して納得してもらう必要があります。 今回は「並び替えボタン」で起きたケースを紹介します。 あまり目立たない機能ですが、データを整理することが多いBtoB向けサービスでは、要望が多い機能じゃないでしょうか。 【目次】 ・どこが分かりにくかったか？ ・エンジニアとデザイナーの通る思考回路は違う ・エンジニアの考えた解決策 ・画面上における機能の優先順位 ・機能単体のゴール ・まとめ どこが分かりにくかったか？実際の画面がこちらです。（※こちらは現在開発中の機能になります） さて、どこが分かりにくかったでし
コマンドラインツールを作るときに参考にしている資料 | SOTA
コマンドラインツールについて語るときに僕の語ること - YAPC::Asia Tokyo 2014 コマンドラインツールが好きで昔からつくってきた． 今年のYAPCで，そのコマンドラインツールをつくるときにどういうことを意識して作っているのか？どのような流れで開発しているのか？といったことを語る機会をもらえた． 具体的な内容については，是非トークを聴きに来てもらうとして， スライドをつくるにあったって過去に読んだ資料や，よく参考にしている記事を集め直したので，その一部を参考資料としてまとめておく． UNIXという考え方 UNIXという考え方 Mike GancarzによるUNIXの思想や哲学をまとめた本．古いが全然色あせてない． コマンドラインツールの作り方を書いた本ではないが，これらの思想の上で動くツールはこの思想に準拠して作られるべきだと思う．何度も読んで考え方を染み付かせた． 小さい
Good to great UI animation tips
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon. To create these animations, I followed the guidelines from
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
Javaで簡単にUIテストを書けるSelenideを使おう～Selenideの概要とテストの保守性を上げるPage Objectパターンの紹介
illustration by iwasawa Selenideとは Selenideとは、エストニアにあるCodeborne社のAndrei Solntsev氏を中心に開発が行われているWebDriverのJavaラッパーの一つで、同じJavaで実装されたFluentLeniumやGroovyでのGebに相当するものです。WebDriverはプログラムからブラウザを操作するAPIを提供していますが、基本的に低レベルAPIで自動テストを記述するには大量のコードが必要となります。SelenideはWebDriverを基盤としながら高水準APIを提供することで、WebDriverを素で使うよりも容易にかつ記述量を抑えてテストを記述することができます。 Selenideの特徴 以下ではSelenideの特徴を述べていきます。これらの中には上記で挙げたFluentLeniumやGebでも提供されて
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手..
家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手にとらない。 Androidは論外だった。 アプリにはだいたい主要な画面が4つか5つほどあり、簡単にいうとその画面を行き来しながら利用する物が多い。 年寄りにとって一番利用しやすいのは画面がリニアに進むということだ。 アプリをタップしたら常に最初にメニュー画面、メニューからボタンを押したら目的の画面のように進まなければ、そこで理解がむずかしくなる。 アプリによってはアプリタップ後、最後の画面を表示してくれる物も多い。そういうのは年寄りには難しい。まずは元に戻りたいと思うようだ。 スタート画面が設定されているのもあればない物もある。 アプリによってはしばらく時間があると普段とは違うメッセージが出る物もある。 タップでボタンが表示される奴は論外だ。タップの仕方によりボタンが出ない・出るで教える最中に喧嘩になる。 タップ
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
今時のデザイン（UIとか設計）ってわかり難くない？
フラットデザインの流行以降思うようになってはいたんだけど、iOS10になってさらに強く感じてる。 自分やこの記事を見るような、そのデザイン以前から使ってる人やPCスマホ等に慣れてる人なら感覚的に使えるし大した問題はないんだけど、 還暦をとっくに過ぎたうちの父親（PCやiPadでニュースを見たりはできる程度）のような人にとってはどんどんわかり難くなっていると思う。 さっき父が仕事（自営業）で紙の書類と地図を取引先にメールで送りたいからやり方教えてくれと言われて教えようとしたんだよね。 んでスマホやタブレットのEvernoteや専用アプリとか使えば良いんだけど、とりあえず普通にiPadのカメラで撮ってそのまま添付するのが一番簡単かなと思って 写真撮らせてGmail起動させたまではいいけど、添付ボタンは薄い灰色のクリップアイコンだけだしカメラロールから写真を選択するのはなぜか最後英語だし、 送信
プロジェクト炎上を防ぐ魔法のアイテム、100徳ナイフを買ったお話２ | fladdict
こんにちは、日本で唯一の100徳ナイフコレクター（推定）兼、UIデザインとかしてる fladdictです。 先日、会社の機材として新しい100徳ナイフを購入しました。 via mantiquesmodern ゾーリンゲンのナイフマイスター、P.LANGが自ら研ぎあげた、最高級の一品です。重量950g、お値段なんと120万円。今年のお小遣いが全部すっ飛びました。 馬鹿と思われるこのナイフ、実はサービスの炎上やデスマーチを防ぐ神ツールだったりします。 このナイフをクライアントの偉い人に見せると、あら不思議！ 「弊社のアプリをこうしては絶対にならない！」「この状況を脱しなければならない！」という号令が、ほぼ100%トップダウンで発動します。 一目瞭然なほど馬鹿で、巨大で、非実用的で、そして無駄に高価であればあるほどに意味がある。これを見せた時、「多機能もすぎれば毒となる」という言質に説得力が生ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務系システムは『イケてるフラットデザイン』だと使いにくい？現場が本当に必要だった物との比較
ユーザーインターフェイスのデザインのヒント - Apple Developer
The Blog | Welcome to Adobe Blog
UI Movement - The best UI design inspiration, every day
マテリアル デザインのガイドライン（日本語版）
