「UI」タグアーカイブ

熊本市役所様のUI研修を無事終えて〜研修用スライド作成でデザイナーが考えたこと〜

2025年11月に熊本市役所様で開催された
「UIデザイン研修(全3回分)」のワークショップ設計とスライド作成に携わりました。

今回のテーマは「生成AI活用」。
受講者に「難しそう」と壁を感じさせないための工夫をしました。

そのためスライドでは「AI=最新テック」というイメージではなく、「親しみやすい表現」と「直感的な図解」にこだわりました。 3時間の講義を飽きさせず、知識を即実践に繋げるために行った「資料作成の工夫」を3つご紹介します。

1. AIを「ロボット」ではなく「新人さん」として表現

CGFMが考えたAI活用のコンセプトは
「AIに丸投げせず、上司として指示を出そう」

「プロンプトを書く」という一見難しそうな行為を、「新人への業務指示」という日常業務の延長線上にあるイメージに変更。 AIをキャラクターとして登場させ、「AIと対話する」感覚を視覚的に落とし込みました。

2. 講義を退屈な時間にしない。受講者への問いかけを盛り込む

講義では「改善前」の文章を提示し、受講者の考える時間を挟んだ後「改善後」を見せる、といった「問いかけ要素」を盛り込みました。

伝わりやすい文章を書くのが大事、と分かっていても具体的にどう書けばよいのか、具体例が知りたいと思うかもしれません。ただ、正解を先に見せてしまうと受講者の心に引っかからないと考え、演習形式にして自ら考える時間を盛り込みました。

3. 複雑な手順は「ステップ図」で型化する

電子申請中級編は、AIを使って電子申請フォームの改善案を作成する内容でした。
しかし長い申請フォームの場合は、一つのプロンプトで解析から改善案作成まで完結するのが難しいことが、
ワークショップ設計段階で判明しました。

そこで「AIが極端な要約するのを防ぐ」ため、3回に分けてプロンプトを入れる構成にしました。

一方で「ひたすら講師の手順通りにプロンプトを入れるだけでは、今 自分が何をしているのか分からないのではないか?」と私は考えました。私はそれぞれのプロンプトの役割を図解化して「このプロンプトはAIに何の指示を出しているのか」を意識できるよう工夫しました。

まとめ:スライド資料は講師の「最強の相棒」

研修終了後、参加者の方のチェックアウトで

「資料が有益でした『もしかしたら、伝わるよりも載せることに精一杯になっていませんか?』にハッとさせられました」
と書いていただき、内心「やった!」と思いました。

良い研修には、良い講師だけでなく、「講義に託した想いを翻訳したスライド」も不可欠です。
私たちは、ただ情報を並べるだけでなく、「受講者にどう動いてほしいか」から逆算した研修設計やスライド作成を行っています。

「社内研修の資料がわかりにくい」
「専門的な内容を噛み砕いて伝えたい」
そんなお悩みがあれば、ぜひCGFMにご相談ください。
研修内容の相談からスライド作成まで、サポートいたします。

より詳しい記事はこちら
ワークショップ実績:熊本市職員向けUI改善ワークショップ(2025年)

UIデザイン研修で使用したスライド

UIを考える自主練におすすめな本

自主練するつもりで購入したわけではないけど
読了後に「自主練にちょうどいい」と思った本を紹介。

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理

おすすめな点は、ニーズ起点でお題が出ていること。
自主練する時に難しいのがお題作りだと思うんだけど
特殊な業界知識がなくても想像できる内容なのが良い。

お題を読んだら手を動かす。
考える時間がないならページを進めない。
つい読み進めて解答例を見たくなってしまうけど踏ん張る。

以下、自主練で書いたワイヤーフレーム。

他人に見せるのを考慮していなかったので粗い。
仲間と勉強会するんだったら、もっと綺麗に書きたい。

これから先の自主練について

日常生活を送る中で、使いにくいUI・サービスに出会ったら
なぜ使いにくいのか
どうしたら使いやすくなるのか
なぜ、その使いやすくなる施策を打たなかったのか?の背景
(コスト、時間の制約・法的制約・技術的制約・そもそも考えてもいなかった・社内コミュニケーションに何らかの課題がある 等々)

を考えて、できれば手と頭を動かして自主練すると
UI脳が鍛えられると思う。

UI設計と生活空間の動線設計の共通点

導線が複雑なUIとシンプルなUIのイメージ

デジタルの世界であっても
日常の生活空間のように「自然な流れ」に即したUI設計が大事。

どこに何を置くか決めずに部屋が散らかった状態では
タスクを完了するまでに
何度も行ったり来たりしなければならない。
あるいは細かく分類しすぎたり、見せない収納にしたことで
開けてみないと何が入っているか分からなくなって
目的のものを探すのに、時間がかかっていないだろうか。

良い導線は、ある目的のために動く「ついで」に
必要なものも拾い集められるよう設計されている。

例えば、我が家で長年愛用している体重計の場合
乗っただけで家族の誰かを特定し
自動的に体重・BMIの数値をアップして
勝手に記録がたまっていく。
体重計に乗った後
わざわざスマホを起動しアプリを起動し数値を入力する、
なんて手間は必要ない。

目的を達成するための過程が
利用者の負担にならないような
気づいたら利用目的を達成できているような
UI設計ができるようになりたい。

CGFMの週1デザインアドバイザー

CGFMには週1,2日、その会社のためだけにデザイナーとして入る
デザインアドバイザー契約もあります。

平たく言うと、週1、2など曜日を固定し
その日だけデザイナーの頭と手をレンタルしています。

  • 1人雇うほどではなく、スポット的にデザイナーが欲しい。
  • 新人デザイナーが多くてベテラン勢がいないので、経験積んだデザイナーの意見も欲しい。
  • デザイナーを雇った経験がないので、雇う前にお試し的にデザイナーと仕事してみたい。

と考えている企業・団体におすすめです。

作業内容の例を挙げると

  • 社内で上がったUI関連の課題に対してのUI提案
  • 社内デザイナーが作成したUIに対するレビュー
  • プロダクトマネージャーとの壁打ち(思考整理の手助け)
  • 営業スライドの構成・内容を担当者と一緒に考えて作る など

CGFMの強みである
デザイン×ファシリテーション を生かして

  • 場をデザインしてメンバーから話を引き出す
  • 視覚表現と言葉でプロジェクトの方向性を示し、共有する

と言ったことをしています。

1日CGFMがデザイナーとして御社のために働き、残り4営業日で御社内でCGFMの作業のフィードバックと次のタスクを決めるサイクルを1週間で回します。

週1だけで上手く回るの?と思われるかもしれませんが
意外とうまくいっています。

1日デザイナーと働いた後、次の週までにクライアント側で

  • CGFMの提案の社内レビュー
  • 次に相談するネタ集めと関連資料の準備

ができれば、1週間のサイクルがうまく回ります。

週1デザインアドバイザーと相性良いのは
複数のプロジェクトが動いている企業(自社開発・委託開発)で

逆に相性良くないと感じるのは
1週間も待っていられないような
リリースを急ぐスタートアップ企業。

もし、週1ではなく週3、4日稼働を数ヶ月単位で専属契約できれば
たたき台作る→フィードバックもらう→修正して精度を上げていく
といったサイクルのスピードは上げられるので
期待には応えられるのではないか?と思います。

タイミングによりますが、週1に限らず働ける場合もあるので
気になった方はお声がけください。

SaCSS vol.106 登壇レポート「お任せではなく 一緒に作るUIデザイン」


(写真撮影:児玉さん)

2019年9月28日、札幌で開催された SaCSS vol.106 にて
自分たちのUIデザインの進め方について、お話ししました。

お任せではなく 一緒に作るUIデザイン

UIデザインの進め方のお話と言っても
Sketchを使って、どういう手順で作ってるの?という話では一切なくて

UIデザインに取り掛かる際
何故CGFMは、ワークショップ形式な打ち合わせをするようになったのか?
そんな進め方をすると、どうなるのか?
…といった話をまとめてます。

UIデザインに限らずCGFMでは、お客様が許してくださる限り
ワークショップ形式な打ち合わせをさせてもらってます。
そこが他制作会社との違いでもあり、
それこそ私たちの制作の根源かもしれません。

登壇の機会をくださったSaCSSのみなさん、
ありがとうございました!

札幌名物 うにぎり とは、ウニとイクラが溢れんばかりに乗った、おにぎりである。

懇親会でいただいた「うにぎり」。
見た目どおり美味しい。

続きを読む SaCSS vol.106 登壇レポート「お任せではなく 一緒に作るUIデザイン」