UIデザイナーが本を書いたら｜Yoko Nishida
テーマとターゲットを決める元々デザインシステムについて書くという話だったのですが、編集者や共著者の栄前田さんと河西さんと打ち合わせをしていく中で、 「立派なガイドラインを作っても、チームで活用されないと、ただの綺麗なドキュメントで終わってしまう。UIを作るマインドやワークフローを言語化してから、デザインシステムを取りあげたほうが良いのでは？」という流れになりました。 プロトタイプを作るテーマが固まってきたら、どんな構成や台割にするかを細かく考えていきます。 編集担当者から「図解やイラストが多めな構成にしてみませんか？」という提案があったので、PaperというiPadアプリで本を読むときのイメージサンプルを作り、「こんな見せ方で読み手に届けたいです」と認識をすり合わせていきました。 Figmaを使った原稿執筆Scrapbox → Figmaへの方向転換 当初はScrapboxで黙々とテキスト
【翻訳してみた】Google Design - モーションデザインは難しくない｜Iori Iwaki｜Motion designer
前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleのマテリアルデザインチームで働くモーションデザイナー。 彼のTwitter,Dribbleアカウントはこちら。 https://twitter.com/jonasnaimark https://dribbble.com/jonasnaimark モーションデザインはUIの表現力を向上させ、使いやすくする手立てになります。そ
UI トレースは何をトレースしているのか｜ai
エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。 楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。 その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。 自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。 しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深
デザイナー×エンジニアで行う『ペアUI改善』のススメ｜あっきー
リリース前のちょっとしたUI修正をエンジニアがデザイナーとペアで修正したら、早くていい感じに進んだのでUI改善でも取り入れてみた話です。 UI改善する箇所は長くサイトを運営していると溜まってくる微妙な崩れや、いつか直したい案件のやつ。「なんか気になるを一掃するぞ！」とやってみました。 『ペアUI改善』の目的目的は以下のとおり。デザイナー・エンジニアの相互理解と、負債の解消がメインです。 ・チケットに上がりづらい余白・文字サイズ等のUI修正 ・数字に上がりづらいUXの向上 ・デザイナーがUIの修正方法を知る ・プログラマーが細部のデザイン意図を理解する『ペアUI改善』の流れ基本的にはペアプロと同じ流れを想定。 準備 ・対象のページを決める（今回は複数ページ） ・『気になるリスト』作成。なんか気になる箇所をまとめる ※気になるリストは日々上がるUI修正チケットとまとめておくと良さそう手順 １．
迷えるUIデザインに注ぎ込む"意思"の話｜宇野雄 / note inc. CDO
どっちのUIがいいですか？社内でUIレビューをするときに、2案を持ってきて「どっちのUIがいいと思いますか？」という質問を受けることがあります。デザインをする中でよくある光景です。この質問に対していつも僕が答えるときの軸となる指針をご紹介します。 どっちのビジュアルがカッコイイかといった意見を広く求めたいときにこの質問は非常に有効だと思うのですが、その一方で「このサービスのUIはこうありたい」という意志が感じられないときに不安になることがあります。 僕がUIレビューをするときに意見する指針は、ユーザビリティやアクセシビリティなページデザインとしての基本的な指標に加えて下記のようなものがあります。 ・この機能は誰に使ってほしいのか ・どんな時に使ってほしいのか ・その人がこの機能を使うストーリーの中でどういう役割があるのか ・サービスとしてどういう使い方をしてもらいたいのか もちろん全てのユ
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
UIデザイン丸パクリのすゝめ｜Taiki Ikeda｜note
また怒られそうなタイトルをつけてしまいました。多分理解できない人がほとんどだと思うので、事業に本気でコミットしたことがない人は読まないほうがいいかもしれません。UIデザインをアートだと思っている方々はそっ閉じしてください、悲しくなるので変なリプも飛ばさないでください笑 経営者(PM)の思いをユーザーに届けるということ僕はUIデザイナーの仕事のうちの一つは、「こんな価値をユーザーに届けたい」という経営者(ないしプロダクト責任者)の思いを、インターフェイスを通してユーザーに届けることだと思っています。100の価値をユーザーに届けるまでにデザインができることは、届ける過程で失う価値を最小限に留めることであって、もともと100しかない価値を100以上にすることはできません(と、個人的に思っています)。 サービスの失敗価値の伝達というとても大事な仕事を担うからには、早々にサービスをクローズしなければ
ポイントカード管理アプリをデザインしてみる｜yukihaayashi
最近デザインする時間が取れてなかったので、初めてCocada!をやってみました。初回のお題として「ポイントカード管理アプリ」を選んでみました。 お題の詳細は以下の通りです。 あるあるすぎますね...。 どうしよう。気付いたらまた財布の中身がいっぱいになってる・・。 私は買い物が好きなんだけど、もらったポイントカードが溜まっちゃうことが多くて。 実際によく行くお店というわけでもないけど、また行くかもしれないし、と思ってたら、結局そのままにしてしちゃうんだよね。 数えて見たら、20枚近くカードが入ってるけど、実際どのカードがどのカードだったかも忘れてしまっているし、カードを見てもそのお店に行こうとあまり思わないな・・。どう処理したらいいか迷う。 今はいらないポイントカードは捨てるか、放置して、特に管理するツールは使ってないかな。なんとなく登録も面倒臭そうだし。 うーん、何かいいアプリがあればい
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、
デザインシステムに関わるいろいろなプロセスを図にしてみた
今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ
日付とアイコンまわりのアクセシビリティ対応についてのメモ | R note
このサイトの日付とアイコンまわりの実装を、よりインクルーシブにするために少し手を加えました。 日付のフォーマット VoiceOverでこのサイトを読み上げさせたら、日付部分が「ニーゼロイチキュー、スラッシュ、ゼロイチ、スラッシュ...」のように読み上げられるので、やっぱり「2019年01月04日」のフォーマットにした。これだとゼロは読み上げないんですね。 「2019/01/04」の方が見た目がシンプルで好きなんですけど、「スラッシュ」で読み上げられちゃうのがいけてない。スクリーンリーダーユーザは慣れているので、どちらでも問題ないんでしょうけど、やっぱり、「ニセンジューキューネンイチガツ...」と読み上げてくれたほうがわかりやすい。 あとは、どうせゼロが読み上げられないなら、ゼロをとって「2019年1月4日」にしちゃったほうが良いか。ということで、そこも修正しました。いつも同じこと考えるんで
優れたボタンデザインのための７つのガイドライン
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ボタンはインタラクションデザインに欠かせない要素です。ユーザーとシステムの意思伝達において大切な役割を担っています。この記事では、効果的なボタンを作成する際に知っておくべき７つの基本原則について説明します。 １. ボタンをボタンらしく見せる UIを操作するとき、ユーザーは「クリックできる」ものとそうでないものを即座に知る必要があります。ユーザーは、デザインされたすべてのアイテムを解読しなければなりません。そのため一般的に、ユーザーがUIを解読するのに必要な時間が長くなればなるほど、ユーザーにとって使いにくくなります。 しかし、ユーザーはどのようにして要素がインタラクティブかどうかを判断するのでしょうか？ UIのオブジェクトを理解するために、ユーザーはこれまでの経
AppleのUI実装をさぐる - dely engineering blog
こんにちは。delyデザインエンジニアのJohn(@johnny__kei)です。 本記事はdely Advent Calendar 2018の10日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 前日は、プロダクトデザイナーのkassyが「ユーザーの声に振り回されないデザインの改善プロセス」という記事を書きました。いいプロダクトを作るには、ユーザーの声を鵜呑みにするのではなく、きちんと判断する必要がありますよね。 はじめに みなさんは、iOSアプリ開発をするときに、XcodeのDebugging View Hierarchiesを使用していますか？ Debugging View Hierarchiesを使用すると、アプリが現在の
一休のWebデザイナーとUIデザイナーの違い - 一休.com Developers Blog
この記事は一休.com アドベントカレンダーの20日目の記事です。 qiita.com はじめまして、宿泊サービスのUIデザインを担当しています河村です。 一休のデザイナーは部署ごとに在籍チームが異なります。私は長い間、営業企画部デザイナーとして働いていましたが、今年4月よりプロダクト開発部UIデザイナーとして働いています。（本ブログでは、前者をWebデザイナーとします） WebデザイナーとUIデザイナーをやってみて、多くのことが「違った」ので、どんな違いなのかをお話させていただきます。 目次 １） 仕事内容の違い ２） 必要なスキルの違い ３） 仕事の進め方の違い ４） まとめ 仕事内容の違い ビジュアル表現に特化 一休のWebデザイナーの主な業務内容は、トップページなどの更新作業、施設紹介ページ、特集・企画販促ページ、メールマガジン等の作成です。ページ全体のビジュアルを管理しているので
【レポート】UI勉強会 ~サービス比較してみた アルバイト探し編~｜さがこ
先日11月12日（月）にStudio Opt（スタジオオプト）で開催した、 『UI勉強会 ~サービス比較してみた アルバイト探し編~』のレポートをお届けします。 目次 UI修行ってなに？ 当日の流れ それぞれのチームの視点、UI修行に非デザイナーがはいったら ・今の人はスクショで保存するので、一覧性を高くしたほうが良い ・タイトルが意味不明すぎる。長い読めない（by運用担当者） 【補足】営業のMさんの様変わりがすごかった まとめちなみに筆者は、SNSコンサルタントの非デザイナー。 普段は、企業アカウントの中の人をやってみたり。クソリプトイレットペーパーを販売したりしております。 デザイン視点のUXの知見を増やすべく、ちょっと外部のUI/UXセミナーに顔を出したりしています。 今回のイベントでは、アルバイトを探すアプリ４種を比較しました。 メンバーは、本職のUXリサーチャーから、グラフィック
5段階モデルのStructure(構造)デザインの実践｜kuniorock
この記事は Goodpatch UI Design Advent Calendar 2018の4日目の記事です。 前回は、usagimaruによる結局、画面とはどこなのかでした。また、この記事の前段としてソフトウェア開発に関わる「●●デザイン」の分類を読んでいただけると幸いです。 この記事では、私がデザイナーとして関わったプロジェクトでデザインガイドラインを作成した話を元にギャレットの5段階モデルに記述されている構造層においてデザイナーが何をするのか。というのを個人の経験から書きたいと思います。 POとデザイナーがGUIに対して同じ思想を持つデザインガイドラインと聞いたときに、みなさんはどんなものを想像するのでしょうか。 プロダクトの思想、色やタイポグラフィ、UI Componentなど目的によって粒度は様々かと思います。 今回のデザインガイドラインは、POとデザイナーがGUIに対して同じ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI/UXが無意識に検索行動に与える影響について
本人だけにしか語れない、UX組織立ち上げのリアル ——「UX RUN! | 事業に貢献する、UX組織の挑戦」イベントレポート | Visional Designer Blog
Amazon.co.jp: UIデザイン みんなで考え、カイゼンする。: 栄前田勝太郎, 河西紀明, 西田陽子: 本
高齢者UIプロトタイプ検証の学び
