はらぐち | COMPASS

教育系のプロダクトの会社でUIデザイナーをしています。とても可愛いオス猫を飼っています。

はらぐち | COMPASS

教育系のプロダクトの会社でUIデザイナーをしています。とても可愛いオス猫を飼っています。

マガジン

  • 🍎HIGざっくりまとめ

    AppleのHuman Interface Guidelinesをしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

最近の記事

  • 固定された記事

理想のデスク環境ができたので自慢します2022

noteのデスクをすっきりさせるマガジンに出会い、ケーブルを全力で排除し、理想を追求する姿勢に感銘を受けました。 私はフルリモートの職場なので、毎日8時間以上自宅デスク過ごします。「そこそこ」ではなく「大満足」のビジュアルにしたい・・・。 やるぞ!と立ち上がったものの、生来の優柔不断が災いしパーツや色選びに手間取り半年がかりのプロジェクトに。遂に毎日るんるんで仕事できる理想のデスク環境ができましたので、憧れだったデスク自慢noteを書きます! レイアウト壁の方を向いてるの

    • 英語学習アプリ『epop』がすごい!王者『Duolingo』から乗り換えた理由

      学習アプリのリサーチの一環としていくつかの英語学習アプリに触れた中で、学習メソッドやUXの面で最も気になったのは「epop」でした 個人的に英語を勉強するには、それまで愛用していた英語アプリの王者「Duolingo」をよりこちらがいいなと乗り換えてしまいました (Duolingoの方が優れてるとこもいっぱいありますが、あくまで個人としてはこっちがよかった)。 具体的な感動ポイントをDuolingoとの比較も入れつつ紹介していきます。 まずは前提としてepopの概要を…

      • Figma ボタンインスタンスでアイコンの色が継承されない問題の解決法

        発生していた問題Figmaでボタンコンポーネントを作って、アイコンを配置。インスタンスとして配置したボタンのアイコンを変えると色が初期値に戻っちゃう 解決方法アイコンコンポーネントの中のすべてのベクターを以下のように変更することで解決しました! 単一のレイヤーにする 複数のシェイプに別れている図案も結合してひとつにしてしまいましょう Figma上でやる場合は対象のシェイプを選択して「選択範囲を結合 ⌘E」 複雑な形状でFigma上ではうまくできない時は一旦イラレに持っ

        • デザイナー視点で「要求定義書」に書いてあって欲しいこと

          私はプロダクトのUIデザイナーをしていて、業務の中で要件定義書と画面仕様書は書くのですが要求定義書は書きません。自分の業務をする上で要求がこういう形で書いてあったら助かるなぁというのを勝手に考えてみました。 参考にした書籍最初から要求定義のこと考えよう!と思ってやったわけではなく、書籍「カイゼン・ジャーニー」を読んでいて、備忘録的に要求定義のテンプレを作ってみました。とはいえ私は業務上、要求定義をすることはないのでそのままになるはずが、進行中のプロジェクトでたまたま活用する

        • 固定された記事

        理想のデスク環境ができたので自慢します2022

        マガジン

        • 🍎HIGざっくりまとめ
          19本

        記事

          ChatGPTをUIデザインのコーチにする方法

          タスクの実行者△ → コーチ◎ChatGPTは多くの人が自分のタスクを代わりにやらせるツールとして活用していますが、自分の業務では使える範囲が限定的で、イマイチでした。 私はUIデザインプロジェクトで少し異なるアプローチを試みました。 ChatGPTをタスクの実行者ではなく、コーチ役にしたのです。 これが予想以上にワークし、自分のスキルアップにもつながりました。 ここでは、私がどのように実際のデザインプロセスの支援に役立てたか、具体的なプロンプトと回答の流れを交えて紹介しま

          ChatGPTをUIデザインのコーチにする方法

          🍎HIGざっくりまとめ Patterns編 vol. 10 Live-viewing apps(ライブビューイングアプリ)

          ライブビューイングアプリには、他のtvOSアプリとは異なる、いくつかのユニークなデザイン上の課題があります。とりわけ、アプリはライブコンテンツを高め、優先させる必要があります。どの画面でも、ライブコンテンツに目を向けさせ、一目でVODコンテンツと見分けがつくようにするのです。 ベストプラクティスライブコンテンツを目立つように配置し、簡単にアクセスできるようにする。 ユーザーはテレビを見るためにアプリを利用するので、アプリを起動してからコンテンツが再生されるまでの間隔を短くし

          🍎HIGざっくりまとめ Patterns編 vol. 10 Live-viewing apps(ライブビューイングアプリ)

          🍎HIGざっくりまとめ Patterns編 vol. 8 Going full screen(フルスクリーン化)

          iPhone、iPad、Macはフルスクリーンモードで、システムコントロールやアプリコントロールを、人が操作するまで隠しておくことができるため、気が散らない環境を作ることができます。 ベストプラクティスフルスクリーンモードは、あなたの体験にとって意味がある場合に有効にしてください。 ゲームをしたり、メディアを再生したり、没入型のタスクを実行したりするときにフルスクリーンモードが喜ばれますが、すべてのアプリがそのような体験を可能にするわけではありません。たとえば、macOSの

          🍎HIGざっくりまとめ Patterns編 vol. 8 Going full screen(フルスクリーン化)

          🍎HIGざっくりまとめ Patterns編 vol. 6 Entering data(フィードバック)

          フィードバックは、現状を把握し、次に何をすべきか、行動の結果を理解し、失敗を回避するのに役立ちます。 アプリやゲームの操作に際して、明確で一貫したフィードバックを提供することで、直感的に理解でき、より深い探求を促すことができます。フィードバックは、次のようなさまざまなことを伝えることができます。 何かの現在の状態 重要な任務や行動の成功または失敗 悪い結果を招く可能性のある行為についての警告 ミスや問題状況を修正する機会 最も効果的なフィードバックは、情報の重要性

          🍎HIGざっくりまとめ Patterns編 vol. 6 Entering data(フィードバック)

          🍎HIGざっくりまとめ Patterns編 vol. 5 Entering data(データ入力)

          情報入力は、どのようなインタラクション手法を用いても、面倒な作業になります。できるだけ多くの情報を事前に収集し、入力に必要なデータ量を最小限に抑えるとともに、利用可能なすべての入力方法をサポートし、利用者が自分に適した方法を選択できるようにすることで、利用体験を向上させることができます。 ベストプラクティス可能な限りシステムから情報を取得する。 位置情報やカレンダー情報など、設定から自動的に収集できる情報や、本人の許可が必要な情報については、提供を求めないようにしましょう。

          🍎HIGざっくりまとめ Patterns編 vol. 5 Entering data(データ入力)

          🍎HIGざっくりまとめ Patterns編 vol. 4 Drag and drop(ドラッグ&ドロップ)

          ドラッグ&ドロップで、選択した写真やテキストなどのコンテンツを別の場所に移動したり、複製したりすることができます。 iOS、iPadOS、macOSは、タッチスクリーン上のジェスチャー、ポインティングデバイスとのインタラクション、そしてフルキーボードアクセスモードによるドラッグ&ドロップをサポートしています。さらに、Universal Controlを使えば、MacとiPadの間でコンテンツをドラッグすることもできます。Macでは、VoiceOverのユーザーもドラッグ&ド

          🍎HIGざっくりまとめ Patterns編 vol. 4 Drag and drop(ドラッグ&ドロップ)

          🍎HIGざっくりまとめ Patterns編 vol. 3 Collaboration and sharing(コラボレーションと共有)

          優れたコラボレーションと共有の体験は、シンプルで応答性が高く、コンテンツに集中できる一方で、他者との効果的なコミュニケーションを可能にします。 システムインターフェイスとメッセージアプリは、コラボレーションや共有のための一貫した便利な方法を提供するのに役立ちます。例えば、メッセージの会話にドキュメントをドロップしたり、使い慣れた共有シートで宛先を選択することで、コンテンツを共有したり、コラボレーションを開始したりすることができます。 ベストプラクティス共有ボタンをツールバ

          🍎HIGざっくりまとめ Patterns編 vol. 3 Collaboration and sharing(コラボレーションと共有)

          🍎HIGざっくりまとめ Patterns編 vol. 2 Charting data(データのチャート化)

          チャートは、多くのテキストを読み解くことなく、複雑な情報を効率的に伝えることができる方法です。また、チャートはグラフィカルであるため、ユーザーエクスペリエンスの個性を表現したり、インターフェースに視覚的な面白さを加えたりすることも可能です。 ※チャートの作成に使用するコンポーネントについては、「チャート」を参照してください。 チャートは、一目でわかる情報を提供するシンプルなグラフィックから、アプリの目玉となるリッチでインタラクティブな体験まで、さまざまな角度からデータを探

          🍎HIGざっくりまとめ Patterns編 vol. 2 Charting data(データのチャート化)

          🍎HIGざっくりまとめ Patterns編 vol. 1 Accessing private data(個人情報へのアクセス)

          アプリやゲームを信頼してもらうためには、プライバシーに関連するデータやリソースが必要で、それらをどのように使っているのかを透明にしておく必要があります。 人々は非常に個人的な方法でデバイスを使用しており、アプリが自分のプライバシーを保護するのに役立つことを期待しています。人々を追跡したり、データやデバイスリソース(広告識別子を含む)にアクセスする許可を要求することに加え、アクセスを許可されたデータを保護することが不可欠です。 許可申請アクセスするために許可を求めなければなら

          🍎HIGざっくりまとめ Patterns編 vol. 1 Accessing private data(個人情報へのアクセス)

          🍎HIGざっくりまとめ Foundations編 vol. 11 Typography(タイポグラフィ)

          タイポグラフィーは、読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。 ベストプラクティス多くの人が読みやすい最小フォントサイズを維持するように努めます。 ピクセル密度や明るさなど、デバイスのディスプレイの違いは、適切な最小フォントサイズに影響を与える可能性があります。また、読み手とディスプレイの距離、視力、動いているかどうか、環境光の状態など、その他の要因も読みやすさに影響します。 Dynamic Typeをサポートする

          🍎HIGざっくりまとめ Foundations編 vol. 11 Typography(タイポグラフィ)

          🍎HIGざっくりまとめ Foundations編 vol. 10 SFシンボル

          SFシンボルは、サンフランシスコのシステムフォントとシームレスに統合され、あらゆるウェイトとサイズのテキストと自動的に整列する、一貫性があり高度に設定可能な何千ものシンボルを提供します。 ナビゲーションバー、ツールバー、タブバー、コンテキストメニュー、テキスト内など、インターフェースのアイコンが表示される場所であればどこでも、オブジェクトやコンセプトを伝えるためにシンボルを使用することができます。 個々のシンボルや機能の利用可能性は、対象とするシステムのバージョンによって

          🍎HIGざっくりまとめ Foundations編 vol. 10 SFシンボル

          🍎HIGざっくりまとめ Foundations編 vol. 9 Right to left

          Right to left(右から左)アラビア語やヘブライ語などの右から左へ読む言語をサポートするため、必要に応じてインターフェースを反転させ、関連する言語の読み方を一致させることができます。 システム提供のUIフレームワークはデフォルトで右から左(RTL)をサポートしており、システム提供のUIコンポーネントはRTLコンテキストで自動的に反転することが可能です。 システム提供の要素と標準的なレイアウトを使用する場合、アプリの自動反転インターフェースに変更を加える必要がない

          🍎HIGざっくりまとめ Foundations編 vol. 9 Right to left