今回は不定期に開催されるエンジニアの社内勉強会の内容になります。エンジニアの社内勉強会でやっていることを少しでも伝わればいいなと思っています。

テーマは「エンジニア向けデザイン勉強会〜目指せオシャエンジニア〜」

このテーマの勉強会をする背景として、Webサイトを制作する上でレスポンシブ時の余白調整や、デザインフォーマットにない部分の余白、CSSの調整などエンジニアの裁量による部分も大きいが、デザインに関する教育や知見伝達がまったくないといったことが挙げられます。なのでデザインに関する知識を習得し、普段のHTMLコーディング〜WordPress実装時に活かしデザインチェックなどのコミュニケーションロスを減らしたいのが目的になります。

事前課題

事前課題があり、事前課題の解答を勉強会中に解説していくという流れで進みました。 事前課題の内容はざっくりですが以下になります。

1. サンプル案件のサイト構成に関する問題（サイトマップ上で重要なページを優先度の高いものから３つ揚げる）
2. サンプル案件のページ構成に関する問題（トップページでどの部分が重要となるか）
3. 余白について
4. 形状について
5. フォントについて

解答

事前課題の解説として重要だと感じた箇所を説明していきます。

サンプル案件のサイト構成に関する問題（サイトマップ上で重要なページを優先度の高いものから３つ揚げる）

重要なページとしてまずTOPが挙げられます。（指名検索でのランディングが多いページのため） 残りの２つはサイトによりますが、検索した時にヒットするページ（サンプル案件では物件検索のページ）になります。 「集客導線」に基づいて、ユーザーがまずどのページを見るのか考え、そこからランディングしたページからCVまでの導線を考えていくことになる。コーディング時に導線をあまり意識しながらコーディングしていく人は少ないかもしれないが、重要なページがわかっているとそのページはデザイナーには細かい指定はされていないけどより丁寧にコーディングするといったことができ、よりCVを増加させることができるかもしれません。

サンプル案件のページ構成に関する問題（トップページでどの部分が重要となるか）

トップページではファーストビューがとっても重要になってきます。理由はユーザーがスクロールせずにファーストビューだけ見て離脱することがあるからです。なのでファーストビューに何を書くかが重要な課題になります。

余白について

ひとまとまりの要素群があるときに、要素群の内側の余白は狭く、外側の余白を広くすることで コンテンツをまとまりとして捉えやすくなるなります。 サイト全体として、余白を大きめにとるサイトなのか小さめにとるサイトなのか、という部分も重要になります。

形状について

画像などでよく使われる長方形の比率は、黄金比が使われることが多いです。

フォントについて

高級感やモダンな雰囲気を印象づけるときに字間をあける・行間をあけるなどして空間を印象づけることがある。

まとめ

GrowGroupのエンジニアの社内勉強会はいかがだったでしょうか？私もオシャエンジニアになれるようにデザインの知識なども身につけていきたいと思います。 また、エンジニアの社内勉強会は勉強会として伝えたいことがある場合、誰でも開催することができます。