はじめに
こんにちは。DX本部 システム開発第一事業部の吉本です。
普段はフロントエンドエンジニアとして、主にWebアプリケーション開発を行っています。
今回は、社内の有志エンジニアで実施した書籍『ノンデザイナーズ・デザインブック』（Robin Williams 著）の輪読会の様子をご紹介します。本書は、デザインの基本となる4つの原則（近接・整列・反復・コントラスト）を非デザイナー向けに分かりやすく解説した名著です。
企画背景
今回の輪読会は、普段デザインに直接関わる機会が少ないエンジニアたちが「UI/UXやデザインの会話により深く参加できるようになりたい」と感じたことがきっかけで企画されました。
背景には、参加メンバーが抱く次のような課題感もありました。
- 個人開発などでなんとなくAI任せにしてしまっているデザインから脱却したい
- 良いデザインとは何かをロジカルに理解したい
本輪読会では、非デザイナーであってもデザインの基本原則を体系的に学ぶことで、実務におけるアウトプットの質を底上げすることを目指しました。
進め方と工夫
業務と並行して実施するため、「忙しくても参加できること」と「実践重視であること」にこだわりました。
読まなくても参加できる「要約共有」スタイル
毎回冒頭の10分程度で担当者が指定範囲の要約を発表し、議事録を共有するようにしました。「予習のハードル」を徹底的に下げることで多忙な開発業務の中でも脱落者を出さず、全員が当事者として参加できる環境を整えました。また、要約を担当する人は内容をアウトプットすることで「言語化・要約力」を向上させる機会を得られるという、双方にメリットのある形式を目指しました。
AIを活用した「デザイン修正ワーク」
インプットだけで終わらせないため、30分程度の実践ワークを取り入れました。ワークの内容は、AIにランダムなお題と「わざとデザインが崩れたGoogleスライド」を作成してもらい、参加者がそのスライドを本書で学んだ内容を活かして自力で修正するというものです。こちらが実際に行ったワークの一例です。
- 文字の追加は禁止
- 配置やフォント、大きさの変更のみでデザインを改善する
などのルールを各回適宜設けることで本書の内容を意識的に適用することを促しました。AIが作成した崩れたデザインはあえて「なぜこのデザインは見づらいのか？」といった違和感を覚えやすいものにすることで、学びの効果を高める工夫をしました。
実践ワークの紹介
カフェのメニュー表を用いたデザイン修正（近接・整列など）
散りばめられた要素を整列・近接させる「カフェのメニュー表」の修正ワークを行いました。要素をグループ化し、ベースラインを意識して配置するだけで見栄えが大きく変わることを体感しました。この回では文字の付け足しを禁止しました。
下の画像はとある参加者の成果物です。整列・近接が意識されていて、とても見やすくなりましたね。
プロの視点で「一歩先」のデザインへ
非デザイナーだけでワークを続けていると「ここからさらに洗練させるための『糸口』が分からない」という壁にぶつかりました。そこで社内のデザイナーの方に参加していただき、ワークの成果物に対して直接フィードバックをいただく機会を設けました。
- 情報の優先順位に基づいたフォントの強弱の付け方
- 余白の揃え方
- アクセシビリティを考慮したカラーコントラスト比の重要性
など、プロの客観的な視点と実践的なアドバイスを得ることで大きな刺激を受けました。
輪読会を通して得た成長
参加者の中には、目覚ましい成長を遂げたメンバーもいました。
こちらが初回のワーク結果です。
そして、こちらが最終回のワーク結果です。
各所の色の使い方だけでなく、文字の配置の仕方も考えられていて、とても読みやすいデザインへと発展しましたね。
ワークを通じた一番の収穫は、デザインを「感覚」ではなく「論理」で捉えられるようになったことです。「なんとなく」という迷いが消え、自分のアウトプットの一つひとつに明確な根拠を持てるようになったことはエンジニアとしての大きな自信に繋がりました。
振り返りと参加メンバーの感想
最終回では、KPT（Keep, Problem, Try）フレームワークを用いて全体を振り返りました。参加したメンバーからは以下のようなポジティブな声が多く寄せられました。
- 本を読まなくても参加できる形式はハードルが低く、継続しやすかった
- デザインの良し悪しを「感覚」ではなく近接や整列といった「ロジカルな視点」で理解でき、再現性が高まった
- 手を動かすワーク形式によって、自分がいかに見よう見まねでやっていたかに気づき、知識をしっかり定着させることができた
- 「何を一番重要にするか」「どう情報を伝えるか」といった情報設計の考え方は、ソースコードの記述や普段のコミュニケーションにも生かせる内容だった
最後に
今回の輪読会は座学だけでなく、AIを活用した実践的なワークやプロからのフィードバックを取り入れるなど、新しい手法にチャレンジした実りある試みとなりました。今後も社内で活発に輪読会や勉強会を実施し、技術と知識の向上に努めていきたいと思います。
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
