マークアップエンジニアではないのですが、
ディレクターとして知識を知っておく必要もあるので、
アーカイブ参戦しました。
（流石に徹夜はつらい）
■キーノート HTML軽視されすぎ問題
木達一仁さん（ミツエーリンクス）
■HTMLは軽視されている？
▼WebAIM Millionの結果
・2023年2月の調査結果
・世界の主要な100万Webサイトのトップページをアクセシビリティ評価
・アクセシビリティに関し1ページあたり平均50.0のエラーを検知
・96.3%のページでWCAG2に対する不適合を検知
・画像の22.1%で代替テキストが欠如（alt=””を除く）
・7.9%のページで見出し要素が欠如
・WAI-ARIAを使用するページほどエラーが多い傾向
▼HTMLは軽視されている！
・アクセシビリティに優れたWebページは少数派
・正しいHTMLが普及していれば、状況はもっと良いはず
・HTMLのエラーが放置されている
・ブラウザのエラー処理が向上した結果、エラーのあるページであっても、概ね期待通りに表示・動作
・エラーのないHTMLでWebページを制作する動機が低下？
・加えてJavaScriptやその周辺技術が注目されがちな傾向
▼フロントエンド職の分断の影響
・2019年1月の記事「The Great Divide」
・Webのフロントエンド職に分断が発生している
・興味やスキルセットがJavaScriptに偏っている人々
・興味やスキルセットがHTMLやCSS、デザイン、アクセシビリティ、UXなどのJavaScript以外に偏っている人々
・JavaScriptを活用したビルドツールなどの開発・導入が活発
・HTMLは動きに乏しい、注目に値しない技術との誤解があるかも？
▼HTMLの品質は重要
・Webにおいてコンテンツに意味や構造を与えるのはHTML
・意味や構造を伴うことで、データは情報になる
・現在においても仕様に準拠したエラーのないHTML品質は必要
・HTMLを解析するのが常にメジャーなWebブラウザとは限らない
・人間可読性と機械可読性の両立でコミュニケーション機会は最大化
・それを実現できるかどうかは、HTMLの品質次第
・正しいHTMLはWebの持続可能性（サステナビリティ）にも貢献
▼Web Sustainability Guidelines(WSG)1.0
▼進化し続けるHTML
・HTMLは注目に値する技術
・search要素、popover属性など、新たな要素・属性が追加されている
・今後のHTMLの進化から目を離せない
・Appleが提案するmodel要素
・Open UIでの議論
・State of HTML 2023の結果
https://survey.devographics.com/ja-JP/survey/state-of-html/2023
▼まとめ
・過去、HTMLは軽視されてきた
・アクセシブルではない、仕様に準拠していないHTMLがWebに溢れている
・しかし、HTMLを軽視すべきではない
・高いHTML品質がWebコミュニケーションの可能性を広げる
・HTMLは今現在も進化し続けてる技術
・HTMLを、フロントエンドを学び、Webをもっと良くしていきましょう
・今夜の「#朝までマークアップ」が、その第一歩となりますように！
■グラフィックソフトから書き出すだけじゃない SVG を用いたグラフィック表現
綿貫 佳祐さん（Qiita）
さっぱりわかりませんでした（泣）
綿貫さん技術の理解度がすごすぎ
エディタはVScode
プラグインはSvg Preview for VSCode
■サイト制作に Astroがおすすめな理由
たにぐち まことさん
たにぐちさん、講師をしているだけあってとてもわかりやすい。
たにぐちさんのYoutubeチャンネル
https://www.youtube.com/watch?v=5kvqufrBa6U&list=PLh6V6_7fbbo8PFGJy1I-hvmniJtlkJ5uw
■displayプロパティの2値構文から学ぶレイアウトモデル
久保 知己さん
まぼろしの久保さんからはレイアウトモデルのお話。
・CSSレイアウトの基本はdisplayプロパティ
■デザイン原則から考えるマークアップエンジニアリング
保坂 修平さん
アンティー・ファクトリーの保坂さんは名古屋支社からの登壇
デザインルールの知識をもったエンジニア観点での話でした。
■2023年の CSS革命。Subgridが全ブラウザにやってきた
鹿野 壮さん（マネーフォワード）
SubgridというCSS Gridのレイアウト方法についてのお話でした。
■実践！ライブコーディングでアクセシビリティ改善
飛田 心さん（FLAT）
スクリーンリーダーを使ってデモサイトの検証をしてました。
（今回はVoiceOverを使用）
VS Codeを使用、Markuplintも使用してました。
■現場で役立つ！ フォームのマークアップを改善する方法
森川 結子さん（トゥーアール）
森川さんはアクセシビリティ観点からフォームを改善する方法をプレゼンしてました。
■レスポンシブウェブデザインだけじゃない、メディアクエリの活用方法
半田 惇志さん
メディアクエリのインタラクション系でいろいろ検証してました。
■マークアップの多様性とデザイン〜たのしい文書構造〜
柴田 宏仙さん＋倉又 美樹（まるみ）さん
初学者向けのマークアップの方法をプレゼン。
デザインの意図を汲み取ってマークアップする方法を解説してました。
■CSSで縁取り文字、いろいろ
小山田 晃浩さん
CSSの縁取りの使いかたを解説。
ライブコーディングがむちゃくちゃ速い。
■GitHub CopilotとGitHub Copilot Chatを使ったHTML/CSSの自動生成とリファクタリング方法
長谷川 広武（ハム）さん
GitHub CopilotでHTMLとCSSを自動生成してました。
■非エンジニア・初学者向けマークアップトレーニング
せきゆおうさん
デザインをモノクロでプリントし、HTMLのトレーニングする方法を解説。デモではFigmaでのコーディング練習を実演してました。
■マークアップエンジニアからのキャリアパス
倉科 宏行さん
面識のある倉科さんからはキャリアパスのお話でした。
■“画像”マークアップのこと、改めて調べてみた
森 和恵さん
画像だけでも様々なマークアップの仕方があることを知りました。
WebPはウェッピーって読むのか。
■脱初心者！ 開発者ツール（DevTools）を使いこなそう！
相原 典佳さん
Google Choromeの開発者ツールを解説してました。
全画面キャプチャは便利ですね。
■「リンクの中にあるリンク」「ボタンの中にあるボタン」を正しく実装する
安田 祐平さん
ほとんど知らない、isolationプロパティを使ってました。
それでも不可能なので結局JavaScriptを使ってました。
かなり難解なマークアップになってました。
■明清色と暗清色を知って、マークアップエンジニアでもWebサイトの配色を決められるようになろう
宇井 陸登さん
明清色と暗清色、初めて聞きました。
Sassの 実装がむずかしい・・・
■Markuplintでできること・できないこと
ゆうてんさん
マークアップを評価してくれるMarkuplintの説明をしてくれました。（個人で開発してるのすごいな）
今までDreamwerverのチェックツール使ってたけど、
Markuplintインストールしてみるかなー
■Tailwind CSS: あらゆるプロジェクトに対応できるスタイリングの魔法
カイトさん
オフィスがすごいキレイ。
Tailwind CSSの解説。
VS Codeでライブコーディングしてました。
■突撃！隣のマークアップ
沖 良矢さん
マークアップの難しさを解説、
1800社のサイトを全部チェックしたそうです！
h1タグの数、ブレークポイント、画像をどうあつかっている。
の３つのポイントについてチェックしてました。
■コーダーがAWS Amplifyを活用してHTMLのテスト環境を効率的に構築する方法
タムショー（田村 章吾）さん
AWS Amplifyでテスト環境を構築する方法を解説してました、
制作会社にいたときはエンジニアさんが全部用意してくれていたので、フリーランスの場合はどうするんだろうと思いました。
■Figma for VS Code で爆速コーディング
長谷川 喜洋さん
FigmaでコーディングするためのFigma for VS Codeを利用してコーディングしてました。
かなり高速にコーディングできますね。
しかし2024年から有料になるそうです。残念。
■CSSのアニメーション事情2023
池田 泰延さん
CSSのアニメーションテクニックについて解説。
使うとこあるかなー。
ということで全部のセッションの動画を見ました、
やっぱり木達さんのキーノートが一番かなー。
コメント