週刊Webテク通信

2017年7月第3週号 1位は,2017年のWebデザインのトレンド,気になるネタはカメラを向けるだけでナレーションしてくれるアプリ「Seeing AI」,MSが公開

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

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

1. Top 5 Design Trends of 2017 (So Far!) | Design Shackhttps://designshack.net/articles/inspiration/top-5-design-trends-of-2017-so-far/

2017年のWebデザインのトレンドについてまとめた記事です。

  1. 複数の要素にまたがって配置した文字
  2. 多角形
  3. グラデーション
  4. くっきりした色
  5. 実験的なナビゲーションパターン

1は,たとえば背景色と写真との両方に文字が載っているようなレイアウトのことです。

図1 2017年のWebデザインのトレンド

図1 2017年のWebデザインのトレンド

2. 5 Popular UX Patterns That Users Hate | Webdesigner Depothttps://www.webdesignerdepot.com/2017/07/5-popular-ux-patterns-that-users-hate/

ユーザーが嫌うUXパターンを5つ紹介しています。

  1. ポップアップ
  2. 大量のソーシャルメディアボタン
  3. ページ読み込み中の画面
  4. メガメニュー
  5. 無限スクロール

図2 ユーザーが嫌うUXパターン5選

図2 ユーザーが嫌うUXパターン5選

3. Methods to Organize CSS | CSS-Trickshttps://css-tricks.com/methods-organize-css/

CSSを設計していく上でのコーディングルール,命名規則などのソリューションを紹介しています。

以下の6つのものが紹介されていました。

  • OOCSS
  • SMACSS
  • Atomic CSS
  • MCSS
  • AMCSS
  • FUN

図3 CSSのコーディングルールいろいろ

図3 CSSのコーディングルールいろいろ

4. 6 Free Material Design CSS Frameworks for 2017 Compared — SitePointhttps://www.sitepoint.com/free-material-design-css-frameworks-compared/

マテリアルデザインのフレームワークを比較した記事です。

人気,CSSプリプロセッサ,ブラウザサポート,長所,短所などを各フレームワーク別にまとめています。

図4 マテリアルデザインのフレームワークを比較

図4 マテリアルデザインのフレームワークを比較

5. Material Design: 20 CSS Snippets You Will Lovehttp://www.webdesigndev.com/material-design-css-snippets/

マテリアルデザインのCSSコーディング例をまとめた記事です。

アニメーションするボタン,モーフィングするアイコン,ハンバーガーメニューなどを,コード共有サイトCopePenから紹介しています。

図5 マテリアルデザインのCSSコーディング例

図5 マテリアルデザインのCSSコーディング例

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

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

Website Speed Test - Image Analysis Tool by Cloudinaryhttps://webspeedtest.cloudinary.com/

Webページ内の画像の読み込みスピードテストと解析を行うWebサービスです。結果はABCのランクで評価されます。

画像をクラウドで管理してサイズ変更や加工なども行えるCloudinaryが提供しているサービスで,Cloudinaryを使うとどれだけパフォーマンスがアップするのかが表示されます。Cloudinaryの宣伝につながってるわけです。

ページ内の各画像について,フォーマットやサイズを変えることで,どのくらい軽量化できるかが分かります。また,実際に変換した画像を生成してダウンロードすることも可能です。

図6 画像の読み込みスピードテストと解析を行うサービス

図6 画像の読み込みスピードテストと解析を行うサービス

今週の気になるWebネタ

カメラを向けるだけでナレーションしてくれるアプリ「Seeing AI」,MSが公開 - CNET Japanhttps://japan.cnet.com/article/35104173/

Microsoftがカメラに写ったものをAIで認識して読み上げてくれるiPhoneアプリを公開しました。残念ながら日本ではまだ使えません。

カメラに写っている人やものを教えてくれるので,目が不自由な人をサポートするツールというわけですね。人物は顔認識され,登録されている人なら名前を呼び上げてくれるそうです。表情や服装も教えてくれるとのこと。

文字を認識したり,バーコードから商品情報を調べたりもできるようです。結果はテキストでも表示されますし,目が不自由な人専用というわけではないのでしょう。今後の機能強化に期待したいですし,他社から同様なアプリが登場するのも楽しみですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入