週刊Webテク通信

2022年1月第2週号 1位は,2021年のUIデザインのトレンド振り返り,気になるネタは,レノボ,サブ画面付きの超横長ノートPC「ThinkBook Plus Gen 3」を発表

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

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

1. Review of UI Design Trends for Web and Mobile in 2021https://blog.tubikstudio.com/review-ui-design-trends/

WebサイトやモバイルアプリのUIデザインの2021年のトレンドを振り返った記事です。

  • 多種多様な形状
  • 映像との融合
  • アクセントとしての線
  • 見出し文字の下層のレイヤー
  • 魅力的なモーショングラフィックス
  • 実験的なタイポグラフィー
  • インタラクティブなページ
  • 水平方向のギャラリー
  • クリエイティブなメニュー
  • 3Dグラフィックスとアニメーション
  • 一般的でないグリッド
  • オーダーメイドのイラスト

図1 2021年のUIデザインのトレンド振り返り

図1 2021年のUIデザインのトレンド振り返り

2. Claymorphism in User Interfaces | Hype4Academyhttps://hype4.academy/articles/design/claymorphism-in-user-interfaces

UIデザインの新しいトレンドのクレイモーフィズムについてまとめています。

クレイモーフィズムは3Dグラフィックスとの相性が良い,ふわふわ浮いているような丸みを帯びた立体的なUIです。別なトレンドのグラスモーフィズムとも融合でき,VR/ARとの相性も良い利点があります。

ニューモーフィズムが実装の難しさなどからうまくいかず,それでもフラットデザインには飽きたところに生まれたのがクレイモーフィズムとのことでした。

図2 クレイモーフィズムについてまとめ

図2 クレイモーフィズムについてまとめ

3. Negative Space in Design: What It Is and How To Use It - Design4Usershttps://design4users.com/negative-space-in-design/

ネガティブスペースとは何か,デザインにどう使うかを解説しています。

ホワイトスペースとネガティブスペースとは同じ意味だけど,なぜ2つの呼び方があるのかの説明は今更ながら初めて理解しました。

ホワイトスペースは印刷デザインに由来して紙の白色からそう呼ばれていました。しかし,現在デザインで使われるこの言葉は白色とは関係なく何もない空間を意味します。ネガティブスペースとは,写真の中の注目されるもの=ポジティブな空間と,背景=ネガティブな空間の分け方に由来するとのことでした。

図3 ネガティブスペースの意味と使い方

図3 ネガティブスペースの意味と使い方

4. The Top 5 Form Types to Use in Your Web Design | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/01/the-top-5-form-types-to-use-in-your-web-design/

Webページでよく使われる5種類のフォームの,ユーザーエクスペリエンスを向上させる方法を解説した記事です。

  1. オプトインフォーム
  2. お問合せフォーム
  3. オンライン決済フォーム
  4. サポートフォーム
  5. 顧客フィードバックフォーム

図4 Webページでよく使われる5種類のフォーム

図4 Webページでよく使われる5種類のフォーム

5. Design Trend: Happy, Optimistic Designs | Design Shackhttps://designshack.net/articles/trends/happy-optimistic-designs/

ハッピーで楽観的なデザインを事例とともにまとめています。世界的なパンデミックの影響もありデザイントレンドになっているようです。

  • 笑顔
  • 明るい色
  • 軽快な書体
  • 操作や反応が楽しい
  • 漫画やゲーム
  • UXユニコーン(予期せぬ驚きや喜びが隠れているUX)
  • 楽しい言葉やメッセージ
  • 簡単な操作とシンプルな機能
  • 怪しさがなく役に立つこと

図5 ハッピーで楽観的なデザインいろいろ

図5 ハッピーで楽観的なデザインいろいろ

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

先週の気になるツール/サービス

Graaphicshttps://graaphics.co/

背景画像の上にテキストを載せたグラフィックスを簡単に作れるサービスです。お客様の声や引用文をちょっとかっこよくSNSにアップするのに役立ちそうです。

テンプレートを元に作れるのですが,テキストの文面やフォントはもちろん背景画像や背景色なども自由にカスタマイズできるので,最初に選ぶテンプレートはあまり関係ありません。背景画像はUnsplashから検索して挿入できますし,手持ちの画像のアップロードも可能です。

ログインしなくても試せますが,画像をアップロードするにはユーザー登録が必要です。無料プランでは作った画像を月に7つまでダウンロードできます。

図6 背景画像+テキストのSNS用画像を簡単に作れるサービス

図6 背景画像+テキストのSNS用画像を簡単に作れるサービス

今週の気になるWebネタ

レノボ,サブ画面付きの超横長ノートPC「ThinkBook Plus Gen 3」を発表 - CNET Japanhttps://japan.cnet.com/article/35181778/

レノボからキーボードの隣にサブ画面が付いたラップトップPCが発表されました。メインモニタは17.3インチの超横長で,サブ画面は8インチでタッチ&ペン入力対応です。

サブ画面にアプリのツールを表示させて操作したり,ペンでの手書きに使ったり,テンキーとして数値入力したりを想定しています。また,スマホの画面をミラーリングする使い方もできるようで興味深いです。

画面の隣にスマホを磁力でくっつけられるモニタがNex Computerというところから発表されていて,コンセプトは違いますが似た要素があると思いました。Apple端末同士ならいろいろ連携も取れるので,Macのサブ画面的にiPhoneを使うのも便利かもしれません。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote