インターン2日目は、1日目にAdobe XDで作成したページデザインを実際にコーディングしてもらいました。デザインのようになかなか感覚的にはできないので、「コーディングとはなんなのか？」ということから、HTML、CSS、Classについてなどを一通り解説した後に取りかかってもらいました。

 

HTMLコードでコンテンツ内容を入力していこう

HTMLのコードに触れるのが初めてだったので、ふたりとも困惑していましたが、自分が入力したコードによって、WEBブラウザにテキストが表示された時は少し嬉しそうに見えました。次にClassについて少し解説し、見た目を整えるため（CSSで調整するため）に各ブロックに名前をつける必要性があることと、どこにどんな名前をつけたのか判別しやすいように規則性に沿って命名した方が良いということも伝えました。作成したWEBデザインはいくつかのセクションに分かれていたので、ひとつ目のコンテンツは説明しながら入力してもらい、2つ目以降は説明を元に考えながら自分たちで入力してもらいました。もちろんわからない時はちゃんと丁寧に解説しましたよ（笑）。

 

全部で4つのコンテンツがありましたが最後の方は彼らも少し慣れてきたように感じました。ちなみにコーディングにはSublime Text3を使用してもらいましたが、Emmetプラグインのおかげで入力の手間を削減することができました。いつも助かってます。

 

CSSで見た目を整えよう

HTMLだけでは文字や画像を表示することはできても、見た目を整えることはできません。命名したClass名を元にテキストの色を変える「color」やメリハリをつけるために文字サイズを調整する「font-size」、背景をつける「background」など、最初は簡単な部分から整えて行きました。色のないWEBサイトが色づいていき、自分たちがデザインしたものに近づいていく過程を高校生ふたりも楽しんでいるように見えました。WEBサイトなので、もちろんヘッダーとフッターも組んでもらいましたが、ここで使用したのが「float」を使用したやり方と「display: inline-block」を使った2つ方法で組んでもらいました。

 

やはり本人たちにとって横並びにする作業が1番難しそうでした。

 

初めて作ったWEBサイト、完成して思ったことは？

ふたりで作ったデザインを実際にブラウザで開くように一通り作ってみての感想を聞くと、やはり「大変だった」という言葉が返ってきました。また、ふたりのうちの一人は2年生の選択系授業で、情報系の学科を取るつもりだということで、自分にコーディングができるか不安がっていました。

 

ただ、みている僕らとしては、事前にWEBデザインというものを理解することができたことは彼にとって良い体験になったのではないかな、と感じています。

 

まとめ

「WEBデザイナーに興味があります」といって思い浮かべるのは、やはり見た目の部分、どういうデザインをしたか？という部分に目が行きがちですが、2日目の実習を通して、どういった作業を通して、デザインしたものがWEBサイトになるのか、またデザインを再現する難しさを学べたのではないかと感じました。

 

また「リンクってなに？」という部分からのスタートでしたが、普段自分たちが何気に見ているWEBサイトの奥深さも少しは理解してもらえたのではないかとも思います。エンジニア側としては、表立っては分からない構築の大変さを知ってもらえて少し嬉しい気持ちもありました。