maiokamoto
「O'REILLY デザインの伝え方」を読んで、デザイン説明力をアップする
練習で作成したUIアウトプットまとめ
UIデザイナーの必読書「オブジェクト指向UIデザイン」を読んで得た学びを、自分のための備忘録としてnoteにまとめます。
デザインのお守りと題して、デザイナーが困った時、少しだけ力を貸してくれる「お守り」になる言葉をnoteにまとめました。
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 時間の流れは左から右に表現します。右矢印は次、進む、未来を指すことが多いです。 ２、戻れそう感 左矢印は前、戻る、過去を指すこと
IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『デザイナーも知っておいた方がいい用語』としてざっくりとまとめました。（随時更新予定…✍️） 📝開発系（プログラミング言語）Javascript HTML、CSSと並ぶ主要プログラミング言語。動的なWebページを作るために利用される（スライダー、ポップアップなどのアニメーションなど）。ChromeやFirefoxといった「ブラウザ上」で動作する、PythonやRubyの
UAをGA4に移行する際、Google Tag Maneger（以下GTM）で作成したカスタムイベントの計測で設定した内容を、備忘録として書き残します。 やりたいこと😤 ページでボタンがクリックされる GTMのカスタムイベントが発火 クリックされた場所（ページ階層）、クリックされたボタン（Click URL、またはID、Class名）の情報がGA4に送られる まずは、UAとGA4の相違＆注意点👀 UAでのカスタムイベントの表示はレポートから設定した集計を確認できま
アプリや機能の改善をどのように洗い出し、整理して実行すればいいのか？UX改善と言えば聞こえはいいものの「何から」「どのように」始めればいいのか難しいですね。今回は、実際にあるアプリを自分がユーザーになり評価し、改善ポイントを導き出す「ユーザービリティ評価」のレポートを作成してみたいと思います。 参考にした書籍は「UXデザインをはじめる本」です。この書籍の第二章「ユーザービリティ評価からはじめる」のレポートやポイントを参考にしながら進めようと思います。 課題素材：アプリケー
UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.17（通貨換算アプリケーション） 通常、主要なオブジェクトは自明なものとして抽出されるが、単純なシステムでもユーザー要求がタスクに強く依存しているケースがある。今回は「為替レート計算」のための簡単なアプリですが、これももっとGUIらしくデザインし直す課題。 ヒント：穴埋め式のウィザードは操作を線型に解釈する
UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.16（契約管理アプリケーション） 「新規申請」「変更申請」「解約申請」「承認」「照会」やることのタスク指向で設計されている。 ヒント：タスク同士の間に似たような「検索」や「一覧」が登場する。「承認」は一部の権限のあるユーザーにのみ表示され、「契約照会」は変更などはせず内容を参照するためのもののようです。
『コードを書かずに、想いをかたちに。』のキャッチコピー。 UI/UXに強いグッドパッチさんでも愛用されるノーコードデザインツール『STUDIO』を使って、ポートフォリオサイトを作成してみました。 コードを一切書くことなしに、本格的なWebサイトを制作できるので、コーディングに苦手意識がある私のようなデザイナーにぴったり。 STUDIO PartnersというSTUDIO公認制度もあるようで、ノーコードデザインツールは今後デザイナーとして仕事をしていく上での大きな助けになる
UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。 ワークアウト：Level.15（出張申請・精算アプリケーション） 社員が出張・精算を行うアプリケーションです。 申請画面：出張を計画している社員が、行き先、ルート、日程などを申請する画面です。 承認画面：出張から帰ってきた社員が、実際の行動なようやかかった経費を入力し、申請番号を入力し精算する画面。サブミットされた申請内容を上長と
ワークアウト：Level.14（サイト管理アプリケーション） サイトの全体像が掴みにくく、GUIらしくないモーダルなサイトになっています。 ヒント：まるでコマンドプロンプトのファイル操作感。一般的なユーザーは「自分が何を操作しているのか」「その結果どうなったのか」が把握しにくい。 オブジェクト抽出：「サイト」と「ページ」。サイトとページの両方には属性で「設定」がある。各種のメタ情報があり、内容と呼ばれる属性を持っています。 各々が事前作成したレイアウトを見ていく サ
ワークアウト：Level.13（アセット管理アプリケーション） 下の画面の状態はCRUD（作成、閲覧、更新、削除）のやることで入り口が分かれています。 ヒント：それぞれの画面フローはタスクに応じて無駄なくできているが、フロー同士では同じような画面が繰り返されています。検索に連続し更新や、削除をしたい場合TOPに戻らないと行けない状態です。 オブジェクト抽出：アセットのみ 各々が事前作成したレイアウトを見ていく No.1です。オブジェクトはアセットのみで、ビューはア
ワークアウト：Level.12（保険契約の顧客管理アプリケーション） ヒント：具体的なアプリケーションタスクが記載されているので、どのような業務内容か、要望を把握する。 オブジェクト抽出：「契約」「顧客」「申込」「事故」の４つオブジェクトを抜き出します。申込を契約に入れるか、顧客に事故を含むかなど迷うポイントはありますが、抜き出されたタスク以上の業務が各オブジェクトに含まれていると考え、すべてメインオブジェクトにしておき、タスクの紐付きが最も多い「契約」が最も多くのオブジ
ワークアウト：Level.11（イベント管理アプリケーション） ヒント：やることベースで作成されているため、同じような画面が繰り返されている。資材管理に横スクロールが発生し、閲覧しづらくなっている。 オブジェクト抽出：イベントと資材の２つ。ポイントは元のレイアウトにおいて「日程確認」のフローがあったということ。 レイアウトパターン検討：最も重要なオブジェクトは「イベント」。本書では左ペインのレイアウトが採用されている。イベントのコレクションに「日程（ガントチャート表示）
ワークアウト：Level.10（スマートフォン用の営業支援アプリケーション） タスクベースになっている問題の状態を、オブジェクトベースのアプリケーションにリバースエンジニアリングする。 ヒント：「訪問予定」「訪問検索」のように名詞と動詞が混在しており、タスクとオブジェクトの関係が曖昧になっている。「やること」を選んでから「対象」を選ぶフローを改善する。 オブジェクト抽出：ある程度出揃っているタスクから「オブジェクト」を抽出し、名詞を拾って見ると「顧客」「案件」「訪問予定
