週刊Webテク通信

2017年8月第2週号 1位は,ウェブアクセシビリティを向上させるための10のガイドライン,気になるネタはDeNAのファッションメディア「MERY」が年内復活へ――小学館と共同出資会社を設立

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

ネットで見かけた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. 監査とレビュー
  11. 図1 ウェブアクセシビリティを向上させるための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レイアウトについて

    図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 ウェブアニメーションのためのツールいろいろ

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

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

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

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

    図4 自由に使えるパンくずリストのCSSコード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選

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

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

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

    Firefox Sendhttps://send.firefox.com/

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

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

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

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

    図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周りは非常に良くできていたので,どんなデザインで再スタートするのかにも興味があります。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入