週刊Webテク通信

2019年8月第5週号 1位は， ボタンに処理中という状況を表示する必要があるとき，気になるネタは，BuzzFeedのMoodFeed機能は気分に合ったコンテンツを勧めてくれる

Webテク, Web広告, Webデザイン, Chrome, 拡張機能, SVG, AI

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2019年8月19日～8月25日の間に見つけた記事のベスト5です。

1. When You Need to Show a Button's Loading Statehttps://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/

処理の実行中という状況をボタンに表示する必要があるケースと，処理中を表すボタンデザインについて解説しています。

2秒以上かかる操作には，読み込み状態を視覚的に見せることで，ユーザーがもう一度ボタンを押さないようにします。処理中を表す要素はボタンの外ではなく，中に入れるべきとのことです。

ボタンは無効状態だとわかる色にして，処理中もボタンのラベルテキストは表示し続けます。ボタンの幅が限られている場合，ボタンに処理中を表すインジケーターを表示せず，ボタン自体をプログレスバーのようにして進行状況を表すと良いということでした。

図1　ボタンに処理中という状況を表示する必要があるとき

図1　ボタンに処理中という状況を表示する必要があるとき

2. Website Footer Design: 8 Tips and Trickshttp://www.webdesigndev.com/website-footer-design/

フッターデザインの8つのヒントをまとめた記事です。

  1. シンプルに保つ
  2. パーソナライズする
  3. 同じようなリンクや情報をグループ化する
  4. ボタンを追加する
  5. 魅力的なグラフィックを使う
  6. コピーライトマークを追加する
  7. 読みやすさとコントラストに考慮する
  8. 階層構造を使う

図2　フッターデザインの8つのヒント

図2　フッターデザインの8つのヒント

3. 20 Freshest Web Designs, August 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/08/20-freshest-web-designs-august-2019/

最近リリースされたデザインの優れたサイトを20個まとめています。

バリアブルフォントを販売しているKilotypeは，文字の上でカーソルを左右に動かすとウェイトが変わり，上下に動かすと傾きが変わるというインタラクションが面白いです。

ほかにも，ビジュアルとインタラクションに力を入れたサイトが揃っています。

図3　最新のウェブデザインまとめ

図3　最新のウェブデザインまとめ

4. Color Tools For Designers 2019 - Muzli - Design Inspirationhttps://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab

デザイナーのための色に関するツールをまとめた記事です。

カラーパレットを作るツール，コントラストのテストツール，CSSグラデーションのジェネレーターなどを紹介しています。

図4　デザイナーのための色に関するツールいろいろ

図4　デザイナーのための色に関するツールいろいろ

5. 10 best Chrome extensions for designers - UX Collectivehttps://uxdesign.cc/10-best-chrome-extensions-for-designers-a76540b93836

ウェブデザイナー向けのChrome拡張機能を10個紹介しています。

各種画面サイズへリサイズ，画面の動画キャプチャ，デベロッパーツール系のものなど，便利な拡張機能がまとめられています。

図5　ウェブデザイナー向けのChrome拡張機能を10個紹介

図5　ウェブデザイナー向けのChrome拡張機能を10個紹介

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

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

Get Waves – Create SVG waves for your next designhttps://getwaves.io/

波状のオブジェクトを作ってSVGを生成するサービスです。SVGコードをコピーするかダウンロードできます。

滑らかな波状だけでなく，ギザギザと階段状のオブジェクトも作れます。波の盛り上がってる部分の数をスライダーで調整できますが，高さや位置はランダムです。サイコロマークのアイコンボタンで，気に入るまでランダムに変更できます。

最近のウェブデザインで流行の波型を簡単に作れて便利だと思います。Figma上で直接このジェネレーターを使えるプラグインもあります。

図6　波状のオブジェクトを作ってSVGを生成するサービス

図6　波状のオブジェクトを作ってSVGを生成するサービス

今週の気になるWebネタ

BuzzFeedのMoodFeed機能は気分に合ったコンテンツを勧めてくれる | TechCrunch Japanhttps://jp.techcrunch.com/2019/08/22/2019-08-21-buzzfeeds-new-moodfeed-recommends-content-based-on-how-youre-feeling/

米BuzzFeedが，その日の気分に合ったコンテンツを見つけられるMoodFeedという機能をテスト的に始めました。記事に付けられたカテゴリではなく，AIでコンテンツを選んでいるようです。

6種類の気分を選ぶインターフェイスが，ホイール状でグルグル回せるところが面白いと思いました。ダブルクリックするとランダムで回ります。遊びゴコロある選び方がいいですね。

サイコロと同じ6種類というのが丁度いい選択肢の数なのかもしれません。Facebookの「いいね！」の気分を表す絵文字も6種類でした。

Webテク, Web広告, Webデザイン, Chrome, 拡張機能, SVG, AI

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote