週刊Webテク通信

2020年1月第3週号 1位は,ニューモーフィズムが2020年大きなトレンドにはならない理由,気になるネタは,YouTubeが子供向けコンテンツでのターゲット広告とデータ収集の制限を開始

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

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

1. Neumorphism will NOT be a huge trend in 2020 - UX Collectivehttps://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc

ニューモーフィズムは2020年大きなトレンドにはならないだろうという記事です。

これは,Neumorphism in user interfacesという記事に大きな反響があったことを受けての記事です。Neumorphismは「新しいスキューモーフィズム」とのことで,フラットデザインを経て,現実のものをリアルに模したスキューモーフィズムとは違った立体感を持ったデザインを表しています。

一般的なデザインスタイルになるほど汎用性がないので,そこまで流行らないだろうという予測です。コーディングが面倒なこと,可視性とアクセシビリティに問題がありそうな点も理由のようです。

図1 ニューモーフィズムが2020年大きなトレンドにはならない理由

図1 ニューモーフィズムが2020年大きなトレンドにはならない理由

2. Re-Imagining The Bottom Navigation Bar - The Startup - Mediumhttps://medium.com/swlh/re-imagining-the-bottom-navigation-bar-f6f4cb64afa6

下部ナビゲーションバーのデザイン例を6パターン紹介しています。

  • 垂直ポップアップナビゲーション
  • 水平ポップアップサイドナビゲーション
  • 非表示になる水平ナビゲーション
  • 中央ナビゲーションドロップダウン
  • ダイヤモンドナビゲーション
  • 幅を短縮した固定ナビゲーション

図2 下部ナビゲーションバーのデザイン例を6種類

図2 下部ナビゲーションバーのデザイン例を6種類

3. Min and Max Width/Height in CSShttps://ishadeed.com/article/min-max-css/

min-widthとmax-width,min-heightとmin-heightの利用法と使いこなしのヒントを説明しています。

ラベルテキストの文字数が少ない場合にボタンの幅が小さくなりすぎないようにmin-widthを設定する方法,逆に大きくなりすぎないようにmax-widthを設定した上でtext-overflow: ellipsisを使ってテキスト末尾を「…」にする手法などを紹介しています。

また,コンテンツが少ない場合にもフッタがウィンドウの一番下に配置されるためにbodyにmin-heightを設定するテクニックなども参考になると思います。

図3 min-width/heightとmax-width/heightの利用法と使いこなしのヒント

図3 min-width/heightとmax-width/heightの利用法と使いこなしのヒント

4. Category Page Design Examples: 6 Category Page Inspirationshttps://www.webfx.com/blog/web-design/category-page-design-example/

製品カテゴリページの優れたデザイン例を紹介した記事です。HP,Appleなど6つの企業サイトのカテゴリページを取り上げていました。

紹介したカテゴリページがなぜうまく機能するのか,自分のサイトのデザインに利用するヒントも解説しています。

図4 製品カテゴリページの優れたデザイン例

図4 製品カテゴリページの優れたデザイン例

5. Design Trends 2020: Outside the box | Vectornatorhttps://vectornator.io/blog/design-trends-2020/

2020年のデザイントレンドをベクターデザインツールのVectornatorがまとめた記事です。VectornatorはiPad用アプリからスタートし,macOS CatalinaのCatalystによりMac版も登場したばかりです。

  • 未来は今
  • 目を引く
  • 文化の影響を受ける
  • 新しい黒
  • ベゼルがなくなった

図5 2020年のデザイントレンド

図5 2020年のデザイントレンド

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

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

Typehut — Super simple publishinghttps://typehut.com/

Typehutは非常にシンプルな文書共有サービスです。ブログとして使えますし,ニュースレター,更新履歴のログ,プレスページ,イベント告知などアイデア次第でいろんな用途に使えそうです。

文書はマークダウン形式で書くだけで,メニュー類は一切ない割り切りが潔いです。画像はドラッグ&ドロップで追加できます。各文書にラベルをつけることで,絞り込んで表示することも可能です。

購読機能があり,メールアドレスを登録してくれた人に自動で更新情報がメールされるのも大きな特徴だと思います。無料でも特に制限なく使えますが,近日開始の月9ドルの有料プランにすると,独自ドメインが使えて,テンプレートのカスタマイズも可能になる予定です。

図6 非常にシンプルな文書共有サービス

図6 非常にシンプルな文書共有サービス

今週の気になるWebネタ

YouTubeが子供向けコンテンツでのターゲット広告とデータ収集の制限を開始 | TechCrunch Japanhttps://jp.techcrunch.com/2020/01/08/2020-01-06-youtube-starts-limiting-ad-targeting-and-data-collection-on-kids-content/

YouTubeが子供向けコンテンツから収集できるユーザーのデータを制限し始めました。子供向けコンテンツにはターゲット広告が使えなくなるなどの仕様変更があるそうです。

保護者の同意なしに子供の個人情報を収集してはいけないという米国の児童オンラインプライバシー保護法が元になっています。子供向け動画と判断,あるいは申告された動画は,無条件で視聴者は子供と見なされるようになりました。

子供向け動画はコメントや通知も無効になるそうで,子供向けコンテンツを作るユーチューバーには厳しい仕様変更となりそうです。YouTubeに動画をアップするたびに子供向けコンテンツかどうか聞かれるようになったのは,こういうことだったんだなとやっとで理解しました。

著者プロフィール

芦之由(あしのよし)

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

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

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