2020年8月第3週号 1位は、ユーザー体験を向上させるCSSアニメーションについて、気になるネタは、「顔が明るく見えるライトや壁紙を購入」――“オンライン映え”気にするのは20代男性？賢く見えるよう本の購入も

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2020年8月10日～8月16日の間に見つけた記事のベスト5です。

CSSアニメーションが、どのようにユーザー体験を向上させられるかについてまとめた記事です。

といった内容について細かく解説しています。

カラフルなウェブサイトをデザインするためのヒントをまとめています。

最新のCSSレイアウト術についてまとめた記事で、Gridレイアウトのテクニックを10個紹介しています。

横幅が可変するのに合わせてレイアウトが変化する、実践的な内容が多くて参考になります。可変する様子を動画で紹介していてわかりやすいです。

無料で使えるグリッドレイアウトのコードやWordPressテーマを18種類紹介しています。

CSS Gridを使ったレイアウトのコーディング例がいろいろ見られます。

ウェブデザイナー、開発者のための情報源をまとめた記事です。

開発系のもの、WordPress関連のものが多い印象です。モックアップを作るツール、ボタンのCSSライブラリなどもありました。

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Octopus.doはサイトマップを作るのに特化したサービスです。作ったサイトマップはベクターデータのPDFかPNG画像で書き出せます。

サイトマップ上の各ページに入る要素をテンプレートから選んで配置できるので、簡単なワイヤーフレームも作ることができます。ユーザー登録なしで試せて、動作が速いことをウリにしています。

無料で使えるプランもありますが、かなり機能が限定されています。データ書き出しやグループでのコラボレーション機能は有料版でしか使えません。新しいサイトのためのサイトマップ＆簡易なワイヤーフレーム作成はもちろん、既存のサイトのサイトマップを作り構成を見直す場合にも便利そうです。

ビデオ通話で自分の姿をより良く見せる「オンライン映え」の実態調査結果が興味深いです。「⁠オンライン映え」のため何らかの商品を購入した割合が1番多かったのは20代男性で50%でした。

一方で、ビデオ会議のときに画面共有と音声だけで、ビデオはオフにするケースも増えているようです。これはトラフィックを減らすためという意味もありますね。

個人的には、顔の部分だけ丸くトリミングされて映っているくらいが丁度いいと思います。賢そうに見える本を購入して背景に並べるような努力もいらなくなりますし。