エンジニアさん向けにUIデザイン講座を開きたい！（準備編）

はじめに

業務の中で、フロント周り（UIデザイン含む）を担当しています。
以前から機能追加などで、エンジニアさん自身がUIコンポーネントを追加／変更することがあり、UIデザインで苦労されている姿を度々見かけていました。
デザインシステムはまだ一部だけ導入、UIデザインを担当できる人数も少なく、現状どうしてもエンジニアの皆さんにUIコンポーネントの追加をお願いする形になっています。

そこで以前から「UIデザインについて教えて欲しい」というご要望もあったので、思い切って「UIデザイン講座」を開くことにしました。

こちらの記事は、UIデザイン講座を開く前〜開いた後の２回にわたるレポートになります！
今回はUIデザイン講座を開く前、準備編になります。

UIデザイン講座で何をしよう？

実務に活かせる内容にしたい

講座を開こうと決めて、講座で使うテキストをどうするか考え始めました。
持っているUIの本、数冊新しく買い足した本を読みながら、「UIに含まれる膨大な情報」を全て講座に含めるのは無理だと早々に諦め（笑）、現場で起こっている問題の解決策になるような内容にしようと決めました。
実務でエンジニアの方が新しいサイトやアプリのUIデザインを一から作ることはないため、
既存のサイトに適切なUI部品を追加することができるを講座のゴールに定めました。

講座の内容

講座は２部構成、グループワークの課題もつけることにしました。
※実際に全てのカリキュラム、グループワークができるかは今書いている時点ではわかりませんが、用意だけはしておきました。

【講座１】 デザイン基礎編

• デザインの四大原則の説明
  • 近接
  • 整列
  • 強弱（対比）
  • 反復

【講座2】 UIデザイン実践編

※実際のサイトの１ページを修正しながら、下記の項目の理解を深める内容にしました

• 色について
  • 色が持つ印象
  • 配色
  • トンマナ
• 書体について
  • 書体が持つ印象
  • 書体の使用数
  • 行間
  • ジャンプ率
• ボタンについて
  • ボタンがボタンらしく見えるには
  • ボタンにも優先度がある
  • ボタンの状態は１つじゃない
• 画面レイアウトについて
  • ボタンの配置
  • ヘッダー部品の配置
• スタイルガイド／コンポーネントライブラリの作成
  • 講座内で作成したカラーや部品を使って
• １ページ、デザイン作成
  • 講座内で作成した部品を使って１ページレイアウト、デザインをやり直す

【講座３】 グループワーク

• ダッシュボードを作成する
  • 講座2で使用した実際のサイトのダッシュボードを使りなおす（Figma使用）
  • 複数人で分かれてのグループワーク（デザイナーはいない）

実際に手を動かしながら

講座は聞くだけではなく、練習問題を解きながら進めるスタイルにしました。
デザインはとにかく手を動かさないと身につかないですし、
デザインをきちんと理解しながら作らないと上達するのも難しい
ことは過去の経験から痛いほど学んでいます。。
練習問題を解き進めると、結果的にサイトの１ページをデザインし直すことになり、成果物も残せる内容にしました。

少しでも面白く、興味を持ってもらえるように

実務編では実際のサイトの１ページをデザインしていくのですが、自社のサービスサイトや管理画面を使うと、仕事感が出過ぎて面白くないかなと思い、弊社で使っている勤怠管理のサイト（他社様の）を修正していくことに決めました。架空のサイトでもなく、全く知らないサイトでもないので、考えやすいですし、実際のページと比較もできて楽しいと思います！

またできるだけ講座が受講者の苦痛にならないように、
テキストもデザインが全然わかってない先輩とタッグを組んで「勤怠管理サイト」を修正していく新人UIデザイナーになって練習問題を進めるという、物語調にしてみました。

実際講座を開いて講座の内容が受けたかどうかは、次の投稿で書きますね！
（全然受けなかったとしても赤裸々に書こうと思います！）

プレ講座を開催してみた

エンジニアさん２名のご協力を得て、一度講座をプレ開催してみました。
講座１と２を合わせて２時間でできるかやってみたのですが、結果的に時間は全然足りませんでした。
一部の練習問題は飛ばす形で本番はやってみようと思います。
内容自体はそこまで難しくはないというご意見をいただいてホッとしました。。
正式な講座は実務が立て込んでいるため、７月中旬以降の開催を予定しています。
次回のレポートは開催後に書く予定です！

私も練習問題・グループワークをやってみた

人に問題を作っておいて、自分がやらないのも変な話だなと思ったので、私も練習問題を解いて、グループワークを（１人で）してみました。
作りながら、「これが絶対正しい答えだ！」というものは、やはりないのかなと感じました。
ユーザーの属性や状況、使用する環境でUIデザインは変化していくものですし、デザインには流行りすたりもあるものなので、「練習問題の答えはこれです！」ではなく、「こういう考え方もあるよ」と助言する形で進めていきたいなと考えています。

私自身はグループワークのダッシュボードを（デザインをいちから）作成する課題が一番楽しかったです！
久々にデザインしたなーという感じがしました（笑）。

自分自身も楽しめる講座のカリキュラム作成でした！