Webデザイン学科 授業資料

2022前期

2022後期

About

業界研究
特別講義「小林さん（GrowGroup）」

小林 明日香さん

  • 日時：2022 年 12 月 22 日（木）3 時限目
  • Web エンジニア
  • Web エンジニアの仕事紹介
  • 小林自身がどのようにスキル、キャリアをつんでいるか（エンジニアになるために…に当たるかと思います）
  • 学生の方へのアドバイス
  • 対面授業
  • 教室は、F36 大教室を利用します。
  • レポート提出：2023 年１月 12 日（木）3 時限目「業界研究」の授業
  • https://grow-group.jp/

質問掲示板 Slido

授業後、質疑応答の時間がありますが、途中でも質問があれば、記入可能です。

質問への回答

授業内で答えきれなかった質問や回答への補足を送っていただきました。

Q.「デザインとエンジニア両方やりたいと思っている人はどちらとして就職するべきだと思いますか？」
  • デザインから実装までを担える（工程のあいだを取り持てる）人はとても貴重なので素敵な考えですね！
    個人的には職種名にはこだわらずに、いろいろな会社を見たり話を聞いたりするのが良さそうな気がします。

強いて言うなら

  1. より得意な方で就職はしつつ、就職後に両方やれる！やりたい！というアピールや修行をする
  2. 「Web デザイナー」「UI デザイナー」が実装まで行う会社もあるので、そういう会社を選ぶ
  3. 「デザインエンジニア」のような存在がいる会社を選ぶ あたりになるでしょうか。
Q.「最近イラストなど色々なものが AI 化されていて、コーディングもその一つだと思います。
そこでコーダーの需要が減っていると思うのですが、コーディングをする人間は将来でも生きていけると思いますか。
やはり、アクセシビリティを基本としたところで生きていくんでしょうか。」
  • Wix や Canva のようなものがあっても、まだまだデザイナーの需要が消えないようにコーディングをする人の需要もまだまだ減ってはいません。
    しかし確かに、これからコーダーとして長生きしようと思うと単に「デザイン通りの見た目の Web ページを作れるだけ」では足りないかなとも思っています。
    「アクセシビリティ考慮できる」とか
    「HTML ちゃんと書ける」とか
    あるいは「メンテナンスしやすいコードを書ける」とか
    「PC デザインだけあれば、素敵なレスポンシブ対応ができる」とか
    細かな指示がなくても考えて調べて「いい感じ」にできる力が必要かな、と考えています。
Q.「勉強する教材は本のほうが良いのでしょうか？」
  • 小林の場合はもともと本が全般的に好きなこともあり自分のペースで勉強しやすい本を主に使っています。
    しかし、動画講座（YouTube や Udemy など）や学習サイト（Paiza や Progate など）などにも良いものがあると思います。
    いろいろ試してみて自分にあったやりやすい勉強方法を見つけるのが一番よいです！
    どんな教材を使うにしても、「自分で書いてみる」のが上達のコツかなと思います。
Q.「個人的に一番効率がいいと思うｈｔｍｌの書き方とかはありますか」

コーディング全般だと

  1. デザインを見て、全体の共通パーツ・コンテンツ幅・余白のルールなどの洗い出し
  2. 各ページの HTML 構造がどんなふうになるかを考える
  3. HTML を書く
  4. 画像を配置したり CSS を書いたりする

という順番で書くのが、今のところ一番早いです。
HTML そのものだと、キーボードのタイピング数を減らすのが速さのポイントなので

  • Emmet を使って書く
  • Pug などのテンプレートエンジンを使う

のどちらかを使って、タイピング数を少なくしています。

Q.「独学でプログラミングをするのと会社で実践で学んでいくのとでは学習効率に差がかなりあると思うのですが、なぜその差が生まれると思いますか」

以下が考えられます

  • 強制的に毎日一日中まじめに取り組まないといけないから
  • 達成すべき目的（仕様や納期）があり、絶対なんとかしなきゃいけないから
  • 自分より詳しい存在が身近にいて教えてもらえるから

ただ「教えてもらえる」は、教えてもらうだけだと自分の身につかない、ということもあるので、注意が必要です……。

Q.「React、Atomic Design は Web エンジニアの中でも広がると思いますか」

どちらも個人的には使っていないため、確かなことは言えないのですが…。

企業のコーポレートサイト制作でも React を使う会社はあるようです。
ただ React で作られたサイトで、お客様が運用保守にお悩み（ビルド前のコードは納品してもらえないなど、修正に結構コストがかかる）という話も聞いたことがあり、受託制作だと最適とは言えないのかも。

Atomic Design は企業の Web サイトや広告用のランディングページのような制作では扱いづらい印象があります。
特にデザイナーとエンジニアで完全分業だと導入が難しそう。
しかし、デザインに関心のある Web エンジニアや、実装がわかるデザイナーにとってはとても良さそうだなと思っています。

Q.「勉強に使用した本をまとめて教えていただければありがたいです。」
■Web全般知識
▼Webにまつわる技術的なこと知りたい人向け
「この一冊で全部わかるWeb技術の基本」
https://amzn.asia/d/81llhVB
▼Webにまつわる技術的なこと知りたい人向け２
「ディジタル作法　カーニハン先生の「情報」教室」
https://amzn.asia/d/cONZ99t
▼Web制作の流れを知りたい人向け
「この一冊で全部わかるWeb制作と運用の基本」
https://amzn.asia/d/7NWOFSf
■JavaScript系
▼JavaScriptこれからがんばる人向け
「スラスラ読める JavaScript ふりがなプログラミング」
https://amzn.asia/d/bafmVU4
▼JavaScriptちょっとわかる人向け（mapとかのメソッドを覚えたい人向け）
「JavaScriptエンジニアのためのES6完全ガイド（動画講座）」
https://www.udemy.com/share/101WLm3@-f7XeZlzTWvZ8io_wC6zxkISlE7bMUDgRKp_MK8MMZaoaljathmBl45XrkWsjOcrwQ==/
▼JavaScriptちょっとわかる人向け（いろいろな処理書いてみたい人向け）
「JavaScript コードレシピ集」
https://amzn.asia/d/3Yw90TN
▼JavaScriptちょっとわかる人向け（Reactとかやってみたい人向け）
「モダンJavaScriptの基本から始める React実践の教科書」
https://amzn.asia/d/gu8CkK4
■HTML/CSS系
▼HTML／CSS初めての人向け
「わかばちゃんと学ぶ Webサイト制作の基本」
https://amzn.asia/d/fi35Mo1
▼HTML／CSS初心者向け
「本当によくわかるHTML&CSSの教科書」
https://amzn.asia/d/2iXLTj8
▼CSS練習したい人向け
「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」
https://amzn.asia/d/gRLPZ9z
▼アクセシビリティに興味ある人向け
「コーディングWebアクセシビリティ」
https://amzn.asia/d/cFqK55x
▼HTMLおおよそ分かる人向け
「HTML解体新書-仕様から紐解く本格入門」
https://amzn.asia/d/j53OLjM
■Git
「わかばちゃんと学ぶ Git使い方入門」
https://amzn.asia/d/cFA4U1D>
Q.「いま、HTML+CSS で気になっている技術や使い方などは何ですか。」

業務上は「display:grid」です！
IE11 対応だと気を使うのであまり使ってきませんでしたが、今年になってからめちゃくちゃ練習しています。

プライベートでは「:has()」です！
対応ブラウザ的に仕事では使えないのですが、はやく使いたい CSS ですね。

Q.「初心者が陥りやすいミスとかがあれば、知りたいです。」
  • CSS だと
    • position:absolute が難しい（position:relative を忘れている、レスポンシブ対応が難しいなど）
    • なぜか padding が効かない（display:inline の要素に padding をアテている）
  • HTML だと
    • small タグを文字が小さいところ全部に使いがち
    • 見出しタグの中に div タグが入っている（入れられないタグを知らない）
  • また原因は様々ですが
    • 画像のアスペクト比がおかしくなっているのに見た目で気づけない

などでしょうか…。

Q.「他の会社でも入社後、社内転職する方は多くいるのでしょうか？」

前職でも GrowGroup でも社内転職する方がたまにいますね。
知り合いにも同じ会社のまま職種変更した方がいるので
多いというほどではないですが、めずらしくは無いように思います。

企業紹介

Grow Group は、名古屋・東京オフィスを拠点とするクリエイティブ・カンパニーです。
Web マーケティングを用いてお客様の課題を明確にし、最も的確な解決策としての Web サイト構築・Web システム開発や、効果的なプロモーションツールの制作を展開していきます。

© 2023, Hideo Kawaguchi in Trident Web Design Department with Gatsby