週刊Webテク通信

2020年6月第4週号1位は、タイポグラフィのトレンド7つ、気になるネタは、Twitterが音声ツイートのテストをiOSで開始、最大140秒を録音可能

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

1. Top 7 Typography Trends For 2020 | InstantShifthttp://www.instantshift.com/2020/06/02/typography-trends-2020/

タイポグラフィのトレンドについてまとめた記事です。

  1. カラーフォントとタイプ
  2. 丸みを帯びたサンセリフ
  3. 積み重ねられた複数行のテキストブロック
  4. ほかのエレメントと重ねる
  5. ヒーローエリア内の小さめの文字
  6. カットアウトとオーバーレイ
  7. アニメーションするタイポグラフィ

タイポグラフィはなぜ重要かの理由も解説していました。

図1 タイポグラフィのトレンド7つ
図1 タイポグラフィのトレンド7つ

2. A Comprehensive Guide to Notification Design | Toptalhttps://www.toptal.com/designers/ux/notification-design

通知のデザインに関する包括的なガイドです。通知デザインに統合されたアプローチを使用することでユーザーエクスペリエンスを強化するヒントを紹介しています。

最後にまとめてある、通知を設計する方法の要約は以下となります。

  • 通知の設計を後回しにせず早い段階で開始する
  • 通知を3つの注意レベル(高、中、低)で分類する
  • 色分け、アイコンの割り当て、配置を決める
  • タイプによって分類する(永続的か永続的じゃないか、ポップアップ、バナー、ダイアログなど)
  • それらをデザインシステムに組み込む
図2 通知デザインの包括的なガイド
図2 通知デザインの包括的なガイド

3. Guide Into Types of UI Copy for Mobile and Web Interfaces - Design4Usershttps://design4users.com/ui-copy-for-mobile-and-web/

モバイルアプリやウェブサイトのUIコピーライティングの種類別ガイドです。

以下の項目ごとにコピーライティングで気をつけることを解説しています。

  • 見出し
  • 小見出し
  • 本文
  • キャプション
  • コール・トゥ・アクション
  • 通知
  • エラー
  • オンボーディング(初めての人への使い方紹介)
  • メニュー
  • ツールチップ
  • 電子メール
図3 UIコピーライティングの種類別ガイド
図3 UIコピーライティングの種類別ガイド

4. keen-sliderhttps://keen-slider.io/

タッチ/スワイプ操作に対応したスライダーを作れるライブラリです。パソコン向けに矢印などのナビゲーションを入れることも可能です。

スライドショー/カルーセルとしてだけでなく、日付や時間を選択するデータピッカーとしても使えて便利そうです。

図4 タッチ/スワイプ操作に対応したスライダー
図4 タッチ/スワイプ操作に対応したスライダー

5. Black and White Patterns for Web Design | SpyreStudioshttps://spyrestudios.com/black-and-white-patterns-web-design/

白黒のウェブデザインについて解説した記事です。

  • ウェブサイトの背景について
  • 白黒のウェブサイトの例
  • 白黒の素材を入手できるところ
図5 白黒のウェブデザインの例と素材
図5 白黒のウェブデザインの例と素材

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

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

Image Colorizer - Colorize Black and White Photohttps://imagecolorizer.com/

Image Colorizerは白黒写真を色付けしてカラー写真にするサービスです。AIテクノロジーにより数秒で変換できると謳っています。

4MB未満、3000×3000ピクセルまでの画像を無料で処理できます。処理した例がギャラリーページにいくつか載っていますが、処理前と処理後を比較した見せ方が凝っており、スマホサイズでは写真の並びが縦になるところもよくできています。

たまたま、ある会社の沿革のページを作っていて、古い白黒写真がいろいろあったので色付けしたところ、かなりいい感じに仕上がりました。人物を処理するのは得意のようです。

図6 白黒写真をカラー写真に変えるサービス
図6 白黒写真をカラー写真に変えるサービス

おすすめ記事

記事・ニュース一覧