週刊Webテク通信

2022年2月第3週号 1位は，2022年のグラフィックデザインのトレンド10選，気になるネタは，Meta（旧Facebook）の「Messenger」に割り勘機能（まずは米国で）

Webテク, Webデザイン, Web広告, CSS, Messenge, 割り勘機能

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

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

1. Top 10 graphic design trends to inspire your work in 2022 | Dribbble Design Bloghttps://dribbble.com/stories/2022/02/10/graphic-design-trends-2022

2022年のグラフィックデザインのトレンドを10個まとめた記事です。

  1. 2Dと3Dの組み合わせ
  2. ノスタルジー（90年代）
  3. ねじれたタイポグラフィ
  4. 浮世絵風デザイン
  5. キャンディーカラー
  6. アンチデザイナーの台頭
  7. 3Dキャラクター
  8. パラメーターによるパターン
  9. ホログラフィックデザイン
  10. 極端なハイスクールバブルデザイン

図1　2022年のグラフィックデザインのトレンド10選

図1　2022年のグラフィックデザインのトレンド10選

2. Use Cases For CSS fit-content - Ahmad Shadeedhttps://ishadeed.com/snippet/fit-content/

CSSのfit-contentの使い方の例を紹介しています。

  • 見出し（ブロック要素）をセンター揃えして，文字部分だけにbox-shadowで下線を付ける
  • 画像の下のキャプション部分が画像の横幅より広くならないようにする
  • テキストの幅までの大きさのブロックを作る
  • タブの中のコンテンツがある部分だけをクリック可能にする

図2　CSSのfit-contentの使い方の例

図2　CSSのfit-contentの使い方の例

3. 15 Websites with Inspiring Menu Design - Qode Interactivehttps://qodeinteractive.com/magazine/websites-with-inspiring-menu-design/

メニューデザインのインスピレーションをもらえるWebサイトをまとめた記事です。革新的かつ実用的，ゴージャスかつ実用的なメニューを集めているようです。

通常時には隠れているメニューを開くと，全画面を使った凝った見せ方をしているパターンが主流でした。

図3　メニューデザインが参考になるサイトいろいろ

図3　メニューデザインが参考になるサイトいろいろ

4. How to Design a Flow Chart That Works (And Different Applications for Them) | Design Shackhttps://designshack.net/articles/software/how-to-design-a-flow-chart/

フローチャートをデザインするためのヒントやテンプレート，ツールをまとめています。

フローチャートだけでなく，ワイヤーフレームやダイヤグラムなどを作成できるツールをいろいろ紹介していて参考になりました。

図4　フローチャートをデザインするためのヒント

図4　フローチャートをデザインするためのヒント

5. What’s New In DevTools? — Smashing Magazinehttps://www.smashingmagazine.com/2022/01/devtools-updates-2022/

Chrome，Edge，Safari，Firefoxのデベロッパーツールの新機能を紹介しています。操作方法の動画もあるのでわかりやすいと思います。

Webデザインや開発をしている人にとっては，デベロッパーツールの充実度はブラウザ選びの基準にもなりますね。

図5　主要ブラウザのデベロッパーツールの新機能

図5　主要ブラウザのデベロッパーツールの新機能

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

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

Notion Website Maker: Create A Free Website Built In Notionhttps://www.simple.ink/

Simple.inkは，Notionで作ったページを簡単にWebサイトとして公開できるサービスです。この手のツールはたくさんありますが，無料でもそれなりに使えるところが特徴だと思います。

Notionで公開したページの共有リンクを設定して，サブドメインに好きな文字列を入力するだけで，サイトを公開できます。無料プランの制限は，カスタムドメインが使えないこと，このサービスのロゴが表示されること，クローラー向けのサイトマップが生成されないことなどです。

Notionでもサブドメインは使えるようになったので，NotionからのWeb公開との違いは検索エンジンにクロールされるかどうかくらいかもしれません。Notionでも有料プランならクロールさせる設定もできるので，ともかく無料で公開したい人向けのサービスかなと思います。

図6　無料で使えるNotionのページをWebサイトとして公開できるサービス

図6　無料で使えるNotionのページをWebサイトとして公開できるサービス

今週の気になるWebネタ

Meta（旧Facebook）の「Messenger」に割り勘機能（まずは米国で） - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2202/10/news126.html

Meta（Facebook）のMessengerに割り勘機能が付きました。これはMessengerによる送金サービス「Messenger Payment」の機能なので日本では今のところ関係なさそうです。

一方で，画面を閉じるとメッセージ／スタンプなどのやりとりが消える「Vanish Mode」が全ての地域で使えるようになるとのこと。チャット画面で上にスワイプするとこのモードに切り替わるそうで，隠し機能のような設定方法ですが今のところわたしは使えていません。

そして，音声メッセージ機能が強化されて，録音時間が最長60秒から30分に延長されたことが個人的には気になっています。わたしは音声メッセージをもっと使ったらいいのにと推奨しているので，この機能をMetaがちゃんと気にかけていたことを嬉しく思いました。

Webテク, Webデザイン, Web広告, CSS, Messenge, 割り勘機能

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote