週刊Webテク通信

2017年9月第1週号 1位は，最近の重要なウェブデザインのトレンド3つ，気になるネタは，4Kの360度動画が撮れる！ リコーの全天周カメラ最上位機「THETA V」発表

Webテク, Webデザイン, Web広告, タイポグラフィ, CSS, アニメーション, JavaScript, Chrome, 写真, 画像, カメラ

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

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

1. 3 Essential Design Trends, September 2017 | Webdesigner Depothttps://www.webdesignerdepot.com/2017/08/essential-design-trends-september-2017/

最近の重要なウェブデザインのトレンドを3つ紹介しています。

  1. レインボーカラー
  2. ヒーローヘッダーの崩壊
  3. 暗いアニメーション

2は，トップページの最初に大きな写真や画像スライダーがある伝統的なスタイルとは違ったレイアウトが増えているということです。従来ならメインイメージがありそうな場所に文字だけという例などが取り上げられています。

このトレンドのほかの実例として，Evernoteのサイトも最近メインイメージがなくなり文字だけになっていました。

図1　最近の重要なウェブデザインのトレンド

図1　最近の重要なウェブデザインのトレンド

2. Typographical inspiration in trendy web designhttps://www.awwwards.com/typographical-inspiration-in-trendy-web-design.html

タイポグラフィをうまく使ったウェブデザインの実例を大量に紹介した記事です。

操作に合わせてテキストがアニメーションするものなど，アニメーション効果をうまく使ったものが目立ちました。

図2　タイポグラフィをうまく使ったウェブデザインの実例

図2　タイポグラフィをうまく使ったウェブデザインの実例

3. 25+ CSS Animation Libraries » CSS Authorhttps://cssauthor.com/css-animation-libraries/

CSSアニメーションのライブラリを多数紹介しています。動きを見られるデモページとダウンロードできるGitHubへのリンクのボタンがあって分かりやすいです。

スクロールと共にアニメーションするものや，セルアニメのように順番に再生されるアニメーションもありました。

図3　CSSアニメーションのライブラリいろいろ

図3　CSSアニメーションのライブラリいろいろ

4. jquery.devicemock.jshttp://rm-labo.com/labo/devicemock/

デバイスの画面に画像などが表示されているように見える，はめこみ合成のような表示を実現するJavaScriptのライブラリです。

ブラウザ，スマホ，タブレット，デスクトップPC，ラップトップPCの画面に，画像やdiv，iframeを表示できます。

図4　デバイスの画面にはめこみ合成した表示を実現するJSライブラリ

図4　デバイスの画面にはめこみ合成した表示を実現するJSライブラリ

5. WhatRuns - Discover What Runs a Websitehttps://www.whatruns.com/

表示しているウェブページに使われているテクノロジーを表示するChromeの拡張機能です。

使われているCMSやフロントエンドフレームワーク，JavaScriptフレームワーク，サーバーなどの情報を見ることができます。

図5　ウェブページに使われているテクノロジーを表示するChrome拡張機能

図5　ウェブページに使われているテクノロジーを表示するChrome拡張機能

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

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

26 Cool Online Photo Editors And Image Tools To Entertain Ourselveshttps://onextrapixel.com/photo-editors/

今回は，写真加工や画像作成ができるWebサービスを26個まとめた記事を紹介します。オンラインフォトエディターと，楽しむための画像編集ツールとの2つのカテゴリに分けて掲載しています。

Pixlr，Canva，Foter，PicMonkeyと，上位のものは有名で歴史もあるサービスばかりです。しかし，昔に比べるとインターフェイスが変わるなど進化しているものも多いので，これを機にチェックしてみるのも良いかと思います。

PixlrはAutodesk製だったはずですが，123RFというストックフォトサイトを運営する会社の表記しかありません。調べてみると今年3月に123RFがPixlrを買い取ったそうです。

図6　写真加工や画像作成ができるWebサービスいろいろ

図6　写真加工や画像作成ができるWebサービスいろいろ

今週の気になるWebネタ

4Kの360度動画が撮れる！ リコーの全天周カメラ最上位機「THETA V」発表 - 週刊アスキーhttp://weekly.ascii.jp/elem/000/000/403/403617/
360度カメラ「Insta360 ONE」発売--「マトリックス」風グルグル映像も手軽に - CNET Japanhttps://japan.cnet.com/article/35106462/

リコーの360度カメラのシリーズ最新モデル「THETA V」が発表されました。4K動画が撮影可能になるなど機能強化されています。中国メーカーのInsta360も4K動画対応の「Insta360 ONE」を発売開始しました。

開発元がInsta360 ONEで撮ったという，被写体を中心に360度グルグル視点が回る映像があるのですが，これはInsta360 ONEにヒモを付けてグルグル回しながら撮ったのではないかとのこと。利用シーンは限られそうですが面白いです。

VRでの利用など360度カメラの需要はますます高まりそうですが，一般の人への普及や認知度はいまひとつな感じがします。インスタ女子にはGoProが人気のようですが，Instagramが360度写真／動画に対応したらもっと売れるのかもしれません。

Webテク, Webデザイン, Web広告, タイポグラフィ, CSS, アニメーション, JavaScript, Chrome, 写真, 画像, カメラ

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote