necco Coder's High - 2021 fall
阿部 文人
阿部 文人

necco note

CSS Nite 「Coder’s High – 2021 fall 」にウェブタイポグラフィとグリッドシステムをテーマに出演しました。

  • News
CSS Nite Coder's High - 2021 fall メインイメージ画像

まずは、ご参加いただいたみなさまありがとうございました!Coder’s Highということでコーディング関連がメインの会でしたが私のほうではウェブタイポグラフィーとグリッドシステムというテーマで20分お話させていただきました。

4名で出演ということもあるかもしれませんが、今年開催されたCSS Niteですが、過去最高の428名の方にお申し込みいただいたそうです。みなさん本当にありがとうございました。

イベント概要

2021-11-05(金)20:00 – 22:00 

CSS Niteの出自であるコーディング特集。4つのセッションで構成します。

・Dart Sassの概要と導入事例/サトウハルミ(FLAT)

・そのCSS、新しい書き方がありますよ/綿貫 佳祐(Increments)

・ウェブタイポグラフィとグリッドシステム/阿部 文人(necco)

・ダークモードに対応したWebページ制作/Mana(Webクリエイターボックス)

https://cssnite.doorkeeper.jp/events/127257

コーディングを専門の会社を経営しているFLATのサトウさん、いつもTwitterで僕も勉強させてもらってるQiitaを運営するIncrementsの綿貫さん、そして、私もWordPressをさわりはじめた15年くらい前?から良く読ませてもらってた『Webクリエーターボックス』という有名なブログを運営しているManaさんの4名で出演しました。

*まさか自分がManaさんと一緒の会に出演するなんてだいぶ緊張しました。

ウェブタイポグラフィとグリッドシステムのダイジェスト

当日は前半でウェブタイポグラフィー、後半でグリッドシステムのお話を順にさせてもらいました。

ウェブタイポグラフィとグリッドシステムの表紙

スライドもグリッドシステムで作り、その作り方の数値なども公開しました。

ウェブタイポグラフィとグリッドシステムのタイムテーブル
ウェブタイポグラフィとグリッドシステムの重要度と先につくるべきもの
ウェブタイポグラフィとグリッドシステム タイポグラフィの大きな2つの役割
ウェブタイポグラフィとグリッドシステム フォントサイズを大きく設定すると訪問者は文字を読むより先に見る
調和数列のフォントスケール

大好きな調和数列のフォントスケールを紹介しました。

海の上のピアニストの名言 鍵盤は端から始まり端で終わる。鍵盤の数は88と決まってる。無限ではない。弾く人間が無限なのだ。人間の奏でる音楽が無限。

グリッドシステムを学んだり作成をはじめたときに『海の上のピアニスト』の名言を良く思い出すようになりました。制限があることで制限の中で生み出すものは無限。あとはイベント内では紹介しなかったのですが、『HUNTER x HUNTER』のクラピカの制約と誓約の話とかを考えてます。できる限り制約と誓約をもたせてデザインにエネルギーのうねりみたいなのを生み出したいです。

Figmaでのグリッドシステムの作り方

実際に作成しないとわからないことも多いと思いますので、Figmaを利用した具体的なグリッドシステムの数値設定なども紹介しました。

当日のご質問とその回答

Twitter上でご質問いただいた内容に解答しましたので同じ用に悩まれている方のご参考になればと思いますのでご紹介いたします。ウェブライブさんご質問ありがとうございました。

参考書籍とリンク

タイポグラフィとグリッドシステムの参考書籍

アーカイブ配信

有料ですがアーカイブ動画があります!noteからご購入いただくとNotionにアーカイブ動画とスライドのURLなどの記載があり、そちらからみていただく形になります!

見逃してしまったかたぜひこの機会にご利用ください。

https://note.com/cssnite/n/n1fbfee1a0e74

20分でしたがスライド用のグリッドシステムをつくって制作しました。これはFigmaのスライドの全体像です!

最後にエンジニアさんの採用情報を!

Jamstack(Next.js + Headless WordPress + Vercel など)やGSAPなどをつかったインタラクション、タイポグラフィなどに注力したいフロントエンドエンジニアさん募集してます!

リードとアシスタントの2職種でアシスタントは実務未経験の方でもポートフォリオがあればご応募可能ですのでぜひ。

https://necco.co/careers

阿部 文人

阿部 文人

Fumito Abe

東京都生まれ。オフィス仲介、外国人専用ゲストハウスなどの不動産業界にて自社ブランディング・ウェブマーケティングに従事。ウェブサイトの解析、広告運用、多言語サイトの制作を経験。その後、サンフランシスコにて語学留学を兼ね1年渡米。現地企業ECサイトの企画からCMS開発、デザイン制作なども担当。帰国後、2013年9月より秋田県内企業にてWordPressを中心にウェブサイトを多数構築。 2016年10月秋田県秋田市にて株式会社neccoを設立。WordCamp Kyoto 2017・WordCamp Osaka 2018・各地のJP_Stripes・JP_Stripes Connect 2019、CSS Nite LP64の登壇やAlexa Day2018・2019の運営など社外でも積極的に活動中。 好きなものは猫、読書、建築、Apple。2匹の猫と仲良く暮らしています。

SHARE

TwitterFacebook

Other Posts

necco note

CSS Nite「お客さまの事業を強化するためのデザイン 〜WORDSウェブサイト制作の裏側 〜 」に出演しました。フォローアップあり。

necco Corporate Character HakonecoDOWNLOAD

necco Corporate Character HakonecoCONTACT