週刊Webテク通信

2018年2月第1週号 1位は,ウェブページを評価する5つの指標とそれを元にしたデザイン改善案,気になるネタは,GoogleはAIカメラに「心に残る瞬間」を教え込めたのか

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

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

1. 5 Website Metrics You Can't Ignore (and How to Design for Them) | Webdesigner Depothttps://www.webdesignerdepot.com/2018/01/5-website-metrics-you-cant-ignore-and-how-to-design-for-them/

ウェブページを評価する5つの指標と,それぞれの指標を元にデザインをどう改善すべきかを解説しています。

  1. トラフィックソース(訪問者がどこから来たか)
  2. キーワード
  3. 訪問ユーザー(リピーターかどうか)
  4. 上位10ページ
  5. 離脱ページ

図1 ウェブページを評価する上での5つの指標とデザイン改善案

図1 ウェブページを評価する上での5つの指標とデザイン改善案

2. 10 Smallest & Fastest Frontend Web Dev Frameworks - Designmodohttps://designmodo.com/frontend-web-dev-frameworks/

軽量で読み込みが速いフロントエンドフレームワークを10個紹介しています。

Bootstrapのような高機能のフレームワークもいいですが,その分容量も大きくなっているので,ページのサイズを軽くできるこれらのフレームワークの利用も考えてみてはいかがでしょう。

図2 軽量なフロントエンドフレームワークいろいろ

図2 軽量なフロントエンドフレームワークいろいろ

3. Top 7 eCommerce Web Design Trends to Watch for in 2018https://webdesignledger.com/top-7-ecommerce-web-design-trends-watch-2018/#e8e9c102fc

Eコマースのウェブデザインのトレンドをまとめた記事です。

  1. 声で操作するユーザーインターフェイス
  2. モバイルフレンドリーなデザイン/専用モバイルアプリ
  3. より多くの動画コンテンツ
  4. スピードとセキュリティ
  5. 固定ナビゲーションバー
  6. マイクロインタラクション
  7. パーソナライズとブランディング

図3 Eコマースのウェブデザインのトレンド

図3 Eコマースのウェブデザインのトレンド

4. 10 Bootstrap 4 Code Snippetshttps://speckyboy.com/bootstrap-4-code-snippets/

Bootstrap 4をベースとしたコーディング例を,コード共有サイトのCodePenから紹介しています。

カードやflexboxなど,Bootstrap 4の新機能を紹介するためのコーディング例もあり,参考になります。

図4 Bootstrap 4をベースとしたコーディング例いろいろ

図4 Bootstrap 4をベースとしたコーディング例いろいろ

5. Css text effectshttp://ecard.enter-media.org/css-text-effects/

CSSによるテキスト効果をまとめています。CSSコードをコピーして使えますし,用意されたCSSファイルを読み込みクラスを指定するだけでも利用できます。

立体的,縁取り,エンボスなどいろいろな効果が用意されています。

図5 CSSによるテキスト効果まとめ

図5 CSSによるテキスト効果まとめ

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

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

COLORWISE | Find the best colors through the most voted products on Product Hunthttps://colorwise.io/

COLORWISEは人気のウェブサイトのカラースキームを集めたサービスです。5色のカラースキームが大量にリスト化されています。

最新のモバイルアプリ,ウェブサイト,ハードウェア,テクノロジーなどを紹介するProduct Huntで評価の高いプロダクトのサイトのカラースキームを紹介しています。人気のカラースキームというわけではなく,人気のプロダクトのカラースキームを参考にしようということですね。

色だけでなく,見出しや本文のフォントとサイズなども確認できて,簡単なデザインガイドラインのようになっています。参照元サイトのCSSから機械的に色を拾ってきているんだと思いますが,元サイトの印象とカラースキームとの印象が違っているケースが多いように感じました。

図6 人気のウェブサイトのカラースキームを集めたサービス

図6 人気のウェブサイトのカラースキームを集めたサービス

今週の気になるWebネタ

GoogleはAIカメラに「心に残る瞬間」を教え込めたのか - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1801/28/news011.html

GoogleのAI搭載小型ハンズフリーカメラ「Google Clips」の米国での販売がスタートしたようです。カメラがいいなと思うシーンを短い動画として勝手に撮影して保存するそうです。

いわゆるライフログカメラといわれるものは一定間隔ごとに写真を撮影するものが多いですが,電車の中とか勝手に撮影するのにふさわしくない場所も多いですし,あとから必要な写真を選ぶのも大変そうです。

それに比べるとGoogle Clipsのコンセプトはかなり良さそうだと思います。イベントの時とか飲み会の時とか,勝手に撮影してくれるとありがたいシーンは結構あるはずです。そのうちAIがSNSにアップするまで自動でやってくれるようになるのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入