週刊Webテク通信

2019年3月第1週号 1位は,ソリッドアイコンとアウトラインアイコンはどちらが早く認識されるのか,気になるネタは,音楽ストリーミング売上がはじめてダウンロードを超えた,日本レコード協会発表

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

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

1. Solid Vs. Outline Icons: Which Are Faster to Recognize?https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/

塗りつぶされたアイコン(以下,ソリッドアイコン)と枠線だけのアイコン(以下,アウトラインアイコン)は,どちらが早く認識されるのかについてまとめた記事です。

通常はソリッドアイコンの方が早く認識されるけれど,逆の場合や両方同じ場合もあるそうです。

フキダシ,ゴミ箱,鍵のアイコンでは,フキダシの出っ張りや鍵のギザギザなどの特徴的な手がかりが目立つアウトラインアイコンのほうが早く認識されるとのことです。そして,親指を上げた手,ハサミ,電話,ツールのアイコンは,枠線だけでは手がかりとなる部分の間隔が狭いため認識しづらく,ソリッドアイコンの方が早く認識されるそうです。

また,星,ショッピングカート,旗はどちらでも同じように認識されます。

モバイルアプリのタブバーで,選択状態のアイコンをソリッドにしてほかのボタンをアウトラインにするのは一般的ですが,これは古い考えとのこと。既に選択しているものではなくまだ発見していない機能を見つけてもらうため,より早く認識されるソリッドアイコンを選択されていない要素に使うべきという主張でした。

図1 ソリッドアイコンとアウトラインアイコンはどちらが早く認識されるのか

図1 ソリッドアイコンとアウトラインアイコンはどちらが早く認識されるのか

2. Web Page Footers 101: Design Patterns and When to Use Eachhttps://www.nngroup.com/articles/footers/

フッタで使われる要素を解説した記事です。また,フッタのバリエーションや,よくあるフッタの失敗例と解決策も紹介しています。

フッタでよく使われる要素,推奨する要素は以下となります。

  1. 実用的なリンク(利用規約やプライバシーポリシーへのリンクなど)
  2. ページ上部のナビゲーションと同じもの
  3. 二次的な情報(求人,投資家向け情報,関連会社など)
  4. サイトマップ
  5. お客様の声,受賞歴
  6. 子会社やブランドのリスト
  7. お客さんと繋がる方法(ソーシャルメディアのアカウント,メルマガ購読ページ)
  8. 図2 フッタで使われる要素やフッタの失敗例と解決策

    図2 フッタで使われる要素やフッタの失敗例と解決策

    3. GitHub - LisaDziuba/Awesome-Design-Tools: The best design tools for everything.https://github.com/LisaDziuba/Awesome-Design-Tools

    GitHub上に,デザインツールの膨大なリストを作ったページです。カテゴリに分けて紹介しており,ツールの名前だけでなく簡単な説明もあります。

    無料のもの,Macだけのものはそれぞれアイコンで分かるようにしているのも気が利いていますね。

    図3 デザインツールの膨大なリスト

    図3 デザインツールの膨大なリスト

    4. Why You Should Be Using Parallax Scrolling Web Design? | Bloghttps://www.spinxdigital.com/blog/5-reasons-for-parallax-scrolling-web-design/

    視差スクロールを使うべき理由をまとめた記事です。

    1. 商品サイトに向いている
    2. 作り込んだページはユーザー体験を高める
    3. 直帰率を下げる
    4. よりうまくストーリーを伝える
    5. 自然なバックリンクとソーシャルシェアを生む
    6. 図4 視差スクロールを使うべき理由

      図4 視差スクロールを使うべき理由

      5. Logo Psychology: How to Design Logos that Inspire Trusthttps://blog.fluidui.com/logo-psychology-how-to-design-logos-that-inspire-trust/

      信頼されるロゴをデザインする方法を,心理学的なアプローチから解説しています。

      1. シンプルでわかりやすいか
      2. 属している業界を反映しているか
      3. 鮮やかな色を使用しているか
      4. 正しいトレンドを見ているか
      5. 正しいフォントを選んだか
      6. 図5 信頼されるロゴをデザインする方法

        図5 信頼されるロゴをデザインする方法

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

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

        Amino: Live CSS Editor for Chromehttps://aminoeditor.com/

        Aminoは開いているページにカスタムCSSを追加するChromeの拡張機能です。ページのCSSを自分が見やすいように調整できます。広告を消すのにも使えますね。

        Aminoで記述したCSSは,そのページだけに適用するか,ドメイン全体に適用するかを選べます。たとえば,日本語のフォントやサイズがいまひとつなウェブサービスをCSSで調整できます。

        ウェブデザインに使うためのサービスではありませんが,同じドメイン内の複数ページに渡ってCSSを追加するテストには便利そうです。デベロッパーツールだとそのページにしか変更は適用できず,変更したCSSをどこかに保存するのを忘れて閉じてしまうこともありますので。

        図6 カスタムCSSを追加するChromeの拡張機能

        図6 カスタムCSSを追加するChromeの拡張機能

        今週の気になるWebネタ

        音楽ストリーミング売上がはじめてダウンロードを超えた,日本レコード協会発表 | TechCrunch Japanhttps://jp.techcrunch.com/2019/02/26/music-streaming/

        2018年の日本の音楽配信において,ストリーミングサービス経由の年間売上がダウンロードによる年間売上を超えたそうです。Spotify,Apple Musicなどサブスクリプションモデルのストリーミングサービスが普及したことで,音楽配信売上全体もV字回復しています。

        以前読んだ海外の記事では,Apple MusicやSpotify Premiumなど有料サービスの場合,約1250回聴かれた場合にアルバム1枚の販売額と同等になるそうです。無料サービスの場合は,約3750回必要とのこと。

        ということで,ストリーミングサービスの利用者が増えて,ちりも積もって大きな金額になってきたということなのでしょう。イラストにもかきましたが,ストリーミングで聴くたびに楽曲の使用料が発生するわけなので,CDで買ってもストリーミングで聴くことがアーティストの応援につながるとわたしは考えています。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

バックナンバー一覧

コメント

コメントの記入