伝わりやすく使いやすいシステムアイコンができるまで｜東芝 UIデザイン
こんにちは、東芝のUIデザイン担当の池田Rです。 PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。 この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。 アイコンには、アプリケーションを起動するランチャーアイコン、メニューの補足やボタンの役割を果たすシステムアイコンの大きく2種類があります。ここでは東芝の様々なアプリケーションで使われるシステムアイコンに絞ってお話します。 １．まずは手書きで「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要が
生年月日の入力UIについて考える
こんにちは、Gaji-Labo UIデザイナーの今西です。 アカウントの新規登録フォームなどにある生年月日の入力UIについて、考えてみます。 生年月日の入力UIのパターン生年月日の入力でよく見るものの日付入力パターンは下記のようなものではないでしょうか。 年月日でそれぞれ分かれたプルダウン年のみ数字の入力ボックス ＋ 月と日のプルダウン年月日でそれぞれ分かれた入力ボックスに数字を手入力1つの入力ボックスにすべて数字で入力（例：19900625）カレンダーのUIで入力生年月日のフォームで良く見るものは1の「年月日でそれぞれ分かれたプルダウン」、その次くらいで3の「年月日でそれぞれ分かれたフォームに数字を手入力」だと思います。 年の入力があるのでカレンダーUIタイプは見かけないように感じます。 カレンダーは日にちの入力についてはしやすいのですが年へのアクセスはあまりよくない場合が多く、カレンダ
2022年、もっとも注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
日は沈む。考える事を放棄した日本産UIの日没 - Qiita
想像力を欠如したデザインの成れの果て 日本産ソフトやアプリのUIと聞いて連想するのはまさにコレである。 なんと愚かなUIであろうか。 日本庭園や浮世絵、茶の湯を引くまでもなく、日本人のDNAには引き算の美意識が脈々とながれているはずである。 20代でデザインをやっていた時は、毎年パリの展示会にそそくさと参加し、各国から来ているデザイナーに紛れて、我が身を削り、無い金を搾り出して作ったサンプルを展示していたのですが、バイヤー獲得以上に、周りのデザイナー諸氏との交流が毎度刺激的で、それが味わいたくて無い袖を振りながら参加していたところがある。 で、日本人として強く感じたのは、自分のデザインは完全に引き算で、彼らの殆どは足し算で考えてるというという事だ。特に装飾に強くこだわり、隙間を埋めようとする。(厳密にはデザインと装飾(デコレーション)は違う) 逆に日本人は削ぎ落とした上で、素材の良さや質感
SND: Crafted UI sound assets for UX developers
様々なインタラクションに対応したシンプルなサウンドキットです。すべての音を、音の最小要素である正弦波をベースにデザインしました。比較的再生能力の低いスピーカーでも再生可能な周波数帯域を中心に、できるだけシンプルに、小さなファイル容量でデザインされているので、ウェブ、アプリ、サイネージなど様々なシーンでご利用いただけます。 土屋泰洋 サウンドデザイナー/リサーチャー The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusi
エモーショナルUIデザイン｜kana
はじめに2013年にスタートアップに参加したことをきっかけに、今までいくつかのデジタルプロダクトのUIデザインに携わってきました。2020年にTakramに参加してからは、さらに多様な事業のプロダクトに関わらせていただいています。この約10年間のあいだに世の中のUIデザインのノウハウは確立されてきており、既存のコンポーネントなどを組み合わせれば、きれいなUIが誰でも簡単に作れる時代になりました。そんな中で個人的に大切にしてきた価値観として、「ユーザーの気持ちを考えて、その気持ちに寄り添った情緒的なUIをデザインする」ということがあります。今回、この記事を書いているのは、その意味や意図を言語化して再利用可能なものにしたいと思ったことがきっかけです。考えながら書いているため、何度かのシリーズになるかもしれません。また、このテーマについて様々な方と対話ができたらいいなとも思っていますので、興味を
プリキュア - Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.
そのテンポ感はどこから？Pokémon LEGENDS アルセウスから学ぶ「モードレス」なゲームUI｜こにゃ
みなさん、「Pokémon LEGENDS アルセウス」プレイしてますか？ 私は今作を楽しみにするあまり発売日当日に有給をとり、食事・入浴・就寝以外のすべての時間を費やして丸2日でシナリオをクリアしました。その後もゆるゆるとポケモンを集める日々を送っています。つまりめちゃくちゃハマってます。 今日はそんなアルセウスについて、「UIデザイン」の観点からお話を広げていこうと思います。 たまにはUIデザイナーっぽい記事も書こうかと……。あ、普段はゲーム会社でUIデザイナーをやってます。よろしくお願いします。 アルセウスめっちゃ快適やんさて、シリーズ初のアクションRPGである今作。これまでのタイトルとは一線を画す操作感や、そこから生み出される快適かつ爽快なプレイ体験に驚かれた方も多いのではないでしょうか？ 自分自身、剣盾（ポケットモンスターソード・シールド）で初めてがっつりポケモンシリーズを遊び始
UI Control Guidelines | Wireframing Academy | Balsamiq
A collection of detailed guidelines about User Interface (UI) controls. Buttons, links, accordions, menus, and more! Covers all Balsamiq controls. By UX expert Tess Gadd. Button Guidelines Buttons are common elements of every interface and are used to execute an action. It must be apparent what that action will be, to avoid any mistakes or confusion.
Modeless and Modal | Just another Modeless Design site
Recent Posts Afterword Manifesto of the Modelessist Party Counterpart User-Side Spatial Recent Commentsotktko on Syntax名無しのゲーマー on FPS vs RPG中内淑文 on Afterwordueno on Afterwordくぼた on AfterwordArchives January 2010 December 2009 November 2009 October 2009 September 2009 Categories Uncategorized Meta Log in Entries RSS Comments RSS WordPress.org
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
カジュアルゲーム『マモノチューバーズ』のUI／ロゴデザイン | cacalia Kibela
この記事はHappy Elementsカカリアスタジオ Advent Calendar 2019の17日目の記事です。 こんにちわ、HappyElements カカリアスタジオのグラフィックデザイナーです！ 先日の「キャットバスターズ」のロゴ制作の記事に続き、２つ目の記事を書かせていただきました！ 今回は、以前カカリアスタジオからリリースしたカジュアルゲームアプリ 『マモノチューバーズ』 のUIやロゴ制作についてお話したいと思います。 参考：新作カジュアルゲーム「マモノチューバーズ」、配信開始 はじめに 「マモノチューバーズ」は、不思議な「マモノ」たちが流行りの動画配信アプリでチューバーとして色々な動画を配信するお手伝いをするカジュアルアプリゲームです。 近年スマートフォンゲームの開発規模が大きくなり、開発が長期化する影響で「０からゲームを作る経験」が積みづらくなっている現状があり、新規開
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
原子の再定義 - Atomic ReDesign -
Atomic ReDesign とは 「Atomic ReDesign」 は、かの有名な「Atomic Design」の拡張概念です。React や Vue.js を用いたコンポーネント設計において、私たちはしばしば頭を抱えることがありました。UI 粒度の分類制約は、コンポーネント設計最適化を阻むことがあるからです。 「この粒度のコンポーネントはどこに属するものなのか？」という疑問に対し統一された解はなく、プロダクト毎の性質によって定める必要がありました。また、文脈が散在することにより、コードに対する集中力低下を招きました。 Atomic ReDesign は顕在化した 「Atomic Design とアプリケーション設計の乖離」 をとらえ、現実的な設計指針となることを目指します。 Atomic Design とアプリケーション設計の乖離 本家 Atomic Design はデザインシステ
30 Examples of Material Design Palette Color Usage
Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents
ソシオメディア | OOUI デザインの準備運動
OOUI（オブジェクト指向ユーザーインターフェース）デザインに慣れるための準備運動をいくつか考えてみました。 これらの準備運動は、UIの大まかな構造に関する話が主で、以下をなんとなく知っている状態の方が対象です。 名詞と動詞で捉える 名詞→動詞で構成する アプリケーションをタスクや機能の羅列と捉えるのではなく、オブジェクト（名詞、もの、関心の対象、概念と言い換えても良いです）を並べユーザーに提示し、そこにアクションが付随するという世界観ですので、人によってはアプリケーション像（コンピュータ像）の転換が必要です。 それぞれの準備運動はオブジェクトを探すことを重視したものになっています。好きなものから選んでやってみましょう。 1. ラフスケッチ いくつかのユーザー要件をもとに、オブジェクトを意識しながら、UIのラフスケッチを描いてみましょう。制限時間は20分です。 これは学校の教員が使うための
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
STARRYWORKS inc.
ユーザーインターフェイスのデザインのヒント - Apple Developer