週刊Webテク通信

2021年8月第4週号1位は、UXの「神話」してまだ信じられている6つの間違ったルール、気になるネタは、Facebook、メタバース「Horizon Workrooms」β版公開 「Oculus Quest 2」世界中から参加可能

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

1. Busting UX Myths: 6 Misconceptions People Still Believehttps://adamfard.com/blog/ux-myths

UXの「神話」としてまだ信じられている6つの間違ったルールと、実際にはどうアプローチすれば良いかをまとめています。

  1. 7+-2ルール
  2. 人は合理的に行動する
  3. 人は自分が何を望んでいるかを明確にできる
  4. クリック数が少ないとユーザーは喜ぶ(3クリックルール)
  5. UIとUXは製品デザインの陰と陽のようなもの
  6. 少ない方がよい(Less is more)

1は、人が一度に覚えられるのが7項目くらいなので、メニューの項目もそれくらいにすべきというルールについて取り上げています。⁠マジカルナンバー7」という言い方も有名ですね。そのこと自体は間違いではないのですが、メニューにもっと多くの項目があっても問題ないと解説していました。

図1 UXの「神話」として信じられている6つの間違ったルール
図1 UXの「神話」として信じられている6つの間違ったルール

2. 7 Landing Pages Comparisons To Improve Your Conversions in 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/08/7-landing-pages-comparisons-to-improve-your-conversions-in-2022/

ランディングページのコンバージョンを改善するヒントになる7つの例を紹介した記事です。それぞれ改善前と後のページのスクリーンショットが載っていてわかりやすいです。

  1. 退屈な顧客情報フォームをインタラクティブなクイズに変える
  2. 強力なビジュアルと商品の詳細を強調する
  3. コンバージョンを増やす強力な社会的証明(ソーシャルプルーフ)を使う
  4. ファーストビューで見える範囲のビジュアルに力を入れる
  5. 行動を促す要素により説得力を与える
  6. ページ上の特定の文章をコントラストを使って強調する

項目は6つですが、例としてのランディングページは7つ掲載していました。

図2 ランディングページのコンバージョンを改善するヒント
図2 ランディングページのコンバージョンを改善するヒント

3. Design Trend: Flat Cards UI | Design Shackhttps://designshack.net/articles/trends/flat-cards-ui/

フラットデザインのカード型UIを多数紹介しています。

カード型UIの優れた点のひとつは、PC、スマホなどデバイスが違っても一貫性のあるデザインと操作感を得られることです。もうひとつはカード全体がボタンにもなっていることで、クリックまたはタップできる大きなエリアでインタラクションを簡単に生み出せます。

図3 フラットスタイルのカード型UIというデザイントレンド
図3 フラットスタイルのカード型UIというデザイントレンド

4. What Are The 7 Types Of Graphic Designhttps://marketsplash.com/types-of-graphic-design/

グラフィックデザインの主要な7つのタイプを説明しています。

  1. ビジュアルアイデンティティデザイン
  2. マーケティングと広告デザイン
  3. パッケージデザイン
  4. ユーザーインターフェイスデザイン
  5. モーションデザイン
  6. 出版物のデザイン
  7. タイポグラフィデザイン
図4 グラフィックデザインの主要な7つのタイプ
図4 グラフィックデザインの主要な7つのタイプ

5. 50 Great Web Development Tools Devs Actually Use in 2021https://paperform.co/blog/web-development-tools/

Web開発ツールを50個まとめた記事です。Webデザイナーには、フロントエンドフレームワーク、デザイン/プロトタイピングツール、コラボレーションツールの項目が参考になりそうです。

ほかには、コード/テキストエディタ、Webアプリケーションフレームワーク、パッケージマネージャー、Gitクライアント、API、クラウド型のテストツールなどを紹介しています。

図5 Web開発ツールのまとめ50個
図5 Web開発ツールのまとめ50個

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

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

Poet.so | Create Beautiful Images of Twitter Postshttps://poet.so/

Twitterの投稿をきれいな画像としてダウンロードできるサービスです。SNSへの投稿や、ツイートを保存しておきたいときに便利だと思います。

グラデーションの背景を8種類から選べて、文字サイズは2段階に変更できます。いいね、リツイートの数字は表示/非表示を切り替えられ、ダークモードの表示も可能です。画像全体のサイズはドラッグして変更します。

ブログなどにツイートをそのまま埋め込めるケースも多いですが、画像として扱う方が便利な場合も少なくないと思います。ツイートが消されても画像は残るメリットもありそうです。なお、日付やリアクションは英語表記になってしまいます。

図6 Twitterの投稿をきれいな画像としてダウンロードできるサービス
図6 Twitterの投稿をきれいな画像としてダウンロードできるサービス

おすすめ記事

記事・ニュース一覧