こんにちは、デザイナーのてっちゃんです。
自転車に乗るのが楽しすぎて毎週多摩川サイクリングコースで羽田まで行っています。

今回は、デザイナーチームに対してコーディングを講座した話をします。

内容はこちらから確認するとして、背景や所感をお伝えしようと思います。

背景

デザイナーチームではスキルをあげるために隔週で課題に取り組んだり、情報共有を行っています。
その中で、苦手分野となっているコーディングについて取り組みたいという事で、コーディングも行っている僕からみんなに話をすることになりました。
デザイナーチームの中でも当然問題意識としてありましたが、業務では中々やる機会がないので、
ちょうどいいタイミングでした。

目的

コーディングと言ってもかなり幅の広い話なので最初に軽いヒアリングをして目的設定を行ないました。
今までコーディングを全くしてこなかったわけでは無かったので、初歩の書き方は置いおくことにしました。
社内では分業が進んでいて、デザイナーの中でコーディングをする人はごく一部です。
分業とはいえまったくフロントエンドやエンジニアと話ができないのはストレスやコストがかさむ原因にもなるので、そこをボーダーレスにできる話にしぼって内容をまとめした。

構成

なので、デザインにも関係があるコーディングの肝となる「文書構造」をメインにしました。
かつ自分で手を動かすのが一番理解がすすむので2回に分けて講義と実践にしました。

1st

1. 文書構造
2. HTML5
3. CSS3（おまけ）
4. 実践

2nd

• コードレビュー

内容 - 1st

文書構造

文書構造といっても普段コーディングを行わない人からすると中々理解しづらいと思うので、ここから噛み砕いて説明を行いました。

文書構造
そこに書かれている文脈や背景、何を重要視しているか正しく理解しそれに適したタグを付けること。

• どこが見出しになる？
• 段落はどこまで？
• どのタグを使えばいいか？

HTML5

次に実際にはどのようにマークアップしていくのかを例をもとに見ていきました。
最初はXHTML形式でレイアウトを４つ用いて解説していき、そのマークアップをHTML5に変えていくことで「文書構造」を
意識してもらいました。HTML5の要素を説明して実践につながる話になっています。

CSS3

css3の話もしましたが、1時間での内容で詰め込んでも仕方ないので実践で役立つものを網羅だけしてググってもらうようにしました。
時間がなかったのと、今回は「文書構造」がメインです。

実践

今回出した課題はかなりハイレベルのものでした。なんたって某セミナーのコーディングコンテンストで使われたデザインをそのまま使いました。ハイレベルすぎるものでしたが、その分各自のスキルがよくわかるものでした。

内容 - 2st

コードレビュー

コードを全員分みましたがHTML5にしていない人もいました。
しかし、idやclass名から「文書構造」を意識していることがよみとれました。
あとは、全体的に知っておいてほしいことを共有しました。

• インデントを付けること
• コメントアウトを付けること
  
• headerにnavも含めましょう
• sectionとarticleのちがいを再度確認
• Hxタグの確認
• figureとfigcaptionの使い方
• aside
• footer
• 複数の画像、複数の段落を一つの段落にしない
• リストタグの多用。sectionとHxタグで構造を示せるところはちゃんと使う
• （おまけ）idを使わない理由

タグの使い方や意図として正しいのかを聞きながら解説していきました。
このへんはトライ&エラーを繰り返すことで精度の高いコーディングが出来るようになると思います。

これに合わせてcssの話もしました。
今回の課題はマークアップの正しさを見るものでしたので、cssの話はありませんでしたが、下記の1点だけは説明をしました。

• floatは必ず解除が必要

ほぼ全員に共通して悩んでいるようでした。
細かい内容にてういはスライドを見ていただくとして、ちょっと覚えて貰えれば問題ない部分でも意外と躓きやすい、という事を知れたのは良かったです

まとめ

今回はかなり頑張っていただいたおかげ全員の実力がわかりました。。
私自身、通ってきた道のはずですが、相当印象に残って無ければ躓いた部分を簡単に忘れていました。
今後も、コーディングについて教える立場になるのに役に立つ気づきでした。

本業でも文書構造を意識したデザインが出来るようになったり、コーディングに対しての理解が深まってくれれば嬉しいなと思います。