ネットで見かけたWebテク
1. 3 Essential Design Trends, September 2017 | Webdesigner Depothttps://www.webdesignerdepot.com/2017/08/essential-design-trends-september-2017/
最近の重要なウェブデザインのトレンドを3つ紹介しています。
- レインボーカラー
- ヒーローヘッダーの崩壊
- 暗いアニメーション
2は、
このトレンドのほかの実例として、
![図1 最近の重要なウェブデザインのトレンド 図1 最近の重要なウェブデザインのトレンド](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_001.png)
2. Typographical inspiration in trendy web designhttps://www.awwwards.com/typographical-inspiration-in-trendy-web-design.html
タイポグラフィをうまく使ったウェブデザインの実例を大量に紹介した記事です。
操作に合わせてテキストがアニメーションするものなど、
![図2 タイポグラフィをうまく使ったウェブデザインの実例 図2 タイポグラフィをうまく使ったウェブデザインの実例](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_002.png)
3. 25+ CSS Animation Libraries » CSS Authorhttps://cssauthor.com/css-animation-libraries/
CSSアニメーションのライブラリを多数紹介しています。動きを見られるデモページとダウンロードできるGitHubへのリンクのボタンがあって分かりやすいです。
スクロールと共にアニメーションするものや、
![図3 CSSアニメーションのライブラリいろいろ 図3 CSSアニメーションのライブラリいろいろ](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_003.png)
4. jquery.devicemock.jshttp://rm-labo.com/labo/devicemock/
デバイスの画面に画像などが表示されているように見える、
ブラウザ、
![図4 デバイスの画面にはめこみ合成した表示を実現するJSライブラリ 図4 デバイスの画面にはめこみ合成した表示を実現するJSライブラリ](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_004.png)
5. WhatRuns - Discover What Runs a Websitehttps://www.whatruns.com/
表示しているウェブページに使われているテクノロジーを表示するChromeの拡張機能です。
使われているCMSやフロントエンドフレームワーク、
![図5 ウェブページに使われているテクノロジーを表示するChrome拡張機能 図5 ウェブページに使われているテクノロジーを表示するChrome拡張機能](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_005.png)
そのほか、
- YouTube、
ロゴ刷新 デスクトップのダークモードやモバイルの再生速度選択など新機能も - ITmedia NEWS
縦長の動画も見やすく表示されるようになるそうです - プロジェクト管理ツール
「Backlog」、 教育機関向けに無償提供 - CNET Japan
プレミアムプラン(月額1万6800円) を教育現場に無償で提供するとのことです - Logitech、
「Surface Dial」 のようなコントローラー付きキーボード 「CRAFT」 発売 - ITmedia NEWS
ダイヤルを回してAdobeのアプリなどをコントロールできるそうです
先週の気になるWebサービス
26 Cool Online Photo Editors And Image Tools To Entertain Ourselveshttps://onextrapixel.com/photo-editors/
今回は、
Pixlr、
PixlrはAutodesk製だったはずですが、
![図6 写真加工や画像作成ができるWebサービスいろいろ 図6 写真加工や画像作成ができるWebサービスいろいろ](/assets/images/design/clip/01/weekly-web-tech/201709/07/thumb/TH800_006.png)