週刊Webテク通信

2015年11月第4週号1位は、ワークフローを革新するアトミックデザインとSketch、気になるネタは、注文から1時間で商品が届くAmazon Prime Now が都内の一部エリアで開始

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

1. The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch — RE: Write — Mediumhttps://medium.com/re-write/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch-8b0fe7d05a37#.2ap0xwg9z

アトミックデザインの考え方とSketchを使うことで、デザインからコードまでのワークフローを革新しましょうという記事です。

アトミックデザインとは、Atom(アトム=原子)という言葉から来ていて、カラーパレット、フォント、独立した要素(ヘッダ、段落、ボタンなど)など核となる要素を原子とみなしています。原子が集まって分子、分子が集まって生命体ができるように、原子となる要素のデザインを元にしたルールに沿ってデザインしていく手法のようです。

このデザイン手法にはSketchを使うことを推奨しており、なぜSketchを使うべきかの解説もあります。

図1 アトミックデザインとSketchを使うワークフロー
図1 アトミックデザインとSketchを使うワークフロー

2. Better Icon Design in 6 Easy Stepshttp://blog.iconfinder.com/better-icon-design-in-6-easy-steps/

アイコンデザインを6つのステップで解説した記事です。

  1. 常にグリッドで始まる
  2. シンプルな、幾何学的な形で開始
  3. エッジ、ライン、コーナー、曲線、および角度を数字で指定
  4. アイコンセット全体で一貫したデザイン要素&アクセント
  5. 細部や装飾は控え目に
  6. 独自性のあるものを作る
図2 イコンデザインの6つのステップ
図2 イコンデザインの6つのステップ

3. Everything designers need to know about Foundation 6 | Webdesigner Depothttp://www.webdesignerdepot.com/2015/11/everything-designers-need-to-know-about-foundation-6/

フロントエンドフレームワークとしてBootstrapと並び有名なFoundationの新バージョンがリリースされました。

この記事では、Foundation 6についてデザイナーが知っておくべきことを、新機能を中心に簡潔に紹介しています。

新機能は以下となります。

  • 右から左へ書く言語のサポート
  • Flexboxを使ったグリッド
  • テキストのデザインをサポートする新たなクラス
  • 画面サイズによって選べるなど強化したナビゲーション
  • バッジ
  • スティッキー(スクロールしても上部に固定されるなど)
  • トグル
  • メディアオブジェクト(画像の横にテキストを並べるなどが簡単に)

以下の記事もご参考に。

図3 Foundation 6の新機能の紹介
図3 Foundation 6の新機能の紹介

4. Google+ | Google Web Showcase - Google Developershttps://developers.google.com/web/showcase/case-study/googleplus

Google+のリニューアルについてまとめた記事です。軽量化し、完全なレスポンシブになったとのことです。

機能的には「コレクション」⁠テーマに沿った投稿をまとめられる機能)「コミュニティ」⁠Facebookグループのようなもの)とを前面に打ち出し、趣味や興味によってつながるコミュニティとして差別化していくようです。

図4 Google+のリニューアルについて
図4 Google+のリニューアルについて

5. CSS Cursorhttp://css-cursor.techstream.org/

CSSでカーソルの形を変える指定をした場合、どの指定でどう変わるかを試せるサービスです。

ブラウザやOSによってどう見えるのかを確認する場合にも便利そうです。

図5 カーソルの形をCSSで変更した場合の確認ができるサービス
図5 カーソルの形をCSSで変更した場合の確認ができるサービス

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

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

6 Free Tools for Creating Your Own Icon Fonthttp://sixrevisions.com/tools/icon-font-generators/

今回は、アイコンフォントを自作できるWebサービスを6つ集めた記事を紹介します。用意されたアイコンから必要なものを選ぶだけでなく、自分でIllustratorなどで作ったファイルも使えるサービスです。

どのサービスも、アイコンをSVGファイルで用意することで、読み込んで使用できます。各サービスであらかじめ用意されているアイコンと、自らアップロードしたアイコンとをまとめてアイコンフォントを作成できます。

有償で追加のアイコンが選べたり、作れるプロジェクトの数を増やしたりサポートを受けるにはプレミアムメンバーになる必要があるなど、ちゃんと使うには有料となるサービスがほとんどです。

図6 アイコンフォントを自作できるWebサービスを6つ紹介
図6 アイコンフォントを自作できるWebサービスを6つ紹介

おすすめ記事

記事・ニュース一覧