The 12 Factor Design System - UGAP Engineer's Blog
デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまとめた方法論です。 それを真似て、自身の経験からデザインシステムとしてあるべき姿を12個にまとめてみました。 無理やりなところやコンテキストによるところがあると思いますが、半分ネタ半分本気で作りました。 文章の構成などもあえて真似て書いています。 何かの参考になればと思います。 はじめに デザインシステムは次のようなWebサービスやアプリを作り上げるための方法論です。 宣言的なフォーマットを使い、プロジェクトに新しく加わったメンバーが要する時間とコストを最小化する。 UIパーツの依存関係を
Go 製 UI ツールキット Fyne で始めるクロスプラットフォーム GUI アプリケーション開発 · Yutaka 🍊 Kato
こうやって分類すると、fyne というのはいったい何者なのだと思いませんか？ そう思ったわたしは実際に試用してみて気に入り、社内で使う簡単な GUI アプリの開発に採用、ほんの一瞬で目的通りのアプリを実際に作れてしまいました。 作ったアプリはのちほど紹介しますが、まずは基本的な使い方と多くの人が遭遇するであろうハマりポイントをいくつか紹介したいと思います。 ただし、現状 Go の GUI 領域はまだまだ発展途上です。Fyne においてもデータバインディングやアニメーション機能が未提供だったりと GUI ツールキットとしては大穴があいているのも事実。限界を承知の上で、過度に期待せずに読んでいただけたらと思います。 はじめかた 既に Go 言語の開発環境は整っている前提で始めたいと思います。整っていない方は Getting Started してください。 では早速コードから。”Hello, w
管理画面の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の中でも設計中心の話なので「グラフィックに興味あります！」という方よりは「設計や広義のデザインに興味あります！」という方にオススメしたいです。 使っている単語や言い回しが独特なので、一見して難解に見えるかもしれません。 しかし、主張自体はシンプルなものなので、理解できそうな部分だけマークしておけば良い気もします。 分からなかったら時間をおいて読み直すくらい
Say hello to the helpful Firebase Emulator - a local first UI to boost your productivity
Say hello to the helpful Firebase Emulator - a local first UI to boost your productivity Today we are extremely excited to introduce the Emulator UI to the Firebase community. The Emulator UI is a local web app that allows you to manage local emulators that make up the Firebase Local Emulator Suite. image of Emulator Suite overview Last year we released the Emulator Suite to simplify Firebase debu
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
インタフェースデザインのお約束
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ
新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
ダークモードもサポート！シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap
シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量（2.7Kb）のCSSフレームワークを紹介します。 プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。 Cutestrap Cutestrap -GitHub Cutestrapの特徴 Cutestrapのデモ Cutestrapの特徴 Cutestrapは、シンプルなAPIと堅牢なカスタマイズオプションを備え、最新の技術と未来を見据えた視点でコンテンツ重視のプログレッシブ・エンハンスメントを採用したCSSのフレームワークです。 シンプルで拡張性も備えたフレームワーク ライセンスはGNU GENERAL PUBLIC LICENSEで、個人でも商用のプロジェクトでも無料で利用できます。 ブラウザのサポート 以下のブラウザをサポートしています。
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はガッツ
Appleの新しいUI構築フレームワーク「SwiftUI」を学ぶための教材まとめ #WWDC19 | DevelopersIO
SwiftUI はWWDC 2019のキーノートで発表された iOS/MacアプリなどのUIを構築するためのフレームワーク です。デベロッパーフレンドリーなコーディング＆直感的なデザインツールの組み合わせで、超簡単にUIを構築できる特長があります。例えばこんな感じです。 import SwiftUI struct ContentView: View { var body: some View { Text("Turtle Rock") .font(.title) .color(.green) } } struct ContentView_Preview: PreviewProvider { static var previews: some View { ContentView() } } これまで以上に簡単にUIが構築できることから、発表後iOSエンジニア界隈ではバズワードになっています
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Guideline - Component Standardization
https://csslayout.io/
Headless UI
User experience monitoring with Datadog Synthetic browser tests
MSOutlookit
今、我々は、 GUI の設計について 何を考えるべきか
