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

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

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

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

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

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

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

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

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

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

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

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

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

G Suite内で生き残っていたGoogle+がCurrentsに全面切り替え、完全にビジネス志向のSNSに | TechCrunch Japan
記事中の「クリックしても意味がなかった+1ボタンや興味あるページを集めてくれるはずだったSparks、1年経っても何をしているのか理解されなかったiRpples」という記述が辛辣で面白いです
SlackとAWSの統合がMicrosoft Teams+Azureコンビを焦らす | TechCrunch Japan
SlackのAmazonとの関係強化はライバルであるTeamsへの対抗策とのことです
Twitter、内容を読まずにRTしようとすると「読んだ？」と尋ねるテスト開始 - ITmedia NEWS
noteの投稿前の「確認」画面など、この手の取り組みはある程度の効果はあると思います

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

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

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

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

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

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

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