UIのお作法。28個の「〇〇できそう感」をまとめました。

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 時間の流れは左から右に表現します。右矢印は次、進む、未来を指すことが多いです。 ２、戻れそう感 左矢印は前、戻る、過去を指すこと

UIデザイナーのための、開発用語カンペ📝（コーディング系：前編）を追記しました✍️ 「HTML Living Standard」「tailwind」など最新のHTML、cssフレームワークの単語を入れてます🗒️ https://note.com/okamotomai/n/na3ba6a862871

ハンバーガーなどのメニューアイコンと、アイテムの表示形式の切り替えアイコンは似ている。機能は全然違うので、少なくとも同じアイコンを混在させるない！

UIデザイナーのための、開発用語カンペ📝（コーディング系：前編）

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました✍️ 今回はコーディングに関する用語と、コードの走り書きメモを記載します。 📝HTML系HTML Living Standard html の最新のスタンダード。HTMLの最新の仕様を表しています。HTML5との大きな違いはありません。 細かいタグの違いは（HTML Living S

UIデザイナーのための、開発用語カンペ📝（デザイン・画像ツール系）

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。（追記：note用語で分類分けました✍️） 📝デザイン・画像ツール系Zeroheight FigmaやSketchのデザイントークンやコンポーネントを簡単に取り込むことができる。UIコンポーネントをドキュメントと共に残し、デザイン本心やルールを残すようなもの。Do/Don'tの記載も

画像付きのtooltip、やっぱり分かりやすいな😀 「画像」と「ファイル」との違いが、直感的に理解できる。

「本当に消していいか？」 重要な削除などは文字を入力させてから実行させる例✍️

slackのダイレクトメッセージ。自分へのダイレクトメッセージのプレースホルダーは「メモを書く」なのか〜。確かに自分へのダイレクトメッセージ送信は、自分へのメモとかで使用することが多い💡

KFCの公式アプリ。 会員証画面は、背景にチキンが降ってくる仕掛け🍗 リニューアル前のアプリの課題の一つに「会員証の提示率向上」があったそう。 この仕掛けがあるだけで、ユーザーの印象の残り方と、画面自体の愛着度の増し方が違う。画面の利用率を上げる、かつ楽しい仕掛けで素敵だな😀

niko and...のサイトのスクロールを促すUI、めっちゃいい😀！ スクロールが増えるにつれて、アイコンの表情が変わる。 すぐ仕様が理解できるUIではないけど、気づくとなんか嬉しい、楽しい仕掛け。

新規作成がまとまっている！ createの中の各category+マークを押すとviewを追加できるUI。 そうか〜、なるほどなぁ😳

ナビゲーションには、「アクション系のメニュー（例えば、新規作成）」を置かないのが通常だと思うのですが、 ユーザーの利用の頻度、背景によって、 「置く」「置かない」を考えても良いのかな？と思った例。 きっと、「メッセージ」の作成だけは、その方がいい理由があるはず。

クリック率は良さそうだけど…？ 特に商品に「いいね」していないのに、こういったテキストが出ると…。 「あれ？知らないうちに、なんか押したっけ？」とか誤解を招くような。 ユーザーにお知らせを見て欲しいが故に、自分もこういうテキスト作ってしまう時もありますがよくないのかも…。

実務で使えそう？な「デザイン系」生成AIサービス✌️

生成AI系のサービスの展開早すぎて、情報追いつけない！ ちょっと前に社内で、生成系のサービス勉強会（雑談会）をやったので、 軽く触ってみて使えそうと思ったサービス、おもしろ生成などまとめてみました✍️。 … ロゴ生成系AiLogoAI 無料で生成できて、有料の買い切りで商標登録までしてもらえる。 ロゴ叩き台や、複数案出しの際、アイデアとして活用するのは全然アリ。 Logo Diffusion 手書き、テキストから画像を生成できる。 が、無料版は中々生成できない

増えすぎたブクマの替わりに。厳選！UIギャラリーサイト10選📸

UI・Webデザインのギャラリー集・アーカイブ集は、デザイナーにとっては、とてもありがたい存在ですよね。 ですが、ブラウザのサイトブックマークもいつの間にか膨大な数に…。 どれがなんのサイトだったっけ😕？？ ちょっと自分用に整理をするためにも、 最新のサービスが掲載されているUIギャラリー・Webサイト集を、厳選！10個で集めてみました📸 （10個でもスクショのソース量としては、十分でした） このnoteの使い方 サイトブックマーク替わりに使ってください🙏 📱アプリ系

Lottie Files 覚書 （作業メモ&Tips📝）

最近よく耳にするLottie Files。 触る機会があったので、実作業と便利Tipをまとめました。 Lottie FilesとはLottie Files Lottie（ロッティー）とは、Airbnbが開発したアニメーションライブラリ。CSSやJavascriptを使用せずに作成できる、オープンソースのWebアニメーションファイル形式。JSONでの書き出しが可能。 ついでに、Jsonとは？ JSON (JavaScript Object Notation)。JavaS