CeeBeeDeeCSS Nite / DTP Transit
#朝までマークアップ

PAST EVENT

#朝までマークアップ

2023年11月2日開催

HTMLやCSSなどのマークアップをテーマに、25名の登壇者が持ち時間10分で実践を紹介。合計8時間のボリュームで開催した「#朝まで」シリーズのイベントです。

セッション内容

HTML軽視されすぎ問題

木達 一仁

「#朝までマークアップ」……すごい名前のイベントですよね。皆さん、どれだけHTMLが好きなんですか笑。もちろん、私はHTMLが大好きです。けれど、皆さん!!HTMLって業界的に、ちょっと軽視されている気がしませんか。マークアップという行為の生み出す価値が、今ひとつ認められていない気がしませんか。私は、します。しかし誤解を恐れずにいえば、Webの本質はHTMLにこそあると、私は思います。「#朝までマークアップ」の幕開けとして改めてHTMLの重要性、またHTMLを学ぶ意義を皆さんと共有させていただければと思います。

グラフィックソフトから書き出すだけじゃない SVGを用いたグラフィック表現

綿貫 佳祐

SVG、日頃から使っていますよね?拡大しても荒れないので、アイコンやシンプルなイラストに使うと便利なのは、みなさんご存知かと思います。しかし、SVGの使い所はそれだけではありません。きっとみなさんが思っているよりも幅広く、奥深い機能が備わっています。直接SVGファイルを開き、コードを編集するタイプのグラフィック作成について紹介します。

サイト制作にAstroがおすすめな理由

たにぐちまこと

現代のフロントエンド開発は、HTMLとCSSをそのまま書くよりもSassやテンプレートエンジンを導入したり、CSS設計をしたりなど非常に考えることが多いのが現状です。そんな悩みをAstro(アストロ)が解決します。このセッションではAstroの特徴や利点、Webの制作や学習の最初に導入するのがおすすめする理由を紹介します。

displayプロパティの2値構文から学ぶレイアウトモデル

久保 知己

近年は、派手で素晴らしい機能をもったCSSが実装されています。一方で「これはどうなの?」というCSSも実装されており、その1つに、displayプロパティの「2値構文」があります。displayプロパティに2つのキーワードを設定できるという構文です。例えば「dispaly: block」を表現したければ「dispaly: block flow」と表現できます。2値構文そのものは大したことではないですが、CSSのレイアウトの情報を整理するには良い題材です。CSSのレイアウトの仕組みを学んでから、2値構文を見直した時、新しい感覚でCSSのレイアウト構造を考える手助けになることでしょう。

デザイン原則から考えるマークアップエンジニアリング

保坂 修平

デザイン知識を持っているエンジニアがいるとどういう世界になるか。例えばデザインカンプで表現されていない部分があっても、デザイン意図を汲んでこういうふうに実装しておきました、という提案ができる。また多岐にわたるデバイスの画面上での違和感にいち早く気づき、バランスの取れたスタイリングに落とし込むこともできる。本セッションでは、デザイナーとエンジニアが分業されたチームでの制作を前提として、デザインの「4つの基本原則」に触れながら、デザインルールやデザイナーの意図を汲みとるとどういう実装や行動につながるかについて、例をあげて解説する。

2023年のCSS革命。Subgridが全ブラウザにやってきた

鹿野 壮

2023年も、さまざまなCSSが全ブラウザ対応となりました。その中でも、Subgridは今後のフロントエンド開発を大きく変えてくれる便利な機能です。本セッションでは、Subgridの基本から具体的な使い方までを、デモを交えて解説します。

実践!ライブコーディングでアクセシビリティ改善

飛田 心

Webサイトのアクセシビリティ改善、皆さんは普段どのように行っていますか?今回は、VoiceOverなどを使用して読み上げ検証しながらデモサイトをライブコーディングするデモを通して、Webサイトのアクセシビリティ改善のポイントやコツを紹介します。

現場で役立つ! フォームのマークアップを改善する方法

森川 結子

アクセシビリティが損なわれがちなフォームを例に、どのようにマークアップを改善するとよいのかを紹介します。実際の現場ではデザインや仕様の制約から思うようにマークアップできない場合もあると思います。そのような制約とバランスをとりながら、より多くのユーザーに使ってもらえるフォームの実装方法を学びます。セマンティックなHTML要素の活用からWAI-ARIAでの補足まで、アクセシブルなフォームの世界を一緒に探求しましょう!

レスポンシブウェブデザインだけじゃない、メディアクエリの活用方法

半田 惇志

メディアクエリはレスポンシブウェブデザインの構築においてデファクトスタンダードとして利用されていますが、実はメディアクエリで出来ることはビューポートのサイズ応じた分岐だけではありません。Media Queries Level 4では今までの課題を解決できるメディア特性も追加され、より厳密にユーザーのデバイス・ブラウザの状況に合わせた分岐ができるようになりました。「スマートフォンでボタンをタップした際、ホバーの見た目にしないで欲しい」とクライアントからフィードバックされたことはありませんか?それ、Media Queries Level 4を使うと簡単にできます。「そもそも@mediaとは何なのか?」というおさらいから、最新のメディア特性の活用方法まで解説します。

マークアップの多様性とデザイン〜たのしい文書構造〜

倉又美樹(まるみ)

マークアップって悩みませんか?HTMLにはコンテンツモデルなど、守るべきルールはありますが、デザインやコンテンツに対してどの要素が適切かを判断するのは、国語的な難しさがあります。このセッションではよく見るデザインパターンでも、さまざまなマークアップの考え方があることを伝え、マークアップの多様性や面白さを紹介します。最適解を模索するためのヒントになれば嬉しいです。

CSSで縁取り文字、いろいろ

小山田 晃浩

縁取り文字、困っていませんか?・-webkit-text-stroke だと、字に食い込む・text-shadow で無理やりやるとなんか汚い・画像にすると差し替えが大変だし...。そんなあなたに、CSSでできる文字縁取りテクニックをいろいろと紹介します。簡単に縁取り適用できるCSSコードもプレゼント!

GitHub CopilotとGitHub Copilot Chatを使ったHTML/CSSの自動生成とリファクタリング方法

長谷川 広武(ハム)

AI技術が進化し、Webのコーディング環境は大きな変革の大波が迫ってきています。デジタル時代のこの変動の中で、どのようにAI技術を最大限に活用し、効率的にコーディングを進めるかが鍵となります。様々なAIコーディングアシスタントツールが登場していますが、このセッションでは特にGitHub Copilotとそのチャット機能に焦点を当て、HTMLとCSSの自動生成やリファクタリングの具体的な方法を紹介します。

非エンジニア・初学者向けマークアップトレーニング

せきゆおう

私が会社員時代に実施していた、非エンジニアおよびコーディング初心者向けのマークアップトレーニング方法について紹介します。このトレーニングでは、非エンジニアの方々が構造に矛盾がないかを理解するスキルを身につけ、コーダーと共通の言語でコミュニケーションができるようになります。また、コーディング初心者の方には、HTMLを書き始める前の段階で、第三者に事前確認ができるため、作業時間を短縮し、自信を持って取り組むことが可能です。

マークアップエンジニアからのキャリアパス

倉科 宏行

マークアップエンジニアに求められる領域は非常に多いと思いませんか?CSS、JavaScript、HTML Living Standard、UI、UX、アクセシビリティなどなど…。でもそれはマークアップエンジニアだからこそ習得しやすい領域ですし、成長できるチャンス。エンジニアからプロジェクトマネージャーに転身した経験をもとに、マークアップエンジニアからのキャリアパスや学び方について、小ネタを挟みつつお話しします。

“画像”マークアップのこと、改めて調べてみた

森 裕司(YUJI)

『コーディングで“画像”をずっと扱ってきたし、わたしは理解してるはず!』と思っているものの、作業中に「要素はimg一択だっけ?」「解像度って何?」「保存形式はどれにする?」など、ふとした疑問が生まれてることってありませんか?忙しさに負けて、もやもやしたまま『ま、いいか・・・』とすませてしまうこともありますよね。このセッションでは、“画像”マークアップにまつわることを改めて調べ、発表します。わかっているつもりでも、新たな発見があるかもしれません。

脱初心者! 開発者ツール(DevTools)を使いこなそう!

相原 典佳

マークアップエンジニアならば、日常的にさわるツールの一つが開発者ツール(DevTools)です。でも、初心者だと、どのように使っていいのか分からなかったり、「なんとなく」で使っていたり、などとなってしまいがちです。そこで、このセッションでは「脱初心者」と題して、Google Chromeの開発者ツールを使うことで、コーディング初心者さんがよくハマりやすい「こんなことに困った」ケースと、それらを開発者ツールで解決する方法を紹介します!

「リンクの中にあるリンク」「ボタンの中にあるボタン」を正しく実装する

安田 祐平

HTMLの仕様上素直に実装できない、マークアップがしづらいUIがたまにあります。・あるリンクの内側にまた別のリンクが配置されている・あるボタンの内側にまた別のボタンが配置されているこのようなUIを普通に実装しようとすると、何かしらの問題を孕んでしまうことがよくあります。このセッションでは、そうした問題を回避しながら、特殊な仕様を実現するための注意点や工夫について紹介します。

明清色と暗清色を知って、マークアップエンジニアでもWebサイトの配色を決められるようになろう

宇井 陸登

ボタンコンポーネントのデザインデータにhoverしたときの色が指定されていないことや、マークアップエンジニアだけど部分的にデザインを考えなくてはいけなくなったことなどはありませんか?そういった場合に、最も困ることの1つとして配色を決めることが挙げられます。そんな配色の問題を解決するために活躍するのが明清色と暗清色です。明清色と暗清色をつかうことでWebサイト制作における配色がグッと考えやすくなります。本セッションでは、デザイン業務を行う必要があるマークアップエンジニアに向けて、明清色と暗清色とは何かから、CSSでどのように指定するのかといった内容を紹介します。

Markuplintでできること・できないこと

ゆうてん

Markuplintの開発者です。朝までマークアップしても大丈夫なような、みなさんへの強い味方を紹介します。VS Codeでの拡張の利用方法や、ルールの設定方法を始めとした初歩的なとこから、みなさんが気になっているであろうHTML StandardやWAI-ARIAに関連するルールにも触れます。そして、特にMarkuplintでサポートできないマークアップの重要な点を解説し、うまくMarkuplintを活用してもらう方法をお伝えします。

Tailwind CSS: あらゆるプロジェクトに対応できるスタイリングの魔法

カイト(Kite)

Tailwind CSS について、聞いたことはあるけど実際に利用したことはない方も多いかと思います。「〇〇には Tailwind CSS は向いていない」などと言われることもよくあります。しかし、様々なプロジェクトで使用してきた経験から、どんなプロジェクトにも Tailwind CSS は対応できるし、その力を発揮できると考えます。このセッションでは、ライブコーディングで Tailwind CSS を使った実装を体験していただいたあと、Tailwind CSS のベストプラクティス、便利な Tips、よくある疑問についてお話します。本セッションを通じて、Tailwind CSS の良さを知っていただき、様々なプロジェクトで活用することで、より良い開発者体験をしていただければと思います。

突撃!隣のマークアップ

沖 良矢

マークアップは、エンジニアそれぞれの考え方が反映される側面を持っていますが、他の人がどのようにマークアップをしているのか気になったことはありませんか?例えばページ内のh1は1つまでか複数か、ブレークポイントをどのくらいのサイズでいくつ設けるのかなど、実際のウェブサイトの傾向について知りたいと思ったことがあるはずです。そこで本セッションでは、多くのエンジニアが一度は悩んだであろうこれらのポイントについて、東証プライム上場(旧・東証一部上場)企業約1,800社のウェブサイトを対象に調査した結果をご紹介します。

コーダーがAWS Amplifyを活用してHTMLのテスト環境を効率的に構築する方法

タムショー(田村 章吾)

このセッションでは、HTMLのテスト環境を構築する方法としてAWS Amplifyを取り上げます。従来のレンタルサーバーを使用するアプローチには設定の手間やアップロードの作業漏れが作業効率を低下させる可能性がありますが、AWS Amplifyなどのモダンなホスティングサービスはこれらの問題を解決可能です。セッションでは、Basic認証の設定やホスティングされたサイトをどのようにクライアントに見せるかについても触れます。このセッションを通じて、コーディング後のHTML確認作業を効率化する方法を身につけることができます。

Figma for VS Code で爆速コーディング

長谷川 喜洋

アドビによる買収発表以降、Figmaのデザインカンプからのコーディングが増えてきたのではないでしょうか。「Figma上で表現できることは、CSSで表現できる」のがFimgaの強みです。このセッションでは、公式プラグインである Figma for VS Code を用いて、効率よくコーディングする方法を紹介します。コーディングをスピードアップするためのFigma上での設定、VS Codeの設定をぜひお持ち帰りください。

CSSのアニメーション事情2023

池田 泰延

CSSの表現力はここ数年で大きく進化しています。複雑なWebのアニメーションを実装しようとするとJavaScriptライブラリの採用が定番でしたが、現在では多くの場面でCSSだけで表現可能になっています。このセッションではモダンブラウザで利用可能なCSSテクニックをはじめ、Chrome等の最先端のアニメーション手法を紹介します。

講演者プロフィール

せきゆおう

せきゆおう

三重県出身。名古屋造形芸術大学短期大学部で建築を専攻するも、当時熱中していたオンラインゲームのギルドのHP制作を機に、Web制作者としての道を志す。

その後、複数のWeb制作会社を経験した後、2020年にフリーランスとして独立。受注から納品まで一貫して担当するジェネラリストタイプ。

独立した際にTwitterをスタートし、同年4月には石油王アカウントを開設。現在のフォロワー数は2.3万人に達する。2020年にWebクリエイター向けのオンラインコミュニティ「クリエイターズ・シナジーカフェ」の共同運営を開始。

2022年にはKADOKAWAドワンゴ情報工科学院で半年間、コーディングの初級講師を務めた。

2023年にColosoで「ゼロから学ぶ実践的なコーディング&スキルアップ講座」をリリース。Voicyにて「アブラジオ」というラジオ番組も放送している。

X(旧「Twitter」) ↗

たにぐちまこと

たにぐちまこと

富士ゼロックス、ソニーネットワークコミュニケーションズなどでウェブエンジニアとして勤務ののち、2002年に独立。株式会社エイチツーオー・スペースを設立。 メンテナンスしやすいウェブサイトを手ごろな価格で提供することで、大小問わずさまざまな業界のクライアントを応援している。 またウェブ業界を豊かで厚みのあるものにするべく、ウェブ制作・プログラム開発の知見を元に、各種講演や執筆を通じ、学習コンテンツを展開。 近年は講座動画配信プラットフォームUdemyやYouTubeを通じた映像講義配信を手がけ、それぞれで数万人規模の受講者・登録者のプログラミングやウェブ構築に関する学習を支援。 Slackコミュニティを主催することで業界全体のスキルアップを図っている。 主な著書に『6さいからつかえるパソコン』(技術評論社刊)、『よくわかるPHPの教科書』(マイナビ刊)など。

富士ゼロックス、ソニーネットワークコミュニケーションズなどでウェブエンジニアとして勤務のち、2002年に独立。株式会社エイチツーオー・スペースを設立。

メンテナンスしやすいウェブサイトを手ごろな価格で提供することで、大小問わずさまざまな業界のクライアントを応援している。

またウェブ業界を豊かで厚みのあるものにするべく、ウェブ制作・プログラム開発の知見を元に、各種講演や執筆を通じ、学習コンテンツを展開。

近年は講座動画配信プラットフォームUdemyやYouTubeを通じた映像講義配信を手がけ、それぞれで数万人規模の受講者・登録者のプログラミングやウェブ構築に関する学習を支援。

Slackコミュニティを主催することで業界全体のスキルアップを図っている。

主な著書に『6さいからつかえるパソコン』(技術評論社刊)、『よくわかるPHPの教科書』(マイナビ刊)など。

X(旧「Twitter」) ↗

ゆうてん

株式会社ディーゼロ 執行役員

ウェブアクセシビリティ専門家

企業のウェブアクセシビリティに関するコンサルティングや顧問を行うかたわら、制作会社のアクセシビリティの推進・啓発活動も行い仲間を増やす活動をしている。社内ではフロントエンドテックリードとしてアクセシビリティを含めた品質向上と開発効率化に取り組む。HTMLリンター「markuplint」の開発者。HTMLのプロ。

カイト(Kite)

株式会社キテレツ (KITERETZ inc.) 代表。

クリエイティブディレクター、ウェブ・グラフィックデザイナー、フルスタック開発者。

横浜生まれ。高校時代をシアトルで過ごし、早稲田大学商学部を卒業後、ファッションデザイナー、グラフィックデザイナー、ウェブデザイナー、プログラマーとしてキャリアを積んだ後、株式会社キテレツを設立。ウェブとグラフィックを中心としたデザイン、開発、ブランディング、マーケティングなどを行う。

WordPress、React、Astro、Ruby on Rails などの著名オープンソースソフトウェアへ貢献する一方、自身でも積極的にオープンソースを開発している。開発オープンソース: Wocker、Bathe、Frasco、KTRZ Font、Japanese Dummy Text、KTRZ Monokai、Nextsss、astro-relative-links、など。

2023年6月に Coloso. にて「デザインから実装まで動きを取り入れたWebサイト制作」講座をリリース。

タムショー(田村 章吾)

タムショー(田村 章吾)

ましじめ株式会社

物の構造やバックグラウンドを見ることが好きで、自動車整備士の道へ進む。 その後デジタルハリウッドでweb制作を学び制作会社へ転職。
2021年にましじめ株式会社を設立。
CSS設計に関する著書の経験があり、メンテナンス・運用のしやすいwebサイトの構築を得意とする。
受託では主にHTML・CSSから、CMSを利用したwebサイトの制作を担当。
また、焼き菓子を販売する「あしかクッキー」の運営も行なっている。
著者:『現場のプロから学ぶ CSSコーディングバイブル』

X(旧「Twitter」) ↗

久保 知己

専門学校でグラフィックデザインを学んだのちに、Webデザイナーとして制作会社に入社。

転職を繰り返し、マークアップからCMSの構築までさまざまなウェブサイトの制作に関わったのち、2014年に株式会社まぼろしに入社。現在はマークアップエンジニアとして、業務に携わる。

個人では、HTMLやCSSを中心に基礎からトリッキーな手法や技術などを1年に1回は更新しているブログ「KOJIKA17」を運営。

近年ではオンラインイベントで、Web制作に関わる技術の登壇も行っている。

主な著書に『プロとして恥ずかしくない 新・WEBデザインの大原則』(共著 MdN)、『いちばんよくわかるWebデザインの基本きちんと入門』(共著 SBクリエイティブ)などがある。

保坂 修平

クリエイティブなことができる力がある!と信じて、全く異なる業界から35歳で転職。株式会社アンティー・ファクトリーと出会い入社。現在7年目のフロントエンドエンジニア。アニメーションやパフォーマンス、ウェブアクセシビリティ、CSS設計などの知識をベースとして、マークアップはもちろん、上流工程での要件定義や若手育成、採用活動まで幅広く任されている。

フロントエンドエンジニアとしてコーディング業務に携わる中でUIデザインにも興味をもち、上流工程も巻き込んだクオリティの高いコンテンツの制作を目指している。

安田 祐平

フロントエンドエンジニア。小学生の頃にWebサイト制作とブログを始める。Web制作会社にてコーポレートサイトやメディアサイトなどの受託開発に携わった後、現在は事業会社でWebアプリケーションやデザインシステムの開発に従事。HTMLとCSSとJavaScriptが好き。監訳書として『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』がある。

Webサイト / Twitter / GitHub

X(旧「Twitter」) ↗

木達 一仁

宇宙開発関連組織でウェブマスターとしての経験を積んだ後、IT業界へ。以来、Webコンテンツの実装工程に多数従事。2004年から株式会社ミツエーリンクスに参加、現在はエグゼクティブ・フェロー。クライアントワークとしては、主にフロントエンドの設計や実装、関連ガイドラインの策定に従事。

飛田 心

株式会社FLATにてフロントエンド開発のリードエンジニアを担当。React/Next.js を用いたフロントエンド開発に加え、Node.js を用いたバックエンド開発を業務で行う。UI/UXの改善や保守性の高いアプリケーション設計・実装が得意。

相原 典佳

相原 典佳

DTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、構築まで、一貫したWebサイト制作を提供している。

現場での経験や知識をもとに、デジタルハリウッド、ロクナナワークショップ、Schooなどで講師・授業を担当するほか、「Web初心者を抜けた人たち」向けコミュニティ、Beans Collegeの運営を行っている。

共著書として『初心者からちゃんとしたプロになる HTML+CSS標準入門』(MdN刊)、『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』(インプレス刊)などがある。

X(旧「Twitter」) ↗

池田 泰延

株式会社ICS代表。筑波大学非常勤講師。ICS MEDIA編集長。テクニカルディレクターとして、ウェブのフロントエンドの開発を行う。得意分野はWebGLやデータビジュアライゼーション。

X(旧「Twitter」) ↗

沖 良矢

1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。2008年にフリーランスとして独立後、2019年に合同会社世路庵を設立。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI/UX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学非常勤講師、元東京造形大学非常勤講師、WebクリエイティブコミュニティDIST主宰、Vue Fes Japan全体統括。

小山田 晃浩

小山田 晃浩

株式会社ピクセルグリッド

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。React、Svelte、Vue問わずデザインシステムの実装作業に勤しむ。SVG、Canvas、WebGLの扱いも得意としている。 この他の実績として、[three.js](https://threejs.org/)のCSS3DRendererのコントリビューター。2011年から2024年まで連続で[Microsoft MVP](https://mvp.microsoft.com/en-US/mvp/profile/9bbb70c0-3c9a-e411-93f2-9cb65495d3c4)を受賞。

X(旧「Twitter」) ↗

鹿野 壮

鹿野 壮

Ubie株式会社プロダクトエンジニア

Ubie株式会社プロダクトエンジニア

2024年にUbie株式会社に入社。九州大学でメディアアートを学んだ後、テックリードやフロントエンドチームリーダーを経験する。現在はUbieでフロントエンド・バックエンド問わずフルスタックにプロダクト開発をしている。TechFeed公認エキスパート。

近著に『JavaScriptコードレシピ集』(技術評論社)がある

X(旧「Twitter」) ↗

倉科 宏行

1982年、山梨県生まれ。とにかく情報が大好物。

ミュージシャンとしてジャパニーズドリームを夢見るも色々あり、グローバルデザイン株式会社にマークアップエンジニアとして入社し、ウェブの道へ。

エンジニア時代につちかったフロントエンドのスキルや経験を活かして現在は、現在はプロジェクトマネージャー職に従事。

ウェブアクセシビリティ基盤委員会にも参加し、活動中。

アクセシビリティに優れた使いやすくわかりやすいサイト構築のために日々取り組んでいる。

X(旧「Twitter」) ↗

倉又美樹(まるみ)

倉又美樹(まるみ)

デザイナー、Web・UI・DTPなどで活動中。制作者としてだけではなく、デザイナーを育てることがライフワークです。 女子美術大学プロダクトデザイン専攻非常勤講師。師匠と弟子の交流するコミュニティ「まるみデザインファーム」を運営中。 「かけだしデザイナーを一人にしない」「みんな好きに生きろ」をモットーに日々楽しくコミュニティで過ごしています。

https://marumi-designfarm.com/

Adobe Community Expert、Adobe Community Leaders Club

X(旧「Twitter」) ↗

長谷川 喜洋

長谷川 喜洋

株式会社How to Use

株式会社ステラクリエイト CEO/総合webサービス タダフラ 代表/ロクナナ・デジタルハリウッドSTUDIO大阪・HAL大阪校・京都芸術大学 講師/futureshop認定マイスター/だし・星のソムリエ®

大阪生まれ大阪育ち。 パチンコ店の店長からEC業界へ。そののち、知財を扱うスタートアップでシステム開発・Webサイト制作・アプリ開発を担当。フリーランスとしてWeb制作も行う。

EC時代に天体望遠鏡を販売していた経験から、星空事業を主とした法人を2020年に設立。

X(旧「Twitter」) ↗

長谷川 広武(ハム)

長谷川 広武(ハム)

株式会社HAMWORKS

テクニカルディレクター 兼 フロントエンドエンジニア

SaCSS主催(Sapporo.css) 主催

(´ ºムº `)の人。北海道札幌市在住。2016年2月に株式会社HAMWORKSを設立し、代表取締役に就任。HTML & CSS & JavaScriptのコーディングや、WordPressなどのCMSを利用したWebサイト構築などを得意としている。また、2009年より札幌でWebデザイナー向けの勉強会「SaCSS」の主催・運営を行っている。

X(旧「Twitter」) ↗

半田 惇志

半田 惇志

フロントエンドエンジニア 兼 HubSpotテクニカルエキスパート

フロントエンドエンジニア 兼 HubSpotテクニカルエキスパート

フロントエンドエンジニアとしては特にコンポーネント設計に強く、PRECSS( https://precss.io )並びにCSS設計完全ガイド( https://amzn.to/3EHj5AU )の生みの親。

HubSpotにおいてはCRMの導入支援からデータ設計、マーケティングオートメーションフローのセットアップ、CMSによるサイト構築まで、フルスタックに対応している。

X(旧「Twitter」) ↗

森川 結子

商社で事務職を経験した後、2013年にウェブ業界へ。制作会社でデザイン、マークアップ、ディレクションなど幅広い経験を積み、2017年現職のトゥーアールに入社。最近ではTailwindCSSやNext.jsを利用したウェブアプリケーション開発に従事している。「アクセシビリティで一発当て太郎」の弟子としてアクセシビリティ啓発活動にも尽力している。マークアップとWebアクセシビリティ関連の講師経験をもつ。チョコレート好き。

X(旧「Twitter」) ↗

森 裕司(YUJI)

森 裕司(YUJI)

有限会社ザッツ

有限会社ザッツ


名古屋で活動するデザイナー。Webサイト『InDesignの勉強部屋』や、名古屋で活動するDTP関連の方を対象にスキルアップや交流を目的とした勉強会・懇親会を行う『DTPの勉強部屋』を主催。また、Facebook内の『InDesignの勉強部屋』では『DTP QUEST』というオンライン配信番組をスタートさせ、Adobe公認のエバンジェリスト『Adobe Community Evangelist』にも認定されている。

『初心者からちゃんとしたプロになる InDesign基礎入門』(MdN)や『InDesignパーフェクトブック』(マイナビ出版)、『超時短InDesign』(技術評論社)など、テクニカルライターとしても40冊以上の著書を持つ。
2016年11月末より、個人で執筆した『InDesignパーフェクトブック(PDF版電子書籍)』のダウンロード販売もスタート。

X(旧「Twitter」) ↗

X(旧「Twitter」) ↗

綿貫 佳祐

綿貫 佳祐

Qiita株式会社

Qiita株式会社 / 株式会社エイチームライフデザイン

会社では、組織を束ね、プロダクト品質の向上や制作プロセスを改善する役割を担っています。 また、採用や育成にも関わり、組織全体を常にアップデートするよう努めています。

個人の制作範囲としては、 UI を中心にマークアップ、フロントエンド、グラフィック、リサーチなど。 特定の領域に閉じず、幅広いスキルを持つことで最善の解を提供できるように心がけています。

Friends of Figma Nagoyaのリーダーもしていて、Figmaの本も書きました。

X(旧「Twitter」) ↗

イベント情報・アーカイブ案内

アーカイブの単品購入

価格・販売状況・視聴条件は各販売ページでご確認ください。

関連イベント

同じトピックや登壇者の講座から。

過去コンテンツをすべて見る →開催予定のイベントを見る →