週刊Webテク通信

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

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

ネットで見かけた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 無限キャンバス上でドキュメントを共同編集するサービス

今週の気になるWebネタ

モリサワ,写研とOpenTypeフォントを共同開発 24年にリリース - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2101/18/news122.html

モリサワが写研の書体を2社でOpenTypeフォント化して2024年にリリースするそうです。古くからデザイン業界・DTP業界にいる人にとっては大ニュースということで話題になっています。

ついに写研の書体がフォントとして使えるようになること,もとは同じ会社から袂を分かつことになった写研とモリサワがタッグを組むことに,胸が熱くなっている人も少なくないようです。

一方で,なんでそんなに騒がれているのかがピンとこない人も多いことでしょう。印刷物のデザインという仕事が縮小傾向な中での昔おなじみの書体のデジタル化は,かなり遅すぎた感も否めませんね。

著者プロフィール

アシカガコウジ

フリーのWebデザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote