週刊Webテク通信

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

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

ネットで見かけた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の背景パターンを配布しているサービス

今週の気になるWebネタ

Spotify,誰でも利用可に 日本で本格展開始まる - ITmedia ビジネスオンラインhttp://www.itmedia.co.jp/business/articles/1611/10/news126.html

招待制として日本でもスタートしていたSpotifyですが,ついに誰でもユーザー登録できるようになり,本格スタートしました。無料プランで使ってみていますが,日本のアーティストの曲もそれなりにあっていい感じです。

わたしは主にMacで使っているのですが,アプリケーションのUIが良くできている印象です。Apple MusicのUIと結構似ていますが,お互いに真似ているのでしょう。(世界では)後発のApple Musicの方が真似たところが多いのかもしれません。

iPhoneのSpotifyアプリから,MacのSpotifyアプリをリモコンのようにコントロールできて,なかなか良くできています。無料版だと音声の広告が入ってくるのですが,音声広告という新たなジャンルで面白い展開がありそうな予感がします。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入