2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。 UIデザインをはじめるために必要な知識を解説しました。 （予告から内容はかなり変わりました） 第一回「これだけ守れば見やすくなるデザインの基礎」はこちら https://speakerdeck.com/kina…
UIデザインをはじめよう
2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。 UIデザインをはじめるために必要な知識を解説しました。 （予告から内容はかなり変わりました） 第一回「これだけ守れば見やすくなるデザインの基礎」はこちら https://speakerdeck.com/kina…
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 コンポーネントに対するユーザーの理解 (解釈) が一定でない場合 デスクトップアプリケーションではおなじみなので、便利なインタ
よく使われるレイアウトや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 リニューアルプロジェクト 課題感 デザインポリシー 開発フロー 社内向け管理画面で今後注
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
【iOS】あのUIは何て言うの？iOSのデフォルトUIコンポーネントをおさらいする | 日本VTR実験室
どうもこんにちはJBです。 アプリの開発&デザイン時に、関わる人たちがデフォルトのUIコンポーネントについてきちんと知っているとお互い話が通じやすいし、設計もしやすいですよね！という訳で、今回はiOSのデフォルトUIコンポーネントについてまとめてみたいと思います。 昔、「あの、あれだよ、あの青くてなんか切り替わるヤツ！」「Segmentted Controls?」「何それ」みたいな会話が繰り広げられて時間と労力を多少無駄にしました。 開発しない人も名前ぐらいは知ってた方が良いですね…と言う事をひしひし感じております。そんなわけでiOS8が出るか出ないかくらいの時期に空気を読まず、今回の記事です。 すべて網羅している訳ではないのと、色々端折っておりますのでその辺はあしからずですよ。詳しく知りたい方は、iOSのヒューマンインターフェースガイドラインをご覧ください！ それでは行ってみましょう！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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コンポーネントの設計 | フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】