週刊Webテク通信

2016年11月第3週号1位は、より良いボタンをデザインするためのクイックガイド、気になるネタは、Spotify、誰でも利用可に 日本で本格展開始まる

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

1. A Quick Guide For Designing Better Buttons – Smashing Magazinehttps://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

より良いボタンをデザインするためのクイックガイドです。

  • 以下の項目で、ボタンデザインについて気をつけるべきことを解説しています
  • ボタンをボタンのように見せる
  • はっきりしたラベル(テキスト)を付ける
  • 見つけられるところにボタンを置く
  • ボタンを押しやすく、押したことがわかるようにする
  • 最も重要なボタンは強調する
  • ボタンデザインのチェックリスト
図1 より良いボタンをデザインするためのクイックガイド
図1 より良いボタンをデザインするためのクイックガイド

2. 4 Ways to Create Engaging Video Content from Still Images | Social Media Todayhttp://www.socialmediatoday.com/marketing/4-ways-create-engaging-video-content-still-images

静止画から動画を作る方法を4つ紹介しています。ツールではなく、手法の紹介です。

  1. スライドショー
  2. タイムラプス
  3. ピクシレーション(実写の人物をアニメーションのようにコマ撮りする撮影法)
  4. ストップモーション
図2 静止画から動画を作る4つの方法
図2 静止画から動画を作る4つの方法

3. Top 30+ Best CSS Framework 2016 for Web Designershttp://codeconvey.com/best-css-framework-2016/

レスポンシブなCSSフレームワークの2016年トップ30をまとめています。

順番が明確な順位というわけではないと思いますが、1つ目はBootstrap、2つ目がFoundationで、やはりこの2つがトップ2なのだと思います。この二つは機能が豊富なタイプのフレームワークで、ほかはシンプルで軽量な路線のものが目立ちました。

図3 レスポンシブなCSSフレームワークの2016年ベスト30
図3 レスポンシブなCSSフレームワークの2016年ベスト30

4. How to Share a Design System in Sketch (1/3)https://blog.brand.ai/how-to-share-a-design-system-in-sketch-1-3-245308f2d7f1#.fp028fj03

Sketchでデザインシステムを共有する方法を解説しています。デザインの基準となるスタイルガイド的なものをグループ間でどう共有するかです。

DropboxやGoogle Driveのようなクラウドサービスを利用してSketchファイルを共有する方法と、デザインシステム(スタイルガイド)の実例が紹介されていました。

図4 Sketchでデザインシステムを共有する方法
図4 Sketchでデザインシステムを共有する方法

5. Top 10 resources for designing email newsletters | Webdesigner Depothttp://www.webdesignerdepot.com/2016/11/top-10-resources-for-designing-email-newsletters/

メールによるニュースレター(メルマガやお知らせメール)をデザインするのに役立つリンク集です。

HTMLメールのデザインギャラリーやテンプレート、表示チェックツールなど10個のサイトやサービスが掲載されています。

図5 メールによるニュースレターを作るための情報源10選
図5 メールによるニュースレターを作るための情報源10選

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

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

Hero Patternshttp://www.heropatterns.com/

Hero PatternsはSVGを使った背景パターンを配布しているサービスです。あらかじめ用意されたパターンを元に簡単なカスタマイズができます。

変更できるのは背景色と模様の色&透明度です。パターンはCSSのコードをコピーして使用できるほか、SVG画像としてダウンロードすることも可能です。

ドットやラインなど使いやすそうな単純なパターンもありますし、結構複雑で面白いものもあります。CSSのコード自体をあとで自分でカスタマイズできますし、背景にちょっとしたアクセントを付けたい場合に便利だと思います。

図6 SVGの背景パターンを配布しているサービス
図6 SVGの背景パターンを配布しているサービス

おすすめ記事

記事・ニュース一覧