週刊Webテク通信

2016年6月第5週号1位は、Webデザインにおける七つの大罪、気になるネタは、Adobe Creative Cloud大規模アップデート、画像内のフォント検索や顔認識で強力レタッチなど

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

1. 7 Deadly Web Design Sins You Might Be Makinghttps://blog.kissmetrics.com/7-deadly-web-design-sins/

やってしまわないように気をつけた方がいい、Webデザインにおける七つの大罪を紹介した記事です。

  1. 小さすぎる文字
  2. 動くスライダー
  3. コントラストが低い文字
  4. 行間が詰まりすぎな文字
  5. 文章一行の横幅が長すぎる
  6. ボタンなど行動を起こさせる要素にアクセントとなる色を使っていない
  7. 一般的なデザインのルールを破っている

ほとんどが、文字に関する内容でした。

図1 Webデザインにおける七つの大罪
図1 Webデザインにおける七つの大罪

2. Improve Call To Action With These 20 Code Snippetshttp://www.onextrapixel.com/2016/06/25/improve-call-to-action-with-these-20-code-snippets/

Call To Action(CTA、ボタンなど行動を起こさせる要素)を改善するためのコーディング例をまとめた記事です。

改善というよりも、ちょっと変わった目を引く効果のあるエフェクトが多いラインナップでした。

図2 ボタンを改善するためのコーディング例20選
図2 ボタンを改善するためのコーディング例20選

3. Traversing the UX Prototyping Landscape — Lucid Software Design — Mediumhttps://medium.com/lucid-software-design/traversing-the-ux-prototyping-landscape-33edc700c1bd#.mbmzbpnbz

UXのプロトタイピングツールについて考察した記事です。プロトタイピングツールの名前と、どういう位置付けかがざっくりと分かります。

各種プロトタイピングツールをどう選ぶのかの解説や、InVisionというツールで制作する際のヒントなどを紹介しています。

図3 UXプロトタイピングツールについて
図3 UXプロトタイピングツールについて

4. 15 Inspiring UX Design Elements that Delight The User | JUST™ Creativehttp://justcreative.com/2016/06/20/15-inspiring-ux-design-elements-that-delight-the-user/

ユーザーを楽しませるUXデザインの要素を紹介しています。

面白い効果を使ったUXデザインの例が、動きが分かるようにGIFアニメで紹介されています。

図4 ユーザーを楽しませるUXデザインの要素いろいろ
図4 ユーザーを楽しませるUXデザインの要素いろいろ

5. 15 Great Bootstrap Code Exampleshttp://spyrestudios.com/handy-bootstrap-code-examples-snippets/

Bootstrapをベースにしたいろいろな要素のコーディング例をまとめています。カード型要素やログイン画面、スライダー、料金表などが紹介されていました。

Bootstrap用のコードを共有するBootsnipp、Bootdeyといったサービスから探しているようで、リンク先のこれらのサイトからもっといろいろなコーディング例が探せます。

図5 Bootstrapをベースにしたコーディング例いろいろ
図5 Bootstrapをベースにしたコーディング例いろいろ

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

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

Pixel Art to CSShttp://pixelart.jvrpath.com/

Pixel Art to CSSは、ドット絵を描くとCSSのコードを生成してくれるサービスです。アニメーションするドット絵も作れるところが面白いです。

ドット絵のタテヨコのサイズや1つのドットの大きさは自由にカスタマイズできます。色を選んで1ドットずつ塗りつぶしていくだけで、描画のための便利なツールは特にありません。また、アニメーションを作る場合に、前の絵を薄く表示する機能などもありませんでした。

ドット絵はCSSのbox-shadowで描画されます。アニメーションもCSSアニメーションで実現されるので、あとからCSSで動きのタイミングなどをコントロールすることも可能です。

図6 アニメーションするドット絵を作れるサービス
図6 アニメーションするドット絵を作れるサービス

おすすめ記事

記事・ニュース一覧