週刊Webテク通信

2021年1月第4週号1位は、デザインに関連したコンバージョンの失敗とその回避方法、気になるネタは、モリサワ、写研とOpenTypeフォントを共同開発 24年にリリース

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

1. 8 design-related conversion fails (& how you can easily avoid them) | Dribbble Design Bloghttps://dribbble.com/stories/2021/01/12/design-conversion-fails

デザインに関連したコンバージョンの失敗とその回避方法を解説しています。

  1. ストック画像に依存しすぎ
  2. 社会的な信頼を強調できていない
  3. モバイルでのユーザー体験を見落としている
  4. 雑然とした環境でCTAを使いすぎ
  5. ユーザーの目的や好みを無視する
  6. デザインと重要な情報の提供が両立できてない
  7. 読み込み速度を気にしない
  8. カスタマージャーニーの一貫性の重要性を忘れている
図1 デザインに関連したコンバージョンの失敗とその回避方法
図1 デザインに関連したコンバージョンの失敗とその回避方法

2. New Web Design Trends and Inspiration for 2021 | Codropshttps://tympanus.net/codrops/2021/01/11/new-web-design-trends-and-inspiration-for-2021/

2021年のWebデザインのトレンドをまとめた記事です。

  1. より心地よいカラーパレットの使用
  2. 写真とデジタルイメージとのシームレスな組み合わせ
  3. より効率的なショッピング体験
  4. よりユーザーが操作できる動画コンテンツ
  5. 信頼構築のためのアピールにより時間を費やす
図2 2021年のWebデザインのトレンド
図2 2021年のWebデザインのトレンド

3. Building Flexible Components With Transparency - Cloud Fourhttps://cloudfour.com/thinks/building-flexible-components-with-transparency/

色帯や文字をグレーで色指定するのではなく、透明度を設定した透過する黒色にした方が便利というノウハウを紹介しています。

透明度によってグレーになっている場合、背景色がグレーのときにも背景との区別がつきますし、背景に色や写真がある場合にもなじみやすいという利点があります。

図3 透明度を設定したコンポーネントのススメ
図3 透明度を設定したコンポーネントのススメ

4. An Early Look at Full Site Editing in WordPresshttps://speckyboy.com/full-site-editing-in-wordpress/

WordPressの標準機能で、Gutenbergブロックエディタでページ全体の編集ができるように今後なるそうです。

この記事ではGutenbergプラグインのベータ機能と、⁠Q」というフルサイトエディターに対応したテーマを用いたページ編集作業を紹介しています。

図4 WordPressのフルサイトエディターを一足早く紹介
図4 WordPressのフルサイトエディターを一足早く紹介

5. Animating with Lottie | CSS-Trickshttps://css-tricks.com/animating-with-lottie/

アニメーションライブラリLottieと、After EffectsのアニメーションをJSONとしてエクスポートするBodymovinを使って、Web用アニメーションを作る方法を解説しています。

例として、JSONを入手できるIcon 8で配布しているアニメーションアイコンを利用していました。

図5 Lottieを使ったアニメーション入門
図5 Lottieを使ったアニメーション入門

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

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

RendezView | Endless Canvas Built For Workhttps://www.rendezview.io/

無限のキャンバスの上にドキュメント類を配置して、グループで共同編集するためのサービスです。ビデオチャットの機能もあります。

Google ドキュメントなどをキャンバス上に同時に複数配置し、ビデオチャットをしながらリアルタイムに複数人で編集できます。配置できるのはGoogle ドキュメント/シート/スライド、YouTube動画、URL、画像などです。

Miroのようなオンラインホワイトボードのサービスかと思ったのですが、RendezView自体に描画機能などはありませんでした。ベータ版のせいか動きがぎこちない感じもしますが、サクサク動けば面白いサービスになりそうです。

図6 無限キャンバス上でドキュメントを共同編集するサービス
図6 無限キャンバス上でドキュメントを共同編集するサービス

おすすめ記事

記事・ニュース一覧