エンジニア以外にも知ってほしい Android の UI Components｜NUmero｜note
Android で使用する基本的な UI Components の紹介をしていこうと思います。 エンジニアが実装する時の Class 名と Material Design の名称が違うものもあるのですが、デザイナーは Material Design のガイドラインを参考にすることが多いと思うので、基本はガイドラインの名称を使っています。 # NavigationDrawer、BottomNavigation が抜けていたので追記しました (2018/10/27) OS 系 ・StatusBar ・NavigationBar ナビゲーション系 ・TopAppBar ・BottomAppBar ・NavigationDrawer ・BottomNavigation ・Tab ・BottomSheet コントロール系 ・Button ・FloatingActionButton (FAB) ・Sw
がんばらないデザインシステム - MOL
TLDR: Material Designをカスタマイズして利用した話 最近、デザインシステムって言葉よく聞きますよね。airbnbではDLSというデザインシステムを持っていたり、UberはBase Webというデザインシステムを持っていたり、アメリカ連邦政府も持ってたりします。国内のIT企業でもデザインシステムを作成しているとの事例もよく耳にします。 デザインシステムとは？ デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 デザインシステムの定義と作成方法、導入事例 | UX MILK では、デザインシステムってのはどういったもんなんでしょうか？これまでも、スタイルガイドやコンポーネントライブラリといったものは聞いたことがありますが、デザインシステムというのはそれらも含めたもう少し大きなモ
高齢者UIへの取り組みと自発的改善チームの作り方 / Elderly UI and Scrum Team
エンジニアからtoCサービスのプロダクトマネージャーになって気づいたサービス成長に必要なこと / product manager of consumer service
サービスのフェーズで変わるUIデザインの話｜クックパッドマート
こんにちは。 クックパッドマート開発チームの長野です。注文ユーザー向けアプリのプロダクトマネージャーをしています。 今日は、ここ数ヶ月の間にiOSアプリのホーム画面のデザインをがらりと変えていった話について、お話ししたいと思います。 サービス初期のUIは世界観推しでクックパッドマートアプリのホーム画面は、リリース当初から先日まで、出店いただいている販売ストア別に商品が並ぶUIでした。 ▲ 販売者さんのこだわりコメントとともに商品を並べるUI このような形にしていた背景にはいくつか理由があります。 まず、リリース当初は取り扱える商品数が限られていたこと。サービス開始当初は実績も前例もないサービスに協力してくださるパートナーを集めるのは本当に至難です。当然初期フェーズでは商品数は少なく、それでもサービスの魅力が伝わる見せ方を考える必要がありました。 また価格についても、普段利用しているスーパー
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
失敗しづらいUIへのアプローチ - Qiita
「やっぱり自分にはUIは無理だ」 そう思う人もいるかもしれません。 でもちょっと待ってください。 実際に私が経験した失敗事例を聞いてください。 それで学びがあれば儲けもの、なければ「自分よりショボい奴がいるw」と思って自信を取り戻してください。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です とあるサイト作成の駄目UI サイトを作っていきながらダメな点を指摘していきます。 指摘は、センスによる美しさ的な指摘ではなく、ルールベースで誰にでも出来る内容の指摘です。 ということで、画面上部にメインのナビゲーションがあるサイトを作ってみます。 いきなり駄目ですねw メニューの文字と背景のコントラス比が薄くて読みづらいです。 暗めの背景の場合は明るめの文字にしましょう。 詳しくはエンジニアが知っておきたい色についてのお話を見てください。
作業時間を短縮する。設計・UIデザイナー向け「絞り込み検索」の作り方 | A.C.O. Journal | A.C.O. Inc.
絞り込み検索の具体例。いくつかの条件を指定することで条件に当てはまるものだけをピックアップしてくれる。(https://www.uniqlo.com) 情報設計を担当している長谷川です。情報設計やUIデザインのプロセスでは限られた時間の中で画面構成や機能要件を作らなければいけないシーンがよくあると思います。 その際、毎回ゼロイチで設計をしているとクリエイティブに割く時間がなくなってしまうので、画面の要素や検討手順などパターン化されているものについては外部の記事や社内の過去プロジェクトのナレッジを参考にして時短化する必要があります。 私も以前クライアントワークでアプリの設計を担当した際に「絞り込み検索」の機能(フィルタとも呼ばれる)を短時間で設計しなければならないことがありました。 しかし、その当時、外部の参考記事を探してもフロントエンド向けの記事ばかりで、設計に関する記事がなかなか見当たな
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
UIデザインのバグを減らすための施策
UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。
はてなデザイナーの好きなWebサービス・アプリ（前編） - Hatena Design Group
こんにちわ。id:takuwologです。 はてなでは自社サービスの他にも様々なWebサービス・アプリのデザインを行っています。自分が携わっているサービスを好きなのはもちろんですが、それ以外にどんなWebサービスやアプリが好きなのか気になりませんか？ 僕は気になります！ そこで今回は、はてなデザイナーのお気に入りのWebサービス・アプリを紹介しようと思います。人数が多いので前編・後編と2回にわけてお送りします。 それではいってみましょう！！ id:ahchang の好きなWebサービス・アプリ このWebサービス・アプリの概要について簡単に説明してください ゲーマー向けボイス＆テキストチャット。パソコンブラウザ&アプリ/スマートフォンアプリ両方から無料で利用できます。 このWebサービス・アプリの好きなところと、自身に関するエピソード教えてください 遠く離れた複数人の友人たちと、ボイスチャ
「大規模なUI改修」を行うとどうなるか
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 （UI改修なので基本的にフロントエンドからみた内容） 機能実装を進めて行った結果、UIの実装が難しくなる。これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債（UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり）である場合も多い。 （ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい） そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 （サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない） 技術的負債の解消とデザイン負債の解消を目的とした「大規模なUI改修」が企画
駆け出しエンジニアのUI設計をちょっと公開してみる - Qiita
デザインでアプリを使いやすくしよう！ ①真似したい画面UIを探す！ →まずはデザインで参考にしたいアプリを探してみましょう！ Mobile Design Inspiration ●モダンデザインを中心的に紹介してるサイト https://inspirationmobile.tumblr.com/ Pinterest ●LPなどの制作のときに欠かせない超有名サービス https://www.pinterest.jp/pin/253609022752112669/ <他にもまとめてくれた便利な記事を参考してサイトからインスピレーションを貰おう！> こんな僕でもおしゃれなiOSアプリを閃く！インスピレーションを掻き立てるアプリデザインの参考サイト集1！ https://qiita.com/appwatcher/items/26f43ae8627474f34f31 アプリのUIデザインと配色パター
エンジニアがUIにフィードバックするうえで大切にしたい3つの観点｜Goodpatch Blog グッドパッチブログ
UIデザインの現場では、デザイナーとエンジニアの間で様々な問題が起きることがあります。いざエンジニアが実装しようとすると思わぬ矛盾が見つかったり、運用するとき予期せぬデータによって表示が崩れてしまったり…そうしたトラブルは、事前に実装・運用目線からフィードバックする機会があれば防げるかも知れません。そこで今回は、エンジニアが技術的な目線を持ってデザインにフィードバックするポイントをピックアップしてご紹介します。 筆者はWebアプリケーションを専門としており、本稿の内容も基本的にはWebサイト・Webアプリの構築を前提としています。ネイティヴアプリケーションについてはこの限りではない可能性があります。 なぜエンジニアがフィードバックをすべきなのか UIとは実装されて初めて完成されるものであり、実装するうえでの技術的な実現可能性や、デザインが破綻することなく運用に耐えうるか、といった視点で制作
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
ConstraintLayout
勘所 ConstraintLayoutは名前の通り, 制約によってレイアウトを組むものです. 今までのLinearLayoutやRelativeLayoutのようにViewの配置によるレイアウトから考え方を変えて, レイアウトを制約で定義することによってレスポンシブUIのような柔軟なUIや複雑なレイアウトをよりフラットなViewヒエラルキで実現できるようになり, パフォーマンスの向上が期待できます. ConstraintLayoutについては下記のDeveloperサイトにまとめられています. 導入方法まで含めた動画も公開されています. Build a Responsive UI with ConstraintLayout https://developer.android.com/training/constraint-layout/index.html Layout Editorの使い
UIでアイコンを使用するためのチェックリスト
アイコンは、GUIで最も頻繁に使用される要素の１つです。 どの様な要素があれば、よいアイコンなのでしょうか？ この記事ではあなたが使うアイコンがユーザーにとって機能するものとなるための簡単なチェックリストを紹介していきます。 １．認識しやすい 明瞭さは、優れたインターフェイスにおいて最も必要な要素です。しかし残念なことにそうでない場合が多々あります。 アイコンは何よりもまず意味が伝えられないといけません。アイコンが何を表しているのかが不明瞭な場合は、その意味がすぐに失われ、視覚的なノイズにしかなり得ません。 アイコンの優れているところは、ラベルを読まなくても意味が理解できるということです。 簡単なルールに従えば、意味が伝わらないアイコンの使用を避けることができるでしょう。 ユーザーになじみのあるアイコンを使用する ユーザーのアイコンへの理解は過去の経験に基づいています。 特殊なものではなく
ソリッドとアウトライン、どちらのアイコンが認識しやすいか
アイコンのスタイルをソリッドとアウトライン、どちらを使用するか決めなければならない場合がありませんか？ 好みで決めるという人もいるかもしれませんが、それぞれ分かりやすい場合と分かりにくい場合があります。 どのような場合にソリッドを使い、アウトラインを使うとよいのかを紹介します。 ちなみに下記は、左が過去のデザイン手法、右が現在のデザイン手法です。 Solid Vs. Outline Icons: Which Are Faster to Recognize? by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アイコンのスタイルがユーザビリティに与える影響 アイコンにおける特徴的な手がかり アウトラインアイコンが速い場合 ソリッドアイコンが速い場合 スタイルに違いがない場合 ボタンとしてのアイコンを使用す
アプリUIデザインで使ってるツールまとめ。｜あゆみ
2月から、実践型デザイン学習サービス『Cocoda!』で、毎日1つ出されるお題に沿ってアプリUIなどのデザインをするDaily Cocoda!にチャレンジしています。（今日までで25日連続ー！） Webデザインも昨年からやっているレベルなのですが、UIデザインはまたそれとは結構別物で、初心者ながら見よう見まねで頑張っています。 さてさて、私の練習作を見てくださった方からツイッターで「スマホの枠とかアイコンはどこで手に入れられるの？」という質問をもらったりしたので、今回は私がよくお世話になっているツールやサイトをまとめようと思います。 最後のデザインツール以外は全て無料です。 追記：この記事を書いた後にデザイナーになって1年半が経ち、アップデート版のような記事を書きました↓ 主に海外のサイトで無料で配布されているので、英語で 「"mockup" + "iphone" + "(sketchやp
イージングの基本 | Articles | web.dev
自然界において、ある地点から別の地点に直線的に動くものはありません。実際には、物体は動くにつれて加速または減速する傾向があります。人間の脳はこの種の動きを想定しているので、アニメーション化する際は、この点をうまく利用する必要があります。自然な動きにより、ユーザーがアプリを快適に使用できるようになり、ひいては全体的なエクスペリエンスの向上につながります。 概要 イージングを使用すると、アニメーションがより自然に感じられます。 UI 要素にイーズアウト アニメーションを選択する。 イーズインまたはイーズインアウトのアニメーションは、短くできる場合を除き使用を避けてください。エンドユーザーが感じる動きが鈍くなる傾向があります。 従来のアニメーションでは、ゆっくり開始して加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」と呼ばれます。ウェブで最もよく使われる用語は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI/UXが無意識に検索行動に与える影響について
