UI/UXはデザイナーだけで作るもの？チームで求められるデザイナーの役割とは？ - スタディサプリ Product Team Blog
QuipperデザイナーのMatsumotoです。 今回はQuipperのデザイナーが、普段どんなチーム構成で働きどんなワークフローで動いているのか、簡単に紹介していきます。 また、様々な職能を持つメンバーが集うチームで求められるデザイナーの役割、日々の気づき、今後の抱負など軽くまとめてみました。 デザイナーの「何かの気づき」になれば嬉しいし、エンジニアやPMの方が、デザイナーと一緒に「デザインについて考える」きっかけとなれば幸いです。 はじめに 事業会社で働く面白さ どんなチームで働いている？ プロダクト単位のチーム チーム内訳 職業単位のデザインチーム プロダクト単位のチームによるワークフロー 良い点 改善したい点 UI/UXはデザイナーだけで作るもの？ どんなフィードバックがいいの？ 終わりに はじめに 前提として自分の経歴を簡単に書いておきます。 2017年11月にQuipperに
Fluid Interfaces実践 - なめらかなUIデザインを実現する｜dely design
This domain may be for sale!
UIデザインにおけるKPI設定の重要性 - Gunosy Tech Blog
こんにちは、今年3月に入社したLUCRA事業部のはよんです。 こちらは Gunosy Advent Calendar 2018、13日目の記事です。 なお、昨日の記事は @大曽根さんの 社内技術ブログのはじめかたでした。 LUCRAという女性向けアプリのデザインを担当しています。 社会人1年目の時から、UI/UXデザイナーとして、ずっとアプリとウェブのデザインをしています。 今回はUIデザインにおけるKPI設定の重要性というタイトルにしていますが、Gunosyの分析に強い特徴がデザインにはどういうふうに影響されているのか、デザインだけでなくUI設計の全体的な流れについて書いていきたいと思います。入社してから自分のデザインに対する価値観も大きく変化しているので、少し個人的な話も混ぜていきますね。 入社前 1~2年目の頃はデザインの価値を信じており、こだわっていました。0.5pxのズレも見逃せ
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
UI GRAPHICS新版に寄稿しました - Appleが目指す「流れるインターフェース」｜Go Ando / PREDUCTS / THE GUILD
2015年に初版が発行された「UI GRAPHICS」は、当時の数多くのモバイルアプリの最先端のデザイン事例と共に、スマートフォン以降に生まれたUIのデザイン思想、インターフェース論について、UIの専門家達による様々な考察を掲載した、大変人気を博した書籍でした。 そして先日発売された「UI GRAPHICS」の続編「新版 UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェースデザインとUX」に大変光栄な事に、共著者の一人として参加させていただきました。 今回出版元のBNN新社様より、当方のパートをnoteに掲載する事をご許可いただいたので、前半部分に限り一部ご紹介したいと思います。 テーマはAppleの開発者向けカンファレンスWWDC 2018のセッション「Designing Fluid Interfaces」で紹介された、新たなUIデザイン思想についての考察です。
iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編- #Zaim｜akatsuki174
なぜこの記事を書くのかこんにちは。Zaim で iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、「iOS エンジニア以外の人もこれを覚えておくと良いかも！」と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UI をもっと理解したい方は、こちらも頭に入れておくと良いと思います。 注： ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。 ・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。 ・ほとんどHuman Interface Guidelines（以下 HIG）から情報を引
メルカリiOSのUIテスト自動化をまるっとご紹介します！ | メルカリエンジニアリング
こんにちは、メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD改善・その他社内の生産性を上げるための自動化を行っています。 今回はiOSのUIテスト自動化について、最近の改善をまとめてご紹介したいと思います。 ざっくり言うと HTMLレポートに出力し、失敗原因を見やすくするようにしました リトライ実行するためのfastlaneプラグインを作りました テスト実行環境をJenkinsからCircleCIに移行しました Slack Commandを使って、簡単に実行できるようにしました これまでのiOSのUIテスト自動化 AQA(旧QA-SET)では去年から、JP版アプリ(iOS / Android)のUIテスト自動化に取り組んでいます。 去年のMercari Tech Conf 2017では、
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 - くらげだらけ
昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい
言語切替のUIデザインについて考えてみる。｜灰色ハイジ
いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。 国旗を使うことによる問題 デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。 日本にいると「日本=日本語」と、国と言語が対応しているので気付きづらいのだけれど、世界はそういう風には出来ていない。例えば英語を提供する際に、どの国旗が相応しいのか考えてみよう。イギリス？アメリカ？英語を第一言語とする国はいくつもある。 決して国旗は言語を代表するものではないのだ。 また、提供する言語が多くなると、ごちゃごちゃして見づらいという問題も含んでいる。 ただし、言語の切り替えではなく、ECサイトなど提供するコンテン
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ
Foursquare: A UX case study の日本語版 - 灰色ハイジのテキスト
Tradecraftに入って最初に出た各自がそれぞれやるべき課題のひとつに実際のプロダクトの改善にチャレンジするものがありました。全体の流れは以下のようなもの。 自分が改善したいと思う、そして誰もが知っているアプリを選ぶ 問題点を見つけ、その仮説を立てる ユーザビリティテスト（ゲリラ！）を行い、仮説を検証する 改善のプロトタイプを作る プロトタイプを検証するユーザビリティテストを行う この一連のプロセスをケーススタディとしてまとめる インストラクターのZacがひとりひとりに対して、丁寧にレビューをしてくれていたのですが、他のプロジェクトが始まり忙しくなったせいもあり、公開するための編集を放置してしまっていました。それをようやくまとめなおし、遂にMediumへ投稿することが出来たのが以下の記事でした。 この記事は、自分のスキル故に英語ではうまく書ききれなかった補足事項、Tradecraftの
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
新卒採用：職種紹介：デザイン系 - UI/UXデザイン｜採用情報｜任天堂
UIとは「ユーザー・インターフェース」の略で、UXは「ユーザー・エクスペリエンス」の略です。 インターフェースは「接点/接触面」、エクスペリエンスは「経験/体験」を意味します。 ゲームにおけるUI/UXデザインとは、「ゲーム」と「遊び手」を仲介する絵や文字の表現を通じて、心地よいゲーム「体験」を作りだすこと、とも言えます。 任天堂におけるUI/UXデザイナーの具体的な制作物は、 ・タイトル画面やメニュー画面 ・ゲーム中の体力ゲージやボタン、マップ、アイコン ・フォントやメッセージ ・勝敗の結果画面（リザルト画面） などとなります。 これらのUIを通じて、お客様にストレスなく心地よいゲームプレイを提供することがUI/UXデザインの主な役割です。 特に、ゲームは娯楽品であって生活必需品ではないため、わかりにくければ簡単に手放されてしまいます。そのうえ、何百万人というプレイヤーがUIを何百回、何
FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話 - 灰色ハイジのテキスト
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
Mobbin - The world’s largest mobile & web app design reference library
http://www.life-is-bitter.com/entry/ui_checklist
「AndroidはiOSと同じデザインで！」と言われたときのTips
Backlog UI リニューアルの舞台裏 / Backlog Renewal UI
