週刊Webテク通信

2017年11月第5週号 1位は，ウェブサイトのカラースキームを作るための実践ガイド，気になるネタは，トヨタの小型ロボ「KIROBO mini」全国発売 クルマとも連携

Webテク, Webデザイン, Web広告, UI, UX, jQuery, 3D, ロボット

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

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

1. A Practical Guide For Creating the Best Website Color Schemeshttps://www.shopify.com/partners/blog/best-website-color-schemes

ウェブサイトのカラースキームを作るための実践ガイドです。

以下の項目に分けて紹介しています。

  1. 伝えたい感情から始める
  2. 色数を制限する
  3. 完全な黒を使わない
  4. 60:30:10ルールに従ってみる
  5. 最初にグレースケールでデザインする
  6. 重要度を色のコントラストで表現する
  7. 連続性を持たせる
  8. アクセシビリティに考慮する

カラースキーム作成に役立つツールもいくつか紹介しています。

図1　カラースキームを作るための実践ガイド

図1　カラースキームを作るための実践ガイド

2. Advocating for Accessible UI Design | CSS-Trickshttps://css-tricks.com/advocating-for-accessible-ui-design/

UIデザインのアクセシビリティについて，テクニカルではない領域でのヒントをまとめています。

  • アニメーションで簡単に
  • 背景とテキスト色に十分なコントラストを付ける
  • 画像の上に文字を載せるときは慎重に行う／もしくは載せない
  • フォントの太さとサイズによる読みやすさについてダブルチェックする
  • 外部リンクを分かるようにする
  • ソーシャルメディアのプロフィールへのリンクとシェアなどのボタンとの区別を付ける
  • アイコンと色だけで伝えようとしない
  • インタラクティブ性がないときにデザインがどう見えるか考える

図2　UIデザインのアクセシビリティについての主張

図2　UIデザインのアクセシビリティについての主張

3. 6 Animation Guidelines for UX Designhttp://www.designyourway.net/blog/user-experience/animation-guidelines-ux-design/

UXデザインにおけるアニメーションのガイドラインを6つ掲載しています。

  1. アニメーションはあとから考えるべきではない
  2. アニメーションは目的を果たさないとならない
  3. アニメーションはブランドを反映するべき
  4. アニメーションは主役ではない
  5. アニメーションは自然に感じされるものであるべき
  6. アニメーションは時間を無駄にさせてはならない

図3　UXデザインのためのアニメーションのガイドライン

図3　UXデザインのためのアニメーションのガイドライン

4. 10 Must-Have User Interface Design Toolshttp://www.webdesigndev.com/10-must-have-user-interface-design-tools/

ユーザーインターフェイスデザインのツールを10個まとめた記事です。

デザインツールだけでなく，フレームワークやアイコンフォントも紹介しています。

図4　ユーザーインターフェイスデザインのツール紹介

図4　ユーザーインターフェイスデザインのツール紹介

5. jQuery Pagination Plugins To Downloadhttp://www.designyourway.net/blog/resources/jquery-pagination-plugins/

ページネーションのためのjQueryプラグインを紹介しています。

Bootstrapなどのフレームワークと組み合わせて使い，レスポンシブなページネーションを実現するプラグインなどを掲載していました。

図5　ページネーションのためのjQueryプラグインいろいろ

図5　ページネーションのためのjQueryプラグインいろいろ

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

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

Threed.io - Generate custom 3D Device Mockups.http://threed.io/

スマホの画面に任意の画像をハメコミ合成できるサービスの3D版です。3Dで扱っているので，はめ込んだあとスマホをグルグル回転させて好きな角度を選べます。

スマホの3Dモデルは1種類だけですが，色は白と黒から選べます。影や光の反射をオフにしてフラットな感じに仕上げることもできます。背景色も変更可能で，背景なしにすれば透過PNGで書き出せます。

まだベータ版とのことで，今後機能が追加されてより便利になるのが楽しみなサービスです。ちなみに，スマホの3Dモデルに触らないよう何もないところをドラッグしないと回転しないので気をつけてください。

図6　3Dモデルのスマホにハメコミ合成した画像を作れるサービス

図6　3Dモデルのスマホにハメコミ合成した画像を作れるサービス

今週の気になるWebネタ

トヨタの小型ロボ「KIROBO mini」全国発売 クルマとも連携 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1711/22/news119.html

ウェブサイトで先行販売していたコミュニケーションロボット「KIROBO mini」の全国販売が開始されました。全国のトヨタの販売店で購入できるそうです。

利用するにはスマホアプリが必要で月額350円かかるとのこと。新aiboもPepperもそうですが，ハード代金＋月額サービス使用料というのがロボット販売の主流ということですね。

個人的には胸にバーンとロゴが入っているのでトヨタファン以外は買うのをちょっとためらうんじゃないかと思いました。OEMで違う会社から違うロゴで発売されても面白いかもしれません。

Webテク, Webデザイン, Web広告, UI, UX, jQuery, 3D, ロボット

著者プロフィール

芦之由（あしのよし）

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

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

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