週刊Webテク通信

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

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

ネットで見かけた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 アニメーションするドット絵を作れるサービス

今週の気になるWebネタ

Adobe Creative Cloud大規模アップデート,画像内のフォント検索や顔認識で強力レタッチなど - CNET Japanhttp://japan.cnet.com/news/service/35084651/

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入