週刊Webテク通信

2015年10月第2週号 1位は，アメリカ政府が作成したUIコンポーネント＆スタイルガイドの設計思想や開発ストーリー，気になるネタは，リビングをスマートにするGoogleの新作，Chromecast 2とChromecast Audioが登場

Webテク, Webデザイン, Web広告, UI, SVG, CSS, Google

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

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

1. 18F — Introducing the U.S. Web Design Standardshttps://18f.gsa.gov/2015/09/28/web-design-standards/

アメリカ政府が作成した「U.S. Web Design Standards」の設計思想や開発ストーリーをまとめた記事です。

政府のサービスのUIデザインやユーザー体験を一貫性のあるものにしようということで作られたもので，UIコンポーネント＆スタイルガイドとしてオープンソースで提供されています。

以下の4つのゴールを目指して作成したとのことです。

  1. 最高なものを最も簡単な方法で作る
  2. とことんアクセシブルに
  3. 柔軟性を持ったデザインに
  4. 再利用，再利用，再利用

なお，この記事と同じ内容がMediumに投稿されており，そちらが話題となっていました。このように，本家のブログの記事よりMediumに転載されているものの方が拡散している例を最近よく目にします。

図1　アメリカ政府が作成したUIコンポーネント＆スタイルガイドの設計思想や開発ストーリー

図1　アメリカ政府が作成したUIコンポーネント＆スタイルガイドの設計思想や開発ストーリー

2. SVGで画面全体に斜め線や曲線を引く | webOpixelhttp://www.webopixel.net/javascript/1024.html

Webページの背景などにSVGで生成した図形を使うためのコーディングの例を紹介しています。

画像で用意するより容量は軽くなりますし，ウィンドウサイズに合わせて生成したり拡大したりしてもキレイだというメリットもあります。

図2　SVGで画面全体に斜め線や曲線を引く方法

図2　SVGで画面全体に斜め線や曲線を引く方法

3. Bootstrap 4: New & Cool Features You’ll Love - Hongkiathttp://www.hongkiat.com/blog/boostrap-4-best-features/

現在アルファ版として提供されているBootstrap 4の新機能についてまとめた記事です。

  • LESSではなくSassを採用
  • 小さなスクリーンのための新しいグリッド
  • 相対的サイズ指定に対応
  • 新しくなったBootstrapカード
  • 新しいCSSリセットのモジュール
  • オプション扱いでのFlexboxのサポート
  • カスタマイズ性の向上
  • スペース調整のための新しいクラス
  • ツールチップとポップオーバー
  • 設計し直したJavaScriptプラグイン

図3　Bootstrap 4の新機能

図3　Bootstrap 4の新機能

4. Boost Your Projects with Premium Hand-Picked Resourceshttp://www.onextrapixel.com/2015/09/28/boost-your-projects-with-premium-hand-picked-resources/

Webサイト制作に役立つツール，サービス，テーマなどを多数紹介しています。

ブラウザの表示テストツールや，Webページの画面キャプチャサービス，WordPressのテーマなどが掲載されていました。

図4　Webサイト制作に役立つツール，サービス，テーマのまとめ

図4　Webサイト制作に役立つツール，サービス，テーマのまとめ

5. CSS Flip Book | Playground from ZURBhttp://zurb.com/playground/css-flip-book

ウィンドウサイズを変えると動くWeb版パラパラ漫画の実例と作り方を紹介しています。

連番のPNG画像と，CSSにより実現しており，ここで配布しているscssファイルなどを使って作れるようです。

図5　CSSでのパラパラ漫画の作り方

図5　CSSでのパラパラ漫画の作り方

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

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

Level Up Tutorials | Free video tutorials for web developers and designershttp://leveluptuts.com/

「Level Up」は，Web制作についてのチュートリアルビデオを提供しているWebサービスです。似たようなサービスは多数ありますが，Web制作のチュートリアルだけに特化しているのと，無料ですべての動画が見られることが特徴のようです。

Webサイトの構築，CSSによるスタイリング，Sketchによるデザイン，Sublime Textによるコーディング，WordPressやDrupalの使い方などが動画で勉強できます。ちょっと見てみただけですが，動画の画質も高いです。

有料のプロ版では，動画をダウンロードしたり，プロ版ユーザーだけが参加できるフォーラムに参加できるようです。徐々にプロ版だけの特典を強化していく戦略なのでしょう。

図6　Web制作のチュートリアルビデオを無料で見られるサービス

図6　Web制作のチュートリアルビデオを無料で見られるサービス

今週の気になるWebネタ

リビングをスマートにするGoogleの新作，Chromecast 2とChromecast Audioが登場 | TechCrunch Japanhttp://jp.techcrunch.com/2015/09/30/20150929google-invades-your-home-with-new-chromecast/

Google Chromecastの第二世代端末が発表されました。形が円盤状になり，直挿しタイプではなく本体からケーブルが伸びた形状になりました。赤，黄，黒の3色展開となっています。

テレビの裏に隠れるものなのにカラー展開は必要なのかなと思いましたが，人の家のテレビにつなぐために持ち運ぶようなことを考えると，気に入った色を選べるというのもアリかと考え直しました。

Apple TVと同様に，まだ4K対応はしませんでしたね。4K画質が必要という人には，4Kに対応したAmazon Fire TV（スティックタイプじゃない方）が第一候補ということになりそうです。

Webテク, Webデザイン, Web広告, UI, SVG, CSS, Google

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote