週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

GoogleがiFrameに代わる遷移タグPortalsをデモ,サイト間の連携を大幅強化へ | TechCrunch Japan https://jp.techcrunch.com/2019/05/08/2019-05-07-google-rethinks-navigation-with-launch-of-portals-on-chrome-cana/
Safari,ダークモードに合わせてデザインを変えるCSS機能 | マイナビニュースhttps://news.mynavi.jp/article/20190509-820364/

GoogleがiFrameに代わる遷移タグPortalsを発表しました。また,SafariはMacのダークモードに合わせてデザインを変えるCSS機能を導入したそうです。

どちらもユーザーには便利だと思いますし,制作する側から見ると使ってみたくなる面白そうな機能です。しかし,GoogleとAppleが独自にブラウザを拡張していくとすると,それはやめて欲しいと願わずにはいられません。

ChromeとSafariのエンジンが別のモノになったところから,ブラウザ依存が増える悪い未来は予想されていましたが,なんとかお互い歩み寄ってほしいものです。ブラウザの機能が強化されるのは,既存サイトに手を加える案件を生むきっかけにもなるので,どんどんやってほしいという思いもあります。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

バックナンバー一覧