週刊Webテク通信

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

ネットで見かけた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のストーリーのようなページを作れるサービス

おすすめ記事

記事・ニュース一覧