週刊Webテク通信

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

ネットで見かけた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制作のチュートリアルビデオを無料で見られるサービス

おすすめ記事

記事・ニュース一覧