週刊Webテク通信

2019年3月第2週号 1位は,CSSセレクタの指定方法をクイズ形式で学ぶ,気になるネタは,子供向けコンテンツ使い放題「Amazon FreeTime Unlimited」発表 Fireタブレット限定で

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

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

1. CSS Selectors Cheatsheet - FrontEnd30https://frontend30.com/css-selectors-cheatsheet/

CSSセレクタによる指定方法をまとめています。例文ごとに選ばれる要素はどれかを,図解で確認できます。

右上のスイッチでgameとanswersを切り替えられ,デフォルトのgameモードではクイズを解くように学べて面白いです。

gameモードでは選ばれる要素と思うものをクリックして正解なら色が変わります。answersにすると選ばれる要素が最初から色が変わって表示されます。

図1 CSSセレクタによる指定方法まとめ

図1 CSSセレクタによる指定方法まとめ

2. Mobile UI: Design Trends Setting the Tone for 2019https://icons8.com/articles/mobile-ui-design-trends/

2019年のモバイルUIのトレンドをまとめた記事です。

  1. AR(予測できないものから実用的なものに)⁠
  2. アプリ内のジェスチャー(強力なユーザー体験を)⁠
  3. アニメーション(カッコイイじゃなくスゴイへ)⁠
  4. コンテンツ指向のインターフェイス
  5. マイクロインタラクション
  6. 会話型インターフェイス

    図2 2019年のモバイルUIのトレンド

    図2 2019年のモバイルUIのトレンド

    3. How to design an accessible color scheme – Envoy Design – Mediumhttps://medium.com/envoy-design/how-to-design-an-accessible-color-scheme-4a13ca12c92b

    アクセシブルなカラースキームを作る方法を解説しています。ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)による標準に合わせたカラースキームを,Tanaguru,Contrast,Stark(Sketchプラグイン)といったツールを使って作る手順がわかります。

    レベルAA(最小標準)では,小さなテキストのコントラスト比は4.5:1以上,大きなテキストでは3:1以上。レベルAAA(拡張標準)では,小さなテキストは7:1以上,大きなテキストは4.5:1以上であるべきとのことです。

    図3 アクセシブルなカラースキームを作る方法

    図3 アクセシブルなカラースキームを作る方法

    4. Effective Use of Gradients in Design - 1stWebDesignerhttps://1stwebdesigner.com/effective-use-of-gradients-in-design/

    グラデーションを効果的に使ったウェブデザインのギャラリーです。

    イラストや図形を使ったデザインが多く,グラデーションを使うことで豪華な感じを出しています。

    図4 グラデーションを効果的に使ったウェブデザインのギャラリー

    図4 グラデーションを効果的に使ったウェブデザインのギャラリー

    5. 28 Design Tools in 28 Days – Prototyprhttps://blog.prototypr.io/28-design-tools-in-28-days-68247ae94542

    デザインツールを28個紹介しています。なぜ28個かというと,2月に毎日1つずつ紹介したからとのことです。

    イラストレーションキット/デザインをコードにするツール/共同作業スペース/デザインコレクション/プロトタイプ用素材/アイコンパック/モックアップツールにわけてまとめています。

    図5 デザインツールを28個紹介

    図5 デザインツールを28個紹介

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

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

    Unicode Calendar Generator | create ascii-esque calendarshttps://beautifuldingbats.com/calendar-generator/

    日付を設定すると,その日を目立たせたテキストのカレンダーを生成するサービスです。テキストなので,そのままメールやSNSに貼り付けられます。フォントによって崩れてしまいますが…。

    罫線のある上の2つは,Courierなどの等幅フォントを指定する必要があります。フォントを指定できるMac/iOSのメモやEvernoteなどのアプリにペーストすればきれいに表示できます。HTMLメールでも使えますね。

    その下の3つはソーシャルメディアなどでも使えるように作られています。Twitterだと文字数オーバーになってしまいますが,Facebookなどで使えそうです。

    図6 テキストのカレンダーを生成するサービス

    図6 テキストのカレンダーを生成するサービス

    今週の気になるWebネタ

    子供向けコンテンツ使い放題「Amazon FreeTime Unlimited」発表 Fireタブレット限定で - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1903/07/news044.html

    アマゾンジャパンで,子供向けのデジタルコンテンツが月額980円(プライム会員は480円)で使い放題になるサービスが始まりました。電子書籍や動画など,数千種類のコンテンツが使えるそうです。

    「Amazon FreeTime Unlimited」という名前にはキッズとかそういう類の言葉が入っていません。親が子供のFireタブレットを管理するペアレンタルコントロールアプリ「Amazon FreeTime」があり,その上で安心して子供に見せてあげてねとUnlimitedのコンテンツがあるということから「FreeTime」という名前がベースなんですね。

    プライム会員で小さい子供がいる親にとっては,かなり魅力的だと思います。とはいえ,子供にタブレットを与えることに否定的な人も少なくないですし,いつから与えるのがいいのかなど,子供とタブレット端末について考えるきっかけとなるサービスかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入