良い体験を生むための「判断」を設計します。
アプリ、SaaS、業務システム。私たちは、そのUIの良し悪しを6つの観点で評価します。同じ観点を設計の基準にし、作ったものを最後に診断して完成度を高めます。
評価に使う6つの観点
何が良いのか、なぜ良いのか、どの条件でそれが変わるのか。その判断を、感覚ではなく基準として定義します。既存プロダクトの改善から、新規プロダクトの要件定義まで、設計・実装・診断を一貫して担います。
Design QA は、私たちの UI診断サービスです（design-qa.com）。図は、そこで判定し公開している実例の1つです。
No.129 きっぷの払戻し／判定＝出してよし（改善項目あり）
判定は3段階（要再構築／要修正／出してよし）のうち、上の段です。
同じ観点で、消費者向けの画面も業務システムの画面も判定します。業務画面では、CTA は保存・送信・承認などの主要な操作にあたります。
- Clarity明瞭さ画面の目的、情報、次にすべき行動が分かるか3/5採点
- Flow導線ユーザーの導線が自然につながっているか4/5採点
- Action行動CTA・入力・登録・問い合わせが、迷わず実行できるか4/5採点
- Trust信頼根拠・実績・保証が、必要な場所で伝わっているか3/5採点
- Friction摩擦離脱や迷いを生む摩擦がないか4/5採点
- Feasibility実装性実装・運用のうえで、壊れにくいUIになっているか所見非採点
診断の対象は画面のキャプチャです。5つの観点を採点し、それを根拠に3段階の判定（要再構築／要修正／出してよし）を出します。実装性はキャプチャからは判定しきれないため、採点せず所見として記します。
お引き受けする仕事
UI/UX設計
何をどう見せるかを、作り始める前に定義します。画面一覧、遷移、状態設計まで。要件定義から参加できます。
フロントエンド実装
React と TypeScript で、設計どおりに実装します。設計の段階で決めた意図が実装で失われないよう、実装まで担うことも、実装側に設計意図を渡す形で参加することもできます。
UI診断
作った画面を、上の6つの観点で見ます。対象は画面のキャプチャで、導線は前後の画面のキャプチャをまとめて見ます。5つを採点し、実装性は所見として添え、根拠つきの報告書にします。動作や状態の変化は採点せず、所見にとどめます。申込みは design-qa.com から。このページの相談窓口からも受け付けます。
アクセシビリティ試験
JIS X 8341-3:2016 に基づく試験です。上の6つの観点とは別の基準です。6つの観点は「迷わず使えるか」を、JIS は「誰が使えるか」を見ています。片方を満たしても、もう片方を満たしたことにはなりません。
デザインシステム構築
複数の画面にまたがる部品を整理し、命名・状態・使い方の規則まで定義します。私たち自身が公開しているものがあります（下記 GUNJO）。
進め方
要件定義
何を、誰のために作るのかを定義します。決まっていない状態から参加できます。
画面設計
画面一覧と遷移を設計し、迷う箇所を先に特定します。
コンポーネント化・実装
繰り返し現れる要素をコンポーネントにし、React と TypeScript で実装します。あとから増やしても崩れない形にします。
診断
6つの観点と JIS の基準で、作ったものを確かめます。
最後に診断が付くのが、私たちの形です。作った本人は見落とします。だから診断は、設計・実装をした本人の目ではなく、公開している手順と複数のレビュアー（Design QA）で行います。基準と手順を先に決めてあるのは、そのためです。
私たちが公開しているもの
言葉で説明するより、動いているものを見ていただくほうが早いと考えています。4つとも、このページから開けます。
判断軸を、記事として公開
UI/UX の判断軸と設計の考え方を、記事として500本以上公開しています。上の6つの観点も、ここで1つずつ説明しています。提案書の中だけの理屈ではなく、私たちが普段どう判断しているかを、そのまま読めます。
UIコンポーネントを設計し、公開
React 向けの UI コンポーネントを設計・実装し、オープンソースとして公開しています。部品の見た目と挙動は、動く実物で確かめられます。
Design QA
基準に沿った診断を、商品として提供
上の6つの観点による UI診断を、商品として提供している窓口です。診断の手順、報告書の見本、判定した実物を公開しています。「センスが良い」ではなく、基準で説明できる状態にしています。
このサイト自身
JIS の試験を、自分のサイトにも当てています
このサイトは JIS X 8341-3:2016 の適合レベル AA に準拠しています。試験結果を、達成基準ごとに公開しています。
どう関わるか
プロダクトをお持ちの会社へ
既存の画面の診断（報告書）から入ります。直す優先順位と、作り直すか改修で足りるかは、その先でデザインアドバイザーとして一緒に決めます。作り直しや改修の設計・実装まで担えます。
開発会社・システム会社へ
デザイン担当として参加します。要件定義が済んでいて、画面設計の担当だけが足りない、という形を含みます。
これから立ち上げる会社へ
何を作るかを決めるところから参加します。決めるところと、実際に作るところの両方を担えます。
デザインアドバイザー
作る前でも、いまある画面についてでも、方針をその場で一緒に決める形です。
UI診断（Design QA）との違いは、納品するものです。診断は、書面の報告書を納品して終わります。デザインアドバイザーは、方針をその場で一緒に決めます。
| 仕事 | お渡しするもの | 関わり方 |
|---|---|---|
| UI診断 | 報告書（書面） | 1回きり。結果を受け取っていただきます |
| デザインアドバイザー | 決めた方針（その場で） | 作る前・作りながら、一緒に決めます |
これまでのお仕事
代表が担当した主な仕事です。守秘のため、社名は出していません。業種・規模・担当範囲をお伝えします。詳細は、ご相談の際にお見せします。
- クラウドの文書作成サービス（SaaS）
- 20名規模のチームで、UI設計とデザインシステムの設計・運営を担当3年10か月
- オフィス用品メーカーのECサイト
- 60名規模のチームで、UI/UX改善を担当2年2か月、継続中
- 自治体向けの統合型・公開型GIS
- 9名規模のチームで、UI設計とフロントエンド実装（ArcGIS）を担当6か月
- ドローンの飛行許可申請サービス
- 30名規模のチームで、設計初期からのUI設計と実装を担当1年
- 旅行予約システムの全面刷新
- 100名以上のプロジェクトで、ビジネス要件を画面に起こし、システム要件と突き合わせる役を担当11か月
私たちについて
フォーピーエックス合同会社は、代表の田原ヒロユキが2025年に設立しました。田原は紙のデザインから始め、ホームページ、そして画面の使いやすさへと仕事を移してきました。
その後の10年ほどは会社に勤め、大手の旅行会社では、ホームページを作る人から始めて制作の責任者になりました。最後は全社のUI/UX（画面の使いやすさ）を統括する部署で、100人ほどのグループをまとめました。人を採用して育て、仕事の質を保つ決まりを作りました。
長く事業会社の中にいたので、ビジネスの話を汲み取りながらデザインを決められます。見た目を整えるだけでなく、どこが売上につながるかまで考えて形にします。
- 会社名
- フォーピーエックス合同会社（4px LLC）
- 設立
- 2025年6月5日
- 所在地
- 千葉県柏市若柴178番地4 柏の葉キャンパス148街区1 パークシティ柏の葉キャンパス ザ・ゲートタワーウェスト3階V156
- メール
- info@4px.jp
- 代表者
- 田原ヒロユキ
ご相談
いまお持ちの画面や要件定義書を見せていただくところから始められます。何を依頼できるかが決まっていなくても構いません。
内容を確認のうえ、2営業日以内にご連絡します。
参加の形（契約・稼働・開始時期）と体制は、ご相談の際にお伝えします。
メールでも対応可能です。 info@4px.jp