僕が今まで愛してやまなかったUI達について語る｜Goodpatch Blog グッドパッチブログ
この記事はGoodpatch UI Design Advent Calendar 2019の18日目の記事です。 こんにちは。UIデザイナーのnaoです。僕は今こうやって仕事としてUIデザインについて接していますが、同時にいちユーザーとして数々の素晴らしいUIデザインに触れてきました。初めて触れたiPhone3GSが発売された2009年から約10年間数々のiOSアプリケーションをインストールしては削除し、中でも特に機能性に長け優れた外観を持つアプリケーションは僕の愛でるUIとして使わない物でも保持してきました。 この10年間、僕のポケットには無限の可能性を秘めたアプリケーション達が入っていてそれらは、晴れの日でも雨の日でも、楽しい時も悲しい時も僕を支えてくれました。はい、こんなエモい文章ではないのでご安心ください。 このAdvent Calendarの記事ではそんな愛してやまなかったiOS
ドメインモデルからUIデザインとページレイアウトを設計した話｜yuki_sasaki
この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう？突然ですが、デザイナーのみなさんUIデザインしてますか？ してます？ では、UIデザインってなにをデザインすることなのでしょうか？ UIデザインってなんなのでしょう？ 私は何もわかりません。デザイン、何もわからない… 私はこの1年上記のような「UIデザインとはなにを作っていることなのか？」ということばかり考えていた気がします。（そして、気づいたら年末になっていました…）。 結論から言うと、UIデザインとはデータベースやサーバーサイドで実装された構造とフロント側での視覚的な情報構造との対称性を設計することであるという考えに至っています。 この実装の
UIがエロいMac App集
UIがとてもイケている『エロい』Macアプリを適当に挙げようと思う。 私が考えるエロいUIの条件： AppKitを利用したCocoa AppデスクトップアプリWebView, Electron, Flash, Javaなどの技術で構築しないHIGを守る／Apple純正アプリをリスペクトするWindowsのUIを基準にしないドラッグアンドドロップなど機能的にもMac OSの仕組みに従う独自UIで汚染しすぎないMac OSらしい色使いMac OSらしいアニメーション／インタラクションMac OSらしい言語表現（例えば「ウインドウ」「環境設定...」など）Mac OSらしいフォント（San Francisco, Helvetica Neue, Lucida Grande, Hiragino Sans, Menlo, Monaco...）標準的なメニューバーおよびキーボードショートカットよって例え
UXデザイナーにとってのOOUIとは？｜Atsushi Kadono
Goodpatchの中では、UXデザインやサービスデザインをメインにやっているので、直接UIデザインを行うことはないのですが、プロジェクトの中でOOUIに触れる機会が多くあったので、UXデザインの観点からOOUIについて触れてみたいと思います。 今回のGoodpatch UI Design Advent Calendar 2019でも何名かのメンバーが触れてきたOOUIの考え方ですが、これはUIデザイナーのみが理解すべき考え方ではなく、UXデザインを行う立場にも強く関わってくる考え方になっています。 UXデザインとOOUIの関係 OOUIに関しては、「UIデザイナーのスキルとOOUI観点の構造設計」の中でも詳しく説明されていますが、その中で重要になってくるのは「オブジェクト」になります。そしてOOUIの考え方で設計を進めるためにまず、オブジェクトを抽出する必要があります。 では、オブジェク
とあるゲーマーの独り言：UIデザインの原体験｜Saya Nakano
新卒でUIデザイナーという職をいたただいてから、来年で9年目になります。今までさまざまな種類のアプリケーションやWebサービスのデザインをやってきましたが、わたしの「UIデザイン」との出会いは、幼い頃より遊んでいた「ゲーム」からでした。 ゲームにはUIデザインに欠かせないたくさんの設計パターンや表現のアイディアが詰め込まれています。わたしはゲームのデザイナーではありませんが、今までプレイしてきた多くの作品たちからUIデザインに欠かせない発想や考え方を学びました。設計パターンやアイディアというものは、たとえ表現媒体が変わったとしても、応用することができます。パターンを熟知していれば、少なくとも設計を間違えることはおそらくないし、適切なパターンの組み合わせを設計できれば、UIをより良い形に仕立てることができます。 そんなわたしのUIデザイナーとしての原体験となったゲームたちを、少しだけご紹介し
Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
はじめに VALU Advent Calendar 2019 11日目 (!) の記事です! VALU ではデザインに Atomic design (アトミックデザイン) を採用しています。 本記事では，VALU のデザイナーが作成した素敵な Sketch シンボルを差分なく反映し，かつ変更に耐えうる SwiftUI を運用するための方法をご紹介しようと思います。 昨年の VALU Advent Calendar にて，Sketchと1対1を目指すAtomic designなStoryboardの作り方 を投稿しました。本記事はそれを SwiftUI で行ったものです。まだご覧になっていない方は先にご覧ください。 Highlights SwiftUI を利用することで，「ファイル数増加」「子View更新時の伝播」「親ViewのConstraints破棄」など，UIKit (昨年の実装) で
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
「Goodpatch式OOUIワークショップを経て、変わりつつあるSmartHRのデザインプロセス」｜ふとし
はじめまして。SmartHR プロダクトマネージャー（PM）の futosi です。 前職はGoodpatchで2012年〜2018年末まで働いており、ProttやBaltoのPMをやっていました。 なぜGoodpatchさんにワークショップを依頼したのか結論から言うと多数のデザイナーやPM、エンジニアを抱えているGoodpatchさんはどういう手法や考え方でコミュニケーションを取ってソフトウェアデザインをしているのか、そのヒントを得るためにワークショップを依頼しました。 というのもSmartHRのUIデザインは2018年9月までは1人のデザイナーで行っていました。 2019年1月時点では3人のUIデザイナーが所属していますが、仕事の手法や考え方に関してはそれぞれ違いがあり課題を感じています。 SmartHRのUIデザイナーである @tyoys00 と相談しながら、まずは具体的にどういった
オブジェクトモデリング入門編！SmartHRでOOUIワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
先日、GoodpatchはSmartHRさんのオフィスでワークショップを開催しました！ OOUIの基礎知識をインプットできる座学、オブジェクトモデリングワークショップをUIデザイナー、PMの皆さんに体験していただきました。本記事では開催の背景から当日の様子をご紹介します。 今回ワークショップを実施したSmartHRさんが提供するクラウド人事労務ソフト「SmartHR」のUIデザインは、2018年9月まで1人のデザイナーによって作られていました。デザイナーやプロダクトの機能が増えるにつれて、様々な課題が出てきたそうです。その一つとしてUIデザイナー佐々木さんのnoteにはこのように綴られています。 現在のSmartHRでは情報の見せ方がタスクベースであることに引っ張られてしまったことで、同じオブジェクトであるはずのものが画面によって名称が別のものになってしまったり、正しく定義できていないなど
UIデザイナーのスキルとOOUI観点の構造設計｜Goodpatch Blog グッドパッチブログ
はじめに UI デザイナーとして、スキルを伸ばす方向性を悩んだことがありますか？ 去年、私はスキルを伸ばす方向性をすごく悩みました。世の中の流れとして、UIデザイナーはUXデザイナーを目指すのが多いのに対して、私はインターフェイスアーキテクチャやインタラクションデザイン、エンジニアリングについてすごく興味があるんです。しかし、どうやってそれらのスキルを伸ばすのかは分かりませんでした。 社内の有志のチームに参加 その時、OOUIをはじめUIデザインを研究する有志の集まりがあって、私はそのチームに参加しました。 【Today's Goodpatch✍️】有志で発足された、オブジェクトベースなUIデザインを研究するチームの様子をキャッチ👀上野学さんの記事をチームで読みながら、オブジェクトベースなUIデザインへの取り組み方などディスカッションが白熱していました！ pic.twitter.com/
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
最近のデザイナーの仕事、楽しいですか？わくわくしてますか？ ｜ enque
webデザイナーの日記帳 デザインや開発についての学び/日常のあれこれを ゆるくお届けするブログです。 なんて、あえて人目をひくようなキャッチーなコピーはあまり書きたくないのですが。 金曜日の深夜１時。スミノフを片手にこれを書いています。 そう、ただエモい気持ちになったのであえてキャッチーなコピーでこれを書きます。 皆さんはデザイナーの仕事にどれほどの誇りをもっていますか？ そして、「最近のデザイナーの仕事」、やっていて楽しいですか？わくわくしてますか？ 私が答えるなら、前者はYes、後者はNoです デザインの仕事、ほんとに難しいですよね デザインという手法をもってして誰かの課題を解決する。最高にやりがいのある仕事だと思います。ただ課題を解決するだけじゃなくて、プロとして最高のクオリティを目指す。 最高の心意気だと思います。 チームの一員となって、経営者やBizに寄り添い世の中を良くするた
より良い体験を共にデザインしていくために、オブジェクトベースUIデザインを学んだ話｜鈴木 健一 / PLAID & Ex.STANDARD
プレイドのデザイン・エンジニアリングチームにて、ソシオメディア上野さん、藤井さんを講師に招き、オブジェクトベースUIデザインのワークショップを実施いただきました。 内容について詳しくは触れられませんが、参加する前の課題意識と参加後の気付きを残しておきたいと思います。 なぜやったのかプレイドが提供している「KARTE」では、機能として提供していることが多岐にわたり、いわゆる「タスクベース」になっているのではと感じることが増えていました。 具体的には、画面名や操作手順、操作の起点となるナビゲーションやボタンのラベリングなどで、タスクベースとオブジェクトベースが混在しているように感じていました。 オブジェクトベースUIは、そうした状況に対し一定の秩序を与えながらも、道具としての自由度、ユーザーが学んでいくことによる創造性を発揮できる環境を設計できる可能性があるように思いました。 また、プレイドは
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
UXデザインにアニメーションを導入するときに注意すべきこと
Jolinaは、アメリカやイギリス、オーストラリアの複数のスタートアップを相手にしているデジタルマーケティングの戦略家です。 長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。 しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与え
FRONTEND CONFERENCE 2019 に登壇しました - jmblog.jp
11/3 にグランフロント大阪で開催された FRONTEND CONFERENCE 2019 で「高齢者でも使えるプロダクト UI の挑戦」というタイトルで発表しました。 高齢者でも使えるプロダクト UI の挑戦 / Designing User Interfaces for the Elderly - Speaker Deck 高齢者にも使ってもらえるプロダクトにするために、これまで地道に改善を続けてきたことを事例として共有するという内容でしたが、ありがたいことに、発表後たくさんの質問をいただきました。その場でうまく回答できなかった部分もあったので、あらためてこの場で回答をさせてもらいたいと思います。 「色覚障害の見え方をチェックするためのおすすめのツールは？」 スライドの中でも紹介した NoCoffee という Chrome 機能拡張以外に、Mac アプリでは Sim Daltonis
NetflixはUI/UXの改善に機械学習をどのように使っているのか？｜みゃふのPythonプログラミング～応用編～
ドラマや映画を視聴する上で、専らテレビではなく動画配信サービスを使っているという方も増えてきているでしょう。その普及度は非常に高く、2020年には国内市場規模が2600億円にまで拡大すると予測されています。 中でも独自コンテンツに強みを持つのが、2015年に日本へ上陸したアメリカのサービスNetflixです。2019年度だけでもおよそ1兆円（！）もの予算を自社制作のオリジナルコンテンツに投入しており、従来の映画やドラマの配信サービスを超えた規模感を持っていることが伺えます。繰り返しますが、オリジナルコンテンツ『だけ』で1兆円です(;^ω^)すごい… しかし、Netflixの独自性として強みを持つのは映画やドラマといった表の部分だけではありません。実はそうしたコンテンツを『最適なユーザーエクスペリエンス』として届ける仕組み作りにおいても、Netflixは非常に高い技術を持って取り組んでいます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インターフェイスデザインとの向き合い方（公開版）/ How to face interface design
dely.design
One UI 2: Designed for everyday simplicity | Samsung
