スマホでの表示に影響を受けるUI

ウェブサイトでよく見かけるデザインテクニック、気付けばずいぶん変わったなと思います。たとえば複数のカードを並べるデザイン。情報を同じ基準で整理し、均等に扱います。商品やサービスをカードにして、比較しやすいサイトを作ることもできます。グリッドレイアウトなどを利用すれば、画面サイズの異なるPCサイトからスマホサイトへと、容易に切り替え可能です。

メニュー項目などのテキストの横にバッジを表示するテクニック。更新があったページやコンテンツを知らせるのによく使われます。ただの小さな赤丸ですが、私たちはこれが意味するものにすっかり馴染んでしまいました。さかのぼれば、スマホアプリの通知バッジから始まったのではないでしょうか。

加速するスマホファースト

総務省の令和6年版情報通信白書によると、2023年のインターネット利用率は、スマートフォン経由で72.9％、パソコン経由で47.4％となっています。モバイルファースト、スマホファーストが進んで、専らスマホでの表示を前提とするデザインがトレンドを作っているようです。そのようななか、ほとんどスマホ専用のサイトにし、PCでもほぼそのまま表示するという大胆な例も見られるようになりました。

8年ぶりの改訂となる「改訂新版 HTML&CSSデザインレシピ集」では、302の項目、700ページを超えるボリュームで、HTML&CSSのテクニックを解説しています。モバイルファーストの潮流が続くなか、近年目立って増えてきた、高度なレスポンシブデザインをより簡単に実現できる新機能も多数取り上げました。パラパラとめくるだけでも、HTML&CSSでできる最新・定番のテクニックを概観できます。