デザインの先を、共に見つめる

DESIGN by TOMA TOYODA

ABOUT

Toma Toyoda

豊田 冬馬Toma Toyoda

福岡を拠点に、Webシステムおよびアプリケーション中心にUI/UX設計、実装を手がけるデザイナーとして活動しています。主にクラウド、業務系システムの実績多数、ユーザー視点のモノづくりが得意です。

主な実績

某大手ワークフロー（稟議）システム開発のUI/UX設計

ノーコード・ローコード開発ツールのUIUX設計

エンドユーザー向け操作系タブレット画面のUI/UX設計

Career

2007年　Webデザイナーとして活動をスタート

2008年　いくつかの制作会社を経てWebサイト制作に携わる

2012年　SIベンダーへ転職後、Webディレクション業務全般に携わる

2014年　東京に転属後、大手中心にシステム開発プロジェクトへ参画、UI/UX全般を手がける

2024年　地元・福岡へ戻り、STUDIO KOKOPEとしてフリーのデザイナーとして活動を開始、現在に至る

SERVICE

ユーザーの視点でデザインします

わかりやすい言葉で説明します

そして、ノウハウを共有します

UI/UX設計

Webシステムやアプリケーションのユーザーインターフェースデザインとユーザー体験設計を行います。使いやすさと見た目の美しさを両立したデザインを提供します。

フロントエンド実装

HTML, CSS, JavaScriptを使用したフロントエンド実装を行います。レスポンシブデザインやアクセシビリティに配慮した実装が可能です。

デザインシステム構築

一貫性のあるデザインシステムの構築をサポートします。コンポーネントライブラリやスタイルガイドの作成を通じて、効率的な開発をサポートします。

CIデザイン支援

ロゴデザインやグラフィックデザインを提供します。ブランドアイデンティティの確立から各種グラフィック素材の制作まで対応可能です。

SKILL

スキルセットは下記の通りです。業務で使えるもの、勉強中のものも全て掲載しています。

Figma

★★★★☆

UI設計からプロトタイプ作成まで対応可能

Adobe XD

★★☆☆☆

UI設計からプロトタイプ作成まで対応可能

Photoshop

★★★★★

画像編集や合成、バナー制作などの基本操作

Illustrator

★★★★★

ロゴやアイコン制作、ベクター画像の編集

HTML5

★★★★★

セマンティックなマークアップ対応が可能

CSS3

★★★★★

レスポンシブデザインとアニメーション実装

JavaScript

★★★★☆

インタラクティブな機能実装とDOM操作

PHP

★★★☆☆

WordPressを用いたサイト構築が可能

React

★★★☆☆

コンポーネント設計とステート管理の基本

Bootstrap / Tailwind CSS

★★★★☆

ユーティリティファーストのスタイリング

Visual Studio / VS Code

★★★☆☆

開発要件に沿った画面実装が可能

Git

★★★☆☆

基本的なバージョン管理とチーム開発対応

Slack

★★★★★

Slack、Chatwork他ツールの活用が可能

Notion

★★★☆☆

Notionを活用したPJ管理が可能

Backlog

★★★★☆

プロジェクト管理ツールの利用が可能

Accessibility

★★★★☆

WCAG準拠のアクセシブルなデザイン実装

WORK

過去の担当実績は下記の通りです。各アコーディオンをクリックで担当業務概要を確認できます。

+ 2025年
プロジェクト 情報セキュリティ管理システム　プロダクト開発
概要 情報セキュリティ管理システムのプロダクト開発におけるUIUX改善・実装を担当。
期間と体制
  • 6ヶ月間
  • PdM 3名 / エンジニア 12名 / デザイナー 3名
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
業務の流れ
  • ユーザーからのフィードバックをもとにプロダクトバックログ（PBI）を作成。
  • PBIをもとに改善施策を立案し、デザインモックをベースに提案活動を実施。
  • PdM、エンジニアとの仕様協議およびUIUX観点からの機能ブラッシュアップ、支援を実施。
  • アクセス分析、ユーザーインタビューへの参加等を通して、リリース後の改善、施策提案へつなげる。
成果
  • 3ヶ月単位での新機能リリースにより新規顧客の獲得に貢献。
  • 既存機能の改善を通して顧客のアップセル、新たなニーズや要件獲得、課題発掘に至る。
開発環境
  • 【OS】Mac OS
  • 【言語】HTML / CSS / JavaScript / React
  • 【ツール】Figma / VSCode / Github / Slack
+ 2024年
プロジェクト プロジェクト管理システム　リプレース開発支援
概要 ノーコード・ローコード開発ツールのリプレースにおけるUIUX改善・実装を担当。
期間と体制
  • 6ヶ月間
  • PM 1名 / エンジニア 6名 / デザイナー 2名★
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
  • デザインガイドライン作成
業務の流れ
  • クライアント主催のデザインコンペを経てプロジェクトへ参画。要件定義フェーズからUIUX改善提案を実施。
  • ノンデザイナー環境への参画のため、課題と解決施策の可視化、モックを用いた具体的説明を継続的に実施。
  • 競合数社との差別化を図り、強みを伸ばすことで、特化した操作感を維持し品質を向上させる。
  • 定期レビューや打合せを細かく開催、ファシリテーターとして舵取りを行い、円滑なデザイン管理、納品を実現。
成果
  • リプレース版リリース後、既存ユーザーの満足度アップに貢献。
  • クライアントにて製品コンセプト、機能説明がしやすくなり、リリース後まもなく複数の新規受注を獲得。
開発環境
  • 【OS】Windows10
  • 【言語】HTML / CSS / JavaScript
  • 【ツール】Figma / Visual Studio / Backlog
プロジェクト 電気設備工事業社の損益管理システムのUIUX構築
概要 損益管理システムの新規立ち上げにおけるWeb画面のUIUX構築およびデータ可視化BIツールの画面デザイン実装支援を担当。
期間と体制
  • 6ヶ月間
  • PM 1名 / エンジニア 8名 / デザイナー 1名★
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
  • デザインガイドライン作成
  • BIツール画面設計、デザイン構築支援
  • 製品ロゴ作成
業務の流れ
  • 経営層向けシステムのため、情報の優先度、視認性の強弱にフォーカスし、端的かつ明瞭な画面設計を実施。
  • 10以上の主機能、50以上の画面数となり、一貫性を持たせたレイアウトづくりを実施。
  • 要件定義フェーズから完成形に近い画面イメージを共有し、都度合意を得ながら進める形で円滑なコミュニケーションを実施。
  • 並走してBIツール（MotionBoard）の画面デザインや製品ロゴの作成も担当し、全体を通してデザイン、CI構築を担当。
成果
  • 早速社内会議に活用され、各部門の収支報告、意思決定の円滑化に貢献。
  • 画面の配色や製品ロゴによりシステムのアイデンティティが確立され、社内への認知浸透、活用促進につながった。
開発環境
  • 【OS】Windows10
  • 【言語】HTML / CSS / JavaScript
  • 【ツール】Figma / VSCode / MotionBoard / Slack
+ 2023年
プロジェクト 建設・工事業向け基幹業務システムのUIUX構築
概要 工事原価管理や建設業会計等の機能を持つ建設・工事業向け基幹ERPシステム開発に従事。クラウド移行リプレースにおけるUI/UX全般を担当。
期間と体制
  • 12ヶ月間
  • PM 2名 / エンジニア 10名 / デザイナー 3名★
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
  • デザインガイドライン作成
業務の流れ
  • リプレースによる既存ユーザーへの影響を最小限にするため、操作感を維持しつつUXを改善する方針となる。
  • 参画時点で既にバックエンド仕様がFIXしていたため、それをもとにデザインを設計し、UIの最適化を実施。
  • 何がどう変わったのかをクライアントに説明するため、コンポーネント単位で課題と改善施策をまとめ、成果物をアウトプット。
  • リリース後クライアント側での運用・改善が必要となり、ガイドラインにコンポーネントをまとめ、運用の観点から詳細に仕様を明記。
成果
  • コンポーネント単位で仕様をガイドラインに反映したことで、リリース後、クライアント側でのデザイン内製化（7割程度）を実現。
  • デザインを評価いただき、機能追加開発の追加受注を獲得。
開発環境
  • 【OS】Windows10
  • 【言語】HTML / CSS / JavaScript
  • 【ツール】Photoshop / Illustrator / VSCode / Redmine
+ 2022年
プロジェクト IoT管理システムのUIUX改善
概要 IoT構築基盤のWeb管理システム開発において、既存システムのUI改善を担当。
期間と体制
  • 6ヶ月間
  • PM 2名 / エンジニア 10名 / デザイナー 3名★
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
  • デザインガイドライン作成
業務の流れ
  • 新UIグランドデザイン作成を行い、全70画面への適用を実施。
  • 各画面の利用目的（ゴール）を明文化し、導線の見直しと各操作のつながりを可視化、利用者視点に立ったUI設計を実施。
  • 仕様検討フェーズにて現状分析、課題の洗い出しを行い、一つの課題や施策に対して、理由と根拠を紐づけ。
  • 結果として、手戻り工数を抑え、遅延なく納品、リリースを実現。
成果
  • エンドユーザーの操作ミス、手順の削減を実現。
  • リリース後、エンドユーザーからの問合せが月3割程度減少。
開発環境
  • 【OS】Windows10
  • 【言語】HTML / CSS / JavaScript
  • 【ツール】Photoshop / Illustrator / VSCode / Backlog
+ 2021年以前
プロジェクト 大手ワークフローシステム開発のUIUX構築
概要 ワークフロー（稟議）システムおよび関連プロダクトを含む製品シリーズ全般のデザインを担当。
期間と体制
  • 約7年間
  • PM 2名 / エンジニア 12名 / デザイナー 2名★
担当
  • 要件定義支援
  • UIUX設計
  • デザイン作成
  • プロトタイプ作成
  • デザインガイドライン作成
  • 製品ロゴ、パンフレットその他CIブランディング支援
業務の流れ
  • 主力製品のワークフローシステムのエンタープライズ版開発のため、デザイナーとして要件定義からプロジェクトにアサイン、レイアウト、UI設計、デザイン、コーディング（モックアップ）を担当。開発、テスト、リリースまで、現地チームと連携しながら課題発掘、デザインによる解決を行い、品質向上に貢献。
  • リリース後、同シリーズの経費精算システム（2018～19年、16ヵ月間）、勤怠管理システム（2020年、8ヵ月間）、証憑管理システム（2023年、6ヵ月間）においても継続してUIUXを担当。結果として約7年に渡り、パッケージ全体のデザイン業務に携わる。
  • クライアントの要望が「大企業向け、高級志向なデザイン」であったため、落ち着いた配色と、目的が分かるアイコン（100種以上）を活用することで、直感的かつ操作性を優先したシンプルな画面に仕上げる。
  • ワークフロー（稟議）システムであるため、利用者にとっての視認性や操作性を考慮したシンプルなUIを設計。また、スマホやタブレットでも問題なく利用できるようなUIとし、レスポンシブにも対応。
  • 大人数での仕様検討、画面レビューを要する機会が多く、競合他社の調査報告や複数パターン提案等の工夫を凝らし、さまざまな意見、フィードバックを反映することで最適解を導く手法をとり、一つずつ納得いただきながら完成形へつなげる。
成果
  • リリース後、シリーズの販売本数が2倍以上となる。
  • 大企業だけでなく中小企業へもシェアが伸び、機能の追加開発につながる。
開発環境
  • 【OS】Windows10
  • 【言語】HTML / CSS / JavaScript
  • 【ツール】Photoshop / Illustrator / Visual Studio / Slack

CONTACT

お問い合わせやご相談は、以下のSNSやGitHubからお気軽にご連絡ください。

プロジェクトの詳細や予算、スケジュールなどについてもお知らせいただけると、より具体的なご提案が可能です。