maiokamoto

株式会社スマレジデザイナー。UI/UX開発・Web施策/解析・ブランディングでサービス…

maiokamoto

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

マガジン

  • デザインの伝え方

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

  • UI アウトプット

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

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

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

  • デザインのお守り

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

    • デザインの伝え方

    • UI アウトプット

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

    • デザインのお守り

最近の記事

  • 固定された記事

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

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

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

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

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

        • 固定された記事

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

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

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

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

        マガジン

        • デザインの伝え方
          maiokamoto
        • UI アウトプット
          maiokamoto
        • オブジェクト指向UIデザイン:読み合わせ
          maiokamoto
        • デザインのお守り
          maiokamoto

        記事

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

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

          実務で使えそう?な「デザイン系」生成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【応用編】