週刊Webテク通信

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

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

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

今週の気になるWebネタ

子供用Googleアカウントを作成できる「Family Link」発表,Android端末の利用を親が管理 - Engadget 日本版http://japanese.engadget.com/2017/03/16/google-family-link-android/

Googleが,13歳未満の子供のAndroid端末の利用を保護者が管理できる「Family Link」を発表しました。また,これにより13歳未満の子供でもGoogleアカウントを持てるようになるそうです。

親も子供もAndroid端末を使う必要があるということですし,どこまで子供の端末をコントロールできるのか不明な点も多いのですが,ともかく便利そうです。同様の機能がiPhoneにも欲しいですね。

また,親世代,シニア世代のスマホが苦手な人たちのために,子供が親の端末を管理できるような仕組みがあるといいですよね。親が管理するというより親を管理するためのペアレンタルコントロールが必要だと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入