週刊Webテク通信

2019年10月第5週号1位は、色のコントラストのアクセシビリティへの俗説に対する反論、気になるネタは、iPhoneケースと合体する小型ドローン登場 重さ68グラム カメラ搭載で空からセルフィー

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

1. The Myths of Color Contrast Accessibilityhttps://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

色のコントラストのアクセシビリティに関する俗説とそれを否定する根拠とを解説しています。

  • 俗説1:Webコンテンツアクセシビリティガイドラインの要件は常に最適
  • 俗説2:テキストはAAA要件を満たす必要があり、そうでなければアクセシブルではない
  • 俗説3:インターフェイスコンポーネントのコントラスト比の基準もテキストと同じ
  • 俗説4:グレーの背景色にグレーのテキストのボタンはアクセシブルではなく認識できない
  • 俗説5:色覚異常のユーザーは、対照的な色の違いを区別できない
  • 俗説6:情報を伝えるのに色だけを手がかりにするのは十分ではない
図1 色のコントラストのアクセシビリティへの俗説に対する反論
図1 色のコントラストのアクセシビリティへの俗説に対する反論

2. The problem with dropdown fields (and what you should use instead) | Design Smartshttps://designsmarts.co/the-problem-with-dropdowns/

ドロップダウンの問題点と正しく使うためのヒントを解説しています。

ドロップダウンの良い点
  • スペースを節約できる
  • 標準的な入力方法である
  • あらかじめ用意した答えを集めることができる
  • 柔軟性がある
ドロップダウンの悪い点
  • 使うのが難しい
  • ユーザーはときどき見逃す
  • 標準状態では利用可能なオプションが隠れている
  • ユーザーの処理速度が遅くなる
図2 ドロップダウンの問題点と正しく使うためのヒント
図2 ドロップダウンの問題点と正しく使うためのヒント

3. 30 Creative Pinterest Design Boards You'd Love!http://www.webdesigndev.com/pinterest-design-boards/

デザインワークの参考になるPinterestのボードをまとめています。

UI/UXデザインをまとめたもの、ウェブデザインをまとめたものもありました。

図3 デザインワークの参考になるPinterestのボードいろいろ
図3 デザインワークの参考になるPinterestのボードいろいろ

4. Vector Creator — Create engaging illustrations in-browser for freehttps://icons8.com/vector-creator?ref=producthunt

用意されたイラスト素材を配置して、1枚の画像を作成して書き出せるサービスです。

アイコン素材でおなじみのICON8が作っています。ICON8は写真素材を組み合わせて画像を作成するツールも作っていて、以前紹介したことがあります。

図4 イラスト素材を配置して画像を作るサービス
図4 イラスト素材を配置して画像を作るサービス

5. 25 Days of CSS Animations: Teaching Myself CSS through Motion Design. - DEV Community 👩‍💻👨‍💻https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10

25日間でCSSアニメーションを学ぶ様子を作品とともにまとめた記事です。

人の作品を真似することから始めたこと、途中で自分のやっていることに価値があるのか疑問に思い、ウェブ制作に応用してみたことなど、考え方がしっかりしていて参考になります。

図5 CSSアニメーションを学ぶ様子をまとめた記事
図5 CSSアニメーションを学ぶ様子をまとめた記事

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

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

Direktor - The Bit.ly of URL Splittinghttps://direktor.io/

1つのリンクで複数のページにランダムに移動できるURLを作れるサービスです。ABテストなどに使えそうです。

作り方は簡単で、URLを1行に1つ記述していくだけです。生成されるURLに、自分の好きな文字列を入れることはできません。最初の1つのリンクは無料で、次からは1つ1.5ドルで作れます。月額7ドルの作り放題プランも用意されています。

わたしのやっているポッドキャストのリンクを作ってみました。ポッドキャストは配信先がたくさんあるので、ランダムにAnchor、Spreaker、Spotify、Apple Podcast、Google Podcastに飛ばすリンクとなっています。

図6 複数のページにランダムに移動できるURLを作れるサービス
図6 複数のページにランダムに移動できるURLを作れるサービス

おすすめ記事

記事・ニュース一覧