もよさん／UIUXデザイナー

看護師▶︎Webデザイナー▶︎UIUXデザイナー

もよさん／UIUXデザイナー

看護師▶︎Webデザイナー▶︎UIUXデザイナー

オブジェクト指向UI（OOUI）の制作３ステップ

オブジェクト指向UI（OOUI）の制作はこの３ステップ。 1.オブジェクトを定義する 2.UIフロー図を定義する 3.UIパターンを出す 1.オブジェクトを定義するまずは、UIで表現するメインオブジェクト（コンテンツ）を決める。 このメインオブジェクトを中心にしてページの構成を決めていく。 ①要件から動作フローを整理する オブジェクトを定義するには、 まず、要件を動作フローに整理する。 「新規作成」→、、、とか、 「通知確認」→、、、とか。 ここはまだ開発側。機能要

もよさん／UIUXデザ…

    • ダメなUI その理由

      オブジェクト・コンテンツを中心にしたのが オブジェクト指向UI。 対して、タスクを中心にしたのが タスク指向UI。 タスクごとの部屋に分かれている。 Aをするにはこの部屋で、Bをするのはこの部屋で、という感じ。 これは非常にまずい。 使いにくい。分かりにくい。 タップ数が多くなるので時間がかかる。自然と使われなくなる。 でも、やってしまいがちなのは、 要件からUIへの翻訳、変換がきちんとされていないから。 要件のままでは「機能」意識が強い開発視点の言葉のまま。 だか

      もよさん／UIUXデザ…

      • ３つのナビゲーションUI

        ナビゲーションは、 構造・骨格を担う部分になるので、 UIの使いやすさ、分かりやすさにダイレクトに影響してくる。 見えないものは存在していないと認識されるので、 ナビゲーションされていないものは、伝わらない。 なので、「何」を「どのように」ナビゲーションするかはすごく重要。 タップ数が少なく済むことで、アプリの定着率や継続率にも影響あり。 1.グローバルナビゲーション グローバルナビゲーションには、 サービスのゴールに対して重要なアクション、 価値を体験できるユース

        もよさん／UIUXデザ…

        • 音声SNS 投稿検索UIを作ってみたら。

          カードUI 投稿検索ページでは、 様々な情報を1つの塊として認識されるカードUIを採用。 複数の情報をひとかたまりと認識されることで、情報量が多くてもユーザーを疲れさせない。迷わせない。 カードUIの基本的な構造はマテリアルデザインを採用。 カードUIに限らず、UIの基本的な型なのでまずはこのマテリアルデザインを採用。 スタンダードなUIなので、学習コストが低い。 ゆえに、使いやすいUIが実現でき、継続的に使われるUIが実現でき、 また、メンテナンスしやすいし、実装しや

          もよさん／UIUXデザ…

          音声SNS フィードUIを作ってみたら。

          1.閲覧性を高める工夫を施す ・閲覧性が高いリスト型UIを採用する ・アカウント情報、コンテンツ内容（テキスト・音声）、アクションの3つのブロックでレイアウトしている ・「誰が」「何を」を明確に示している ←フォントウェイト、レイアウト 2.アクションしやすい工夫を施す ・「押したら音声が流れる」ことを想起させる ・コンバージョンに関わる「投稿」ボタンは、押しやすいエリアで目立つカラーリングでフローティングにし、他の情報を明確に区別する ・いいねボタンなどは周囲の余白を

          もよさん／UIUXデザ…

          音声SNS フィードUIを作ってみたら。

          もよさん／UIUXデザイナー

          音声SNS投稿UIを作ってみたら。

          投稿UI：収録前 音声収録が最優先。 フォーカスを一番に当てる。 それ以外は可能な限り優先度を下げる。 キーボードが立ち上がったら 情報が隠れてしまわないか、ちゃんと確認すること。 投稿UI：収録中 メインアクションが一番分かりやすく、そして押しやすく。（エリア、大きさ） 「誰が」話しているか、を明確に。迷わせない。 そして、ここだけはページの階層関係・従属関係ではない。 別モード、別レイヤー、別状態。 投稿UI：収録後 フィードとほぼ同じレイアウトにし、ユーザ

          もよさん／UIUXデザ…

          音声SNS投稿UIを作ってみたら。

          もよさん／UIUXデザイナー

          通知画面UIを作ってみたら。

          通知画面UIは… 1.閲覧性を高める工夫を施す ・リストUIを採用する ←閲覧性が高い ・「誰が」「何を」を明確に示している ←フォントウェイト、レイアウト（アイコン・コンテンツ・アクション） 2.視認性を高める工夫を施す ・アイコンを採用する ←「文字で読ませる」ではなく、色と形で「認識させる」 ・アクションは指に近い側に配置し、優先度を一番高くしている

          もよさん／UIUXデザ…

          通知画面UIを作ってみたら。

          もよさん／UIUXデザイナー

          設定画面UIを作ってみたら。

          設定画面UIは… ・グルーピング&リストが基本構成 ・リスト名は簡潔でわかりやすいラベル ・OS標準に倣った方が実装しやすい、メンテナンスしやすい

          もよさん／UIUXデザ…

          設定画面UIを作ってみたら。

          もよさん／UIUXデザイナー

          UI/UX課題　４つの見つけ方

          1.行動フローで見つける既存サービスをもとに行うことが多い。 各フローにギャップがないかをチェックしていく ゴールまでの思考と行動の課題を見つける 出来るだけ細かく書く方が良い ここまでやるのかぐらい書く方が良い ←ヒントがたくさん眠っていることが多いから 行動フローから課題を見つける方法 まずはゴールを決める →スタートを決める（アプリを開く前からスタートしている） →行動フローを書いていく →使う人が実際に感じそうなことを書き出す（ヒアリングもしくは仮説） →どうして

          もよさん／UIUXデザ…

          UI/UX課題　４つの見つけ方

          もよさん／UIUXデザイナー

          3秒UX

          ３秒で。 ざっくりと。 UXとは、 「価値の提案」。 ユーザーの、 「Before→Afterを定義」すること。 1.提供価値を定義して、 2.顧客を把握すること。 この2つを明確にするために、 ペルソナつくったり、 ヒアリングしたり、 リサーチしたり、 CJM作ったりする。 あいまいの場合は、 「Why?」を繰り返して明確にする。

          もよさん／UIUXデザ…

          3秒UX

          もよさん／UIUXデザイナー

          価値あるデザイナーの３つの視点

          価値あるデザイナーとは、 ・ビジネス ・テック ・クリエイティブ この３視点から物事を考えられる人。 クリエイティブ視点は、 もちろん専門家であるべき視点。 テック視点は、 デザイナーが専門家になるべきではないとは思うけど、 やはりその視点はあった方が絶対絶対良い。 というか、必要。 デザインを的確にお願いできる。 工数を減らせる。 ビジネス視点は、 デザイナーとして今後ますます必要とされる気がする。 感覚だけではなく、数字で裏付けされた根拠のあるデザイン提案。 なぜ、

          もよさん／UIUXデザ…

          価値あるデザイナーの３つの視点

          もよさん／UIUXデザイナー

          UI/UX解決策はこの３つ

          UI/UXにおける解決策は、 ざっくり分けて大体この３つ。 1.機能 ユーザーにとって本当に価値があるものか？ ユーザーにとって意味があるものか？ ユーザーにとって利便性が良いものか？ 2.使いやすさ 情報設計が正しいか？ 情報が伝わりやすいか？ レイアウトが正しいか？ 操作性が良いか？ 3.表現 ビジュアルが適切か？ ユーザーの心情に合っているか？ 与える雰囲気が適切か？ 1.機能と2.使いやすさが大体UXで、 3.が大体UI。（企業によるけど）

          もよさん／UIUXデザ…

          UI/UX解決策はこの３つ

          もよさん／UIUXデザイナー

          UIパターンは2つだけ。

          「何を」「どこに」置くのか、その２つを決める。 UIパターンで決めることはその２つだけ。 「何を」 ←どんな情報が必要？ ←どんなアクションが必要？ ⇒ブレストでたくさん出す。 ⇒発散したら、それぞれの優先順位を決める。 「どこに」 ←ラフでレイアウトを描いてみる。 ←ブレストのようにたくさん描いてみる。 ←とにかくパターンを出す。 ⇒実際に画面上で起こすと全然違ってくるので、ラフの時点で精査はしないほうが良い。 パターン出し ラフで出したパターンを実際にFigma

          もよさん／UIUXデザ…

          UIパターンは2つだけ。

          もよさん／UIUXデザイナー

          新規登録UIを作ってみたら

          新規登録画面の4つの定番1.導線の定番 ・メアド・パスワード ・各SNS ・iOSはAppleでログインを必ず載せること 2.ログインと新規登録が行き来できるのが定番 基本的にログインと新規登録が行き来できるように設計するのが定番。 3.アクション動線を目立たせるのが定番 コンバージョンに関わる登録ボタンが一番目立つように設計する。 登録のアクションを迷わせないこと。 4.利用規約が定番 利用規約は基本的に必要なので、載せること。 新規登録画面の配色1.必ずボ

          もよさん／UIUXデザ…

          新規登録UIを作ってみたら

          もよさん／UIUXデザイナー

          UI構造

          階層 平面な画像上で階層の関係を伝えることが大切。 分かりやすい、使いやすいUIに直結。 背景の色だったり、シャドウだったりで表現する。 明るい方が手前、暗い方が奥と認識する性質を活用する。 状態の切り替え 状態の切り替え時は、 モーダルで表示させる。 親子関係にはなく、 別の状態、別のモード。 UIの3要素 UIを構成している3つの要素 ・ナビ ・コンテンツ ・アクション これらは、 ページ全体にも該当するし、 コンテンツ内などにも該当する。 これらが把握で

          もよさん／UIUXデザ…

          UI構造

          もよさん／UIUXデザイナー

          レスポンシブデザインのUI

          ブロック単位で考える UIの基本３構成は、 ・ナビゲーション ・コンテンツ ・アクション （アクションはナビかコンテンツに付随することも） それらをブロック単位でレイアウトを考えることが大切。 固定幅か%かを常に意識する 固定幅か%か、 不可変か可変か、を常に意識することが大切。 ちなみに、スマホでのタップ範囲は40pxぐらいは確保すること。 画像の書き出し ・2xで書き出す 高解像度に耐えられるように ・アイコンはsvg形式で 実装者への伝え方 プロトタイ

          もよさん／UIUXデザ…

          レスポンシブデザインのUI

          もよさん／UIUXデザイナー