週刊Webテク通信

2021年1月第3週号 1位は，2021年に注目すべきEメールのデザイントレンド，気になるネタは，Facebook，ページでの「いいね」を廃止し，「フォロー」に一本化へ

Webテク, Webデザイン, Web広告, Eメール, ヒーローイメージ, UI, UX, CSS, Facebook

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

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

1. Email Design Trends for 2021 - Designmodohttps://designmodo.com/email-design-trends-2021/

2021年に注目すべきEメールのデザイントレンドについてまとめています。ニュースレター／メルマガをHTMLメールとして作る場合のデザインについてですね。

  • パーソナライズ
  • 長いテキスト
  • カード
  • 大きく太いタイポグラフィ
  • アルティメットグレーとイルミネーションイエロー（Pantoneの2021年の色）
  • （ストックフォトではなく）本物の画像
  • イラスト
  • アニメーションGIFとインタラクティブ機能

図1　2021年に注目すべきEメールのデザイントレンド

図1　2021年に注目すべきEメールのデザイントレンド

2. How to Make a Hero Image Website Design for Your Main Pagehttps://gapsystudio.com/blog/hero-image-website-design/

ヒーローイメージをどう作るのかについての記事です。ヒーローイメージが重要な理由や使う利点，サイトに適したヒーローイメージを作るヒントなどがまとめられています。

ヒーローイメージの種類別の事例も興味深いです。

図2　ヒーローイメージの作り方のヒント

図2　ヒーローイメージの作り方のヒント

3 Essential Design Trends, January 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/01/3-essential-design-trends-january-2021/

デザイントレンドを3つ紹介しています。

  1. 白や明るい背景の3Dで作られたシーン
  2. 大文字をたくさん積み重ねる
  3. 空の場所（人がいない写真）

図3　2021年1月のデザイントレンド3つ

図3　2021年1月のデザイントレンド3つ

4. Sketch Alternatives: 5 Tools To Replace Sketch For Your Design Needshttps://icons8.com/articles/sketch-alternatives/

UI/UXデザインツールを5つ取り上げています。Skechの代わりになるという切り口で，それぞれのツールの良い点，悪い点をまとめています。

1つ目はやはりFigma，2つ目に取り上げているLunacyはこの記事を書いているIcons8が提供するツールでした。

図4　UI/UXデザインツールを5つ紹介

図4　UI/UXデザインツールを5つ紹介

5. The Most Interesting Developer Tools for 2021 - Impressive Webshttps://www.impressivewebs.com/most-interesting-front-end-developer-tools-2021/

Web Tools Weeklyというニュースレターの，2020年にクリックが多かったツールを60個紹介しています。

オンラインツールのほか，フレームワークや各種素材，ビルダーなどいろんなものがありました。

図5　ウェブデベロッパーに役立つツールいろいろ

図5　ウェブデベロッパーに役立つツールいろいろ

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

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

Tails - TailwindCSS Page Creatorhttps://devdojo.com/tails

ナビゲーション，フッタなどのパーツを組み合わせてページを作るWebページビルダーです。CSSフレームワークとしてTailwind CSSを使っています。

パーツは12種類のカテゴリに分かれていて豊富ですが，無料で使えるものは少ないです。XLからXSまで5段階に表示サイズを変えてプレビューできます。出力は，HTMLファイルをダウンロードするか，HTMLをコピーするか選べます。

パーツのカスタマイズは，Tailwind CSSのクラスを追加／削除で行うのが特徴です。Tailwind CSSを知らないとカスタマイズは難しいですが，Tailwind CSSを学習する目的にも使えると思います。

図6　Tailwind CSSを使ったWebページビルダー

図6　Tailwind CSSを使ったWebページビルダー

今週の気になるWebネタ

Facebook，ページでの「いいね」を廃止し，「フォロー」に一本化へ - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2101/07/news092.html

Facebookページのデザイン刷新の施策の一つとして，ページに対する「いいね」がなくなり「フォローする」だけになるそうです。このニュースの説明はややこしいですが，そういったややこしさをなくすために良い変更だと思います。

このニュースを理解するには，Facebookの個人アカウントとは別に「Facebookページ」という企業やブランド用ページがあること，個人とは「友達」になるけど「Facebookページ」には「いいね」することで投稿をフォローすることになること，の前提知識が必要ですね。

Facebookページには「いいね」をした上でフォローだけ外すことができ，友達が関わるページに義理で「いいね」だけして投稿がニュースフィードに表示されないようにできていました。この技が使えなくなってしまうのが残念という人は少なくないかもしれません。

Webテク, Webデザイン, Web広告, Eメール, ヒーローイメージ, UI, UX, CSS, Facebook

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote