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の記載も

実務で使えそう？な「デザイン系」生成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

【2024🎍年明け勉強会】Adobe Fireflyを使ってみよう🌈

生成系AIが話題になり、AdobeのPhotoshopやIllustratorでも生成機能が使えるようになりましたね。今回は、Adobe AI画像生成ツール「Adobe Firefly」を使ってみようとの企画でチームメンバーと勉強会をしてみました。 Adobe Fireflyとは？テキストを入力して生成するAdobeの画像生成AI。（日本語もOK！） 商用利用もOK⭐️で、photoshop上だけではなく、Webブラウザ上で誰でも画像を生成することができます。 Web版で

【Figma初心者向け】腕試し！Figmaスキルチェック問題を作成してみました💪

figmaの理解度をチェックする、腕試しの問題集を作成してみました😄 かくいう私もFigmaを使い始めてまだ1年程度で、まだまだ使いこなせていません。Figmaの機能の中でも重要だと思う「スタイル」「オートレイアウト」「コンポーネント」の３要素に絞って、どこまで理解できているかチェックする問題を考えてみました。 問題集リンクテストに必要なパーツ、ヒントや回答を掲載しています。 スタイル編オートレイアウト編コンポーネント編 いかがでしたでしょう？ 頭の中で、「これだったら

開発チームで働くUIデザイナーのための、開発用語カンペ📝（開発系）

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました。（随時更新予定…✍️） 📝開発系（プログラミング言語）Javascript HTML、CSSと並ぶ主要プログラミング言語。動的なWebページを作るために利用される（スライダー、ポップアップなどのアニメーションなど）。ChromeやFirefoxといった「ブラウザ上」で動作する、Pyt

子どもの成長を記録するアプリ

GTMカスタムイベントを、GA4で計測する

UAをGA4に移行する際、Google Tag Maneger（以下GTM）で作成したカスタムイベントの計測で設定した内容を、備忘録として書き残します。 やりたいこと😤 ページでボタンがクリックされる GTMのカスタムイベントが発火 クリックされた場所（ページ階層）、クリックされたボタン（Click URL、またはID、Class名）の情報がGA4に送られる まずは、UAとGA4の相違＆注意点👀 UAでのカスタムイベントの表示はレポートから設定した集計を確認できま

UX実践！とあるアプリの改善ポイント😤

アプリや機能の改善をどのように洗い出し、整理して実行すればいいのか？UX改善と言えば聞こえはいいものの「何から」「どのように」始めればいいのか難しいですね。今回は、実際にあるアプリを自分がユーザーになり評価し、改善ポイントを導き出す「ユーザービリティ評価」のレポートを作成してみたいと思います。 参考にした書籍は「UXデザインをはじめる本」です。この書籍の第二章「ユーザービリティ評価からはじめる」のレポートやポイントを参考にしながら進めようと思います。 課題素材：アプリケー

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.18【応用編】

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.17（通貨換算アプリケーション） 通常、主要なオブジェクトは自明なものとして抽出されるが、単純なシステムでもユーザー要求がタスクに強く依存しているケースがある。今回は「為替レート計算」のための簡単なアプリですが、これももっとGUIらしくデザインし直す課題。 ヒント：穴埋め式のウィザードは操作を線型に解釈する

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.17【応用編】

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.16（契約管理アプリケーション） 「新規申請」「変更申請」「解約申請」「承認」「照会」やることのタスク指向で設計されている。 ヒント：タスク同士の間に似たような「検索」や「一覧」が登場する。「承認」は一部の権限のあるユーザーにのみ表示され、「契約照会」は変更などはせず内容を参照するためのもののようです。

コードを書かずに、想いをかたちに。STUDIOで、Portfolioを作成してみる✌️

『コードを書かずに、想いをかたちに。』のキャッチコピー。 UI/UXに強いグッドパッチさんでも愛用されるノーコードデザインツール『STUDIO』を使って、ポートフォリオサイトを作成してみました。 コードを一切書くことなしに、本格的なWebサイトを制作できるので、コーディングに苦手意識がある私のようなデザイナーにぴったり。 STUDIO PartnersというSTUDIO公認制度もあるようで、ノーコードデザインツールは今後デザイナーとして仕事をしていく上での大きな助けになる

『オブジェクト指向UIデザイン』をチームで読み合わせ。day.16【応用編】

UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.15（出張申請・精算アプリケーション） 社員が出張・精算を行うアプリケーションです。 申請画面：出張を計画している社員が、行き先、ルート、日程などを申請する画面です。 承認画面：出張から帰ってきた社員が、実際の行動なようやかかった経費を入力し、申請番号を入力し精算する画面。サブミットされた申請内容を上長と