週刊Webテク通信

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

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

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

1. Creating Horizontal Scrolling Containers the Right Way [CSS Grid]https://medium.com/@dannievinther/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

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

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

  • ページの全体的なレイアウトにマージン,パディングを合わせる
  • スクロール可能なコンテンツの一部を端からはみ出させる
  • スクロールするときコンテンツがスクリーンの端から消えていく
  • コンテンツ間の隙間は,コンテンツと画面の端との間隔より狭くないといけない(最後までスクロールしたかどうかユーザーが分かるため)

図1 水平方向に並んだコンテンツが横スクロールするエリアを作る方法

図1 水平方向に並んだコンテンツが横スクロールするエリアを作る方法

2. Grid vs Flexbox: Which Should You Choose? | Webdesigner Depothttps://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

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

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

図2 CSS GridとFlexboxの実践的な使い分け方法を解説

図2 CSS GridとFlexboxの実践的な使い分け方法を解説

3. The 3 Elements of Great UX Writinghttps://blog.nomnominsights.com/the-3-elements-of-really-great-ux-writing/

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

1 ユーザビリティ
  • シンプルに保つ
  • ユーザーの疑問に先手を打つ
2 動機
  • 機能を起点にせず,利便性を起点としたコピーを書く
  • ユーザーを促し,楽しませ,安心させる
3 パーソナリティ
  • ブランドの語り口を決める
  • トーンを合わせる

図3 UXライティングにおける3つの要素

図3 UXライティングにおける3つの要素

4. CSS Badges to Level Up Your Projectshttps://speckyboy.com/css-badges/

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

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

図4 CSSでのバッジデザインいろいろ

図4 CSSでのバッジデザインいろいろ

5. A guide to color accessibility in product design | Inside Design Bloghttps://www.invisionapp.com/inside-design/color-accessibility-product-design

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

  • 十分なコントラストを持たせる
  • 色だけに頼らない
  • 選択状態の色には十分なコントラストを

図5 色のアクセシビリティについてのガイド

図5 色のアクセシビリティについてのガイド

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

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

Logo Lab - Test Your Logohttps://logolab.app/home

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

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

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

図6 様々な角度からロゴを分析できるサービス

図6 様々な角度からロゴを分析できるサービス

図7 ロゴを分析した例

図7 ロゴを分析した例

今週の気になるWebネタ

TBS,「いらすとや」キャスター起用 ニュース伝えるVTuber - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1810/01/news097.html

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入