週刊Webテク通信

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

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

ネットで見かけた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つ紹介

今週の気になるWebネタ

注文から1時間で商品が届くAmazon Prime Now が都内の一部エリアで開始。プライム会員,2500円以上の注文限定,送料890円 - Engadget Japanesehttp://japanese.engadget.com/2015/11/19/1-amazon-prime-now-2500/

アマゾンが商品を1時間以内で配達するサービス「Prime Now」を開始しました。都内の対象エリアのみ,合計2500円以上の購入時が対象で別途送料890円がかかる,注文は専用のアプリで行うなど,さすがに誰もが気軽に頼めるわけではありません。

動画見放題のプライムビデオ,音楽聴き放題のPrime Music,そしてこのPrime Nowと,日本でも急にプライム会員向けサービスが充実してきました。これらが目当てでプライム会員になる人も多そうです。

ところで,Prime Nowのエリア外に住んでいる人でも,エリア内にいるときにその場所に届けてもらえると便利だと思うのですが,自宅住所以外には配送してもらえないんでしょうかね?

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入