週刊Webテク通信

2022年3月第4週号1位は、商品リストページでページネーションの代わりになるもの、気になるネタは、Apple、「iPadOS 15.4」配布開始 Macとのユニバーサルコントロール機能に対応

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

1. Alternatives to Pagination on Product-Listing Pageshttps://www.nngroup.com/articles/alternatives-pagination-listing-pages/

商品リストページでページネーションの代わりになるものを紹介しています。商品点数がそこまで多くない場合には、無限ローディングやもっと見る(Show More)ボタンを使ったページ遷移のない読み込みを使うことで、よりスムーズな操作を提供できます。

商品点数が多すぎる場合は、フッターナビゲーションにアクセスできない、製品リストのどこまで進んでいるのか理解できなくなるなどの理由で、無限ローディングは避けた方がよいとのこと。

また、商品詳細ページに移動したあと、リスト戻ったときにその商品があった位置にちゃんと戻れるよう設計することも大事です。それができていないサイトもあるとのことで、そういう例に遭遇したことがある人は多いと思います。

図1 商品リストページでページネーションの代わりになるもの
図1 商品リストページでページネーションの代わりになるもの

2. 3 Content Design Trends to Adopt Right Now - The Media Temple Bloghttps://mediatemple.net/blog/design-creative/3-content-design-trends-to-adopt-right-now/

コンテンツデザインのトレンドを3つ紹介しています。

  1. インクルーシブデザイン
  2. 各プラットフォームごとのデザイン
  3. デザインの最大化

デザインの最大化では、1つのコンテンツを分割してブログやSNSに利用したり、一連のブログ記事をまとめて電子書籍にするなどのコンテンツ戦略を解説していました。

一つのコンテンツを分解したり、あるいは複数のコンテンツをまとめることで、それぞれのプラットフォームに合わせたコンテンツを用意できるということですね。

図2 コンテンツデザインのトレンド3つ
図2 コンテンツデザインのトレンド3つ

3. Design by the Decades: Get inspired by 80s graphic design trends | Dribbble Design Bloghttps://dribbble.com/stories/2022/03/10/80s-graphic-design-trends

最近ブームのきざしのある80年代グラフィックデザインのトレンドを紹介した記事です。

  • トロピカルなデザイン
  • ポップカルチャーとネオン
  • サイバーパンク、サンセリフ、強いライン
図3 80年代グラフィックデザインのトレンド
図3 80年代グラフィックデザインのトレンド

4. Claymorphism: Will It Stick Around? — Smashing Magazinehttps://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/

クレイモーフィズムについてまとめた記事です。スキューモーフィズム→フラットデザイン/マテリアルデザイン→ニューモーフィズム→クレイモーフィズムとUIトレンドの歴史を解説した上で、クレイモーフィズムのユースケースやCSSでの実装方法を紹介しています。

ニューモーフィズムは背景色込みでのデザインなのに対し、自由な背景色を使えるクレイモーフィズムは応用範囲が広いとのことでした。

図4 クレイモーフィズムについてのまとめ
図4 クレイモーフィズムについてのまとめ

5. Top 15 Free HTML Landing Page Templates For 2022https://webdesigndev.com/15-free-html-landing-page-templates/

無料でダウンロードできるランディングページのテンプレートを15種類紹介しています。

さまざまな業種や用途で使えるランディングページが揃っています。Bootstrapをベースにしたものもいくつかありました。

図5 無料でダウンロードできるランディングページのテンプレートいろいろ
図5 無料でダウンロードできるランディングページのテンプレートいろいろ

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

先週の気になるツール/サービス

StrawPoll.com - Create a Straw Poll in Secondshttps://strawpoll.com/en/

StrawPollは投票フォームを簡単に作れる無料のサービスです。日程調整のための投票にも使えます。

Twitterの投票機能のようなフォームページを作って共有できます。投票結果は円グラフで表示されます。画像や動画をページに追加できますし、複数選択可能にするなどのカスタマイズも可能です。複数回の回答を防ぐ手段を選択できたり、締切日時を設定できるのも便利だと思います。

日程調整のツールは日本のもの海外のものいろいろありますが、このStrawPollの日程調整もシンプルな画面で個人的には好みです。しかし、日本語化されてなく、OKのときの記号が「○」ではなくチェックマークなので、日本人には受け入れられにくいとは思います。

図6 投票フォームを簡単に作れる無料のサービス
図6 投票フォームを簡単に作れる無料のサービス

おすすめ記事

記事・ニュース一覧