gihyo.jpサイトのロゴ

週刊Webテク通信

2018年6月第2週号1位は、縦方向と横方向のスクロールを組み合わせたレスポンシブデザインのススメ、気になるネタは、GitHubは「設計図共有サイト」？ 日経記事の見出しが話題に

2018-06-14

ネットで見かけた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を揃えることを推奨しています。

図1　縦方向と横方向のスクロールを組み合わせたレスポンシブデザインのススメ
図1　縦方向と横方向のスクロールを組み合わせたレスポンシブデザインのススメ

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

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

  1. フルスクリーンの写真
  2. 分割画面の新たなパターン
  3. ちょっとだけ透明度のあるカラーオーバーレイ
図2　最近のウェブデザインから感じられるトレンド3つ
図2　最近のウェブデザインから感じられるトレンド3つ

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

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

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

  1. 初期状態
  2. 完了した、OKした状態
  3. 404エラーの状態
図3　「⁠空」の状態のUXデザインについて
図3　「空」の状態のUXデザインについて

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

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

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

図4　きれいなグラデーションの作り方を解説
図4　きれいなグラデーションの作り方を解説

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

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

幾何学模様
  • 線で作ったパターン
  • 水彩
  • グラデーション
  • 泡と塊
  • 抽象的な形
  • 木目
  • 白とグレー
図5　背景デザインのトレンド＆スタイル
図5　背景デザインのトレンド＆スタイル

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

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

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

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

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

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

図6　SVGを素材としたアニメーションを作れるサービス
図6　SVGを素材としたアニメーションを作れるサービス

おすすめ記事

記事・ニュース一覧