週刊Webテク通信

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

ネットで見かけた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サービスいろいろ

おすすめ記事

記事・ニュース一覧