週刊Webテク通信

2019年5月第4週号1位は、 今でもファーストビューを気にする必要があるか?気になるネタは、ディズニー、Huluの完全支配権を獲得

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

1. Is 'the fold' still a thing in today’s scrolling and skimming culture?http://www.mobilespoon.net/2019/05/fold-still-thing-in-todays-scrolling.html

スクロールして流し読みする文化が広まった今でもファーストビューを気にする必要があるかを、数々の調査結果をもとに考察した記事です。

原題のfoldは折るという意味ですが、ここでは新聞の折り目のことで、新聞の折り目より上「Above the fold」をファーストビューの意味で使います。

みんな昔に比べて簡単にスクロールするようになったけれど、ファーストビューに重要な要素を入れた方がよいことは従来通りという結論に達していました。

  • 2010年はウェブサイトの訪問者は80%の時間ファーストビューを見ていたのに対し、2018年には57%に減った
  • Appストアのスクリーンショットを最後までスクロール(スワイプ)するのはたった13%

など、興味深い数字をいろいろ見ることができます。

図1 今でもファーストビューを気にする必要があるか
図1 今でもファーストビューを気にする必要があるか

2. From Zero to Hero: Look at Hero Images in Web Design | Tubik Studiohttps://tubikstudio.com/hero-images-in-web-design/

ヒーローイメージとは何か、なぜ重要なのか、目的を果たすためにどう作るべきかを解説した記事です。

なぜ重要なのか
  • 注意を引いて印象づける
  • 視覚的にメッセージを提供する
  • ナビゲーションを強化する
  • 感情面にアピールする
  • 美的に満足させる
事例の紹介
  • 明確で簡潔なキャッチフレーズを考え、画像と一緒に機能させる
  • フォントで楽しむ
  • ナビゲーション要素とヒーローイメージを連携させる
  • アニメーションを加える
  • 感情を呼びおこす
  • 芸術的な雰囲気を加える
図2 ヒーローイメージの重要性とどう作るべきか
図2 ヒーローイメージの重要性とどう作るべきか

3. Design Trends: When to Use Them + When to Ignore Them | Design Shackhttps://designshack.net/articles/trends/design-trends-when-to-use-them-when-to-ignore-them/

デザイントレンドを使うべきケースと、無視するケースとを紹介しています。

以下、無視するケースの内容です。

  • 変更するための特別な理由がない。⁠美しい」⁠他もやっている」では正当な理由にならない
  • 自分のブランドやデザインとトーンがマッチしない
  • 読んで理解するのがむずかしい
  • 大きすぎる、忙しい、実用的ではない
  • 帯域幅から画面上のスペースまで、リソースを使いすぎる
  • デバイス間での変換がうまくいかない
  • チームの誰かを不快にする
  • デザインを妨げたり、ページトラフィックと双方向性に悪影響を及ぼす
図3 デザイントレンドを使うべきケースと、無視するケース
図3 デザイントレンドを使うべきケースと、無視するケース

4. How to create a sticky hero section using CSS position sticky | CodyHousehttps://codyhouse.co/blog/post/sticky-hero-section

スクロール途中で固定されるヒーローイメージの作り方です。

スクロール途中で全画面に画像が固定され、テキストブロックが遅れてスクロールして真ん中まで来ると、画像と一緒にスクロールするという挙動です。

図4 スクロール途中で固定されるヒーローイメージの作り方
図4 スクロール途中で固定されるヒーローイメージの作り方

5. Google Fonts is Adding font-display 🎉—zachleat.comhttps://www.zachleat.com/web/google-fonts-display/

Google Fontsがfont-displayプロパティに対応しました。font-display: swapで、フォント読み込み時にテキストが消える問題が解決されます。

読み込み時のリンクの末尾に「&font-display: swap」を追加すればいいとのことです。

図5 Google Fontsがfont-displayプロパティに対応
図5 Google Fontsがfont-displayプロパティに対応

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

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

HoverSignal - best conversion rate optimization toolshttps://hoversignal.com/

HoverSignalは、ウェブサイトに簡単にゲーム的要素を追加できるサービスです。今のところ3つの「アプリ」が使えます。

Lucky Lotteryはスクラッチカードです。Social Proofは「今○○人がこのページを見ています」⁠○○人が今週このキャンペーンに参加しました」といった通知をサイト上に表示します。Easter Eggsは複数ページにあるプレゼントを探す、スタンプラリーのようなものです。

どれも、ゲーム的要素で気を引いてクーポンを与えて、メールアドレスを取得することを目的とした作りになっています。無料プランでも、3000インプレッションまで&このサービスのロゴが入る以外は、有料プランと同様に使えるようです。

図6 ウェブサイトに簡単にゲーム的要素を追加できるサービス
図6 ウェブサイトに簡単にゲーム的要素を追加できるサービス

おすすめ記事

記事・ニュース一覧