ふくやま | COMPASS

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

ふくやま | COMPASS

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

マガジン

記事一覧

固定された記事

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

noteのデスクをすっきりさせるマガジンに出会い、ケーブルを全力で排除し、理想を追求する姿勢に感銘を受けました。 私はフルリモートの職場なので、毎日8時間以上自宅デ…

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

タスクの実行者△ → コーチ◎ChatGPTは多くの人が自分のタスクを代わりにやらせるツールとして活用していますが、自分の業務では使える範囲が限定的で、イマイチでした。 …

50

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

ライブビューイングアプリには、他のtvOSアプリとは異なる、いくつかのユニークなデザイン上の課題があります。とりわけ、アプリはライブコンテンツを高め、優先させる必要…

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

iPhone、iPad、Macはフルスクリーンモードで、システムコントロールやアプリコントロールを、人が操作するまで隠しておくことができるため、気が散らない環境を作ることが…

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

フィードバックは、現状を把握し、次に何をすべきか、行動の結果を理解し、失敗を回避するのに役立ちます。 アプリやゲームの操作に際して、明確で一貫したフィードバック…

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

情報入力は、どのようなインタラクション手法を用いても、面倒な作業になります。できるだけ多くの情報を事前に収集し、入力に必要なデータ量を最小限に抑えるとともに、利…

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

ドラッグ&ドロップで、選択した写真やテキストなどのコンテンツを別の場所に移動したり、複製したりすることができます。 iOS、iPadOS、macOSは、タッチスクリーン上のジ…

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

優れたコラボレーションと共有の体験は、シンプルで応答性が高く、コンテンツに集中できる一方で、他者との効果的なコミュニケーションを可能にします。 システムインター…

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

チャートは、多くのテキストを読み解くことなく、複雑な情報を効率的に伝えることができる方法です。また、チャートはグラフィカルであるため、ユーザーエクスペリエンスの…

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

アプリやゲームを信頼してもらうためには、プライバシーに関連するデータやリソースが必要で、それらをどのように使っているのかを透明にしておく必要があります。 人々は…

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

タイポグラフィーは、読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。 ベストプラクティス多くの人が読みやす…

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

SFシンボルは、サンフランシスコのシステムフォントとシームレスに統合され、あらゆるウェイトとサイズのテキストと自動的に整列する、一貫性があり高度に設定可能な何千も…

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

Right to left(右から左)アラビア語やヘブライ語などの右から左へ読む言語をサポートするため、必要に応じてインターフェースを反転させ、関連する言語の読み方を一致さ…

🍎HIGざっくりまとめ Foundations編 vol. 8 モーション

Motion(モーション)あらゆるプラットフォームで、美しく流れるようなモーションがインターフェースに生命を吹き込み、ステータスを伝え、フィードバックや指示を与え、視…

🍎HIGざっくりまとめ Foundations編 vol. 7 マテリアル

Materials(マテリアル)Appleのプラットフォームでは、マテリアルが背景に半透明とぼかしを与えることで、前景と背景のレイヤーを視覚的に分離する感覚を得ることができま…

🍎HIGざっくりまとめ Foundations編 vol. 6 インクルージョン

 2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。 ※私はブラウ…

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

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

noteのデスクをすっきりさせるマガジンに出会い、ケーブルを全力で排除し、理想を追求する姿勢に感銘を受けました。
私はフルリモートの職場なので、毎日8時間以上自宅デスク過ごします。「そこそこ」ではなく「大満足」のビジュアルにしたい・・・。

やるぞ!と立ち上がったものの、生来の優柔不断が災いしパーツや色選びに手間取り半年がかりのプロジェクトに。遂に毎日るんるんで仕事できる理想のデスク環境ができまし

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

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

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

ここでは、私がどのように実際のデ

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

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

ライブビューイングアプリには、他のtvOSアプリとは異なる、いくつかのユニークなデザイン上の課題があります。とりわけ、アプリはライブコンテンツを高め、優先させる必要があります。どの画面でも、ライブコンテンツに目を向けさせ、一目でVODコンテンツと見分けがつくようにするのです。

ベストプラクティスライブコンテンツを目立つように配置し、簡単にアクセスできるようにする。
ユーザーはテレビを見るためにア

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

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

iPhone、iPad、Macはフルスクリーンモードで、システムコントロールやアプリコントロールを、人が操作するまで隠しておくことができるため、気が散らない環境を作ることができます。

ベストプラクティスフルスクリーンモードは、あなたの体験にとって意味がある場合に有効にしてください。
ゲームをしたり、メディアを再生したり、没入型のタスクを実行したりするときにフルスクリーンモードが喜ばれますが、すべ

もっとみる
🍎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(ドラッグ&ドロップ)

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

ドラッグ&ドロップで、選択した写真やテキストなどのコンテンツを別の場所に移動したり、複製したりすることができます。

iOS、iPadOS、macOSは、タッチスクリーン上のジェスチャー、ポインティングデバイスとのインタラクション、そしてフルキーボードアクセスモードによるドラッグ&ドロップをサポートしています。さらに、Universal Controlを使えば、MacとiPadの間でコンテンツをド

もっとみる
🍎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(タイポグラフィ)

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

タイポグラフィーは、読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。

ベストプラクティス多くの人が読みやすい最小フォントサイズを維持するように努めます。
ピクセル密度や明るさなど、デバイスのディスプレイの違いは、適切な最小フォントサイズに影響を与える可能性があります。また、読み手とディスプレイの距離、視力、動いているかどうか、環境光の状態など

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

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

SFシンボルは、サンフランシスコのシステムフォントとシームレスに統合され、あらゆるウェイトとサイズのテキストと自動的に整列する、一貫性があり高度に設定可能な何千ものシンボルを提供します。

ナビゲーションバー、ツールバー、タブバー、コンテキストメニュー、テキスト内など、インターフェースのアイコンが表示される場所であればどこでも、オブジェクトやコンセプトを伝えるためにシンボルを使用することができます

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

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

Right to left(右から左)アラビア語やヘブライ語などの右から左へ読む言語をサポートするため、必要に応じてインターフェースを反転させ、関連する言語の読み方を一致させることができます。

システム提供のUIフレームワークはデフォルトで右から左(RTL)をサポートしており、システム提供のUIコンポーネントはRTLコンテキストで自動的に反転することが可能です。

システム提供の要素と標準的なレ

もっとみる
🍎HIGざっくりまとめ Foundations編 vol. 8 モーション

🍎HIGざっくりまとめ Foundations編 vol. 8 モーション

Motion(モーション)あらゆるプラットフォームで、美しく流れるようなモーションがインターフェースに生命を吹き込み、ステータスを伝え、フィードバックや指示を与え、視覚体験を豊かにしています。

システムコンポーネントには自動的にモーションが含まれます

カスタムモーションを設計する際には、ユーザーのアクションに応じた明確なフィードバックを提供し、ユーザーが圧倒されることなく習得できるようにします

もっとみる
🍎HIGざっくりまとめ Foundations編 vol. 7 マテリアル

🍎HIGざっくりまとめ Foundations編 vol. 7 マテリアル

Materials(マテリアル)Appleのプラットフォームでは、マテリアルが背景に半透明とぼかしを与えることで、前景と背景のレイヤーを視覚的に分離する感覚を得ることができます。

マテリアルは、Vibrancy(バイブランシー)と組み合わせることで、インターフェイスに視覚的な面白さを加えることができます。

↓上の説明ではピンと来ませんね。例えばこういうメニューバーやボタン、検索窓だけ透けてるよ

もっとみる
🍎HIGざっくりまとめ Foundations編 vol. 6 インクルージョン

🍎HIGざっくりまとめ Foundations編 vol. 6 インクルージョン

 2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

Inclusion(インクル

もっとみる