週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. Enhancing User Experience With CSS Animations by Stéphanie Walter - UX designer & Mobile Expert.https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/

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

  • CSSアニメーションのコーディング例と構文について
  • アニメーションの最適なタイミングと時間をどう見つけるのか
  • なぜアニメーションがユーザー体験の向上に貢献するのか
  • 一部の人を気持ち悪くさせないように気をつけること
  • 優れたアニメーションを作るための5つの最終的な基本ルール

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

図1 ユーザー体験を向上させるCSSアニメーションについて

図1 ユーザー体験を向上させるCSSアニメーションについて

2. Tips for designing colorful websites for your clientshttps://www.queness.com/post/17850/tips-for-designing-colorful-websites-for-your-clients

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

  1. 色数を決める
  2. メインとなる適切な色を選ぶ
  3. カラースキームをブランディングと合わせる
  4. 訪問者の感情と行動を形作る
  5. カラースキームによって信頼性を追加する
  6. 色のコンビネーションを考える
  7. 適切な背景色を選ぶ
  8. 信頼を高めるためのカラースキームを使う
  9. コンテンツを際立たせるための色の組み合わせを考える
  10. コンバージョンを高めるのに適切な色を使う
  11. どの色がもっとも注目をあつめる?

図2 カラフルなウェブサイトをデザインするためのヒント

図2 カラフルなウェブサイトをデザインするためのヒント

3. Ten modern layouts in one line of CSShttps://web.dev/one-line-layouts/

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

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

図3 Gridレイアウトのテクニック10個

図3 Gridレイアウトのテクニック10個

4. 18 Grid Layouts for Building Stunning Websites - 1stWebDesignerhttps://1stwebdesigner.com/18-grid-layouts-for-building-stunning-websites/

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

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

図4 グリッドレイアウトのコードやテーマいろいろ

図4 グリッドレイアウトのコードやテーマいろいろ

5. Fresh Resources for Web Designers and Developers (August 2020) - Hongkiathttps://www.hongkiat.com/blog/designers-developers-monthly-08-2020/

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

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

図5 ウェブデザイナー/開発者のための情報源いろいろ

図5 ウェブデザイナー/開発者のための情報源いろいろ

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

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

Super Fast Visual Sitemap Tool | Octopus.dohttps://octopus.do/sitemap

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

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

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

図6 サイトマップを作るのに特化したサービス

図6 サイトマップを作るのに特化したサービス

今週の気になるWebネタ

「顔が明るく見えるライトや壁紙を購入」――“オンライン映え”気にするのは20代男性? 賢く見えるよう本の購入も - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2008/14/news071.html

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

バックナンバー一覧