mz-logo

豆蔵デベロッパーサイト

開発に役立つチュートリアルやテクニック・ノウハウを豆蔵メンバーがご紹介します!

記事のタグから検索 ...(全てのタグを表示)

本サイトは本家の豆蔵ホームページではありません。会社概要、製品紹介等はこちら、 募集中の求人情報はこちらをご覧ください。

mameka豆香の豆知識 image for mameka column
ホントに色が踊り出す!?Material Design 3のダイナミックカラーパレットでレスポンシブUI革命
やっほー!豆香だよ。最近、朝起きたらスマホの壁紙より先に自分の寝癖が動的パレットみたいに暴れ回ってて笑っちゃうんだけど、今日はその寝癖…じゃなくて Google Material Design 3 の Dynamic Color の話をするよ!
MD3 のキモは、ユーザーのデバイス設定やテーマカラーに合わせて UI 全体がズバッとカメレオン変身しちゃうとこ。まさに「色の忍者」!ボタン、テキスト、アイコンが連携プレーで色味シフトしてくれるから、開発者もデザイナーも「え、もう終わり?」って肩すかしレベルの時短効果。
でも侮るなかれ、パレット生成のロジックを理解しないと “おしゃれなパステルパラダイス” のはずが “昭和の原色カーニバル” に迷い込むぞ。ポイントは以下の3つ!
1. seed color を欲張ってビビッドにしすぎない。濃い赤を選ぶと警報アラートみたいな UI になるから注意!
2. Material Theme Builder でプレビュー巡回。プレビューは恋愛と同じ、勢いで突っ走ると破局…じゃなく破綻 UI になる。
3. 色覚多様性チェックを怠らない。動的でもユーザーの見え方は固定だ。カラーブラインドモードでのコントラスト確保を忘れると豆香の怒りマグマが噴火しちゃうぞ!
あと、レスポンシブ対応のコツ。画面幅ごとに breakpoints のスタイルをベタ書きするのはナンセンス。動的パレットが生成した color roles を CSS 変数で一括管理して、コンポーネントは全部その変数参照。そうすれば「スマホ→タブレット→デスクトップ」とサイズ変わってもカラーハーモニーが崩れない。まるで合唱コンクールでクラス全員が音程ピッタリ合わせてくれる感じ!
最後に裏ワザ。Android 12 以上ならシステムの Monet API をアプリ側で引っこ抜いてネイティブ側と WebView を同調させると、Web もアプリも同じトーンで統一。友達から「おそろコーデだね♡」って言われるくらい可愛い UI 完成!
さあみんなも MD3 のダイナミックカラーパレットで UI に魔法をかけよう。失敗して画面が毒キノコ色になっても、豆香が笑ってツッコミ入れるから安心してチャレンジだ!
※本コラムはAIで生成したものです。内容の正確性を保証するものではありません。
過去のコラムはこちらから!

新着記事new-articles全ての記事を見る

  • | ブログ | 18 min read
    #2026年 #LLM #RAG #AI #Gemini #typescript

    最小構成のRAGでミステリーを解決させてみた(Gemini + TypeScript)

    はじめに # 大まかな構成は把握していても、細かい実装には手が回らずぼんやりとしか理解してなかったので、勉強を兼ねてRAG(Retrieval-Augmented Generation)を実装してみました。 今回は、RAGの核となる「ベクトル化」「類似度検索」「コンテキスト注入」を理解することを目的に、フレームワークやVectorDBをあえて使わず、最小構成で動かしてみます。 これらは実運用ではライブラリやVectorDBに置き換える選択肢がありますが、まずは本質を素の形で体感します...

    記事を読む
  • | ブログ | 20 min read
    #2026年 #dotnet #csharp

    動くサンプルで理解!C#デリゲート入門 ~Func/Action/eventの違いと使いどころまで

    私はC#が好きなのですが、デリゲートを使ったことがないと気付きました。 昔やったプロジェクトでデリゲートを見たことはありますし、先輩が使っているのを見たこともあります。しかし自分自身が使ったことはなくて、食わず嫌いしていたかもと思えてきました。 そこでデリゲートをコードを書きながら学ぼうと考えたのが今回の記事です。私が書いて動かしたコードで解説していきます。 デリゲート(delegate)とは # デリゲートとは委譲という意味です...

    記事を読む
  • | ブログ | 10 min read
    #2026年 #GFXBench #android #gpu

    オープンソース版GFXBenchをAndroidで動かす(1)ビルド編

    はじめに # GFXBenchというGPUベンチマークソフトをご存じでしょうか。 Windows, Linux, Android, iPhone等のマルチプラットフォームで実行出来るkishonti社のGPUベンチマークソフトです...

    記事を読む
  • | ブログ | 21 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(認証/認可編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、認証/認可について説明します。 MCP仕様では認可機能は任意扱いですが、MCPを実運用する場合は必須機能と言えます。 本記事では、以下の内容を扱います。 Streamable HTTPにおけるMCPの認証・認可の流れ PRMと認可サーバーの発見 Keycloakとトークンイントロスペクションを使ったMCPサーバー側の検証 本記事で掲載しているコードはこちらで公開しています...

    記事を読む
  • | ブログ | 9 min read
    #2026年 #GitHub

    GitHub Stacked PRs で実現する「小さな PR」とレビューを溜めない開発スタイル

    はじめに # 先月、GitHub のスタック PRs (Stacked pull requests) がパブリックプレビューになりました。 https://github.blog/changelog/2026-07-30-stacked-pull-requests-are-now-in-public-preview/ これまでも PR のブランチからブランチを生やして、PR スタックさせることは可能でした...

    記事を読む
  • | ブログ | 6 min read
    #2026年 #スクラム #アジャイル #生成AI #AI

    スクラムマスターのAI活用を考える - 実践編:AI起点のデイリースクラム

    はじめに # アジャイルグループの石田です。 以前掲載したスクラムマスターのAI活用を考えるの連載で、透明性・検査・適応の三本柱をAIで強化するアプローチを紹介してきました。 今回はその実践編として、私が現在のプロジェクトで実践している、AIの発信を起点にデイリースクラムを進める取り組みを紹介します。 ここまで紹介してきたAI活用は、あくまで人間が「AIを使いに行く」ものでした...

    記事を読む
  • | ブログ | 4 min read
    #2026年 #ETロボコン #AI

    AI活用で進化するETロボコン - シルバーモデル獲得までの4年間と、次の挑戦へ

    はじめに # 私が4年間取り組んできた ETロボコンの活動の軌跡 を紹介します。 昨年度はベーシッククラス(当時の名称:プライマリークラス)に挑戦し、AI活用を取り入れた新しい開発スタイルにも踏み込みました。 これまでの経験がどのように積み重なり、昨年度の成果につながったのかをまとめています。 最後までお付き合いいただければ幸いです。 4年間の活動をひとことで紹介すると # 「設計(UML)→ 実装 → 実機制御 → チーム運営 → AI活用」 と、毎年新しい挑戦を積み重ねてきました...

    記事を読む
  • | ブログ | 15 min read
    #2026年 #MCP #typescript

    MCP 2026-07-28 RC解説:ステートレス化がもたらすAIエージェント実装

    はじめに # Model Context Protocol (MCP) は、2024年11月の初版リリース以来、AIモデルと外部データ・機能を接続する標準プロトコルとして急速に進化してきました。 今回の2026-07-28 Release Candidate(以下、RC)は、単なる機能追加ではなく、プロトコルの実運用前提を大きく変える改訂です。 とくに注目すべきは、プロトコル層のステートレス化です...

    記事を読む
  • | ブログ | 11 min read
    #2026年 #Deno Desktop #Tauri #electron #Deno

    Deno 2.9 で登場したデスクトップ機能 (Deno Desktop) - Electron / Tauri との違いを実感

    はじめに # Deno 2.9 リリースおめでとうございます。 Deno 2.9 | Deno Electron 大好きな自分としても気になるのはやはり Deno Desktop です。 Tauri と同様 WebView をバックエンドにする構成と Electron と同様 Chromium ベースの構成を選べるとのことで、これは試すしかないと思いました。 公式ドキュメントは以下にあります...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #AI #生成AI

    人工知能学会2026参加記 — 発表と学会で見えたAI研究の流れ

    はじめに # AIテクニカルセクターの藤堂です。セクターが独立組織となって以降、全社でAI活用を広げる取り組みが本格化しています。そのような中、6月には第40回 JSAI2026に参加しました。 前半ではポスター発表をした、士業資格試験を対象としたLLMベンチマークShigyoBenchについて簡単に触れ、AIの実用化についての所感を述べます。 後半では、人工知能学会で印象に残った発表と、今後のAI研究について思ったことを記します...

    記事を読む

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。