週刊Webテク通信

2022年1月第4週号 1位は，Figmaのあまり知られていないテクニック集，気になるネタは，Twitter Blue利用者はNFTをプロフィール写真として使用可能に

Webテク, Webデザイン, Web広告, Figma, バッジUI, UI/UX, Tailwind CSS, 立方体, NFT

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

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

1. A few lesser-known Figma tips. At Medium, our design team’s tool of… | by Greg Dougherty | Jan, 2022 | Medium.designhttps://medium.design/a-few-lesser-known-figma-tips-29db4a731926

Figmaのあまり知られていないテクニックを紹介した記事です。

  1. SVGをブラウザからコピーしてFigmaにペーストする
  2. 色の名前を入力してHEX値に変換する
  3. テキストを囲むバウンディングボックスをダブルクリックすると，「⁠Auto Width（自動幅⁠）⁠」に折り返しが変わる
  4. エレメントを選んでShift＋Xで線と塗りの色が入れ替わる
  5. オブジェクトをドラッグしているときにスペースバーを押しっぱなしにするとオートレイアウトは無視される

図1　Figmaのあまり知られていないテクニック集

図1　Figmaのあまり知られていないテクニック集

2. Badge UI design exploration — Tips & tricks, usability, and use cases reviewhttps://setproduct.com/blog/badge-ui-design

バッジUIのテクニックや使用例などを解説した記事です。バッジはステータスや通知，イベントを示す小さなUIで，フォロワー数や未読メッセージの数や通知のあるなしなどを伝えるために使われます。

バッジのデザイン上の工夫や，目的別の使われ方などを詳しく説明しています。

図2　バッジUIのテクニックや使用例

図2　バッジUIのテクニックや使用例

3. UI & UX Micro-Tips: Volume Twelvehttps://www.marcandrew.me/ui-ux-micro-tips-volume-twelve/

何度か紹介した，UI／UXに関するちょっとしたテクニックをまとめたシリーズの最新版です。

  • 商品リストでラジオボタンとドロップダウンのどちらを使うか
  • ただ黒い影を使うのでなく，より現実的に見えるようにする
  • ダークテーマを使う場合，白も目にやさしくコントラストを下げる
  • 商品を正しく紹介するために，最高の画像を使う
  • フォームのエラー状態を伝えるのに色だけに頼らない
  • サンプルの値を使ってフォームのUXを向上させる

図3　UI／UXに関するちょっとしたテクニック

図3　UI／UXに関するちょっとしたテクニック

4. 25 Places Where You Can Get Free Tailwind CSS Components - DEV Communityhttps://dev.to/cruip/25-places-where-you-can-get-free-tailwind-css-components-47lm

Tailwind CSSのコンポーネントを無料で入手できる場所をまとめています。Tailwind CSSのエコシステムが成長して，コンポーネントライブラリも増えています。

コンポーネント集だけでなく，テンプレートやプラグインも掲載していました。

図4　Tailwind CSSの無料コンポーネント集いろいろ

図4　Tailwind CSSの無料コンポーネント集いろいろ

5. clay.css - by Adrian Becehttps://codeadrian.github.io/clay.css/

クレイモーフィズムなスタイルを要素に適用するためのCSSです。ふわふわ浮かんだ粘土のようなオブジェクトを作ることができます。

CSS変数でカスタマイズでき，SASSミックスインも用意されています。

図5　クレイモーフィズムのCSS

図5　クレイモーフィズムのCSS

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

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

iiisometric → 3D-like isometric design builderhttps://fffuel.co/iiisometric/

アイソメトリック（等角投影法）のグラフィックスを作るジェネレーターです。立方体を並べていくことで立体的な文字や図形を作れます。

立方体はサイズと色を変更でき，後から配置したものが前面に表示されます。Zキーで取り消し，Rキーでランダムに色が変わるショートカットをうまく使うと効率的に作れそうです。

できた画像はSVGファイルとしてダウンロードするか，SVGのコードをコピーできます。このサイトでは，ほかにも様々なSVGジェネレーターを提供しています。

図6　アイソメトリックデザインのジェネレーター

図6　アイソメトリックデザインのジェネレーター

今週の気になるWebネタ

Twitter Blue利用者はNFTをプロフィール写真として使用可能に | TechCrunch Japanhttps://jp.techcrunch.com/2022/01/21/2022-01-20-twitter-blue-subscription-users-are-first-gain-access-to-a-new-nft-profile-picture-feature/

TwitterでNFTプロフィール画像が利用できるようになりました。とはいえ有料のTwitter Blueユーザー向けなので，日本ではまだ利用できません。

認証済みNFTをプロフィール画像に設定すると，通常の円形ではなく六角形で表示されます。今のところiOSからしか設定できませんが，全ユーザーに表示されるとのことです。

FacebookとInstagramもNFTをプロフィール画像にする機能を準備しているというニュース記事がありました。NFTを作成および取引する機能も準備しているとのことです。Web3，NFT，メタバースなどの言葉を目にする機会が最近日本でも急に増えてきたと感じていますが，NFTプロフィール画像はNFTに興味を持ってもらうきっかけにもなりそうです。

Webテク, Webデザイン, Web広告, Figma, バッジUI, UI/UX, Tailwind CSS, 立方体, NFT

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote