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

1. 10 guidelines to improve your web accessibility | Aerolabhttps://aerolab.co/blog/web-accessibility/

ウェブアクセシビリティを向上させるためのガイドラインとして10項目を挙げています。

1. 色に依存しない
2. ズーム機能をブロックしない
3. Alt属性を使用する
4. ビデオにはサブタイトルとキャプションを付ける
5. セマンティクス=アクセシビリティ
6. 正しいマークアップを使う
7. 必要に応じてrole属性を使う
8. 隠れた要素について
9. ウェブアクセシビリティの基準に従う
10. 監査とレビュー

図1　ウェブアクセシビリティを向上させるための10のガイドライン

2. Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid – Smashing Magazinehttps://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/

新しいブラウザ用にFlexboxやCSS Gridを使いつつ，古いブラウザにはフロートでそれなりにレイアウトされるようにする，プログレッシブ・エンハンスメントのアプローチでのCSSレイアウトについてまとめた記事です。

デモページでは，フロート，Flexbox，CSS Gridと段階的にCSSを適用させてプレビューできます。

図2　プログレッシブ・エンハンスメントによるCSSレイアウトについて

3. 75 Web Animation Tools You Have to Try | Webdesigner Depothttps://www.webdesignerdepot.com/2017/08/75-web-animation-tools-you-have-to-try/

ウェブアニメーションのためのプラグインとライブラリを大量に掲載しています。

ちょっとしたローディングアニメーションから，ページ全体やページ遷移に使われるアニメーションまで，いろいろなケースに合わせたツールが見つかりそうです。

図3　ウェブアニメーションのためのツールいろいろ

4. 10 Free Breadcrumb CSS Snippets For Web Projectshttps://1stwebdesigner.com/breadcrumb-css-snippets/

パンくずリストのCSSコードを，コード共有サイトCodePenから10種類紹介しています。

シンプルなものは作るのが難しくないからか，掲載されているものは凝ったレイアウトのもの中心で，好みが分かれそうにも思えます。

図4　自由に使えるパンくずリストのCSSコード10選

5. 10 Custom Hover & Click Effects With CSS & JavaScripthttps://speckyboy.com/custom-hover-click-effects-css-javascript/

ホバーやクリック時の効果のサンプルを，コード共有サイトCodePenから10種類紹介しています。ホバー時の効果はモバイルでは使えませんが，今後もパソコン用には有効なのでしょう。

ボタンのアニメーションや，写真にカーソルを合わせると説明文などが表示されるもの，ツールチップなどが掲載されていました。

図5　ホバーやクリック時の効果10選

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

• Google Search Console がUIを刷新。機能拡張と2つの新機能も | 海外SEO情報ブログ
  デザインの刷新や機能強化されたGoogle Search Consoleが間もなくリリースされるようです
• PayPal 日本向け新ロゴはカタカナの表記付き - 週刊アスキー
  より日本に根ざした企業活動のために新しいコーポレートロゴを開発したとのことです
• 外出先からもスマホで「ルンバ」を操作--アイロボット，全モデルをWi-Fi対応に - CNET Japan
  今のルンバはスマートフォンでコントロールできるんですね

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

Firefox Sendhttps://send.firefox.com/

Firefoxが提供するファイル共有のWebサービスで，Firefox以外のブラウザでも利用できます。最大1GBまでのファイルをアップロードでき，ファイルは暗号化されるとのこと。

ファイルをアップロードすると，すぐに共有用のURLが生成されます。このURLをファイルを渡したい相手に教えることでファイル送信できるわけです。ダウンロード画面では，特にファイルのプレビューなどの機能はありませんでした。

1回ダウンロードされるか24時間経つと，ファイルは自動的に削除されるので安心です。実験段階のサービスのようですが，Firefoxのブランド力で安心感がありますし，継続すればニーズはあると思われます。

図6　最大1GBまで利用できるファイル送信サービス

今週の気になるWebネタ



DeNAのファッションメディア「MERY」が年内復活へ――小学館と共同出資会社を設立 | TechCrunch Japanhttp://jp.techcrunch.com/2017/08/03/mery-comeback/

盗用問題で公開を停止していたMERYが，新生MERYとなって復活するそうでネットがざわついています。DeNAと小学館との共同出資会社・株式会社MERYが設立し，運営体制を刷新した女性向けメディア「MERY」が始まるそうです。

過去の記事は一切使用しないということで，小学館はMERYのブランド力だけが欲しかったんだろうなと思ったのですが，ブランドよりドメインと各種SNSアカウントの方が財産じゃないかと指摘している人もいました。

そう考えると，すでに女子たちのスマホに入ってるMERYアプリも，アップデートしてそのまま使えるんだったら大きな財産ですよね。MERYはサイトやアプリのUI周りは非常に良くできていたので，どんなデザインで再スタートするのかにも興味があります。