週刊Webテク通信

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

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

ネットで見かけた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 投票フォームを簡単に作れる無料のサービス

今週の気になるWebネタ

Apple,「iPadOS 15.4」を配布開始 Macとのユニバーサルコントロール機能に対応 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2203/15/news066.html

macOS MontereyとiPadOSがそれぞれバージョンアップして,ついにユニバーサルコントロールが使えるようになりました。Macのキーボード&マウス/トラックパッドでiPadを操作できます。

複数台のディスプレイをMacにつないだときと同じ感覚で,Macの画面の端からiPadの画面にポインタが移動します。iPadは以前からマウス,トラックパッドに対応していて,ジェスチャー操作を使ってかなり快適に操作できます。

iPadをMacのサブディスプレイや液晶タブレット代わりに使えるサイドカー機能とユニバーサルコントロールは利用シーンに合わせて切り替えられます。なお,ユニバーサルコントロールで複数台のMacを1組のキーボード&マウスで操作することも可能です。

著者プロフィール

アシカガコウジ

フリーのWebデザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote