gihyo.jpサイトのロゴ

週刊Webテク通信

2019年5月第3週号1位は、 有名サイトのデザインの変遷から見た廃れたトレンドと現在のトレンド、気になるネタは、GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ

2019-05-16

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

1. Changing The Face Of Web Design: A Case Study of 25 Years - Hongkiathttps://www.hongkiat.com/blog/changing-faces-of-web-design-25-years/

有名ブランド3つのウェブサイトの1990年代から現在までのデザインの変遷から、デザインの変化を見るとともに今後の参考にしようという記事です。

廃れたトレンド
  1. Flashアニメーション
  2. バックで音楽を流す
  3. 過剰なコンテンツ
現在のトレンド
  1. 固定ナビゲーションバー
  2. 個性的なフォント
  3. スライダー
  4. （ストックフォトではなく）独自の写真
  5. 行動を呼びかけるボタン
  6. 無限スクロールとカードデザイン
  7. フラットデザイン対スキューモーフィズム
  8. 立体的なリボン
図1　有名サイトのデザインの変遷を今後の参考に
図1　有名サイトのデザインの変遷を今後の参考に

2. How to Take Your Website Viral | Webdesigner Depothttps://www.webdesignerdepot.com/2019/05/how-to-take-your-website-viral/

拡散性の高いウェブサイトを作る方法を解説しています。

  1. 1人の人物の写真から始める
  2. ページを離れたくなくなるようにする
  3. デザイントレンドを利用しつつ可能性の範囲を広げていく
図2　拡散性の高いウェブサイトを作る方法
図2　拡散性の高いウェブサイトを作る方法

3. Modern CSS Frameworks to Speed up the Design Process - 1stWebDesignerhttps://1stwebdesigner.com/modern-css-frameworks-to-speed-up-the-design-process/

今どきのCSSフレームワークを多数紹介しています。

軽量でCSSだけに絞ったものと、JavaScriptなども含んだものとに分けて掲載しています。

図3　今どきのCSSフレームワークいろいろ
図3　今どきのCSSフレームワークいろいろ

4. Create a responsive grid layout with no media queries, using CSS Grid - Andy Bellhttps://andy-bell.design/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/

メディアクエリを使わずに、CSS Gridでレスポンシブなグリッドレイアウトを作る方法を解説した記事です。

CSSグリッドは既に92.33％の環境でサポートされているそうですが、非対応のブラウザにも配慮したコーディング例も紹介しています。

図4　メディアクエリを使わずレスポンシブなグリッドレイアウトを作る方法
図4　メディアクエリを使わずレスポンシブなグリッドレイアウトを作る方法

5. Beautifully Designed Examples of Asymmetrical Split Screens in Web Designhttps://speckyboy.com/asymmetrical-split-screens-web-design/

画面を非対称に分割したウェブデザインの事例をまとめています。

数年前に流行った左右分割レイアウトは2つの異なる情報を同時に見せるためでしたが、今の分割レイアウトは、レイアウトやコンテンツを面白くし、情報を創造的な方法で見せるために使われるとのことです。

図5　画面を非対称に分割したウェブデザインの事例いろいろ
図5　画面を非対称に分割したウェブデザインの事例いろいろ

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

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

Remove Background from Image – remove.bghttps://www.remove.bg/

以前紹介した自動背景切り抜きサービスのremove.bgに有料プランが登場しました。以前はできなかった高解像度画像の扱いも有料プランなら可能です。

サブスクリプションと買い切り両方のプランがあるのが便利です。プランはさらに細かく分かれており、どのくらいの解像度の画像を月に何枚処理したいかを選ぶとおすすめのプランを教えてくれます。低解像度の画像ならフリープランでも大丈夫です。

Photoshopエクステンションもあり、これはAPIを使って処理をします。どのプランもAPIのコールは月50回までとなっています。 なお、無料プラン、サブスクリプションで一番安いパーソナルプランは、商用利用が認められていないので注意が必要です。

図6　有料プランとPhotoshopエクステンションが登場したremove.bg
図6　有料プランとPhotoshopエクステンションが登場したremove.bg

おすすめ記事

記事・ニュース一覧