週刊Webテク通信

2021年1月第5週号1位は、自分にはTailwind CSSが向かない理由、気になるネタは、反Facebookの「MeWe」急成長--広告なし、プライバシー重視のSNS

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

1. Why Tailwind Isn't for Me - DEV Communityhttps://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

Tailwind CSSが自分には向かないという人による、問題点の指摘です。

  1. 醜いHTMLを作り上げる
  2. @applyでの記述方法は互換性がなく標準的じゃない
  3. 標準技術のCSSカスタムプロパティに置き換えることができる
  4. Webコンポーネントが存在しない
  5. divやspanタグを使うことを推奨している

これを踏まえた上で、Tailwind CSSの作者による「CSS Utility Classes and "Separation of Concerns"」の日本語訳翻訳:CSSユーティリティクラスと「関心の分離」⁠いかにしてユーティリティファーストにたどり着いたか⁠⁠ - yuhei blogもぜひ読んで欲しいです。

なぜユーティリティファーストのCSSに行き着いたのか、単なるインラインでのスタイルの記述との違いなどを解説していて、Tailwind CSSの設計思想に触れることができます。

図1 自分にはTailwind CSSが向かない理由
図1 自分にはTailwind CSSが向かない理由

2. 7 Inspiring Graphic Design Trends for 2021 | Vectornator Bloghttps://www.vectornator.io/blog/graphic-design-trends-2021

グラフィックデザインのトレンドをまとめています。

  1. レトロフューチャリズム
  2. グラスモーフィズム
  3. 手描きイラスト
  4. 白黒デザイン
  5. 自然からのインスピレーション
  6. 手触り感のあるデザイン
  7. つながりを作るデザイン
図2 グラフィックデザインのトレンド7つ
図2 グラフィックデザインのトレンド7つ

3. UI Design Trends for 2021 | Boxmode Bloghttps://blog.boxmode.com/ui-design-trends-for-2021/

2021年のUIデザインのトレンドについての長い記事です。モバイルによるインターネットユーザーが増加しているインド、ナイジェリア、コンゴでのUIデザインの傾向など、興味深い切り口で解説しています。

インドでは紫色とピンクが流行しており、オレンジ色と緑がそれに続くそうです。また、ナイジェリアのUIではカリカチュア(風刺画)がよく使われているとのことでした。

図3 2021年のUIデザインのトレンド
図3 2021年のUIデザインのトレンド

4. Amazing Free UI Illustrations and How to Use Themhttps://designerup.co/blog/amazing-free-illustration-resources-and-how-to-use-them-in-ui-design/

イラスト素材の配布サイトを多数まとめています。この手のサイトはかなりチェックしているつもりでしたが、知らないところがたくさんありました。

イラスト素材に一手間加えてオリジナリティを出す方法も参考になります。

図4 イラスト素材の配布サイトいろいろ
図4 イラスト素材の配布サイトいろいろ

5. Vector Pattern Generator | VISIWIGhttps://www.visiwig.com/patterns/

ベクターベースのパターンジェネレーターです。サイズや色、角度などをカスタマイズできます。某人気漫画でおなじみの市松模様も作れますね。

SVGかCSSとしてコピーしたり、SVGファイルとしてダウンロードできます。

図5 ベクターベースのパターンジェネレーター
図5 ベクターベースのパターンジェネレーター

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

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

Shuffle — An online editor for busy developershttps://shuffle.dev/

Shuffleはコンポーネントのブロックを積み上げていくスタイルのWebページビルダーです。Bootstrap、Tailwind CSS、Bulma CSS、Material-UIに対応しています。

ビルダーだけでサイトを完成させるのではなく、自分でカスタマイズできる人が素早くベースを作るためのものです。そのために、いろいろなCSSフレームワークに対応しているんですね。

有料サブスクリプションで、月額制の場合は月24ドルです。サイト制作の最初にだけ使うんだったらひと月で十分でしょうし、24ドルでCSSフレームワークでのコーディング済みのプロトタイプを作れると考えると、かなりコスパがいいと思います。

図6 各種CSSフレームワークに対応したWebページビルダー
図6 各種CSSフレームワークに対応したWebページビルダー

おすすめ記事

記事・ニュース一覧