週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UX, カード型UI, Web開発, Twitter, バーチャル会議

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

ネットで見かけた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の投稿をきれいな画像としてダウンロードできるサービス

今週の気になるWebネタ

Facebook，メタバース「Horizon Workrooms」のβ版公開 「Oculus Quest 2」で世界中から参加可能 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2108/20/news069.html

Facebookから，バーチャル会議室「Horizon Workrooms」のオープンベータ版が一般公開されました。実際に使った人の感想をTwitterで見かけたのですが，とてもよくできているようです。

VR空間でのバーチャル会議に参加するにはOculus Quest 2が必要です。会社での会議のために社員全員に配るには，値段がネックになりますね。ビデオ会議の画面をVR空間に表示することで，パソコンからの参加もできるそうです。

バーチャル会議中に自分のパソコンを使ってメモを取ったり資料を見たりもできるそうで，よく考えられています。手の動きがそのままアバターに反映されるのも良さそうです。わたしはOculus Quest 2を持ってないし，バーチャル会議をする相手もいなさそうですが，いつか試してみたいです。

Webテク, Webデザイン, Web広告, UX, カード型UI, Web開発, Twitter, バーチャル会議

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote