UIデザインをはじめよう
2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。 UIデザインをはじめるために必要な知識を解説しました。 （予告から内容はかなり変わりました） 第一回「これだけ守れば見やすくなるデザインの基礎」はこちら https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life
Windows のコントロールとパターン - Windows アプリの開発 - Windows apps
Windows アプリの開発では、"コントロール" は、コンテンツを表示したり、操作を有効にしたりする UI 要素です。 コントロールとは、ユーザー インターフェイスの構成要素です。 パターンとは、いくつかのコントロールを組み合わせて、新しいものを作成するためのレシピです。 単純なボタンから、グリッド ビューのような強力なデータ コントロールまで、ユーザーが使用できる 45 種類以上のコントロールが用意されています。 これらのコントロールは Fluent Design System の一部です。すべでのデバイスやあらゆる画面サイズで見栄えがよく、力強い、スケーラブルな UI を作成できます。 このセクションの記事では、Windows アプリにコントロールとパターンを追加するための設計ガイダンスとコーディングの手順を示します。 概要 XAML と C# でコントロールを追加し、スタイルを指定
iOSのコントロール部品について
こんにちは。フェノメナエンターテインメント デザインチームのニキです。 コントロール部品は、画面を操作する際に重要な役割を持っているので、配置する場所などを適切に判断しなければなりません。 なので、今回はiOSで使用されているコントロール部品の名称と役割についてお話しします。 「Switch」 Switchは設定などでよく見かけると思います。 ONとOFFの切り替えで使われている部品です。 「Picker」 Pickerは、画像のようにユーザがその中から1つを選択するための一連の値を表示します。 「DatePicker」 DatePickerは日付などを選択するための値を表示します。 画像の例以外にもアラームを設定する際に使用する時間だけのDatePickerなど数種類あります。 「Slider」 Sliderはユーザが可能な値の全範囲にわたって値やプロセスを調整できるようにします。 画像
ステッパー (stepper) による数の入力 | Accessible & Usable
公開日 : 2020年9月7日 (2020年9月8日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームにおいて、数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる場合、HTML の <input type="number"> を用いるのが基本です。ボックスに直接タイプ入力することができると同時に、ブラウザによってはスピナー (spinner) が提示されるので、それを「回す」ことで入力値を増減することもできます。 <input type="number"> の例 (Google Chrome)。ボックスの右側にスピナーが提示されている。 しかし、ブラウザ標準のスピナーは小さくて、ユーザーによっては見づらかったり使いにくかったりします。またユーザーの環境でスピナーが表示されない (ただのテキストボックスのように見える) こともあります。 比較的
ツールチップについて考える — Website Usability Info
公開日 : 2018年10月20日 (2023年4月18日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ツールチップは、カーソル (主にマウスポインタ) をユーザーインターフェース (UI) コンポーネントの上に合わせると、そのコンポーネントに関する補足情報がポップアップ表示される機能です。以下のようなケースで役に立ちそうですし、アイコン主体の UI をよく見る昨今、そのアイコン説明などで積極的に採用したいと考えるデザイナーや開発者も多いかもしれません。 UI コンポーネントにテキストラベルがない (ビジュアルデザイン上、ラベルを削ぎ落としている) 場合 UI コンポーネントに補足説明や追加情報があると便利な場合 使用頻度が低いなどの理由で、UI コンポーネントに対するユーザーの理解 (解釈) が一定でない場合 デスクトップアプリケーションではおなじみなので、便利なインタ
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
CSS設計の選定に学ぶ仕事術 - Developer’s Blog
選定作業には責任がつきまとう。 おはようございます おやすみなさい 皆さま、初めまして。今回のプロジェクト開発者の一人コースケと申します。 本日は連載中の尾形（以降リーダーと呼びます）に代わり特別編といたしましてイチ開発者である僕からフロントエンド挑戦における失敗談を皆さまにお伝えさせてください。 不安の中始まったフロントエンドの挑戦 今回のプロダクトで僕が任されたのは、フロントエンド周り全般。 特に、デザイン周りでは自分一人で結構な量の調査や選定、実践を行ないました。 HTML/HTML5の調査 CSS/CSS3の調査 Sassの調査 CSSデザイン/設計の参考書の選定 設計方針の選定 参考となる規約の選定 プロトタイプの作成 などなど。 フロントエンドの調査に僕一人で突っ込まれて孤立しながら、右も左もわからぬまま「初心者」と「入門」を＆検索にググり続けました。。 ※画像はイメージです。
Composable な UI 設計を目指したフロントエンド開発 | MEDLEY Developer Portal
2018-02-27Composable な UI 設計を目指したフロントエンド開発こんにちは、開発本部の舘野です。医療介護の求人サイト「ジョブメドレー」の開発を担当しています。 昨年、ジョブメドレーでは事業所が利用する採用管理画面の UI リニューアルを行いました。ユーザが使いやすい UI づくりを目指すために、長期間にわたり誰が開発しても一貫性ある UI を実現できるようなシステムが必要です。そこで今回は「Composable」な UI システムの実現をテーマに、どのように開発を行ったのかについて、共有させていただきます。 背景：画面や機能追加のたびに UI の一貫性がなくなっていたジョブメドレーの採用管理画面とは、医療機関や介護施設の採用担当者が求人情報の管理や応募者の選考状況の管理などを行う画面です。 この採用管理画面ですが、リニューアル以前はAngularをフレームワークとして採
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
メルペイの社内向け管理画面を振り返る | メルカリエンジニアリング
Merpay Advent Calendar 2019 の 13 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 メルペイの管理画面は 2019 年 2 月のサービスローンチに先立ち、2018 年 11 月にリリースされました。私は 2018 年 8 月に入社してから一貫して管理画面開発に関わり、様々な機能開発・運用を行ってきました。その中でフロントエンドエンジニアとして関わったいくつかのプロジェクトをピックアップしてご紹介します。 目次 はじめに メルペイのフロントエンドチーム メルペイの社内向け管理画面 プロジェクトの振り返り 審査業務効率化プロジェクト マイクロサービス分割プロジェクト 課題感 分割の方針 分割後のアーキテクチャ Component v2.0 リニューアルプロジェクト 課題感 デザインポリシー 開発フロー 社内向け管理画面で今後注
社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの伊藤、今河です。 前半では社内システムをデザインするデザイナーの環境と事例紹介を取り上げました。 後半では、私たちが運用しているデザインシステム「SAYA」について詳しくご紹介します。 SAYAとは SAYAとは、主に社内エンジニアが開発で使用するシステムのために作られたデザインシステムのひとつです。 多様なテーブルの表示形式や豊富なフォームパーツ、高情報量に対応する省スペースオプションの提供など、システム特有のUIにフォーカスし、社内エンジニアにとって最適なユーザビリティーを実現します。 ヤフーの従業員なら誰でも利用できるよう、デザインデータとコード、およびロゴデータなど
デザインシステムの資料を作る時に参考にしたリンクまとめ | よりデザイン
この記事は何？ DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 （追記：記事執筆後も参考資料が増えてきたため、資料作成時に限らず参考にできるものを追加しています） まずデザインシステムについて学びたい時は Design Systems Handbook InVisionが作成し
ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！ #全文公開｜原田 佳樹 Harada Yoshiki
9/22(日)の技術書典7に@scrpgilと共著で「ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！」という本を出展します。 それに合わせて、事前に本書の本文を公開することにしました。技術書典というイベントは年々盛り上がっていますが、デザイン畑の人にはまだまだ認知が高くないと思うので、より多くの人に届けられるようにnoteで公開することにしました。 「ゼロから始めるデザインシステム」ということで、まさにこれから新しくデザインシステムについてしっかり腰を添えて学んでいこうという人向けの本になります。言葉は聞いたことあるけど、実際に使ったことはない、もしくはこれから導入し始めようと考えている、また、いざ導入したものの、そこまでうまく機能していない、そんな人たちに向けた本になります。 本書は6章から構成されています。第1〜5章は理論編、第6章は実践編です。はじめに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components – Material Design 3
macOS Human Interface Guidelines: About the Touch Bar
https://cssnite.jp/lp/lp33/followup/LP33r-ikeda.pdf
UWP アプリ用の設計ツールキットとサンプル - UWP app developer | Microsoft Docs
どうすれば使いやすい？UIコンポーネントの設計 | フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】
The Blog | Welcome to Adobe Blog
