週刊Webテク通信

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

ネットで見かけた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モデルのスマホにハメコミ合成した画像を作れるサービス

おすすめ記事

記事・ニュース一覧