週刊Webテク通信

2016年7月第4週号 1位は,一貫性を持ったデザインをするための7つのヒント,気になるネタは,Google,機械学習を利用した「ふきだしズーム」を公開

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

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

1. 7 Tips for Designing Consistency | Design Shackhttps://designshack.net/articles/graphics/7-tips-for-designing-consistency/

一貫性を持ったデザインをするための,7つのヒントをまとまた記事です。

  1. メインカラーとセカンダリーカラーの色と色相
  2. タイポグラフィのサイズ,間隔と位置
  3. 要素のサイズと位置関係
  4. 空間をどう使うか
  5. ビジュアルはメディアを横断して使用する
  6. 自然なユーザーパターンに合わせる
  7. ユーザーインターフェイス要素の一貫性

図1 一貫性を持ったデザインをするための7つのヒント

図1 一貫性を持ったデザインをするための7つのヒント

2. UI Kits Suck* — Prototyping: From UX to Front Endhttps://blog.prototypr.io/ui-kits-suck-7bddcdbaa7e5#.gehmc2oev

UIキットはなぜUXデザインに使えないのかを解説しています。

  1. 一貫性を欠いている
  2. 実際に構築するのが難しい
  3. モバイルデザインに偏っている
  4. 美しすぎる

UIデザインキットはUXデザイナーではなくビジュアルデザイナーが作っているので,美しく作られているものの実用性や実現可能性があまり考えられていないということでした。

図2 UIキットはなぜUXデザインに使えないのか

図2 UIキットはなぜUXデザインに使えないのか

3. Anime.js Makes Animating CSS and SVG Easy | NOUPEhttp://www.noupe.com/development/javascript-jquery/anime-js-css-svg-98489.html

Anime.jsというCSS&SVGアニメーション用のJavaScriptライブラリを解説した記事です。

SVGを使ったパスに沿ったアニメーションやモーフィングの設定方法を紹介しています。

図3 アニメーション用JavaScriptライブラリAnime.jsの解説

図3 アニメーション用JavaScriptライブラリAnime.jsの解説

4. 40 CSS Libraries, Frameworks and Tools from 2016 - @speckyboyhttps://speckyboy.com/2016/07/13/css-libraries-frameworks-tools-2016/

Webデザインに役立つCSSライブラリやフレームワーク,ツールなどを集めて紹介しています。

スタイルガイドのツールや,レスポンシブなHTMLメールのためのフレームワーク,Flexboxを使うためのツールなども掲載されていました。

図4 Webデザインに役立つCSSライブラリやフレームワーク,ツールなど

図4 Webデザインに役立つCSSライブラリやフレームワーク,ツールなど

5. 25 Awe-Inspiring Examples of Text Over Images in Web Design | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/07/text-over-images-in-web-design/

Webデザインの参考になるサイトを集めた記事で,背景画像の上に大きく文字が載っているデザインをまとめています。

文字がアニメーションして現れたり,背景画像が変化したりスクロールによる効果があったりと,何かしらのヒネリがあるものが多いです。

図5 背景画像の上に大きく文字が載っているWebデザインいろいろ

図5 背景画像の上に大きく文字が載っているWebデザインいろいろ

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

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

Jaco - Record and analyze your users’ interactionshttp://www.getjaco.com/

Jacoは,Webサイトの訪問者の行動のすべてを「録画」して見ることができるサービスです。ユーザーがサイト上でどういう操作を行っているのか,どこで離脱しているのかなどを知ることができます。

ユーザー登録して,トラッキング用のコードをページに埋め込んでおくだけで使えます。ユーザーが行った行動は,まさにユーザーの画面を覗いているかのように再生できます。

ユーザーの使ったデバイスや画面サイズなども分かりますし,実際のユーザーの環境に合わせた画面サイズで再生されます。再生速度を変えたり,特定のシーンにメモを残す機能もあります。

基本有料のサービスですが無料のプランもあり,14日間試用できます。

図6 Webサイトの訪問者の行動を「録画」して見ることができるサービス

図6 Webサイトの訪問者の行動を「録画」して見ることができるサービス

今週の気になるWebネタ

Google,機械学習を利用した「ふきだしズーム」を公開―Play Booksのコミックが読みやすくなった | TechCrunch Japanhttp://jp.techcrunch.com/2016/07/22/20160721google-now-uses-machine-learning-to-make-reading-comics-on-phones-and-tablets-easier/

Google Play Booksで,マンガのフキダシ部分だけを拡大表示できる機能が搭載されました。これは,AI(人工知能)による機械学習によって自動でフキダシを認識させたそうです。

記事には詳しく載ってないのですが,フキダシを読む順番もAIがちゃんと認識したのでしょう。日本のマンガ,特に少女マンガはフキダシの順番を認識するのが人間でも難しいのですが,AIが学習していくと人間よりも正確に認識してくれそうな気もします。

この技術を応用して,Google画像検索で画像の文字の部分だけを大きくしたりできると,スマートフォンなど小さな画面で見るときに便利ですね。また,AIを使ってフキダシの中を他の言語に翻訳して書き換えるなんてことも自動でできそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入