necco Note
阿部 文人
necco Note
CSS Nite 「Coder’s High – 2021 fall 」にウェブタイポグラフィとグリッドシステムをテーマに出演しました。
- News
まずは、ご参加いただいたみなさまありがとうございました！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さんと一緒の会に出演するなんてだいぶ緊張しました。
ウェブタイポグラフィとグリッドシステムのダイジェスト
当日は前半でウェブタイポグラフィー、後半でグリッドシステムのお話を順にさせてもらいました。
スライドもグリッドシステムで作り、その作り方の数値なども公開しました。
大好きな調和数列のフォントスケールを紹介しました。
グリッドシステムを学んだり作成をはじめたときに『海の上のピアニスト』の名言を良く思い出すようになりました。制限があることで制限の中で生み出すものは無限。あとはイベント内では紹介しなかったのですが、『HUNTER x HUNTER』のクラピカの制約と誓約の話とかを考えてます。できる限り制約と誓約をもたせてデザインにエネルギーのうねりみたいなのを生み出したいです。
実際に作成しないとわからないことも多いと思いますので、Figmaを利用した具体的なグリッドシステムの数値設定なども紹介しました。
当日のご質問とその回答
Twitter上でご質問いただいた内容に解答しましたので同じ用に悩まれている方のご参考になればと思いますのでご紹介いたします。ウェブライブさんご質問ありがとうございました。
参考書籍とリンク
- タイポグラフィ─タイポグラフィ的造形の手引き
- ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計
- グリッドシステム グラフィックデザインのために
- Balance in Design 美しくみせるデザインの原則
- 音楽、数学、タイポグラフィ
- グリッドレイアウトの基本概念 – CSS: カスケーディングスタイルシート | MDN
- CSS Gridを使ったレスポンシブ対応の基本レイアウト
- プログラムによるレイアウト制御のための CSS Grid を考える
- ウェブデザインにおけるline-heightについて
- Grid Layoutのチートシート紹介とその使い方
アーカイブ配信
有料ですがアーカイブ動画があります！noteからご購入いただくとNotionにアーカイブ動画とスライドのURLなどの記載があり、そちらからみていただく形になります！
見逃してしまったかたぜひこの機会にご利用ください。
https://note.com/cssnite/n/n1fbfee1a0e74
20分でしたがスライド用のグリッドシステムをつくって制作しました。これはFigmaのスライドの全体像です！
最後にエンジニアさんの採用情報を！
Jamstack（Next.js + Headless WordPress + Vercel など）やGSAPなどをつかったインタラクション、タイポグラフィなどに注力したいフロントエンドエンジニアさん募集してます！
リードとアシスタントの2職種でアシスタントは実務未経験の方でもポートフォリオがあればご応募可能ですのでぜひ。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年11月時点）
阿部 文人
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匹の猫と仲良く暮らしています。
