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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe Creative Cloudがアップデートして、Photoshopなどが大幅に機能強化しました。Photoshopの新機能として注目したいのが、人間の顔を自動で認識して簡単にレタッチできる機能と、画像内の文字と似たフォントをTypeKitから探せるという機能です。

顔を認識する機能はLightroomでも使えるそうですが、フィルターの「ゆがみ」に「顔立ちを調整」というメニューが搭載され、目、鼻、口といったパーツごとに大きさや位置などを調整できます。驚くほど自然な感じに調整できるのですが、スゴすぎて逆にこんなものかとすんなり受け入れてしまいそうです。

プリクラの目を大きくする機能はおなじみですし、スマホのアプリでも高度な顔の加工ができるものも多いので、Photoshopはやっとで追いつき、追い越したといった感じかもしれません。