UIデザイナー向けエンジニアリング基礎研修の概要
この記事は Goodpatch Advent Calendar 2022 1日目の記事です。今年もアドベントカレンダーの季節がやってきましたね！🎄
最近、社内外からご要望をいただいたことをきっかけに、「UIデザイナー向けエンジニアリング基礎研修」を作ることになったので、今回は研修の概要について、ご紹介できればと思います。
目次
UIデザイナー向けエンジニアリング基礎研修とは
ソフトウェアをつくる上で、UIデザインとエンジニアリングは切っても切り離せない存在です。
しかし、「UIを設計するデザイナー」と「UIを実装するエンジニア」が分かれることで、設計と実装が噛み合わないことがあります。たとえば、UIデザイナーの方であれば、エンジニアに以下のような質問をされた経験はないでしょうか。
- データがないとき／多いときの表示はどうなりますか？
- データの取得に時間がかかるけど、このUIで大丈夫？
- 既存のUIと新規のUIでルールが異なるけど、なにか意図はあるのかな？
- この仕様だと実現に時間がかかりそうだけど、本当に必要ですか？
これらの問題を解決する上で、デザイナーとエンジニアのコミュニケーションは必要不可欠です。しかし、状況によっては常にエンジニアと近い距離で働けるとは限りません。
もし、デザイナーとエンジニアが近い距離で働ける環境だったとしても、デザイナーがエンジニアリングの基礎知識をインプットしておくことで、お互いのコミュニケーションがスムーズになるだけでなく、UIデザインの際に考慮しておくべき観点が増えて、UIの精度向上に役立ちます。
とはいえ、最近はフロントエンド技術の複雑化もあり、コーディングを学び始めるのも中々ハードルがあるのではないでしょうか。
そこで社内のUIデザイナー、エンジニアで議論しながら、UIデザイナー向けに特化したエンジニアリング基礎研修を設計しました。
研修の対象者
- 実装観点を踏まえたUIデザインの勘所を知りたいUIデザイナー
- コーディングの経験がないが、これからエンジニアリングを学び始めたい方
- エンジニアとのコミュニケーションに難しさを感じている方
研修の目的
- 実装時のUIデザインの考慮漏れや後戻りを防ぎ、UIデザインの精度・品質を向上すること
- エンジニアとの共通言語を持ち、意思疎通が容易になること
※ エンジニアリングを熟知する必要はなく、あくまでエンジニアの観点を知ることを目的とする
研修の内容
- エンジニアリング基礎（座学）
- ソフトウェアが動作する仕組み
- ソフトウェアエンジニアの思考性
- UIデザインとエンジニアリング（座学）
- UIデザインの網羅性（UI Stack）
- UIデザインの一貫性（UI Component）
- Figmaを使ったUI Stack／UI Componentの作成（演習）
- HTML/CSSの簡易実装（演習）
※ 研修の内容は随時、アップデートされる可能性があります。
UIデザインとエンジニアリング
今回の記事では、座学部分の内容を一部抜粋して、ご紹介します。
ソフトウェアが動作する仕組み
私たちが普段利用しているWebサイトやiOS / Androidのアプリケーションは、どのような仕組みで動作しているのでしょうか。Webサイトの場合、大まかには以下のような流れで動作しています。
- WebブラウザでURLを入力し、インターネットを通じてサーバーに問い合わせる（リクエスト）
- サーバーがHTMLやCSS、画像などのリソースをWebブラウザに返す。リソースが存在しない場合はエラーを返す（レスポンス）
- WebブラウザはHTMLをもとに文書構造をつくり、CSSをもとにスタイリングを行う（レンダリング）
また、サーバー側では以下のような仕組みを持っています。
- Webサイトで扱うデータを複数のまとまりに分割し、関連づけることで、データを管理している（データベース）
- データベースの情報を取得したり、ユーザーの入力情報を保存する上でWebブラウザとやり取りするための窓口をURLとして提供する（API）
基礎知識ではありますが、ソフトウェアの仕組みを理解しておくことで、どのようなタイミングで通信が行われるのか、エラーが発生するのかといったことが理解できるようになり、UIデザインの段階から気を付けておくべきポイントを抑えられるようになります。さらに実装上の懸念や問題を理解できるようになることで、代替案を考えやすくなります。
ソフトウェアエンジニアの思考性
エンジニアはプログラミングを行い、ソフトウェアを実装しますが、プログラムはコンピューターへの命令であり、コンピューターは命令を忠実に実行します。言い換えれば、ユーザーの操作に対してコンピューターが適切に反応するように、コンピューターの振る舞いを１つ１つ言語化・文章化していく作業とも言えます。
しかし、コンピューターは命令されていないことは実行できないため、基本的には「良い感じ」という曖昧な命令は通用しません。エンジニアはさまざまな状況を踏まえて、論理的にUIの振る舞いを理解しながら、プログラムを書く必要があります。（最近のAI技術によって、良い感じが通用する世界線もありますが・・・）
そのため、UIデザインに論理的な構造があると実装しやすくなりますし、逆に辻褄が合わないと実装が難しかったり、あるいは実装できない状態になってしまいます。
UIデザインの網羅性
ソフトウェアは、ユーザーの操作やシステムの状況に合わせて、見た目や振る舞いを変えます。つまり、ソフトウェアは紙のような「静的」なものではなく、「動的」な性質を持っています。
動的なソフトウェアをデザインするためには、さまざまな状態を考慮しておく必要があります。状態変化を考慮する上では、「UI Stack」と呼ばれる概念を活用します。
- Blank（空の状態）
- Loading（読み込み中の状態）
- Partial（部分的／途中の状態）
- Error（エラーの状態）
- Ideal（理想の状態）
UI Stackについてはご存知の方も多いかと思いますが、前述の「ソフトウェアが動作する仕組み」を踏まえることで、それぞれの状態の必要性について、より良く理解できるようになります。
UIデザインの一貫性
ソフトウェアは、基本的に一度リリースしたら終わりではなく、リリース後にも改善を行い続けるものです。しかし、機能が多くなったり、組織が拡大することによって、UIのルールがバラバラになることがよく起こります。その結果、実装やテストに時間がかかるだけでなく、ユーザーの認知負荷や利便性に悪影響を及ぼす可能性があります。
これらの問題を防ぐ上で、UIの一貫性を維持するために「UIコンポーネント」という概念を活用します。UIコンポーネントの設計においては、以下の５つの観点が役に立ちます。
- Style（視覚表現）：colorやmarginなどの見た目がどうなるか
- State（状態）：hoverやdisableなどの状態がどうなるか
- Property（属性）：可変になる要素はあるか、可変になるとどうなるか
- Context（文脈）：どのようなユースケースで利用すべきか、利用すべきでないか
- Naming（命名）：そのUI Componentを何と呼ぶか
上記の観点を踏まえて、UIコンポーネントを設計しておくことで、ユーザビリティと実装効率の向上を促します。
先にも書いたとおり、エンジニアはUIを実装する際にはコード＝言葉として表現するため、UIコンポーネントに対して適切な名前が付いていることは重要です。これらの命名は手間がかかるものですが、デザイナーとエンジニアで共通言語になっていると、デザインと実装で設計思想を合わせやすくなったり、メンバー同士のコミュニケーションが円滑になります。
つくるものの仕組みを知るということ
記事の冒頭でも書いたとおり、ソフトウェアにおいてデザインとエンジニアリングは不可分です。特にアプリケーションのUIはユーザーとシステムの橋渡しを行うため、ユーザーの視点だけでなく、システムの視点を求められるケースも少なくありません。
ソフトウェアに携わる方であれば、どの職種でもエンジニアリングの基礎知識を身につけておくことは業務の役に立つはずです。もちろん、UIを実装するエンジニアがUIデザインの基礎知識を学ぶことも同様の意味があります。
おわりに
最近では、ディレクターやデザイナーの方々向けにエンジニアリング基礎研修を行わせていただく機会が増えてきました。
この記事では座学パートの内容を一部ご紹介しましたが、実際の研修では上記の座学に加えて、手を動かしながらFigmaやHTML／CSSの基礎を学ぶ演習パートも加わります。
もし、エンジニアリング基礎研修にご興味がありましたら、お問い合わせページからご連絡いただければ幸いです。
なお、Goodpatchでは新卒社員を対象にエンジニアリング研修を行なっております。こちらの記事も良ければご覧ください。