まずは、ご参加いただいたみなさまありがとうございました！Coder’s Highということでコーディング関連がメインの会でしたが私のほうではウェブタイポグラフィーとグリッドシステムというテーマで20分お話させていただきました。
4名で出演ということもあるかもしれませんが、今年開催されたCSS Niteですが、過去最高の428名の方にお申し込みいただいたそうです。みなさん本当にありがとうございました。
Coder's High - 2021 fallが終了しました。
— CSS Nite (@cssnite) November 6, 2021
Manaさん @webcreatorbox、綿貫佳祐さん @xrxoxcxox、阿部文人さん @abefumito、サトウハルミさん @uzuによる充実の4セッション、2021年最高の428人の方にお申し込みいただきました。https://t.co/mysYr935ZG#cssnite pic.twitter.com/Nmjf90gvyO
イベント概要
2021-11-05（金）20:00 – 22:00
CSS Niteの出自であるコーディング特集。4つのセッションで構成します。
・Dart Sassの概要と導入事例／サトウハルミ（FLAT）
・そのCSS、新しい書き方がありますよ／綿貫 佳祐（Increments）
・ウェブタイポグラフィとグリッドシステム／阿部 文人（necco）
・ダークモードに対応したWebページ制作／Mana（Webクリエイターボックス）
コーディングを専門の会社を経営しているFLATのサトウさん、いつもTwitterで僕も勉強させてもらってるQiitaを運営するIncrementsの綿貫さん、そして、私もWordPressをさわりはじめた15年くらい前？から良く読ませてもらってた『Webクリエーターボックス』という有名なブログを運営しているManaさんの4名で出演しました。
*まさか自分がManaさんと一緒の会に出演するなんてだいぶ緊張しました。
ウェブタイポグラフィとグリッドシステムのダイジェスト
当日は前半でウェブタイポグラフィー、後半でグリッドシステムのお話を順にさせてもらいました。
スライドもグリッドシステムで作り、その作り方の数値なども公開しました。
大好きな調和数列のフォントスケールを紹介しました。
グリッドシステムを学んだり作成をはじめたときに『海の上のピアニスト』の名言を良く思い出すようになりました。制限があることで制限の中で生み出すものは無限。あとはイベント内では紹介しなかったのですが、『HUNTER x HUNTER』のクラピカの制約と誓約の話とかを考えてます。できる限り制約と誓約をもたせてデザインにエネルギーのうねりみたいなのを生み出したいです。
実際に作成しないとわからないことも多いと思いますので、Figmaを利用した具体的なグリッドシステムの数値設定なども紹介しました。
当日のご質問とその回答
グリッドシステムは横のガターをどうするかが悩んでます…。文字量や画像比率、ウインドウサイズに左右されるのでカンプ通りのバランスにならないことが多いですね。
— WebLive ウェブライブ (@WebLive_jp) November 5, 2021
黄金比や白銀比など色々実験しつつ良いものを見つけられたらと思います。#cssnite
Twitter上でご質問いただいた内容に解答しましたので同じ用に悩まれている方のご参考になればと思いますのでご紹介いたします。ウェブライブさんご質問ありがとうございました。
ご視聴ありがとうございました！！ガターの設定難しいですよね。
— Fumito Abe｜necco inc. (@abefumito) November 5, 2021
黄金比、白銀比も利用するのですが表示するデバイスのディスプレイは8の倍数のものが多いかつ、本文フォントサイズを16pxなどの4、8の倍数にすることが多いので、ガターは20、24、32、40などの8の倍数で探ることが多いです！
ご質問ありがとうございます！
ご紹介した白銀比グリッドなどは黄色Rowsの上下のガターは16で14と4Columnsのガターは24でずらしてます。同じでも良いのですがデザインすると流し込む写真やテキストが隣り合ったり、上下で隣接する時などの情報のグルーピング不自然になることが多かったです。 pic.twitter.com/41fYholYIc— Fumito Abe｜necco inc. (@abefumito) November 5, 2021
参考書籍とリンク
- タイポグラフィ─タイポグラフィ的造形の手引き
- ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計
- グリッドシステム グラフィックデザインのために
- Balance in Design 美しくみせるデザインの原則
- 音楽、数学、タイポグラフィ
- グリッドレイアウトの基本概念 – CSS: カスケーディングスタイルシート | MDN
- CSS Gridを使ったレスポンシブ対応の基本レイアウト
- プログラムによるレイアウト制御のための CSS Grid を考える
- ウェブデザインにおけるline-heightについて
アーカイブ配信
有料ですがアーカイブ動画があります！noteからご購入いただくとNotionにアーカイブ動画とスライドのURLなどの記載があり、そちらからみていただく形になります！
見逃してしまったかたぜひこの機会にご利用ください。
https://note.com/cssnite/n/n1fbfee1a0e74
20分でしたがスライド用のグリッドシステムをつくって制作しました。これはFigmaのスライドの全体像です！
最後にエンジニアさんの採用情報を！
Jamstack（Next.js + Headless WordPress + Vercel など）やGSAPなどをつかったインタラクション、タイポグラフィなどに注力したいフロントエンドエンジニアさん募集してます！
リードとアシスタントの2職種でアシスタントは実務未経験の方でもポートフォリオがあればご応募可能ですのでぜひ。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
- フロントエンドエンジニア
- アシスタントフロントエンドエンジニア
- ディレクター
- アシスタントディレクター
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
