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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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