週刊Webテク通信

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

ネットで見かけた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の拡張機能

おすすめ記事

記事・ニュース一覧