週刊Webテク通信

2020年6月第3週号 1位は，CSSグリッドとFlexboxの違いと使い分け方，気になるネタは，ウェブ会議をクイズ番組風にエンタメ化--デジタルフリップ「Connected Flip」

Webテク, Webデザイン, Web広告, CSS, Flexbox, リモートワーク, テストツール, ウェブ会議

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

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

1. Grid for layout, Flexbox for componentshttps://ishadeed.com/article/grid-layout-flexbox-components/

CSSグリッドとFlexboxの違いと使い分け方を解説した記事です。記事タイトルは「グリッドはレイアウトのため，Flexboxはコンポーネントのため」となっています。

具体的な使用例と細かい解説がとても参考になります。CSSグリッドとFlexboxを組み合わせて使う例や，古いブラウザ用にCSSグリッドが使えない環境ではFlexboxが適用される記述方法も紹介しています。

図1　CSSグリッドとFlexboxの違いと使い分け方

図1　CSSグリッドとFlexboxの違いと使い分け方

2. The complete guide to CSS media queries | Polypane browser for developershttps://polypane.app/blog/the-complete-guide-to-css-media-queries/

CSSのメディアクエリに関する完全ガイドです。メディアクエリについてそんなに説明する内容はないだろうと思って読み進めたんですが，知らないことがいろいろありました。

解像度，画面の縦横比，ダークモードかどうか，タッチデバイスかどうかを判断する記述方法も紹介しています。

また，現在いくつかのブラウザでだけ実装されているメディアクエリ機能も興味深い内容でした。

図2　CSSメディアクエリの完全ガイド

図2　CSSメディアクエリの完全ガイド

3. Is Your Website Stressing Out Visitors? — Smashing Magazinehttps://www.smashingmagazine.com/2020/06/website-stressing-out-visitors/

ウェブサイトが訪問者にストレスをかけないためのヒントを紹介しています。

  • 自然の写真や自然の色を元にしたカラーパレットを使う
  • 予測可能なリズムをデザインで作る
  • 余計なノイズを取り除く

図3　ウェブサイトが訪問者にストレスをかけないためのヒント

図3　ウェブサイトが訪問者にストレスをかけないためのヒント

4. 20 Unmissable Websites, June 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/06/20-unmissable-websites-june-2020/

インスピレーションの元になりそうな，見逃せないウェブサイトを20個まとめた記事です。

昔のMac OSをイメージしたサイトは，ちゃんと操作できて面白いです。後半は黄色系のサイトが多いですね。

図4　見逃せないウェブサイトいろいろ

図4　見逃せないウェブサイトいろいろ

5. Remote Work in Design: Problems and Solutionshttps://shakuro.com/blog/remote-work-in-design-problems-and-solutions

デザイン業界でのリモートワークについて，問題点と解決策をまとめています。

タスクトラッカー，カレンダー，ビデオ会議，共有ホワイトボードのツールの例をいくつか紹介していて参考になります。

図5　デザイン業界でのリモートワークの問題点と解決策

図5　デザイン業界でのリモートワークの問題点と解決策

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

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

15+ Best Cross-Browser Testing Tools 2020 » CSS Authorhttps://cssauthor.com/best-cross-browser-testing-tools/

今回は，クロスブラウザでウェブサイト／ウェブアプリをテストするためのサービスを15個以上まとめた記事を紹介します。基本有料のものばかりですが，無料プランがあるサービスもあります。

各サービスの簡単な説明と特徴が記載されています。多くのサービスでテストを自動化する機能が搭載されています。「⁠Cross-Browser Testing」では，操作の手順を記録して，多数のブラウザで同じ操作のテストができます。

この分野，いくつかのメジャーなツールに集約されているかと思っていましたが，こんなに種類があるんですね。順番に試用していけば，かなりの期間無料で使えるのではとセコいことを考えてしまいました。

図6　クロスブラウザでのテストツールを多数紹介

図6　クロスブラウザでのテストツールを多数紹介

今週の気になるWebネタ

ウェブ会議をクイズ番組風にエンタメ化--デジタルフリップ「Connected Flip」 - CNET Japanhttps://japan.cnet.com/article/35155082/

バスキュールが発表した「Connected Flip」は，クイズ番組のようなデジタル手描きフリップを共有できるサービスです。ビデオ会議サービスと併用してリモートクイズ番組のようなことができます。

複数の参加者の端末に対し，出題，回答入力，回答集計，回答締切，正誤判定，結果発表まで管理できるそうで，数百万人規模までの同時参加も実現可能な拡張性があるそうです。

テレビのクイズ番組でも使われるような，ガチのビジネス寄りなサービスのようで，それなりの使用料がかかりそうです。まだ料金も未定のようですが，ともかくリリースされるのが楽しみなサービスです。

Webテク, Webデザイン, Web広告, CSS, Flexbox, リモートワーク, テストツール, ウェブ会議

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote