Mono IconsA simple, consistent open-source icon set designed to be used in a wide variety of digital products.
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
UI設計に興味がある人にオススメ！「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」 - ゲームアプリのUIデザイン
こんにちは、ちょこです！ 2020/6/5に発売された、 「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」 買いました！読みました！感想書きます！紹介します！ リンク：オブジェクト指向UIデザイン ▲こちらの書籍です こんな方に読んで欲しい！ 書籍の内容について 1：はじめに 2：オブジェクト指向UIについて 3：オブジェクト指向UIの練習問題 4：モードレスについて 5：参考文献 さいごに こんな方に読んで欲しい！ UIの中でも設計中心の話なので「グラフィックに興味あります！」という方よりは「設計や広義のデザインに興味あります！」という方にオススメしたいです。 使っている単語や言い回しが独特なので、一見して難解に見えるかもしれません。 しかし、主張自体はシンプルなものなので、理解できそうな部分だけマークしておけば良い気もします。 分からなかったら時間をおいて読み直すくらい
インタフェースデザインのお約束
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ
新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
Deceptive Patterns (aka Dark Patterns) - spreading awareness since 2010
Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something. For example:
副業マッチングサービスYOUTRUSTのホーム画面リデザインしてみた｜Taiki IKEDA｜note
どうも、イケダです。会社やチームなどという枠組みがだんだんぼやけてきて、どの組織でも「副業メンバー」の存在感は強まる一方だと思います。CTO+副業エンジニア数名というチーム構成によってプロダクトの初期フェーズを乗り越えたなんてスタートアップを何社も見てきました。 かつては採用サイトからアプローチした人材が「副業なら〜」という流れで副業人材の獲得に至るケースがほとんどだったのが、BOSYUを皮切りにはじめから副業での採用を積極的に行う組織が増えてきたような印象です。BOSYUはプラットフォームを持たないため副業という文脈でまとめて募集を見ることはできませんが、YOUTRUSTは繋がりから得られる信用というTwitterの良さを残しながらもそのペインを解消しうるサービスのように思っています、素敵。 実際のトップ画面がこちらなのですが今日はこれを勝手にリデザインしてみたいと思います。IAはガッツ
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer
色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーのセンスがなくても、デザイン的に合った組み合わせが分かります。
これだけ守れば見やすくなるデザインの基礎
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
Figmaでbootstrapを作ったので無料配布します。｜hikaru-takase /Loglass
仕事でbootstrapを使う機会があったので、これを機にfigmaでbootstrapデザインテンプレートを構築しました。Figmaとbootstrapの相性と生産性はめちゃくちゃ良いと感じてます。 エンジニアさん御用達！みんな大好きbootstrapは優れたコンポーネントを提供しており、その優れたbootstrapコンポーネントを共有&共同作業に特化したFigmaで事前にコンポーネント化しておく事で、デザイナー以外の人でもパーツの組み合わせを考えるだけで実際の画面に近いプロトタイプを構築することが可能になります。 細かなデザインやパーツ製作に注力しなくて良くなる分、プロジェクトの課題であるビジネス課題やシステム構成にフォーカスする事ができるのが特長です。優れたコンポーネントがデザインされていれば、デザイナー以外でも（チームで）UI/UX課題に対してアプローチしやすくなる思想や考え方は素
PWA開発にデザインツールFigmaを導入してみた感想：エンジニア編｜umesan
こんにちは、株式会社ミクシィでエンジニアをしているumesanです。 最近、「みんなでピック」というPWAの開発に携わりました。 このサービスを立ち上げるにあたり、Figmaを導入して幸せになれた話をエンジニア視点からしようと思います。 🔗「デザイナー編」はこちらから 「みんなでピック」とは スマートフォンアプリ「モンスターストライク スタジアム」で遊ぶ際に使えるキャラクター選択サービスです。大会で使用されていたキャラ選択システムが、スマートフォン向けになって誰でも使用できるようになりました！ 🔗「みんなでピック」リリースのお知らせ 🔍 導入の経緯 みんなでピックの企画が立ち上がった際、 下記のような少人数のメンバーが召集されました。 ・プランナー1名 ・デザイナー1名 ・フロントエンドエンジニア1名 ← 私 ・SRE 1名 ・QA 1名プランナーから企画を聞いた後、皆でアイデアを出
2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。 2018年人気だったすごいHTMLスニペットベスト【Codepen編】 #99 Animated CSS Seasons CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。 See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen. #97 A
コンテナのデザインパターンを学べる論文「Design patterns for container-based distributed systems」を読んだ - kakakakakku blog
2016年に USENIX Conference で発表された論文「Design patterns for container-based distributed systems」を読んだ．タイトルの通り，コンテナのデザインパターンがまとまっていて，これからコンテナ設計をする人も，既にコンテナを運用している人も，デザインパターンを学べるのは価値があると思う．一部ミスリードをしているかもしれない． Design patterns for container-based distributed systems 論文も公開されている． https://static.googleusercontent.com/media/research.google.com/ja//pubs/archive/45406.pdf パターン一覧 Single-container management pattern
プログラマが知っているとよい色(1)使い(JIS安全色) - Qiita
<この項は書きかけです。順次追記します。> This section is about to be written. I will add it little by little. 目次の前に(forward) この記事は、インターンシップの大学生の方に、「ゲームはするよりもゲームプログラムを書く方が楽しい」ということを説明した際に、その説明の一部として書いたものです。ゲームを卒業研究の題材にするなら、ゲームの中での色使いで、人による見え方の違いに配慮した改訂のあったJIS安全色(国際整合：ISO 3864-4:2011(Graphical symbols−Safety colours and safety signs−Part 4: Colorimetric and photometric properties of safety sign materials))を参考にするとよいよとい
(デザイン初心者向け)メルカリのデザインチュートリアルを作ってみた(ホーム画面UI編)｜ココディー｜note
(*この記事はデザイン未経験者や、非実務経験者の方に向けた実践記事です。) ✏️目次(再掲) 0. 前置き 1. メルカリとは 2. UIトレースをしてみる 3. デザイン観点の追加と、トレースの調整 4. 実際にメルカリのデザイナーに聞いてみた 5. まとめ・終わりに 0.前置きこんばんは、ココディーです。 前回、こんな記事を書いて、デザイナーや、デザイナーに未経験からなったという人達から、たくさんの反響をもらいました。ありがとうございました！ この記事の中で、問題視していたのは「デザイナーの総数を増やしていく必要性」でした。 その上で「ノンデザイナーからデザイナーになっていくプロセスが確立していない」ということを課題として、その解決の一つの方向性として「デザイナーに弟子入りするということ」を挙げていました。 とはいえ、「未経験からデザイナーのもとに弟子入りをする」という事も、デザイナー
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
consim. β
配色パターン見本40選：ベストな色の組み合わせ確認ツール
デザイン原則の実践｜dely design
