2020年12月第1週号 1位は、CSSでのレイアウトの実装についての考え方、気になるネタは、Googleから新しい映像デバイス「Chromecast with Google TV」登場従来のChromecastとは何が違う？

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

CSSでのレイアウトの実装についての考え方を紹介した記事です。フロントエンド開発者がどう考えるかをわかりやすく解説しています。

まず細部は一旦脇に置いて、大きなレベルのコンポーネントにわけて考えてコーディングします。そのあと、詳細部分について細かく掘り下げます。たとえば、要素の数が可変する場合やレスポンシブでどう変化させるかなどです。

考え方としてはスタンダードな感じで、CSSコーディングをしている人は納得のいく内容だと思います。レイアウトを実現する前にいろいろなケースを考えることを、「⁠たくさんの質問をする」と表現し、実際にヒーローイメージについての質問を列記していました。

こういう「質問」は頭の中だけで考えがちですが、テキスト化してまとめておくのもよさそうだと気付かされました。

Figmaでレイアウトグリッドを設定する方法を説明するチュートリアルです。このチュートリアル自体がFigmaで作られているところが面白いと思ったので紹介します。

Figma上で解説を読みながら、実際に操作して確認できます。関連情報へのリンクも入れらますし、こういった形でのチュートリアルの提供は今後増えそうだと感じました。

固定されるサイドバーの作り方と、よくある問題とその修正方法を解説しています。

問題点とは、サイドバーの高さがウィンドウサイズより大きい場合、サイドバーの下部の要素に一時的にアクセスできなくなることです。このケースでは高さをCSSのcalc関数を使って計算することで対策していました。

インスピレーションの刺激になるウェブサイトをまとめています。

リンナイのマイクロバブルバスのサイトが紹介されていました。日本語の日本向けのサイトなのですが、リンナイの他のページと違い、やけに凝っていて驚きました。

ページネーションデザインのコーディング例を、CodePenよりまとめた記事です。

この記事、CodePenの埋め込み方が通常とは違ってますね。コードは表示されていませんが、その分シンプルで見やすいですし、操作もできていい感じです。

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

国会議員と霞が関職員のミーティングに「Zoom」を導入 Web会議を本格化 - ITmedia NEWS
Zoomのエンドツーエンド暗号化の提供が始まったからかと思ったら関係ありませんでした
Amazonかたる詐欺SMSに注意「⁠Amazonがロックされました」「⁠異常ログインの可能性があります」など - ITmedia NEWS
この手のメールはよく来ますが、詐欺SMSも増加してるんですね
流行語部門賞に「Zoom⁠」⁠ コロナ禍で検索数が激増 Yahoo!検索大賞2020 - ITmedia NEWS
「⁠Zoom」で検索した人の中には、レコーダーやマイクなどで有名なメーカーのZoomを検索した人も含まれているはずですね

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

Screenityは画面操作を動画で撮影できるサービスで、Chrome拡張機能で提供されています。ユーザー登録不要で完全無料です。

この分野のツールではLoomが有名ですが、Loomと同様にWebカメラを使って自分の映像を同時に記録できます。撮影中にペンツールでの描画やテキスト、矢印の追加ができるのはLoomにはない機能です。

撮影したあと簡単な編集ができるのですが、いらないシーンを部分的に削除できるのが便利そうです。動画はmp4、gif、webmとしてエクスポートするか、Googleドライブに保存できます。

Googleの「Chromecast with Google TV」は従来のChromecastとどう違うかを解説した記事がありました。付属のリモコンを使って自ら動画や音楽を再生できるようになったのが違いとのことです。

スマートフォンなどから再生の指示を出すのではなく、Amazon Fire TV、 Apple TVのようにその端末だけで完結するようになったということですね。Android TV向けアプリもインストールできます。

見たい番組を検索するための文字入力はスマホでやった方が早いと思いますが、Chromecast with Google TVはGoogleアシスタント搭載なので音声での検索もできますね。