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

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

2025年 3月7日に開催した「Keyboard Maestroの基本的な使い方に関する社内勉強会」から都合が合わず少し間が空きましたが、5月16日の業務後の夜に、社内勉強会を開催しました。

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

勉強会の内容

今回の社内勉強会の内容は「レスポンシブデザインのコーディング」です。
コーディングだからコーダーだけが知っていればいいというわけではなく、どのように実装するのか、どんな考え方をするのか知っていないとデザイン時に考慮ができません。

非常に基礎的なところからですが、レスポンシブの考え方やコーディング方法を共有する勉強会にしました。

課題の作成

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

そこで、2月21日に開催した「HTML・CSSのレイアウト基礎に関する社内勉強会」と同様にサンプルコードを用意しました。

実際の内容

ここからは、実際のスライドの一部を紹介します。

まずはレスポンシブデザインについての基本的な説明からです。

「Age Responsive Design」という考え方が提唱されており、デバイス幅以外の情報をもとに表示の出し分けが必要になっています。

最近はダークモードに対応しているサイトやサービスも増えてきました。
ダークモード用の色に変えても破綻しない柔軟性が必要になります。

他にも、ブラウザのデフォルトフォントサイズに応じて文字のサイズが切り替わるかどうかという観点もあります。

さらには、アニメーションのオン・オフ設定をOSレベルでできるようになっています。
大きくアニメーションすると目が疲れるユーザーもいますし、この設定を検知して適切にアニメーションをオフにするような設定をCSSですることも可能です。

このようにいままで以上に柔軟性が求められているという話をした上で、実現方法について話していきます。

まずは基礎知識となるメディアクエリについてです。

メディアクエリの書き方について説明します。

どんな指定ができるのかを説明していきます。
先ほど紹介したダークモードや、アニメーションの抑制設定もメディアクエリでCSSだけでできるようになっています。

ひと通り説明が終わったら、実践してもらいます。
下記は課題のうちの1つで、左のPC画像の状態を、右の画像のようにSP時に縦並びになるように変更してもらいます。

このようにある程度キリのいいタイミングで実際にコードに触れてもらって、簡単にですが動きやコードの有る無しによる違いを体感をしてもらいます。

それが終わったら、次は単位についてです。
最近はさらに使える単位が増えています。

さらにはCSS変数の話もしています。
基本的な使い方の他に、最近は詳細な設定方法もできるようになっていて、現状業務では使ったことは無いですが、今後こういった記述もできるようになるといった具合に今後のことも見据えて軽く紹介しています。

フォローアップ

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

今回は予定が合わずに参加できなかったメンバーも多かったのですが、動画にしておくことで後から見返すことができます。

繰り返し見返したり、サッと内容だけ追いたい人も追えるので動画を撮ってまとめていくのは良い方法だなと改めて感じました。

---

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

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