週刊Webテク通信

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

ネットで見かけた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 非常にシンプルな文書共有サービス

おすすめ記事

記事・ニュース一覧