SHElikesの簡単な紹介
PC一つで働けるスキルを身につけられる女性向けオンラインスクールです。 以下のような特徴があるサービスです。
- 45種のスキルが学び放題
- 入門コースもあり、未経験の方もサポート
- コーチングで自身の強みやキャリアプランが明確化できる
- SHE株式会社が紹介する仕事を受けて実績を作られる
依頼の経緯
UIデザインコースの前に、2023年3月にはFigmaを学ぶコースがリリースされていたそうです。
そのコースで得た基本的な使い方の知識をもとに、より踏み込んだUIデザインのスキルを学んでもらうためにUIデザインコースは企画されました。
私がFigmaの入門書を書いていたのをSHE株式会社の方がご存じだったようで、お声がけいただきました。
携わった内容
実際のUIデザインコースはこちらからご覧いただけます（会員登録が必要です）。
コースを制作するにあたり、以下のようなものに携わりました。
- コースのテーマや具体的な内容の決定
- レッスン用Figmaデータの作成
- レクチャー動画への出演
- スライド作成（一部）
- ポートフォリオ作成支援
- 2024年、Figmaのアップデートに伴い一部リニューアル
すべてを公開することはできませんが、概要を紹介します。
コースのテーマや具体的な内容の決定
ベースの構成はSHE株式会社の方から提示いただき、議論をして具体的な内容を決めました。
私の個人的な考えとして、デザインをデザイナーだけで抱えて表層的な制作に閉じてしまうのはもったいないと思っています。
また、ご依頼いただいた内容としても、実際にUIデザイナーとして働くためのリアルな知識と演習を提供したいということでした。
というわけで、情報設計や他職種とのコラボレーションなどもコースの内容に含めました。
表層の作り方のみをひたすら真似るようなコースにすることもできましたが、それではUIデザイナーとしてのキャリアに結びつかないと考え、難しいながらも身になるものを目指して作りました。
レッスン用Figmaデータの作成
作成したFigmaデータは次のとおりです。
- 簡易的なER図のようなもの
- ワイヤーフレーム
- 簡単なコンポーネントライブラリ
- UIのモックアップ
それぞれ、課題に取り組む用（ヒントが書いてあるブランクな状態）と、見本としての完成形を作りました。
スライドや動画を見ながら順に作っていけば、実際に使えるデータの作りを学ぶことができます。
一度に多くの概念を提供し過ぎると理解が難しくなると考え、それぞれのレッスンで1つずつ扱う概念を増やすように心がけました。
レクチャー動画への出演
スライド内容を口頭で説明するのと、実際にFigmaでデータを作っているのを動画で見せています。
SHE株式会社のスタジオに出向き、2日間の収録を行いました。
編集はSHE株式会社の方に行っていただき、最終的には合計3時間強の動画コンテンツとなりました。
スライド作成（一部）
私が構成や文章を作り、ワイヤーフレーム的にスライドを作成した後、SHE株式会社の方にフィニッシュワークをお願いしました。
全部でおよそ260枚程度のスライドを作成しました。
ポートフォリオ作成支援
私は日頃採用にも関わっていて、ポートフォリオの審査もします。
スクールに通われている方のポートフォリオでよくあるのが「課題の内容がそのまま書いてあるばかりで、その人自身の思考や工夫が分からない」というものです。
そういったポートフォリオを見ると非常に勿体無いと感じるので、どのような観点でもって作成すると良いかのアドバイスもコースの中に含めました。
2024年、Figmaのアップデートに伴い一部リニューアル
FigmaのUIが変更になったことや、機能追加のアップデートがあったこともあり、2024年に一部リニューアルを行いました。
デモンストレーションはすべて録画しなおしたのと、少しのコンテンツを追加しました。
例えばバリアブル関連のアップデートにあわせてデータの作り方について補足したり、AI機能の活かし方について新規に説明したりしています。
終わりに
実際の制作・仕事の流れをイメージできたという声を多くいただきました。
実際、体系的にUIを学ぶ機会は少なく、現場の仕事の仕方も学生や未経験の方からは見えづらいです。
このコースでは、それらをいくばくかは解消できたのではないかと思います。