週刊Webテク通信

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

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

ネットで見かけた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 白黒写真をカラー写真に変えるサービス

今週の気になるWebネタ

Twitterが音声ツイートのテストをiOSで開始,最大140秒を録音可能 | TechCrunch Japanhttps://jp.techcrunch.com/2020/06/18/2020-06-17-twitter-begins-rolling-out-audio-tweets-on-ios/

TwitterのiOSアプリ上で音声を録音してツイートできるようになります。わたしのアカウントでも使えるようになっていました。

これまでも音声+静止画の140秒までの動画を作ってアップすることはできましたが,今回の新機能の音声投稿ならではの利点がいくつかあります。音声を再生しながらほかのツイートを見たり別のアプリを使ったりできますし,スリープしても再生し続けます。

Twitterのアプリ上でしか録音できないので,うまく喋れる人はそんなに多くないかもしれません。ユーチューバーやポッドキャスター,芸能人など喋るのに慣れている人には,新たな発信手段としてすぐに活用できるはずです。

著者プロフィール

芦之由(あしのよし)

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

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

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