週刊Webテク通信

2020年2月第3週号 1位は,ヘッダーデザインのベストプラクティスと実例,気になるネタは,なぜ「VR動画」と「360動画」を分けるべきなのか

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

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

1. Website Header Design in 2020: Best Practices and Exampleshttps://shakuro.com/blog/website-header-design-in-2020-best-practices-and-examples

ヘッダーデザインのベストプラクティスと実例をまとめています。

  • ヘッダーサイズ
  • 視覚的な階層構造
  • 固定ヘッダー
  • ヘッダーによって伝えられるメッセージ
  • 関連する画像
  • ビデオまたはアニメーション
  • よくデザインされた行動への誘導
  • ウェブサイトのヘッダーに最適なフォント
  • シンプルなヘッダーデザイン
  • 隠れるナビゲーション(ハンバーガーメニュー)
  • モバイルヘッダーデザイン

図1 ヘッダーデザインのベストプラクティスと実例

図1 ヘッダーデザインのベストプラクティスと実例

2. Avoid These 10 UX Design Fails - Usability Geekhttps://usabilitygeek.com/avoid-these-10-ux-design-fails

UXデザインの失敗を10個まとめています。

  1. 使うべきじゃない場面で使用したチェックボックス
  2. 国による違いを無視している
  3. 言語の壁
  4. チェックボックスを逆に使う
  5. 色の選択ミス
  6. 機能より見た目を重視する
  7. 散らかった画面
  8. Netflixのカーソルを合わせると再生する機能
  9. Googleの初期の失敗
  10. 削除したメッセージの通知

4は,本来チェックを入れる動作に使うチェックボックスを,最初からチェックが入った状態で用意して,外す動作をしてもらうUXは良くないという話です。

図2 UXデザインの失敗10個

図2 UXデザインの失敗10個

3. 5 Web Design Trends For 2020 That Are Here To Stay With Us | Webdesigner Depothttps://www.webdesignerdepot.com/2020/02/5-web-design-trends-for-2020-that-are-here-to-stay-with-us/

2020年のウェブデザインのトレンドを5つ紹介した記事です。

  1. やりすぎを避けて最小限のナビゲーション方法を選ぶのが良い
  2. 空白によってメッセージを強調する
  3. 訪問者に顔を見せる
  4. 広く受け入れられている常識的なタイポグラフィを使い,訪問者に調和の取れた体験を与える
  5. ダークモードの人気は続いているので,試すだけでなく受け入れる

図3 2020年のウェブデザインのトレンド5つ

図3 2020年のウェブデザインのトレンド5つ

4. The Theory: A Semantic Color System - DEV Community 👩‍💻👨‍💻https://dev.to/ynab/a-semantic-color-system-the-theory-hk7

セマンティックなカラーシステムを勧める記事です。

例えば色に「否定的」⁠ネガティブ」といった意味のある名前を付けておくと,デザイナーと開発者が色を決定するときに役立つといった話をしています。

セマンティックなカラーシステムを作っておくと,ダークモードへの対応もしやすいとのことです。

図4 セマンティックなカラーシステムのすすめ

図4 セマンティックなカラーシステムのすすめ

5. Preloader Design Tips and Inspirations | UserGuidinghttps://userguiding.com/blog/preloader-design-tips-and-inspirations/

ページ読み込みなどの待ち時間に表示される,プリローダーをデザインするヒントと優れた例を紹介しています。

  • スピナーを読み込む代わりに魅力的なアニメーションを使用する
  • どれくらい時間がかかるかを人々に知らせる
  • 時間がかかっている理由を教える

図5 プリローダーをデザインするヒントと例

図5 プリローダーをデザインするヒントと例

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

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

Oncehttps://play.once.app/onboarding

Instagramのストーリーのような挙動をするウェブページを作れるサービスです。サイトにアクセスすると,まずサンプルとしてこのサービスの説明がストーリー風に表示されます。パソコンからだと,再生が終わると自動的に編集画面に移行します。

文字,画像,動きのあるステッカーなどを追加して,Instagramのストーリーを作るのと同じような感覚で制作できます。Instagramのような投票機能も追加できて便利です。

グラフィックソフトでストーリーサイズの画像をあらかじめ作っておいて,読み込んで使う方がやりやすいかもしれません。ストーリーを見る操作には多くの人が慣れているはずなので,いろいろなシーンで活躍しそうですね。

図6 Instagramのストーリーのようなページを作れるサービス

図6 Instagramのストーリーのようなページを作れるサービス

今週の気になるWebネタ

なぜ「VR動画」「360動画」を分けるべきなのか - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2002/17/news032.html

「VR動画」「360動画」を分けるべき,AIという言葉のニュアンスがそぐわないケースが多いので別の言葉があっていい,といった話をしています。とても良い問題提起だと思います。

360動画(360度動画)をVRと呼ぶのはやめようという話が記事タイトルにもなっていますが,2ページ目のAIの話の方が個人的には多くの人に読んで欲しいです。わたしはAI美空ひばりを追いかけてるんですが,批判の声に違和感を感じることも多いです。

「⁠⁠AI』という言葉に存在する『人とは異なる知性を持ったもの』というニュアンス」が反発を呼びがちなのは間違いないので,やはり別な言葉を使うのが良いのでしょう。スマートスピーカーをAIスピーカーと呼ぶ人が減っているのは良い傾向かと思っています。

著者プロフィール

芦之由(あしのよし)

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

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

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