UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

N’sCreatesは基本リモートワークですが、毎週金曜日に週1回の出社があり、コミュニケーションを取ったり、対面でのミーティングを行っています。

2025年 2月7日に開催した「macOSの効率化に関する社内勉強会」に引き続き、2月21日の業務後の夜に、社内勉強会を開催しました。

今回はそのときの内容を紹介します。

勉強会の内容

今回の社内勉強会の内容は「コーディングの基本レイアウト」です。
社内のデザイナーがコーディングに関わることもあり、そうなってくるとコーディングの基本的なところからちゃんと共有しておいた方がいいなと思い、コーディングの基礎から教える勉強会にしました。

例えば、「色を変える」や「フォントサイズを変える」だと、検索して出てくるコード（CSSプロパティ）を使えば、簡単に変更できます。
また、そういった勉強会だと「こうすると色が変えられますよ」と設定内容を紹介するだけになってしまいます。

しかし、レイアウトになってくると少し複雑になります。
「どこに何を指定するとどうなるのか？」「目的のレイアウトにするために、どう考えればいいのか？」にフォーカスするためにも、レイアウトを中心にしました。

課題とスライドの作成

コーディングは聞いているだけだと理解しきれない部分があります。
やはり実際にコードを書いてみることが大切です。

そこで、実際のサンプルコードを用意しました。
勉強会の時間は限られているので、下記2通りのコードを用意しました。

• 1行加えるレベルの簡単なコード（紹介しつつ実際に目の前で編集して動かす）
• 時間を取って課題としてもらうコード + Figmaのデザインデータ

また、スライドはMarpというものを使って作成しました。
MarpはMarkdown記法という書き方でスライドを作成できるツールで、今回スライド上にコードを多く書くため、簡単に作れるMarpを採用しました。

勉強会が終わったあとも、スライドを見返して振り返られるように、ドキュメントとしても使えることを想定して作成しました。

実際の内容

まず始めに「なぜ今回レイアウトをするのか？」について説明をしました。
先ほど紹介した通り、色やサイズなどは調べてなんとかなる場合がほとんどです。

そして、現在一般的なCSSレイアウトをひと通り網羅する形で説明していきました。
「どこをどう指定すると、どうなるのか？」を基本的なところからおさえていきます。

1セクション終わるごとに、時間を取って実際に課題をしてもらって理解を深めてもらえました。

フォローアップ

前回同様、社内ポータルに勉強会用のページを作り、スライドや撮影した動画を編集してアップするなども行いました。

1回やって完璧に覚えられるものではないので、繰り返し見返せたり、スライドをあとから振り返られるようにしました。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！