川崎実紀 | micuity 株式会社コンセント | デジタルプロダクトデザイナー https://note.com/micuity 川崎実紀 | micuity https://d2l930y2yx77uc.cloudfront.net/assets/default/default_note_logo_202212-f2394a9e5b60c49f48650eee13f6e75987c8c4f1cfa7555629a9697dc6015cd9.png https://d2l930y2yx77uc.cloudfront.net/assets/default/default_note_logo_202212-f2394a9e5b60c49f48650eee13f6e75987c8c4f1cfa7555629a9697dc6015cd9.png 249F80 ja Sat, 20 Jun 2026 18:59:49 +0900 どんな仕組み？コントラスト比を確保しやすいカラー設計ツール『Hues』 https://assets.st-note.com/production/uploads/images/260382996/rectangle_large_type_2_203c91c79cd4f3881183798b32784a6d.png?width=800 コントラスト比が一定以上かを簡単に算出できるカラースケールを作成するためのFigmaプラグイン『Hues』を先日リリースしました。
この記事ではどのような仕組みでHuesが動いているかをご紹介します。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Tue, 17 Mar 2026 15:44:41 +0900 https://note.com/micuity/n/n3efa9ae4cd29 https://note.com/micuity/n/n3efa9ae4cd29 なぜつくった？コントラスト比を確保しやすいカラー設計ツール『Hues』 https://assets.st-note.com/production/uploads/images/260383192/rectangle_large_type_2_f9df8e3da4db8b221a50c21a894a85d7.png?width=800 コントラスト比が一定以上かを簡単に算出できるカラースケールを作成するためのFigmaプラグイン『Hues』を先日リリースしました。
この記事では、私がなぜHuesをつくる必要があると思ったのかをお話していきます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Fri, 16 Jan 2026 19:18:36 +0900 https://note.com/micuity/n/nfcf611d247e5 https://note.com/micuity/n/nfcf611d247e5 Figma Weave（Weavy）使ってみた｜レイヤー合成 https://assets.st-note.com/production/uploads/images/243981499/rectangle_large_type_2_4696e6f1fefb090acb46d5a162498210.png?width=800 2025年10月にFigmaがWeavyというサービスを買収しました。

Introducing Figma Weave: The Next Generation of AI-Native Creation at Figma | Figma BlogFigma has acquired Weavy, a platform that brings generative Awww.figma.com

続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Thu, 15 Jan 2026 12:47:38 +0900 https://note.com/micuity/n/nc68691df5187 https://note.com/micuity/n/nc68691df5187 コントラスト比を確保しやすいカラー設計方法を発明してみた｜Huesのご紹介 https://assets.st-note.com/production/uploads/images/232259046/rectangle_large_type_2_1bdd94ef73b2af9f32d6e4af1d098dd7.png?width=800 私はデザインファームで７年ほどデジタルプロダクトのデザインに関わっています。主に新規プロダクト開発やリニューアル、デザインシステム構築といったプロジェクトを担当することが多いので、何もないところからのカラー設計を数多く経験してきました。

試行錯誤を重ねる中でけっこう便利なカラー設計方法を発明できたと思うので多くの人に使ってもらえると嬉しいです。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Thu, 11 Dec 2025 14:23:04 +0900 https://note.com/micuity/n/n503d2114e1bf https://note.com/micuity/n/n503d2114e1bf UI小ネタ｜結局最小幅は何px想定でデザインすればいいのか https://assets.st-note.com/production/uploads/images/227218548/rectangle_large_type_2_04de3d29a96961c7bd6ec6fad352a9c0.png?width=800 スマートフォン表示想定の画面をデザインするときに画面幅ってどんなサイズにしていますか？

わたしは幅375pxでつくることが多いです。これはプレビューしやすいように社用スマホの iPhone SE（第２世代）に合わせているだけなので、これがおすすめというわけではないです。市場シェアから考えれば390pxとかもありえるかなと思います。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Wed, 05 Nov 2025 15:23:07 +0900 https://note.com/micuity/n/ne6722d1a6248 https://note.com/micuity/n/ne6722d1a6248 UI小ネタ｜スクロールできるタブをアクセシブルにするには https://assets.st-note.com/production/uploads/images/226985514/rectangle_large_type_2_89b0c4a856a32474f67a720984380e24.png?width=800 スクロールできるタブってありますよね。ニュースアプリのカテゴリ選択などでよく見かけます。

NHK ONE ニュース防災アプリのホーム画面（2025.11.4現在）

続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Tue, 04 Nov 2025 15:54:01 +0900 https://note.com/micuity/n/n9184c93eca2d https://note.com/micuity/n/n9184c93eca2d UI小ネタ｜Stepper? ProgressIndicator? Steps? StepIndicator? https://assets.st-note.com/production/uploads/images/225798718/rectangle_large_type_2_228b90d67b6fd96bc41cdb3469d88bec.png?width=800 いきなりですが、皆さんはこういうパーツのことを何と呼んでいますか？


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Thu, 30 Oct 2025 15:27:35 +0900 https://note.com/micuity/n/ncdada680d08a https://note.com/micuity/n/ncdada680d08a 【映像の世紀視聴記録】ベトナム戦争 https://assets.st-note.com/production/uploads/images/168545914/rectangle_large_type_2_3192e3ced9b3c353b59b5e9c4fead500.jpeg?width=800 私はNHKの『映像の世紀バタフライエフェクト』が大好きだ。
世界各国から収集された貴重な映像が毎回さまざまなテーマで編集され、見応えある45分間の物語に組み立てられている。

必然的に映像記録が残されている第二次世界大戦以降のテーマが多くなるので、近現代史が好きな私は放送を毎週楽しみにしている。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Sat, 04 Jan 2025 01:29:15 +0900 https://note.com/micuity/n/n1e2de848a639 https://note.com/micuity/n/n1e2de848a639 【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト https://assets.st-note.com/production/uploads/images/24277029/rectangle_large_type_2_9ebc08d55d250a839ae8f2aac2fb1261.jpg?width=800 【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Wed, 29 Apr 2020 23:54:57 +0900 https://note.com/micuity/n/n63d935ff11fb https://note.com/micuity/n/n63d935ff11fb 【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン https://assets.st-note.com/production/uploads/images/22172248/rectangle_large_type_2_d9a55e6970863e820836362345343dd7.jpg?width=800 【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Sat, 04 Apr 2020 18:46:45 +0900 https://note.com/micuity/n/ne199ef66e924 https://note.com/micuity/n/ne199ef66e924 【FigmaのAuto Layoutをマスターしよう vol.2】 アイコン入りボタン https://assets.st-note.com/production/uploads/images/21302387/rectangle_large_type_2_20365100b35e21de3955ce9c9a99c9d6.jpg?width=800 【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Sat, 21 Mar 2020 12:03:00 +0900 https://note.com/micuity/n/n04d4300db321 https://note.com/micuity/n/n04d4300db321 【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン https://assets.st-note.com/production/uploads/images/21253335/rectangle_large_type_2_5e0fd3ee6987376800c1c48761f9d41c.jpg?width=800 【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Fri, 20 Mar 2020 15:49:41 +0900 https://note.com/micuity/n/n760d4f9fe648 https://note.com/micuity/n/n760d4f9fe648 【ランチメニューの情報設計 vol.1】 根津のパスタ屋さん https://assets.st-note.com/production/uploads/images/12190477/rectangle_large_type_2_1d5b931f0e9791319f0b7426a61a0ffd.png?width=800 私はデザイン会社でアプリやWEBサイトをつくっているのですが、会社の同僚とご飯に行くとよく始まる会話があります。

｢この書き方だとAランチとBランチの違いがパッと入ってこないね。｣
｢ここの文書構造を整理しないと、日替わりランチの話がどこまで続いてるのか分かりにくいなぁ。｣

続きをみる]]> https://assets.st-note.com/production/uploads/images/12166276/profile_44c4e538882f5bd7442a331daf833a97.jpeg?fit=bounds&format=jpeg&quality=85&width=330 川崎実紀 | micuity Sat, 08 Jun 2019 17:33:56 +0900 https://note.com/micuity/n/ncba4ad76be25 https://note.com/micuity/n/ncba4ad76be25