2018年10月第2週号 1位は、水平方向に並んだコンテンツが横スクロールするエリアを作る方法、気になるネタは、TBS、「いらすとや」キャスター起用ニュース伝えるVTuber

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

モバイル向けのインターフェイスでよく見かける、水平方向に並んだコンテンツが横スクロールするエリアを作る方法を解説した記事です。

以下の要素を満たした横スクロールする要素をCSS Gridによって実現しています。

CSS GridとFlexboxとのどちらを使った方が良いのかを、ケース別に分かりやすく解説しています。

CSS Gridはコンテナベース、Flexboxはコンテンツベース
CSS Gridには間隔（Gap）のプロパティがあるがFlexboxにはない
Flexboxは一次元、CSS Gridは二次元（Flexboxは単一の行または列に要素を配置するのに向き、CSS Gridは複数の行と列に要素を配置するのに最適）
FlexboxとCSS Gridの折り返しの違い

UXライティングにおける3つの要素と、各要素における注意事項をまとめています。

1 ユーザビリティ

2 動機

3 パーソナリティ

CSSでのバッジデザインのコーディング例を多数まとめた記事です。

アイコンフォントを使ったもの、アニメーションするもの、インタラクティブ性のあるものなどを掲載しています。

色のアクセシビリティについて解説しています。

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

Google マップの通勤/通学サポート機能が大幅強化。海外ではバスや電車の現在地の表示も可能に - PC Watch
電車やバスのリアルタイム現在地表示は現時点では日本で提供されていません
シックス・アパート、Webサイトにコードを埋め込んで利用できるフォーム | マイナビニュース
MovableType.netのフォーム機能部分だけを独立させたサービスが始まりました
Instagramアプリから「レストラン予約」が可能に--ぐるなびと提携 - CNET Japan
“⁠ユーザーが飲食店のビジネスプロフィールから「席を予約する」を選ぶと、ぐるなびの画面に遷移する⁠”とのことです

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

Logo Labは「あなたのロゴをテストできる」というサービスです。ロゴ画像をアップロードして、様々な角度からロゴを分析できるようになっています。

いろいろなサイズで見てもロゴとして機能する、解像度が低かったりぼやけていても分かる特徴がある、どこか一部分だけを見ても認識できる、などの良いロゴの条件に合っているかどうかを、視覚的に確認することができます。

また、モバイルデバイス用のアイコンになったイメージや、ほかのロゴと並んだときのイメージが見られるのも面白いです。点数を付けるなどの評価をしてくれるわけではありませんが、セルフチェックのために便利なサービスだと思います。

TBS NEWSのTwitterアカウントに、「⁠いらすとキャスター」（⁠いらすとやキャスターではありません）がデビューしました。フリー素材サイト「いらすとや」のイラストを使ったVTuberです。

いらすとやのイラストがいい感じに動きながらニュースを読み上げます。キャラクターはいらすとやに依頼してデザインしてもらったとのことで、いらすとやにもちゃんとお金が流れたんですね。最近は「note」の改善で有名な、UXデザイナー深津貴之さんがプロデュースしたそうです。

いらすとやのことを理解している娘にこの動画を見せたところ、爆笑していました。美少女VTuberとの差別化もありいらすとやに行き着いたらしいのですが、そのセンスもそれにOK出したTBSもすばらしいと思います。