邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
強度の高いUIをデザインする｜池内健一
デザイナーの池内（@KD6JOE）です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
HOME'SのUIトレースをしてみた｜綿貫 佳祐 / Qiita
ここ最近ビジュアル制作についてのインプットが少ないなと思って実施しました。 LIFULL HOME'Sのweb版をトレースしています。 トレース元として選んだ理由は LIFULLさんは私が働いている会社と事業領域が似ていて、かつブランディングにも力を入れている。 ビジュアル面、ブランディング面は私の会社では全然力を入れられていないが、LIFULLさんをベンチマークすることで何か発見があるはず。といったものです。 それでは以下に学んだ内容をまとめてみます。 タイポグラフィ font-familyは基本的にヒラギノ角ゴシックです。 ごくごく一部だけSF Proが使われていました。 プレースホルダー内など、普通に指定したfont-familyが当たらずにiPhoneの初期設定としてSF Proが出ちゃってるのかな？と思います。 font-sizeはほぼ10, 12, 14, 16, 18, 20
新人UIデザイナーとエンジニアのための、デザインで即戦力になるための4つのトレーニング
4月になり、新卒で会社に入られた方や転職して新しい環境に移られた方がたくさんいらっしゃると思います。おめでとうございます。今回の記事では、新たな環境でUIデザインに取り組むデザイナーの方や業務でデザインの知見が求められるエンジニアの方に向けて、即使える知識やセンスを磨く方法をまとめてみました。 デザインの基礎、４大原則を知る デザインの４大原則は、『ノンデザイナーズ・デザインブック [第4版]』という本に書かれている重要なキーワードです。この４つを組み合わせることによって、誰にでもカッコイイ資料やWebサイト、アプリのUIを考えることが可能です。それが以下の４つです。 ・近接 ・整列 ・強弱 ・反復 ふだんの生活の中でこの４つを意識しながら色々なものを見てみると、それを作ったデザイナーの意図が感じられるようになってくるでしょう。 ノンデザイナーズ・デザインブック [第4版] プラットフォー
なぜ急成長しているスタートアップではUI/UXが優れたサービスを作れるのか？｜～高垣のりこ～自分100年戦略ノート
本日は、LBSのEntrepreneurship Clubが主催するMONZO社のプレゼンがあったので、聞きに行ってきました。MONZOはRevolutと並ぶ、ロンドンを拠点とするFintechの雄で、オンライン銀行口座やコンタクトレスデビットカードといった一般ユーザー向けの金融サービスを提供する企業です。 （HPはこちら→https://monzo.com/） User Interface（UI：ユーザーがサービスを使用する際に触れるウェブサイトやアプリのデザイン）やUser Experience（UX：ユーザーが製品・サービスを使用する経験）に定評があり、LBSの学生にもユーザーが沢山いる有名な企業です。 さて、ユーザーにとって良いデザインのプロダクトを作ることを目指し、実際に非常に使いやすいアプリを作っているMonzoはどうやって優れたアプリを作っているのでしょうか。 答えは「徹底的
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
スターからハートに変更するのはなぜか？｜深津 貴之 (fladdict)
小さいですが、重要な変更のお知らせ。 noteの「スキ」アイコンが、スターからハートに変更されました。 これはnote全体のマナーを、モバイルの標準に合わせていく方針の一環です。 一般的なモバイルアプリでのマナー スター = 評価 ハート = ライク, お気に入り, リコメンド なぜ標準マナーに合わせる必要があるのか？ サービスが標準マナーに従うことで、ユーザーは直感的に操作できるようになります。学習することが少なくなるので、認知的な負担が軽減されるわけです。結果、ユーザーはスムーズにサービスを使えるようになり、継続率の上昇が期待されます。 今回の変更は、そのための小さな一歩です。今後、noteの中で変にオリジナリティが必要のない部分は、積極的にスタンダードに寄せていきます（その分、真に重要な部分にオリジナリティをつぎ込みます）。 短期的には軽微な混乱が発生するかもしれません。すぐになれる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
