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

1. Bidirectional Scrolling is Here to Save Responsive Design - Marvel Bloghttps://blog.marvelapp.com/bidirectional-scrolling-save-responsive-design/

レスポンシブデザインの場合、縦方向と横方向のスクロールを組み合わせたUIにすることを勧める記事です。

たとえば、NetflexやAmazon Videoのように複数のカテゴリそれぞれにたくさんの項目を見せる必要がある場合、縦スクロールだけで構成すると、モバイルの場合には縦にやたらと長いページになってしまいます。

そこで、各カテゴリごとの項目は横スクロールで閲覧するように作れば良いということです。モバイルだけ横スクロールで、デスクトップでは横に何個か並べて折り返しても良いかと思いますが、同じサイトで複数のユーザー体験を与えるのは良くないということから、モバイルとデスクトップでUIを揃えることを推奨しています。

2. 3 Essential Design Trends, June 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/06/3-essential-design-trends-june-2018/

最近のウェブデザインから感じられるトレンドをまとめています。

1. フルスクリーンの写真
2. 分割画面の新たなパターン
3. ちょっとだけ透明度のあるカラーオーバーレイ

3. Downplaying Empty States in Design | Shakurohttps://shakuro.com/blog/downplaying-empty-states-in-design/

インターフェイスにおいて、なにもない「空」の状態をどうデザインするかについて考察した記事です。

以下の3つの状態について、それぞれ事例とともにどうすべきかを解説しています。

1. 初期状態
2. 完了した、OKした状態
3. 404エラーの状態

4. How to make cool Gradients – Prototyprhttps://blog.prototypr.io/how-to-make-cool-gradients-f24c8a696a3a

きれいなグラデーションの作り方を解説しています。RGBの値から1つまたは2つの値を少し変えることで、ソフトなグラデーションを作成できるとのことです。

また、同じサイト内で違うグラデーションを使う場合のために、1つ目のグラデーションで使った色のRGB値から1つの値だけを変えるなどした、バリエーションを作る方法も解説しています。

5. Background Design Trends & Styles for 2018 | Design Shackhttps://designshack.net/articles/trends/background-design-trends/

背景デザインのトレンドとスタイルをまとめています。

幾何学模様

• 線で作ったパターン
• 水彩
• グラデーション
• 泡と塊
• 抽象的な形
• 木目
• 白とグレー

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

• Instagram、「⁠ショッピング機能」を日本でも公開--商品写真からそのまま購入 - CNET Japan
  誰でも使えるというわけではないようですが、たとえばBASEの出店者なら利用できるそうです
• 「JSONという気味の悪い拡張子」“⁠誤訳⁠”で物議 東洋経済オンラインの記事修正「原文とかい離していた⁠」⁠ - ITmedia NEWS
  ツイッターでは結構長い間「JSON」の話題が盛り上がっていましたね
• AppleとGoogleが「テック中毒」対策を発表 スマホ使いすぎ問題は意外と深刻？ - ITmedia PC USER
  スマートフォンの使いすぎを防ぐためのアプリがほぼ同時に登場しました

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

SVG Animation Creator - Animate and Export SVG | SVGatorhttps://www.svgator.com/

SVGを素材としたアニメーションを作れるWebサービスです。Adobe Animate（旧Flash）やAdobe After Effectsのような、タイムライン操作でのアニメーション作成が可能です。

SVGを取り込んで、位置、回転、大きさ、透明度などをキーフレームで変化させることでアニメーションを作ります。ストップウォッチが動くサンプルファイルが用意されているので、それを参考にするとだいたいの操作は分かりそうです。

コードを表示することもできますが、コード自体を編集することはできないようです。作成したアニメーションはSVGファイルに書き出せます。ちょっとしたSVGアニメーションが簡単に作れるので、覚えておくといつか役立ちそうなサービスだと思いました。