こんにちは！
サービスデザイン部の村石と大谷です。
私たちは、デザイナー向けのHTML/CSS研修の担当をしています。

日に日に暑さが増してきた今日この頃、みなさんいかがお過ごしですか？
巷では「今年の夏も平年より暑い」と噂です。よく考えると不思議な日本語ですね。
体調管理に気をつけて過ごしましょう！

さて、4月に入社したみなさんは、そろそろ業務に慣れてきた頃でしょうか。
サービスデザイン部では、新たに入社したデザイナーを対象としたHTML/CSS研修を実施しています。
入社したデザイナーのスキルに合った研修内容を設定し、安心して通常業務に入っていけるようにサポートを行っています。

この記事では、そんなHTML/CSS研修の中身を大公開します！

GMOメディアにおけるデザイナーの業務範囲

まず、GMOメディアのデザイナーの業務範囲についてお話しします。

GMOメディアでは、サービスごとにチームが結成されています。その中でデザイナーも、それぞれが担当サービスのチームに所属する形で業務を行っています。
デザイナーは、そのサービス運営の中で発生するバナーやLPなどのクリエイティブ作成に加え、HTML/CSSを用いたコーディングも担当業務のひとつとして行っているのが特徴的です。

コーディングに付随するデザイン業務は以下のようなものがあります。

• ページの設計、ワイヤー作成

• デザイン作成

• HTML/CSSを用いたコーディング

入社時のコーディングスキルはバラバラです。そのため、ある程度その人に適したレベルで研修内容を設定します。もちろん研修が不要な人もいるので、必ずしも全員に実施するものではありません。その点は本人の希望も踏まえて、柔軟に対応します。

HTML/CSS研修の概要

現在、研修の内容は大きく2パターンを用意しています。
HTML/CSSを書いたことがない初心者向けと、HTML/CSSを書いたことはあるがBEM*でフロントエンド設計をしたことがない人向けです。
今後入社される方がこのパターンに当てはまらない場合は、その方に合わせた内容で行います。

*GMOメディアでは、フロントエンド設計手法としてほとんどのサービスでBEMを採用しています。

初心者向けの研修の目的とゴールは下記のように設定しています。

目的

• HTML/CSSの仕組みがざっとわかるようになる

• 思考のインデックスや視点を増やす

• 分からないことを自分で調べられるようになる

ゴール

• HTML/CSSの役割を理解する

• HTMLタグや属性についての知識を身につける

• CSSの記述方法を理解する

• CSSの装飾系プロパティについての知識を身につける

工夫している点

①必ずリアル開催

入社したばかりは不安でいっぱいですよね。
研修ではわからないことがたくさん出てきます。その都度質問しやすいように、オンラインではなくオフラインで開催しています。

②アイスブレイクは長めにとる

何事も最初が肝心。お互いをよく知るところから始めます。
研修の最初の45分は雑談も交えながら、心を解きほぐします。ランチも一緒に行きます。

③とにかく丁寧に、一歩ずつ

段階を踏んで説明します。無理に走りません。一人も置いていきません。
研修後に一人でコーディング業務を行う際に、自分でわからないことを調べられるように、参考になる情報が載ったサイトも教えます！

研修のスケジュール

HTML/CSSを書いたことがない初心者向けに実施している研修のスケジュールをご紹介します。（HTML/CSSを書いたことはあるがBEMで設計したことがない人向けの研修の紹介は割愛します）

1日目

まず、アイスブレイクとして自己紹介を長めにします。
一人15分程度、自己紹介とそれに関する質問をしてみんなで和気藹々と話します。一人15分！？！？と思われるかも知れませんが、本当に本当にフランクな雰囲気でやっているので、相手への質問はどんどん出てきます。あっという間に次の人の番です。
このようにして緊張をほどき、研修中に質問しやすい雰囲気となるように意識しています。

そして、メインコンテンツに入ります。1日目は座学です。
Webページはどのような仕組みで表示されるのか、HTMLとは何かなど、基礎知識から学びます。
また、業務でよく使うHTMLタグやCSSプロパティの説明、GMOメディアで採用している設計手法のBEMについても詳しく解説していきます。

研修資料はなんと128ページにも及びます！

都度わからないポイントはないかを確認しながらゆっくり進めていくので、初心者でも安心です。
座学で集中力も切れてしまうので、休憩をこまめに挟んだり雑談をしたりして、楽しく進めていくことを意識しています。

2日目

2日目はいよいよ実践です！
1日目で学んだ知識を使い、題材となるWebページを見ながらHTML/CSSを書いてトレースしていきます。

ページ構造を見て、<header>や<main>、<footer>はどこにあたるかを一緒に確認し、<header>までは私たちも一緒にマークアップとクラスの命名を行い、感覚を掴んでもらいます。

私たちは研修中ずっと側について、一緒にコーディングを行いながらサポートします。
質問があれば都度答えて、疑問解消のお手伝いをします。

3日目

3日目は続きをコーディングし、ページを完成させます！
研修前はHTML/CSSを書いたことがない人も、3日目には全員完成させられます！
最後に研修のまとめを行って終了です。完成させたページを披露してもらったり感想を言い合ったりします。
コーディングを楽しいと思ってもらえたら、これほど嬉しいことはありません！

研修資料紹介

研修資料の一部を紹介します。

HTML/CSSに触れたことがない人でもわかりやすいように、資料は基礎的なことから詳しく解説しています。

研修中に質問を受けたことや、私たちが説明していてわかりづらいなと感じた部分は、その都度資料をアップデートしています。

実際に受けた人の感想

直近でこの研修を受けた2人のデザイナーに、感想を聞いてみました！

「私は前職でHTML/CSSを書いていたので、BEMでの設計を中心に研修を受けさせて頂きました。自分に合った内容の研修が受けられるので、効率よく業務に必要な知識を身につけることができ、ありがたかったです！とにかく資料が充実していて、研修後も業務で迷った際に見返して理解を深めることができました。」（KKさん）

「私は未経験で入社して、とても緊張していたのですが、研修はHTML/CSSの基本的な内容から学ぶことができたので安心でした。また、研修中は常に隣にいてくださり、実際のWebサイトをトレースする際も、分からないところをすぐに質問できたのでありがたかったです！アイスブレイクやランチなどで交流も深めることができ、充実した3日間でした！」（MNさん）

まとめ

このように、GMOメディアでは新たに入社したデザイナーが安心して走り出してもらえるように、全力でサポートを行っています。

（おまけ）研修中は通常業務をお休みします。研修ができるのは、研修に時間を割くことに理解を示してくれるチームメンバーのおかげでもあります。一緒に働く仲間の理解があるからこそ、安心して後輩の育成に力を入れられるんです。感謝ですね！