週刊Webテク通信

2021年10月第4週号 1位は,効果的なランディングページをデザインするための5つの重要事項を例,気になるネタは,Apple Musicに「Voice Plan(ボイスプラン)」が登場 日本を含む17地域で2021年秋にサービス開始:Siri専用

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

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

1. 5 Pillars of Effective Landing Page Designhttps://blog.tubikstudio.com/effective-landing-page-design/

効果的なランディングページをデザインするための5つの重要事項を例とともに解説した記事です。

  1. CTA(コールトゥアクション)を明確に
  2. ビジュアルが重要
  3. テキストの量や内容を熟考
  4. 焦点を絞る
  5. レスポンシブな設計

図1 効果的なランディングページをデザインするための5つの重要事項

図1 効果的なランディングページをデザインするための5つの重要事項

2. A Deep Dive Into object-fit And background-size In CSS — Smashing Magazinehttps://www.smashingmagazine.com/2021/10/object-fit-background-size-css/

CSSのobject-fitとbackground-sizeの使い方について使用例とともに解説した記事です。

具体的なユースケースとして以下のコーディング例を紹介しています。

  • ユーザーアイコン
  • ロゴリスト
  • 記事のサムネイル
  • ヒーローエリアの背景
  • 画像に背景画像を付ける
  • 動画を背景に使う

図2 CSSのobject-fitとbackground-sizeの使い方

図2 CSSのobject-fitとbackground-sizeの使い方

3. Microinteraction in Design and Tips to Improve Your UX by Gapsyhttps://gapsystudio.com/blog/microinteractions-in-design/

マイクロインタラクションに関するガイドです。マイクロインタラクションによってユーザー体験を改善するためのヒントも紹介しています。

  • アニメーションはレイアウトだけでなくユーザーに役立つ機能的役割があることを忘れない
  • インタラクションで受けた心地よい体験がユーザーの再訪につながる
  • エキサイティングでわかりやすいものにして,複雑にし過ぎない
  • 機能がたくさんあればいいというものではない
  • アニメーションを多用しない
  • ユーザーの立場で考えて便利でわかりやすいものにする。アニメーション間の切り替え効果はスムーズで正確なものにする

図3 マイクロインタラクションに関するガイド

図3 マイクロインタラクションに関するガイド

4. The start of a new era for Responsive Web Design | by Francois Brill | Oct, 2021 | UX Collectivehttps://uxdesign.cc/the-start-of-a-new-era-for-responsive-web-design-6658a6bbeb9b

レスポンシブWebデザインのこれまでを簡単に振り返りつつ,新たな時代に突入したことを解説しています。

ユーザー自身の特定の好みやニーズに合わせて設定できるユーザープリファレンスベースのメディアクエリや,親コンテナに基づいてルールを設定できるコンテナクエリが,今後のレスポンシブWebデザインで重要になるとのことでした。

図4 レスポンシブWebデザインの新時代のはじまり

図4 レスポンシブWebデザインの新時代のはじまり

5. uiGradients - Beautiful colored gradientshttps://uigradients.com/

グラデーションのジェネレーターです。キーとなる色をベースにあらかじめ用意されたグラデーションを選べます。

グラデーションの角度を変えることはできますが,あとから色の変更はできません。CSSのコードを表示してコピーして使えます。

図5 グラデーションのジェネレーター

図5 グラデーションのジェネレーター

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

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

CSS backgroundshttps://superdesigner.co/tools/css-backgrounds

CSSの背景パターンを多数用意したサービスです。SVGではなくCSSグラデーションなどで実装した純粋なCSSを生成します。

背景色,図形の色を選ぶことができ,透明度と図形のサイズを変更できます。変更すると全ての背景パターンのプレビューが変更されるのでわかりやすいです。

デフォルトでの図形のサイズが大きめなので柄が主張しすぎに思えるのですが,サイズを小さくして地味目の色にすると,どれもいい感じに思えてくるはずです。

図6 CSSの背景パターンを多数用意したサービス

図6 CSSの背景パターンを多数用意したサービス

今週の気になるWebネタ

Apple Musicに「Voice Plan(ボイスプラン)」が登場 日本を含む17地域で2021年秋にサービス開始:Siri専用 - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/2110/19/news070.html

Apple MusicにSiri経由での利用に限定した月額480円のVoiceプランが発表されました。AirPodsやHomePod miniのユーザーに安価にApple Musicを使ってもらうプランのようです。

空間オーディオやロスレスオーディオ,歌詞,ミュージックビデオが利用できないなどの機能制限があります。Voiceプランは体験版的な意味合いもあると思うのですが,せっかくの空間オーディオが使えないのは残念です。

安価でお手軽に利用できるので学生にいいかと思ったのですが,大学生なら同額で学生プランが使えそうですし,親も使っているならファミリープランという選択肢もあります。曲のダウンロードもできないので,学生が通学中に音楽を聴くのにも向かないですね。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote