こんにちは、コーダーのタカギです！
現在はWebサイトの実装を担当しつつ、UI/UXデザインという「設計」のスキルも武器にできるよう、日々学習しています。
このブログは、私と同じように「もっとユーザーにとって使いやすいサービスを作りたい」「コーダーとしてのスキルを活かしてキャリアアップしたい」と考えている方に向けて、私の学習の記録と気づきを発信していくシリーズです。
記念すべき第1回は、UI/UXを学び始めて、まず最初に頭をガツンと殴られたような衝撃を受けた「UI/UXの役割に対する誤解」についてお話しします。
「UIって、ワイヤーまででしょ？」
正直に告白します…
UI/UXの勉強を始める前のわたしは、その役割をすごく限定的に捉えていました。
「UI/UXデザイナーって、Webサイトの設計図であるワイヤーフレームを作る人でしょ？ ペルソナとか作って、画面の構成を決めたら、あとはデザイナーが良い感じにデザインして、わたしたちコーダーがそれを再現する。そんな分業制だよね」と。
つまり、UIはあくまでサイト制作の初期段階（点）の話で、デザインやコーディングの段階ではそこまで深く関与しないものだと思っていたのです。
UI/UXは全工程を貫く「共通認識」だった
しかし、実際に学習を進めてみると、この考えが180度変わりました。
結論から言うと、UI/UXは設計からデザイン、そしてコーディングまでの全工程を貫く「線」であり、関わる人全員が持つべき「共通認識」だったのです。
これがなければ、どれだけ見た目が綺麗なデザインも、どれだけ正確なコーディングも、本当の意味で「良いサイト」にはならない。そのことに気づかされました。
上流工程：「ユーザーを迷わせない」ための設計
まず、ワイヤーフレームを作成するまでのいわゆる「上流工程」。
ここで行うのは、単に箱（要素）を並べる作業ではありませんでした。
- ペルソナモデル/行動シナリオ:「誰が、どんな状況で、どんな目的で」サイトを使うのかを具体的に描き出す。
- ユースケースの定義:そのユーザーがサイトで目的を達成するまでの具体的な操作の流れを定義する。
これらの作業を通じて、ユーザーがサイトを使っている時に『？』と迷う瞬間を徹底的に無くす」ための設計を固めていく。これがUIの最初の重要な役割でした。
これは直感ではなく論理的思考が求められる部分で、コーディングで処理の流れを考えるのに似ていて、個人的には非常に面白い部分です。
下流工程への架け橋：「デザインシステム」という共通言語
そして、個人的に最も「なるほど！」と思ったのが、デザインやコーディングの工程におけるUIの役割です。
TOPページのデザインが完成したら、すぐに下層ページを作り始めるわけではありません。
そのTOPページを元に「デザインシステム」を構築するのです。
デザインシステムとは、サイト全体で使われるデザインのルールを定義したもので、例えば以下のようなものが含まれます。
- フォント:見出しや本文のフォントサイズ、太さのルール
- ボタンの種類: Primaryボタン、Secondaryボタンなどの定義と見た目
- インタラクション:ボタンをホバーした時、クリックした時の表示
これ…コーダーの皆さんならピンと来ませんか？
そうです、CSSの共通コンポーネントや変数設計に非常に近い考え方です。
この「デザインシステム」という共通言語があることで、デザイナーとコーダーという違う職種の人でも「この場合は、このボタンを使おう」「ここの余白は『medium』サイズだね」といったように、認識を合わせながらスムーズに作業を進めることができます。
デザインのルールが明確なので、下層ページを作成する際の効率も格段に上がるというわけです！
まとめ：良いUIは「伝える技術」から始まる
「良いUIのサイトを作るには、UIに詳しくないメンバーともしっかり意思疎通できる『共通認識』を作る工夫が、何よりも重要なんだ」
UI/UXを学んでみて、最初の気づきはこれでした。
設計の意図を明確にし、デザインのルールを言語化する。
その共通認識をチーム全体で持つことで、制作の途中でも「こっちの方がユーザーにとって分かりやすいかも」といった改善点が出たときに柔軟に対応できますし、結果としてより良いサイト制作に繋がるのだと確信しました。
コーダーとしての実装スキルだけでなく、この「共通認識を作るスキル」を身につけることが、UI/UXデザイナーへの第一歩なのだと感じています。
いかがでしたでしょうか？
まずは土台となる考え方の部分をアウトプットしてみました。
次回は、この「共通認識」をチームで作るために、具体的にどんなツールを使い、どんなことを意識していけば良いのかを掘り下げていきたいと思います。
最後まで読んでいただき、ありがとうございました！
