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

1. Cards and Composability in Design Systems – EightShapes – Mediumhttps://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e

カード型コンポーネントの構造やコンテンツ、スタイル、動作などを説明した記事です。

どういう画像が入るのか、テキストの長さはどのくらいか、どういうアクション（ボタン）が必要とされるのかなどを考えながら、カード型コンポーネントを設計していく考え方を解説しています。

特定の要素（たとえば画像、概要文など）がない場合にどうするか、横幅が可変した場合を考慮する、背景色が違う場合にも見やすくするなど、考えるべきポイントが分かります。

2. Why You Should Never Use Pure Black for Text or Backgroundshttp://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

ウェブデザインのテキストと背景色に、完全な黒を使わない方が良い理由をまとめた記事です。

100%の黒と白とではコントラストが大きすぎて目の疲れや不快感を引き起こすため、白背景に濃いグレーの文字、濃いグレーの背景に明るいグレーの文字といった組み合わせが良いと解説しています。

color contrast checker（カラーコントラストチェッカー）という、WCAG 2.0の業界標準に基づいて色のコントラストをチェックできるツールの紹介もあります。しかし、色のコントラストが低すぎることはチェックできても、高すぎるかどうかはチェックできないので、制作者が判断するしかないとのことでした。

3. 10 Code Snippets for Creating Masonry Grid Layoutshttps://speckyboy.com/snippets-masonry-grid-layouts/

Pinterestのようなレンガ組レイアウトのコードスニペットを紹介しています。

以前はJavaScriptを使っていましたが、今ではCSSだけでも実現できるようになりました。

4. 20 Responsive Image Galleries and Slideshows (2018) - Hongkiathttps://www.hongkiat.com/blog/free-responsive-image-gallery/

レスポンシブな画像ギャラリーやスライダーをまとめています。ウェブ、スマホの両方に最適化されたものが揃っています。

JavaScriptのフレームワークを設置するのではなく、デスクトップアプリやオンラインアプリでスライドショーを作ってから埋め込むタイプのものもありました。

クライアントが自分で作りたいという場合は、そういうビルダータイプのものを使って、できたコードをCMSに貼り付けるというワークフローが作れそうです。

5. 18 Twitter Accounts Every Web Designer Should Follow in 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/05/18-twitter-accounts-every-web-designer-should-follow-in-2018/

ウェブデザイナーがフォローすべきツイッターアカウントを18個紹介しています。

UXデザイナーを名乗っている人が多いところから、今のトレンドを感じました。

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

• Google、AIによる予約電話代行への批判に「AIだと名乗らせる」と説明 - ITmedia NEWS
  「⁠相手は自分がAIと話していることについては気づくようにする」と公式ブログで説明したとのこと
• ソフトバンクの「＋メッセージ⁠」⁠、サービス開始日に配信停止 何が起きたのか？ - ITmedia Mobile
  「⁠SoftBankメール」アプリが「＋メッセージ」アプリに自動アップデートされたユーザーが、アプリを消すという事例が相次いだことが理由だそうです
• Instagramがアンケートを楽しくするために絵文字スライダーステッカーを追加 | TechCrunch Japan
  使いどころが難しそうですが、無段階にスライドできるスライダーでのアンケートがつくれるようになりました

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

Product Timelines http://www.producttimelines.com/

Twitter、Facebook、Slackなどの有名プロダクトで、いつどんな機能が付いたかなどの歴史を時系列で見られるサービスです。9個のプロダクトそれぞれの歴史をタイムライン表示で紹介しています。

年表が横軸に表示され、年表内の項目を選ぶと画像や動画と解説文が表示されます。年表は拡大／縮小して横軸のサイズを変えられます。スマホでもフリックして見られますが、あまり快適ではありませんでした。

この年表表示は、Timeline JSというツールで作っています。Google スプレッドシートを使ってデータを用意すれば、この形式の年表を簡単に作れるようです。また、JSONのスキルがあれば自由にカスタマイズできると書いてありました。