#UIデザイン
オブジェクトベースなUIデザイン
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。
オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。
オブジェクトベースUI設計
【保存版】デザイナーがチェックすべき情報収集先16選
デザイナーがチェックすべき情報収集先をまとめてみました。
普段の情報収集に是非ご活用頂き、デザイナーのスキルアップの手助けになれれば幸いです。
自分の場合、デザインを制作する際は、PinterestとGoogle画像検索をフル活用しています。
またPinterestとnoteのUIやサービス設計は非常に参考になるので、そちらもあわせて見てみると勉強になると思います。
1、Pinterestクラ
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた
こんにちは。
今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。
内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ...
STEP1：UIデザインに関係する一
UIにおける体言止め（名詞）と動詞
自分の携わるプロダクト「ABEMA」にて、UIにおける文言のガイドラインを定めて運用している。
しかし、一部難しいなぁと思うテーマがあったのでメモ。
それが体言止め（名詞）と動詞についてだ。
ちなみに、その文言ガイドラインで何を記しているかはコチラ。
- 本ガイドラインのゴール
- 簡潔に、正確に
- 謙譲語・尊敬語について
- 体言止め（名詞）と動詞
- 過去形と現在形について
自分でUIを作るときに見てるサービスを紹介するよ
こんばんは！今日ラストの投稿になります。
今、私はCANEATというサービスのUIを作っているのですが、その時にデザインの参考として見ているサービスを紹介したら役に立つのでは？と思い書くことにしました。
どんな時に参考にしているか？私が他の人のUIを参考にするのは、主に次の2つの場合です。
1. 欲しいパーツがある
一番早いのは、過去にトレースして作ったパーツをそのままコピーアンドペーストする
【Poiboy】アプリのコンセプト文をチューニングした話
この内容は、マッチング業界のデザイナーが集まるMeet upで、発表したものです。
発表した内容を、以下に書いていきます
----------
こんにちは、青野です。まず自己紹介させてください。
新卒でヤフーに入って、そこでWebデザインを担当していました。去年の8月にDiverseに転職しています。
今はPoiboyというマッチングサービスのデザイナーです。
私が8月に入社したときの
【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
引用元 Google - Material Design
Understanding motion - Material Design
※動画像データもこちらから引用させてい
【翻訳してみた】マテリアルデザイン - 速度について
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
前章 : マテリアルデザイン - モーションデザインを理解すること
引用元 Google - Material Design
Speed - Material Design
【翻訳してみた】マテリアルデザイン - コレオグラフィ
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
前章 : マテリアルデザイン - 速度について
引用元 Google - Material Design
Choreography - Material Design
※動
【翻訳してみた】マテリアルデザイン - 動きのカスタマイズ1
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。今回は長いので2つに分けて投稿させていただきます。
前章 : マテリアルデザイン - コレオグラフィ
引用元 Google - Material Design
Customi
パスワードが合っていたことを視覚的にフィードバックするアニメーション
前回に引き続き、今回はパスワードが合っていたバージョン。
パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。
①チェックマークの出現と色の変化パスワード入力後にチェックマークが出現し、同時に色が変わることでパスワードが間違っていなかったことを視覚的に表現しています。
最初は鍵のアイコンだった部分が、チェックマークに切り替わることで、「鍵を開いた」ことを