がんばらないデザインシステム - MOL
TLDR: Material Designをカスタマイズして利用した話 最近、デザインシステムって言葉よく聞きますよね。airbnbではDLSというデザインシステムを持っていたり、UberはBase Webというデザインシステムを持っていたり、アメリカ連邦政府も持ってたりします。国内のIT企業でもデザインシステムを作成しているとの事例もよく耳にします。 デザインシステムとは？ デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 デザインシステムの定義と作成方法、導入事例 | UX MILK では、デザインシステムってのはどういったもんなんでしょうか？これまでも、スタイルガイドやコンポーネントライブラリといったものは聞いたことがありますが、デザインシステムというのはそれらも含めたもう少し大きなモ
サービスのフェーズで変わるUIデザインの話｜クックパッドマート
こんにちは。 クックパッドマート開発チームの長野です。注文ユーザー向けアプリのプロダクトマネージャーをしています。 今日は、ここ数ヶ月の間にiOSアプリのホーム画面のデザインをがらりと変えていった話について、お話ししたいと思います。 サービス初期のUIは世界観推しでクックパッドマートアプリのホーム画面は、リリース当初から先日まで、出店いただいている販売ストア別に商品が並ぶUIでした。 ▲ 販売者さんのこだわりコメントとともに商品を並べるUI このような形にしていた背景にはいくつか理由があります。 まず、リリース当初は取り扱える商品数が限られていたこと。サービス開始当初は実績も前例もないサービスに協力してくださるパートナーを集めるのは本当に至難です。当然初期フェーズでは商品数は少なく、それでもサービスの魅力が伝わる見せ方を考える必要がありました。 また価格についても、普段利用しているスーパー
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
作業時間を短縮する。設計・UIデザイナー向け「絞り込み検索」の作り方 | A.C.O. Journal | A.C.O. Inc.
絞り込み検索の具体例。いくつかの条件を指定することで条件に当てはまるものだけをピックアップしてくれる。(https://www.uniqlo.com) 情報設計を担当している長谷川です。情報設計やUIデザインのプロセスでは限られた時間の中で画面構成や機能要件を作らなければいけないシーンがよくあると思います。 その際、毎回ゼロイチで設計をしているとクリエイティブに割く時間がなくなってしまうので、画面の要素や検討手順などパターン化されているものについては外部の記事や社内の過去プロジェクトのナレッジを参考にして時短化する必要があります。 私も以前クライアントワークでアプリの設計を担当した際に「絞り込み検索」の機能(フィルタとも呼ばれる)を短時間で設計しなければならないことがありました。 しかし、その当時、外部の参考記事を探してもフロントエンド向けの記事ばかりで、設計に関する記事がなかなか見当たな
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
駆け出しエンジニアの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デザインと配色パター
これだけ守れば見やすくなるデザインの基礎
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
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
Figmaを半年使って分かった便利なところ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 この記事はDesign Tools Advent Calendar 2018の6日目の記事になります。忙しい年末ということで気軽に読める記事にしてみました。 さて、以前ブログでsketchからFigmaに移行した話をしたのですが、思っていたよりも反響が多く各所から参考にしましたと声をいただきました。 完全に予想外でしたが誰かの参考になったのなら嬉しい限りでございます...ともあれ、あれから時間も経ったので実際どうだったのか？運用してからの知見をご紹介したいと思います。 チームメンバーへの共有スピードが速いFigmaを使う理由はこれだけで十分では？と思えるくらい「共有」がしやすいです。 SlackにもGithubにもFigmaのURLを貼るだけでUIデザインとプロトタイプの共有ができてしまい、エンジニアとのコミュニケーションでは相手の画面を
サンフランシスコのUXデザイナーが体験した日本から学ぶべきUXとは デザイン会社 ビートラックス: ブログ
筆者は普段btraxのサンフランシスコオフィスで働くUXデザイナーだ。これまでに日本を訪れたことはまだ1度しかないのだが、今年の6月、日本に出張するチャンスが巡ってきた。 Suicaへのチャージからフードトラックでお弁当を買うことに至るまで、日本ではあらゆる購買体験の設計がとても優れていることを感じた。 また、普段生活しているサンフランシスコでの自然で気にすることのないようなやりとりが、いかに自分が「当然物事はこうなるだろう」と期待するメンタルモデルにいかに引っ張られていたかもわかった。 日本での体験はサンフランシスコでよりもはるかにスムーズ日本の人は明らかにサンフランシスコの人とは異なる独自のメンタルモデルを持っている。 滞在中に時々不便な思いをすることはあったが、地下鉄に乗ったりレストランで食事をしたりすることはサンフランシスコでの同じ体験よりもはるかにスムーズで気持ちのよいものだった
オブジェクトベースなUIデザイン｜Yoko Nishida｜note
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
爆速XDによる「目線合わせシート」でチームの共通認識作り｜macheri｜note
こんにちは。まちえり（@macheri_me）です。note×Adobe XDの企画がスタートしましたね。アイコンから滲み出るAdobe XD芸人の私、参加しないわけにはいかないだろう(ﾟДﾟ)ッ！ 私が思う #できるぞAdobeXD とは一言で言うと「デザインだけじゃない。誰にでも爆速共有！チーム全体での認識合わせに最適！」です。 今日はAdobe XD(以下=XD)の活用例について書きつつ、デザインプロセスの中で大切にしている「チームで同じ認識を持つためにデザイナーが率先してやること」を中心にご紹介します。 特に大規模大人数、多職種と協力するようなチームで制作をしているデザイナーさんにおすすめしたいXD活用法です。 適材適所。XDは早く全員と認識合わせをしたい時に活用●改めて振り返る「XDとSketchどちらが最適か？」の疑問ポイント Sketchユーザー多いですね。そして「XDとどち
デザイン初学者がUIトレースを１ヶ月続けてみた｜きなこ
こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. UIトレースを始めたきっかけ 2. 最
【深く考えるシリーズ】メルカリの UI がダサい理由を考えてみた。｜あき - 良いもの作って正しく届ける
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね（IPOの申し込み落選してしまいました、残念）。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの？」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
