パジェロ｜COMPASS

教育系のIT会社でデザイナーをしています。好きな恐竜はパラサウロロフスです。 http…

パジェロ｜COMPASS

教育系のIT会社でデザイナーをしています。好きな恐竜はパラサウロロフスです。 https://note.qubena.com/ https://qubena.com/

  • ソシオメディアHIG 実践例

    ソシオメディアの「ヒューマンインターフェースガイドライン」の各セクションを順に取り上げながら、COMPASSでの実践例を紹介します。

  • Material Design 3 要点まとめ

    Material Design 3 ガイドラインの要点をまとめたものです。

ソシオメディアHIG 実践例 #1〜5

株式会社COMPASS デザイナーのパジェロです。 デザインコンサルティング会社のソシオメディアが公開している「ヒューマンインターフェースガイドライン」という資料があります。 UIデザインにおける原理・原則を100のセクションにまとめたガイドラインなのですが、プラットフォームやフレームワークに依存しない普遍的な内容だけがわかりやすく端的に整理されているので、どんな場面でも参考にできて非常に重宝しています。 この記事では、ソシオメディアHIGの各セクションを順に取り上げな

パジェロ｜COMPASS

    • Material Design 3 要点まとめ #14 Typography

      Material Design 3 ガイドラインの要点をまとめたものです。 第14回はTypographyの章。前回から4ヶ月越しになってしまいました。 一旦最終回です。 OverviewM2からの更新ポイント バリアブルフォントRoboto FlexとRoboto Serifが登場。 タイプスタイルは役割によって分類された5種類（ディスプレイ、ヘッドライン、タイトル、ボディ、ラベル）に。シンプルになった。 タイポグラフィもデザイントークンで管理。 Fontsデフォ

      パジェロ｜COMPASS

      • Material Design 3 要点まとめ #13 Shape

        Material Design 3 ガイドラインの要点をまとめたものです。 第13回はShapeの章。M3コンポーネントのシェイプの種類とカスタマイズに関する内容です。短い。 M2からの更新ポイントM3のシェイプは2つのファミリー x 7つのスタイルで構成されている。 M2では、コンポーネントのシェイプの分類は「コンポーネント全体のサイズ」を基準にした3種類（Small・Medium・Large）だったが、M3ではコンポーネント全体ではなく「角の形状のサイズ」を基準にした

        パジェロ｜COMPASS

        • Material Design 3 要点まとめ #12 Motion - Transitions

          Material Design 3 ガイドラインの要点をまとめたものです。 第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はTransitionsの項について。代表的なトランジションパターンの性質と、それぞれの適切なユースケースについて紹介されています。ところどころでAndroidとiOSのデフォルトについて言及されているのが印象的。 Transition patternsトランジションとは トランジションとは、個々の要素や全画面表示をつなぐ

          パジェロ｜COMPASS

        ソシオメディアHIG 実践例 #1〜5

        パジェロ｜COMPASS

        マガジン

        • ソシオメディアHIG 実践例
          1本
        • Material Design 3 要点まとめ
          14本

        記事

          Material Design 3 要点まとめ #11 Motion - Easing and duration

          Material Design 3 ガイドラインの要点をまとめたものです。 第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はOverview＋Easing and durationの項。Overviewではモーションがデザイントークンとして整備されたことが紹介されています。Easing and durationは、物理世界の動きを模倣する「イージング」と、変化の継続時間である「デュレーション」についての内容です。 OverviewM2からの更新

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #11 Motion - Easing and duration

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #10 Icons

          Material Design 3 ガイドラインの要点をまとめたものです。 第10回はIconsの章。マテリアルデザインにおけるアイコンの役割や、アイコンデザインの基準について説明しています。また、Googleが提供するアイコンライブラリ「Material Symbols」についても紹介しており、デザイナーが利用する際の注意点や使い方についても解説しています。 OverviewM2からの更新ポイント バリアブルアイコンフォントとしてMaterial Symbolsが登場し

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #10 Icons

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #9 Elevation

          Material Design 3 ガイドラインの要点をまとめたものです。 第9回はElevationの章。Elevation（高度）とは、z軸に沿った2つの表示面の間の相対的な距離のことです。M2での厳密さと比べると、かなり簡略化されました。シャドウが減って見た目の印象もだいぶ変わりました。 OverviewM2からの更新ポイント M2では高度を表現するために必ず「シャドウ」を使っていたが、M3からはその制約がなくなった。 シャドウの代わりに表示面の色の変化で高度を表

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #9 Elevation

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #8 Color - Dynamic color

          Material Design 3 ガイドラインの要点をまとめたものです。 第6・7・8回はColorの章。長いので記事を3つに分けます。今回はDynamic colorの項について。 Overviewダイナミックカラーによるカラースキームの自動生成には以下の2つのロジックがある。 ユーザー設定／コンテンツに応じた配色 ユーザーが選択した壁紙など、ユーザーの設定をもとにして配色を自動生成する。 音楽アプリのアルバムサムネイル画像など、アプリ内のコンテンツに由来する色か

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #8 Color - Dynamic color

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #7 Color - Color system

          Material Design 3 ガイドラインの要点をまとめたものです。 第6・7・8回はColorの章。長いので記事を3つに分けます。今回はColor systemの項について。 M3のカラーシステムは動的な変化に対応するもので、配色を一定値の固定グループではなく「相対的な色調のまとまり」と考えるところがポイントです。 Key colors & tones要点 カラースキーム：5つのキーカラー × 13のトーン + α 5つのキーカラーは「プライマリ／セカンダリ／タ

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #7 Color - Color system

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #6 Color - Overview

          Material Design 3 ガイドラインの要点をまとめたものです。 第6・7・8回はColorの章。長いので記事を3つに分けます。今回は概要のみ。重要なキーワードの紹介といったところ。 M2からの更新ポイントダイナミックカラーの導入ダイナミックカラーとは、さまざまなソースや条件に応じて色を適用するカラーシステムのこと。 カラーシステムによって、自動的に多くのデフォルト値が提供される。それらはカスタマイズの出発点として利用できる。 ユーザーの好みの設定や壁紙、コン

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #6 Color - Overview

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #5 Interaction states

          Material Design 3 ガイドラインの要点をまとめたものです。 第5回はInteraction statesの章。ステートレイヤーの基本法則など、コンポーネントの「状態」の表現についての解説です。 要点ステートレイヤー：要素の「状態」を表す半透明の覆いUIコンポーネントには「ステートレイヤー」という、要素の「状態」を表す半透明の覆いがある。 レイヤーは要素全体を覆うか、要素の上に円形にかぶさる。 一度に適用できるステートレイヤーは1つだけ。 ステートレイヤ

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #5 Interaction states

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #4 Design tokens

          Material Design 3 ガイドラインの要点をまとめたものです。 第4回はDesign tokensの章。M3の目立った新概念のひとつ。スタイル指定の構造化が大きく進みました。 要点デザイントークン：スタイルの「値」を共通化するハードコードされた「値」の代わりにデザイントークンでスタイルを定義する、という概念。 デザインシステムによるプロダクトの構築、メンテナンス、スケーリングなどの作業を効率化できる。 コードのような名前（例：md.ref.palette.s

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #4 Design tokens

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #3 Customizing Material

          Material Design 3 ガイドラインの要点をまとめたものです。 第3回はCustomizing Materialの章。Android12からの新機能である、ダイナミックカラーによるUIカラーのパーソナライズの紹介。ここでは触りだけ紹介されていて、詳細は別章にそれぞれジャンプする構成になってます。 要点ダイナミックカラー：UIカラーにユーザーの設定を反映M3のカラースキームを使ってUIを構築しておくことで、アプリのUIカラーをユーザーごとにパーソナライズすることが

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #3 Customizing Material

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #2 Adaptive design

          Material Design 3 ガイドラインの要点をまとめたものです。 第2回はAdaptive designの章。Material Designの基本的なレイアウトの考え方やバリエーションについてのガイドラインです。折りたたみ式ディスプレイについて大きく取り上げられているところにAndroidっぽさを感じます。 OverviewM2からの更新ポイント 折りたたみ式デバイスガイドラインを追加 ディスプレイが真ん中で二つに折れる端末向けのガイドラインが手厚く書かれてい

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #2 Adaptive design

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #1 Accessibility

          Material Design 3 ガイドラインの要点をまとめたものです。 第1回はAccessibilityの章。ここはMDやM3特有の内容というよりはアクセシビリティに関する概論みたいな話が多いです。 Overview要点 MDのコンポーネントはデフォルトでアクセシビリティに対応している MDのコンポーネントにはあらかじめ基本的なアクセシビリティの要素が組み込まれているので、これを使用することでコストのかかる再設計をしなくても済む。 MDのコンポーネントに組み込ま

          パジェロ｜COMPASS

          Material Design 3 要点まとめ #1 Accessibility

          パジェロ｜COMPASS

          フルリモートでユーザーテストが成立するか試してみた

          株式会社COMPASS デザイナーのパジェロです。 自分が所属している開発チームで本格的なユーザーテストが必要になったので、フルリモート体制でどこまで成立するか試してみました。この記事はその覚え書きです。ほぼ社内共有用につき乱文ご無礼です。 背景僕がデザインを担当する社内向けCMSに、UIの大規模改修を行うタイミングが巡ってきました。 とにかく最速で機能を揃えた、という状態でずっと使ってきて数年経ち、だいぶユースケースも固まってきたので、ユーザビリティと実装拡張性を強化する

          パジェロ｜COMPASS

          フルリモートでユーザーテストが成立するか試してみた

          パジェロ｜COMPASS