WEB制作部ではどんな方でもWeb制作にスムーズになじんでもらえるよう、デザイナー・ディレクター・エンジニアの職種によらず 新しいメンバーには初めに共通のマークアップ育成プログラムを使い学習してもらっています。
この記事ではその内容や考え方をご紹介します！

---

なぜプログラムが必要なのか

以前、新しいメンバーの指導はその都度課題を設定し、作業を通じて必要になったことを教えるといった方法をとっていました。しかしタスクランナーやGitを使うなど作業環境も複雑になり、デザイナーやディレクターにも一定水準のマークアップスキルが必要になってくると、これまでの教育方法では無理があると感じるようになりました。

そこで、効率的に現在のWeb制作に必要な基本技術が学べるように、共通で使用するマークアップ育成プログラムを作成しました！

---

プログラムの概要

プログラムは講義・自学形式のレクチャーと実践編のワークの繰り返しで構成しています。経験値や職種に応じてメンバーごとに取り組む範囲を初めに設定し、Backlogという進捗管理ツールで管理していきます。

また、文法的な学習を行うプログラムではなく、進捗報告や検証など実際のプロジェクトチームの中で活躍するための技術を身につけるプログラムとして整備しています。もちろん文法の学習の手段は紹介しますが、共通でHTML・CSSの書き方を指導することはせず、質問対応に留めています。

その他、プログラムを進めるのに必要なGitの操作は別のプログラムを通じて学習してもらいます。

---

プログラムの構成

1.Webの基本的な仕組み

レクチャー

• クライアントとWebサーバのやりとりについて
• URL、IPアドレス、ドメイン、DNSサーバなどについて
• HTML・CSS・JavaScriptの役割について
• 以降のプログラムの進め方について

ワーク

• MAMPをインストールしよう
• Gitの設定をしよう
• 簡単なHTML,CSSを書き、localhostで確認しよう

まずはテキストエディタを開く前に、初めにWebの基本知識を学んだ上で作業環境の準備をしてもらいます。HTMLを1行も書いたことがない方を前提としているのも理由ですが、Web制作が複雑になる中で最新情報のキャッチアップと同じくらい基礎をしっかりと理解していることが重要だと考えるからです。

2.Web制作の変化

レクチャー

• 【工程の変化について】企画段階で実装方法を意識する必要が高まり、HTMLでモックアップを作成するなどのフローも増えている
• 【領域の変化について】ディレクターに必要な開発の知識も増え、エンジニアにもデザイン的な知識が必要になっている
• 【アプリケーションの変化について】Gulpなどのタスクランナーも当たり前になったし、コマンドラインの操作をすることも増えている
• 【ファイル管理の変化について】どの職種でもGitを使うのが当たり前になってきた
• その他、タスクランナーやSass、Gitの機能について

ワーク

• タスクランナーの設定をしよう
• Sassの動作確認をしよう

引き続き、これまでのWeb制作の変遷を説明します。日々学習・情報収集を行うにしても、これまでを知らないのに「さあトレンドを追っかけていきましょう」と言われてもなかなか難しいものだと思います。チームとして成長していくためにも、現在のWeb制作に対する考え方を共有する場を設けています。

このように楽しいコーディングをやる前に、時間をかけて準備をしっかり整えてもらいます。

3.PC向けのページを制作する

プロジェクトによってワークフローは千差万別ですが、まずはデザインデータからPC向けのページを制作するという従来型のワークフローを1度実践してもらいます。

レクチャー

• 作業準備、ディレクターに確認しておく情報について
• デザインデータの扱い方、画像の種類や書き出し方について
• フォルダ構成について
• 効率化のためのアプリケーションの機能について
• ブラウザ検証の必要性について
• Gitのコミット、プッシュの目安について

ワーク

• 下のデザインデータを元にコーディングする
• ソースレベルで監修を受け、修正する
  
  ここからようやく本格的にコーディングを進めていきます。デザインデータはHTML,CSSの基本のボックスモデルやリストを意識させるように設計してあります。
  また、見た目だけでなくソースレベルでチェックを入れ、正しく理解しているかを確認した上で次へ進みます。

4.制作したページをマルチデバイスに最適化させる

レクチャー

• マルチデバイス対応の様々な方法について
• 内部SEOについて

ワーク

• 下のデザインデータを元に、ウィンドウ幅が480px以下の際レイアウトが最適化されるようページを改修する
  
  現在のWeb制作では必須になっているマルチデバイス対応について解説し、一度作成したページをスマートフォンに最適化してもらいます。
  合わせて、内部SEOの観点でコードの質を高めるよう指導していきます。

5.修正作業からオブジェクト指向CSSを考える

レクチャー

• 従来のCSSと比較しながら、オブジェクト指向CSSを考える

ワーク

• 次の模擬修正指示を元に、4のページを修正する
  
  プログラムの最後に、修正指示への対応を模した作業を行ってもらいます。具体的な作業の流れを体験してもらうという意図もありますが、ソースの品質によってメンテナンス性が高まるのを実感してもらうのも目的です。

先々サイト全体を見渡してエレメントパターンやスタイルガイドを作成できるよう、オブジェクト指向CSSなどHTML,CSSへの先進的な考え方に触れ、プログラムを締めくくります！

---

実際に実施してみて感じたこと

教育の効率が大幅に上がった

狙い通りに教育の効率を上げることができました。「そうか、先にあれを教えた方がよかったな…」とか「あれ、まだインストールしてなかったっけ？」といったロスが防げていますし、課題の共通化により指導する側のソースのチェックなどのスピードも向上しています。

ソースコードの変化が追える

Gitのコミット履歴にどんな意図で何を書いたかが残っているので、仕上がりだけを見る場合に比べて理解が不十分な箇所が見つけやすくなりました。

未経験のメンバーも期待以上に早く習得できた

もちろん個人の努力やモチベーションの高さによるところも大きいですが、タスクランナーの設定やGitの操作など、「色々と最初に詰め込みすぎると肝心のHTML,CSSの習得が進まないかも？」と思いつつ教えたことも期待以上に早く身につけてくれました。

むしろ、自分こそ日々の業務の合間に新しい技術を学ぶというペースに慣れてしまいスピード感が鈍くなっていたのかな、と反省するところです。