週刊Webテク通信

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

Webテク, Webデザイン, Web広告, レスポンシブデザイン, SVG, アニメーション, GitHub

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

ネットで見かけた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を素材としたアニメーションを作れるサービス

今週の気になるWebネタ

GitHubは「設計図共有サイト」？ 日経記事の見出しが話題に その後修正 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1806/05/news069.html

MicrosoftがGitHubを8200億円で買収しましたが，日本経済新聞が記事の見出しでGitHubのことを「設計図共有サイト」と表現したことが話題になりました。

GitHubのことをソフトウェア技術について全く分からない人たちに伝えるのは確かにむずかしいですし，わたしも含めウェブ制作に関わってる人でも完全に理解していないという人も多いでしょう。

設計図という表現に突っ込むよりも，代わりにもっと良い表現はないかとか，分かりやすくGitHubを説明するにはどうしたらいいかとか，前向きな議論が盛り上がると面白かったのかなと思います。

Webテク, Webデザイン, Web広告, レスポンシブデザイン, SVG, アニメーション, GitHub

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote