週刊Webテク通信

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

ネットで見かけた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ページビルダー

おすすめ記事

記事・ニュース一覧