HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作

2023年6月22日公開 / 株式会社ICS 池田泰延

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。

連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。

imgタグの属性はちゃんと書く？

imgタグにwidth・height属性を書いているか質問しました。

4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。

記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwidth・height属性は記載することが推奨されています。UI体験において、レイアウトシフトの課題を意識するフロントエンドエンジニアが増えたのかもしれません。

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること

また、imgタグにalt属性を書いているかも質問しました。

934票の回答があり「alt属性を必ず記述する（alt=""を含む）」が68.2%、「なるべく記述する」が23%、「あまり記述しない」が4.5%、「書かない、気にしない」が4.3%でした。

alt属性は昔からアクセシビリティーやSEOのために必要であると言われてきたので、alt属性の必要性は多く認識されているようです。

画像の書き出し

HTMLコーディングにおいて、デザインからの画像の書き出しは誰が担当するのか質問しました。ウェブ業界ではデザイナーはデザインカンプ（PhotoshopやFigmaなど）を作成し、フロントエンドエンジニアはHTMLコーディングを担当するといった、分業となっていることが多いです。

1022票の回答があり「デザイナーが担当」が20%、「エンジニアが担当」が72%、「ディレクターが担当」が0.5%、「その他」が7.5%でした。

エンジニアの担当が多い結果となりました。筆者の観測範囲では、デザイナーかエンジニアのどちらが担当するかは制作会社によってワークフローが異なり、システム開発会社だと画像書き出しはデザイナーが担当する傾向が多かったように思います。ICSでは、画像配信の最適化やデザイン再現の品質はエンジニアの仕事と考えているため、フロントエンドエンジニアが画像書き出しを担当しています。

デザインデータのよく使われる形式は？

HTML・CSSを組むにあたり、デザイナーからデザインデータをどの形式で受け取ることが多いか質問しました。

1,490票の回答があり「Figma」が41.6%、「Adobe XD」が40.9%、「Photoshop」が15.8%、「Sketch」が1.7%でした。

Adobe XDの傾向も気になりますが、Figmaが飛ぶ鳥を落とす勢いで伸びていますね。アンケート項目に含めていませんでしたが、Adobe Illustratorをコメントで回答される方も多かったです。

Figmaのオートレイアウト機能の利用率は？

デザイナーへの質問として、Figmaの「オートレイアウト」がどれだけ利用されているか質問しました。

345票の回答があり「積極的に使う」が53.9%、「たまに使う」が17.4%、「使わない」が8.4%、「そんな機能は知らない」が20.3%でした。

オートレイアウトで作成されたデザインは、規則正しい余白管理ができるので、エンジニアにとっても読み解きやすくなります。オートレイアウトはFigmaを使う利点の1つなので、もし知らない方がいれば次の記事を参照してみてください。

FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう

Windowsのフォント

Windows向けのCSSのfont-family指定。和文のゴシック体ではどれを優先指定することが多いか質問しました。

785票の回答があり「ＭＳＰゴシック」が8.5%、「メイリオ」が41.4%、「游ゴシック」が43.9%、「BIZ UDPゴシック」が6.1%でした。

游ゴシックは記事『最適なfont-familyの書き方』で紹介したように、非HiDPIモニターでは文字が著しく可読性が低くなる問題が知られています。Windows 10の2018年のアップデートで搭載された「BIZ UDPゴシック」は、現在はほぼすべてのWindows環境で利用できるはずですが、あまり利用が進んでいないようです。「BIZ UDPゴシック」はGoogle Fontsでも提供されているので、ウェブフォントとしてmacOS・iOS・Androidでも配信できます。

インデントは？

HTMLのインデントの好みを質問しました。

723票の回答があり「タブ」が45.6%、「スペース 4つ」が10.7%、「スペース 2つ」が43.7%でした。VS Codeのデフォルトの設定はスペース4つですが、多くの方が設定を変更されているようです。タブとスペース2つが均衡しているようですね。なお、記事『インデントにタブを使うアクセシビリティ上の利点』によるとタブの利点が紹介されています。

ウェブアクセシビリティの対応

ウェブアクセシビリティはどの程度、意識して取り組んでいるか質問しました。

798票の回答があり「強く意識して取り組んでいる」が9.6%、「やや意識して取り組んでいる」が48.1%、「あまり意識していない」が28.6%、「ほぼ意識することはない」が13.7%でした。

その上で、ウェブサイトの実装時にスクリーンリーダーで検証しているかも質問しました。

302票の回答があり「必ず検証する」が2.3%、「たまに検証する」が18.5%、「検証しない」が58.6%、「スクリーンリーダーって何？」が20.5%でした。

ICSでは、制作したコンテンツがスクリーンリーダーでの読み上げに支障がないか、常に検証しています。以下の記事で取り組みを紹介しています。

モーダルの実装方法は？

ウェブサイトのモーダルUIを作る手段を質問しました。モーダルUIはちゃんと作るのが難しいUIであるため、どのような方法で実装しているか気になるところです。

1,187票の回答があり「divタグを重ねて表示(自前実装)」が47.8%、「dialogタグで表示」が9.6%、「JSライブラリに任せている」が39.8%、「window.open(, “popup”)」が2.7%でした。

モーダルUIはdivタグで作成すると、ケアしなければならない落とし穴がたくさんあります（Tabキー操作でモーダル配下のボタンが反応するといった課題があります）。次の記事では、モーダルUIを作るときに気をつけたいことをまとめています。

HTMLでモーダルUIを作るときに気をつけたいこと

そんなモーダルUIですが、HTMLのdialogタグを使うと、モーダルUIを作るときに必要な機能がほぼ揃っています。dialogタグをどのぐらい使われているのでしょうか？

478票の回答があり「積極的に利用している」が9.6%、「たまに使うことがある」が12.3%、「使ったことはない」が59%、「dialog要素を知らない」が19%でした。

『Dialog element | Can I use...』によれば、dialogタグはSafari 15.3以前（Safari 15.4以降は利用可能）とFirefox 97以前で利用できないことがハードルになっているようです。2023年秋にはSafari 17もリリースされるため、Safari 15.3以前はウェブ制作の対象外としてもよさそうです。

※Safariは春と秋の年に2回の大型アップデートがあり、秋のリリースではメジャーバージョンが、春のリリースではマイナーバージョンが更新されます。春のリリースは実質的にメジャーバージョン級のアップデートですが、変化する数値がマイナーバージョンのみのため、軽視されがちです。たとえばiOS 15最新というバージョン指定であれば、iOS 15の最新バージョンのiOS 15.6のみを対象ブラウザとし、iOS 15.3は対象外とすべきと筆者は考えます。

Lighthouseでチェックしますか？

ウェブページの検査ツールであるLighthouseライトハウスがどの頻度で使われているか質問しました。

461票の回答があり「かかさずにLighthouseでチェックする」が23.4%、「たまにLighthouseでチェックする」が45.1%、「Lighthouseを使わない」が10.8%、「Lighthouseを知らない」が20.8%でした。

Lighthouseで検査することで、ウェブページの品質を定量的に評価できます。改善項目を取り組むことでスコアが簡単に上昇するので、フロントエンドエンジニアにとってはやりがいを感じて挑戦している方もいるでしょう。ウェブページの読み込みパフォーマンスなどGoogleの検索結果にも影響があると言われているので、Lighthouseのスコアは気にしたいところですね（参考記事）。