週刊Webテク通信

2017年3月第4週号1位は、アライブデザインとスタティックデザインについて、気になるネタは、子供用Googleアカウントを作成できる「Family Link」発表、Android端末の利用を親が管理

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

1. Alive Design vs. Static Design: Mobile Experience for the Futurehttps://blog.prototypr.io/alive-design-vs-static-design-mobile-experience-for-the-future-d65666ea8b10#.od2r406vs

アライブデザインとスタティックデザインについて解説した記事です。生き生きとしたデザインと、静的なデザインといった対比となっています。

アライブデザインはalive、fresh、newといった言葉で説明されており、さらに、⁠あなたに合わせて仕立てられている(tailored to you⁠⁠」という要素も入っています。

良いアライブデザインの特徴として、以下の項目が挙げられていました。

  1. メインとなるユーザー体験を最初に経験させる
  2. その時々で異なる新しいコンテンツを提供する
  3. アニメーションや動画など動きのある要素を使う
  4. 動きのあるインタラクション
  5. ユーザー毎にカスタマイズする
図1 アライブデザインとスタティックデザインについて
図1 アライブデザインとスタティックデザインについて

2. 10 App Design Trends for 2017http://www.designyourway.net/blog/user-interface-design/10-app-design-trends-for-2017/

Webデザイナーにとっても注目すべき、モバイルアプリのトレンドを10個紹介しています。

  1. VRとAR
  2. UIよりUX
  3. シンプルさと快適さ
  4. クロスプラットホームなデザイン
  5. マテリアルデザイン
  6. 落ち着いた色
  7. ハンバーガーメニューはなくなるかもしれない
  8. ウェアラブルに適応
  9. コンテンツに焦点を当てる
  10. 一貫性のあるジェスチャー
図2 モバイルデザインのトレンド
図2 モバイルデザインのトレンド

3. 20 Sleek CSS Animations and Effectshttp://www.webdesigndev.com/css-animations-and-effects/

CSSによるアニメーション、エフェクトのコレクション的なものをまとめた記事です。

ローダー、ホバー効果、イメージフィルター、スピナー、プリローダー、バブル、ツールチップ、シャドウ、スクロールエフェクトなどのアニメーションがありました。

図3 CSSアニメーション&エフェクトいろいろ
図3 CSSアニメーション&エフェクトいろいろ

4. Web Design Tools for Beginners 2017http://spyrestudios.com/web-design-tools-for-beginners-2017/

初心者のためのWebデザインのためのツールを紹介しています。

Webサイトビルダー的なものだけでなく、モックアップや画像の作成ツール、レスポンシブデザインのチェックツールなど制作のワークフローの中で必要なものが掲載されていました。

図4 初心者のためのWebデザインツールのまとめ
図4 初心者のためのWebデザインツールのまとめ

5. The Best Design to Code Services for You in 2017 | Web Resources | WebAppershttp://www.webappers.com/2017/03/14/best-design-code-services-2017/

デザインデータからHTML/CSSを作るサービスを紹介しています。

PSDデータなどを元に機械的にHTML/CSSを生成するツールの紹介かと思ったのですが、そうではなく人間が作業をするというサービスでした。

WordPress化やbootstrapを指定してのHTML化もできるようで、コストも安くなかなか興味深いサービスだと思いました。

図5 デザインデータからHTML/CSSを作るサービス
図5 デザインデータからHTML/CSSを作るサービス

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

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

Animistahttp://animista.net/

Animista はCSSアニメーションを動きを確認しながら作成し、コードを生成できるサービスです。メニューバーのところに大カテゴリがあり、丸いボタンでさらにカテゴリが分かれています。

選んだアニメーションは、変化にかかる時間やイージング、ディレイなどを調整できます。ハートのボタンを押してお気に入り入れておくと、あとでまとめて1つのCSSファイルにまとめてダウンロードできます。

背景画像のアニメーションや、背景色が変化するアニメーションなども確認しながら簡単に作れますし、生成されるコードにはベンダープレフィックスも含まれているので、いざというときに重宝するサービスだなと思いました。

図6 CSSアニメーションを簡単に作れるサービス
図6 CSSアニメーションを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧