パジェロ|COMPASS

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

パジェロ|COMPASS

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

    マガジン

    • Material Design 3 要点まとめ

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

    最近の記事

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

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

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

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

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

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

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

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

          マガジン

          マガジンをすべて見る すべて見る
          • Material Design 3 要点まとめ
            パジェロ|COMPASS

          記事

          記事をすべて見る すべて見る

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

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

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

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

            Material Design 3 要点まとめ #1 Accessibility

            Material Design 3 ガイドラインの要点をまとめたものです。 第1回はAccessibilityの章。ここはMDやM3特有の内容というよりはアクセシビリティに関する概論みたいな話が多いです。 Overviewhttps://m3.material.io/foundations/accessible-design/overview  要点 MDのコンポーネントはデフォルトでアクセシビリティに対応している MDのコンポーネントにはあらかじめ基本的なアクセシビ

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

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

            WCAG基準の実践:カラーコントラスト比改善

            株式会社COMPASS デザイナーのパジェロです。 COMPASSでは(いまのところ)デザインチーム主導でアクセシビリティ観点でのプロダクト改善に継続的に取り組んでいます。 WCAG2.1を基準にしたアクセシビリティガイドラインを制作し、全項目の基準達成に向けて改善を進めています。今回はその中から「カラーコントラスト比」を改善する取り組みについてご紹介します。 今回の対象項目は以下。 実現に向けて計画を立てるアクセシビリティ観点での改善は色んな意味で進めるのがめちゃく

            サービス改善の“道しるべ”をユーザーと一緒に探す

            株式会社COMPASS デザイナーのパジェロです。 前回の記事では、社内CMSの開発チームに配属されたときに最初に取り組んだことについて書きました。 前回は、CMS開発メンバーと、そのCMSのユーザーである社内のコンテンツ制作チームとでワークショップを行い、CMSに対するニーズの解像度を高めて共感の土台を作ったところまでのお話でした。 今回はその土台をもとに、開発チームが課題解決に向けて実際に動き出すためにどんなステップを踏んだのか、ということについて書いてみたいと思いま

            “共感の土台”づくりから始めるサービスデザイン

            株式会社COMPASS デザイナーのパジェロです。 今回は、社内CMSの開発チームに配属されたときに最初に取り組んだことについて書いてみます。 弊社は、提供サービスである「Qubena」に搭載する教材コンテンツも自社開発しています。「コンテンツ制作チーム」が開発した「問題」や「解説」を管理しシステムと適切に連携させるために社内向けのCMSがあり、専用の開発チームが組織されているのですが、僕はそこに「情報設計」担当として配属されました。 期待されていたのはUXデザイナーとして