週刊Webテク通信

2022年5月第2週号 1位は，シンプルなインターフェイスを作る方法，気になるネタは，「NHKプラス」，「Firefox」での視聴が不可能に 5月23日から

Webテク, Webデザイン, Web広告, インターフェイス, モバイルファーストデザイン, メニュー, Figma, ライブ配信

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2022年4月25日～5月8日の間に見つけた記事のベスト5です。

1. Design Patterns: How to Create Simple Interfaces | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/05/design-patterns-how-to-create-simple-interfaces/

シンプルなインターフェイスを作る方法をまとめた記事です。正解とされているパターンを教えてくれるというより，正しい考え方のヒントを与える内容になっています。

人にやさしいインターフェイスの作り方を，以下の項目別に解説していました。

  • ボタン
  • ナビゲーション
  • アコーディオン
  • 日付

図1　シンプルなインターフェイスを作る方法

図1　シンプルなインターフェイスを作る方法

2. A Quick Guide To Mobile-First Design - Raw.Studiohttps://raw.studio/blog/mobile-first-design/

モバイルファーストデザインのクイックガイドです。モバイルファーストデザインとは何か，このアプローチを実装する利点，始めるためのいくつかの原則について説明しています。

モバイルファーストの原則として以下の項目が挙げられていました。

  • コンテンツファースト
  • 階層構造が全て
  • 簡単なナビゲーション
  • シンプルさを保つ

図2　モバイルファーストデザインのクイックガイド

図2　モバイルファーストデザインのクイックガイド

3. 8 CSS & JavaScript Snippets That Enhance Hamburger Menushttps://speckyboy.com/css-javascript-snippets-enhance-hamburger-menus/

ハンバーガーメニューを強化するためのCSS＆JavaScriptのスニペットをまとめています。

ボタン部分のアニメーションや，メニューが表示される効果が工夫されていて参考になりそうです。

図3　ハンバーガーメニューを強化するCSS＆JavaScript集

図3　ハンバーガーメニューを強化するCSS＆JavaScript集

4. A guide to minimalist design. The reign of white space. | by Inês Bernardino | UX Collectivehttps://uxdesign.cc/a-guide-to-minimalist-design-36da72d52431

ミニマリズムを取り入れたデザインの手引きです。ホワイトスペース／色／写真とイラスト／タイポグラフィと数字／形とパターンについて解説していて，作例も豊富です。

ミニマリズムのデザインコンセプトは何もない状態を受け入れることと，それをアートの一部にすることとありました。何もない状態＝ホワイトスペースということですが，ホワイトスペースは白に限らずいろんな色にチャレンジすることを勧めています。

図4　ミニマリズムを取り入れたデザインの手引き

図4　ミニマリズムを取り入れたデザインの手引き

5. Create Responsive Design in Figma | by Vikalp Kaushik | Apr, 2022 | UX Planethttps://uxplanet.org/create-responsive-design-in-figma-dae6e7782a00

Figmaでのレスポンシブなデザインの作り方を解説した記事です。

Figmaのオートレイアウト機能を使いつつ，ブレークポイントごとに違うフレームを表示できるBreakpointsプラグインを利用した方法を紹介しています。

図5　Figmaでレスポンシブなデザインを作る方法

図5　Figmaでレスポンシブなデザインを作る方法

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

先週の気になるツール／サービス

LiveReacting | Interactive live video streaminghttps://www.livereacting.com/

LiveReactingは投票機能やゲーム要素などを追加できるライブ配信ツールです。ブラウザ上で利用でき，YouTube，Facebook，Twitchでのライブに対応しています。

ライブ配信に追加できるのは，事前に録画した動画，カウントダウン，ゲーム，投票です。投票はコメントを元に自動集計する機能もあり，項目別に棒グラフで何%かを表示できます。また，投票機能はOBS，StreamYard，Restreamなど別の配信ツールでの利用もできるようです。

それぞれの機能はテンプレートを元に簡単に使えるようになっています。無料で使うこともでき，有料版はサブスクリプションだけでなく使う時間分だけ購入するプランもありました。

図6　投票機能やゲーム要素などを追加できるライブ配信ツール

図6　投票機能やゲーム要素などを追加できるライブ配信ツール

今週の気になるWebネタ

「NHKプラス」，「Firefox」での視聴が不可能に 5月23日から - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2205/02/news124.html

FirefoxでNHKプラスが見られなくなると発表されました。ネットではアンチの多いNHKがらみのネタなだけに，批判の声が多いようです。

これまでは推奨環境ではないながらFirefoxでの動画再生はできていたのが，今後は全く再生できなくなるとのこと。これは意図的にFirefox上で再生できなくするんだと推測されます。

サポートのコスト削減のためという声もありますが，FirefoxではNHKプラスでの動画再生時にスクリーンショットが撮れるらしいので，その対策という理由もありそうです。ともかくアンチに突っ込まれる要素になってしまうのは残念に思いました。

Webテク, Webデザイン, Web広告, インターフェイス, モバイルファーストデザイン, メニュー, Figma, ライブ配信

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote