こんにちは！デザイナー横断のグループミッション（通称ぐるみ）で活動している「情報基礎チーム」です。

私たちは、Web技術への理解を深め、それを実務に活かせる知識として整理・共有することで、デザイナー全体の学びにつながる基盤をつくることを目的に取り組んでいます。

この記事では、ビギナーデザイナー向けに作成したポータルの概要と、そこに至るまでの取り組みについてご紹介します。

取り組みの背景

AIエージェントの登場により、デザイナーのコーディングの進め方は大きく変わりました。実装そのものはAIが担う場面が増え、コードを書く作業は以前よりも効率化されています。

その一方で、これからは「何をどう組み立てるか」を理解していることが、これまで以上に重要になるのではないかと感じています。

その背景には、主に次の3つの理由があります。

理由1：AIコーディングを扱うには、構造理解が前提になる

AIに実装を任せる場合でも、出力されたコードが妥当かどうかを判断するには、背後にあるロジックや構造の理解が必要になります。

意図した挙動になっているか、どこを修正すべきかを見極めるには、Webの仕組みやソフトウェアの基本構造を押さえておくことが前提になります。

理由2：UIはロジックと切り離せない

UIは見た目だけで成り立つものではなく、データの持ち方や状態の変化、APIとの通信など、ソフトウェア側のロジックとつながっています。

Webの仕組み（通信・レスポンス・DOMなど）を理解していることで、実装を前提とした設計や、背景を踏まえたデザイン判断がしやすくなります。

理由3：共通言語があることで、チームでの議論が具体化する

エンジニアとの会話において、基本的な構造や用語を理解していることで、やり取りがより具体的になります。

実装の前提を共有した上で議論できるため、認識のずれも起きにくくなります。

Webの基礎を知ることで、UIを見た目だけでなく仕組みまで含めて捉えられるようになります。実装やエンジニアとのやり取りにも背景が生まれ、チームの中で動きやすくなると考えました。

ビギナーデザイナーのうちにこの土台をつくることが、その後の成長や安心感にもつながるのではないかという思いから、この取り組みが始まりました。

ポータル作成までの取り組み

このような背景を踏まえ、デザイナー向けのWeb知識をテーマに、デザイナー全体を対象とした共有会を実施しました。共有会で使用した資料は、書籍などから得た知識を整理して作成しました。

その取り組みを通じて、まったく知識のない状態から学び始める難しさを私たち自身も実感しました。手探りで一つひとつ調べていくだけでは、知識同士のつながりや全体像がなかなか見えず、どこまでがデザイナーの持つべき基礎知識として必要なのか、判断が難しい場面もありました。

そこで、同じような状況にあるビギナーデザイナーにとって、学びのとっかかりとなり、困ったときに立ち返れる場所があれば今後の学習の助けになるのではないかと考え、Web基礎を体系的に学べるポータルをNotion上に作成することにしました。

作成の流れ

ここからは、ポータル作成までの流れをご紹介します。

大きく4つのステップで進めました。

1. インプット

共有会で得たフィードバックをもとに、デザイナーが技術面でどのような点につまずいているのかを整理しました。

そこから必要な知識を洗い出し、学習テーマをリストアップし、Webの基本構造や通信、開発環境、ツールなどテーマごとに分担し、調査と理解を進めました。

2. 整理して共有

各自がまとめた内容をチーム内で共有し、認識のずれや抜け漏れを確認しました。

議論を進める中で、サービスやチームごとに開発環境や関わり方が異なることが改めて明確になりました。そのためポータルを作るにあたっては、前提となる状況の違いを踏まえる必要があるという結論に至りました。

また、「自主的に学びに行く人」を前提とした設計では目的や対象が曖昧になり、活用されにくい可能性があるという課題も見えてきました。

3. 設計

そこで各サービスチームのデザイナーにヒアリングを実施し、「実際に困っていること」を起点に設計する方針へと切り替えました。

その結果、実務の中でどこにつまずいているのかが明確でないケースが多いことが判明しました。さらに「体系的に学びたいとき」と「今すぐ解決したいとき」で必要な情報が異なることもわかりました。

これらを踏まえ、本ポータルは網羅性を追求するよりも、実務で迷ったときに立ち戻れる知識基盤として設計する方針を定めました。

4. 作成

定めた設計方針をもとに手始めに全体構造を整理し、「困ったとき」「理解したいとき」を軸にジャンル分けを行いました。インタビューで挙がったつまずきやすいテーマ（環境構築、Git、用語理解など）を優先し、学習リストの内容をもとに各担当がページへ落とし込みました。

作成にあたっては、情報を詰め込みすぎないことを意識し、関連情報へ自然につながる構成に整えています。

今後の更新も前提とし、拡張しやすい形でまとめました。

ポータルの内容

ビギナーデザイナーが利用することを想定し、ポータルは大きく以下の構成にしました。

• 学習の入り口となる基礎知識データベース

• 困りごとから辿れるタグ検索

• 押さえておきたい用語集

それぞれ役割を分け、目的に応じて使い分けられる設計にしています。

学びたいときの基礎知識データベース

ポータルの中心となるのが、基礎知識データベースです。

私たちが学習した内容を、要点を押さえた形で簡潔にまとめています。内容はカテゴリごとに整理していますが、ここですべてを理解することを目的にはしていません。

まずは全体像に触れ、考えるための材料を持つことを重視しています。

一度概要を知っておくことで、その後に自分で調べたり深掘りしたりする際の手がかりになる。そのための分量と粒度で設計しました。

困ったときのタグ検索

ビギナーデザイナーが実務の中で遭遇しやすい困りごとから、逆引きできるタグ検索を用意しました。

「何から調べればよいかわからない」という状態を減らし、困りごとを起点に学習へつなげられる導線を意識しています。

まずは課題に近い言葉から辿り、関連する基礎知識へアクセスできる構成にしました。

知っておきたい用語集

頻出する単語をまとめ、概要と公式ドキュメントへのリンクを掲載しています。

特に学習初期は、「何を調べればよいのかわからない」という状態になりがちです。用語を一度整理しておくことで、検索や自己学習の足がかりになることを想定しています。

まずは言葉を知ること。その上で、自分で調べられる状態をつくることを目的に設計しました。

おわりに

今回ご紹介したポータルは、ビギナーデザイナーがWebの基礎に触れ、自分で調べ、考えるためのきっかけになることを目指して作成しました。

すべてを網羅するものではありませんが、学習の入り口として、また実務で立ち止まったときに立ち返れる場所として活用してもらえればと考えています。

この記事で取り上げたポータルは現在公開しています！ もし学習の一助になれば幸いです。

🌐 Web基礎はじめの一歩