maiokamoto

株式会社スマレジデザイナー。UI/UX開発・Web施策/解析・ブランディングでサービスをグロースするお仕事をしています。 デザインやUIに関する記事を、『ハードル低く、分かりやすく」をモットーに書いています😄 https://bento.me/maiokamoto

maiokamoto

株式会社スマレジデザイナー。UI/UX開発・Web施策/解析・ブランディングでサービスをグロースするお仕事をしています。 デザインやUIに関する記事を、『ハードル低く、分かりやすく」をモットーに書いています😄 https://bento.me/maiokamoto

マガジン

  • UIデザイナーのための開発用語カンペ✍️

    開発チームで働くUIデザイナーのための、ちょっとした用語のメモです。

  • デザインの伝え方

    「O'REILLY デザインの伝え方」を読んで、デザイン説明力をアップする

  • UI アウトプット

    練習で作成したUIアウトプットまとめ

  • オブジェクト指向UIデザイン:読み合わせ

    UIデザイナーの必読書「オブジェクト指向UIデザイン」を読んで得た学びを、自分のための備忘録としてnoteにまとめます。

  • デザインのお守り

    デザインのお守りと題して、デザイナーが困った時、少しだけ力を貸してくれる「お守り」になる言葉をnoteにまとめました。

最近の記事

  • 固定された記事

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

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

    • HSB(色相、彩度、明度)を、足し算・引き算で馴染ませる

      この記事中の「カラーを理解するためには数学が大切」セクションを参考に、HSBで色調整する方法を考察してみました。 HSB(HSV)値の基本情報 記事中で使われているHSBを理解するための、基本情報。 彩度(S)を下げると最後は白になり、明度(B)下げると最後は黒になることを理解しておく。 では記事で紹介されている、HSB変更の2つの方法を実践してみる。 方法1✍️: 色相は同じに、彩度と明度を調整 色相(H)は同じままに揃え、BASEにした色を下記のルールで変更する

      • 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のお作法。28個の「〇〇できそう感」をまとめました。

        • HSB(色相、彩度、明度)を、足し算・引き算で馴染ませる

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

        • UIデザイナーのための、開発用語カンペ📝(コーディング系:前編)

        マガジン

        • UIデザイナーのための開発用語カンペ✍️
          3本
        • デザインの伝え方
          3本
        • UI アウトプット
          4本
        • オブジェクト指向UIデザイン:読み合わせ
          19本
        • デザインのお守り
          3本

        記事

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

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

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

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

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

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

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

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

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

          Lottie Files 覚書 (作業メモ&Tips📝)

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

          Lottie Files 覚書 (作業メモ&Tips📝)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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