週刊Webテク通信

2020年12月第3週号1位は、2021年に向けてのUIデザインのトレンド、気になるネタは、「Apple M1」搭載Macのモニター出力に複数の制約--EIZOが注意喚起

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

1. A guide of UI design trends for 2021 | by Diana Malewicz | Dec, 2020 | UX Collectivehttps://uxdesign.cc/a-guide-of-ui-design-trends-for-2021-637ac038cb99

2021年に向けてのUIデザインのトレンドを紹介しています。

  1. 3Dイラスト
  2. グラスモーフィズム
  3. 現実世界の写真(イラストや3Dグラフィックスではなく)
  4. 鮮やかな色
  5. ばやけたカラフルな背景
  6. 美的なミニマリズム
  7. 幾何学的な構造
  8. 大きく洗練されたタイポグラフィ
  9. ブルータリズム
  10. UX/UIプロセスの単純化

2のグラスモーフィズムは、ガラス越しのようなルック&フィールのことです。

図1 2021年に向けてのUIデザインのトレンド
図1 2021年に向けてのUIデザインのトレンド

2. How to Build a Website With No Coding | JUST™ Creativehttps://justcreative.com/2020/11/20/how-to-build-website-no-coding/

コーディング無しでウェブサイトを作る方法を6つのステップで解説しています。

サイトを作るためのツールとしては、以下のものが取り上げられていました。

  • WordPress+ホスティング
  • Carrd
  • Webflow
  • Wix
  • Shopify
図2 コーディング無しでウェブサイトを作る方法
図2 コーディング無しでウェブサイトを作る方法

3. UI Flowchart Cards ―for website builders, designers and developers.https://flowcards.io/

様々なユーザーインターフェイスのワイヤーフレームをカード状にしたデジタルデータ集です。IllustratorとFigmaのデータで提供しています。

Figma上で組み合わせることで、簡単にサイトのワイヤーフレームが作れそうです。プリントアウトして並べる使い方も面白そうですね。

図3 ユーザーインターフェイスをカードにしたデータ集
図3 ユーザーインターフェイスをカードにしたデータ集

4. 6 Free Animated Icon Packs for Adobe After Effectshttps://speckyboy.com/free-animated-icons-after-effects-templates/

無料のアニメーションアイコンのパックを6つ紹介しています。

テクニカル系のアイコンが中心です。ソーシャルメディアのアイコンもありましたが、ちょっと古いラインナップでした。

図4 無料のアニメーションアイコンパックいろいろ
図4 無料のアニメーションアイコンパックいろいろ

5. 25 Beautifully Colorful Websites - Vandelay Designhttps://www.vandelaydesign.com/best-colorful-websites/

美しくカラフルなウェブサイトのギャラリーです。大胆で目立つ色使いのものを中心に取り上げています。

英語の「Colorful」は色鮮やかなという意味合いが基本で、日本語の「カラフル」の色数が多いという要素は必ずしも当てはまらないと、掲載されている事例を見て気付きました。

図5 美しくカラフルなウェブサイトのギャラリー
図5 美しくカラフルなウェブサイトのギャラリー

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

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

Figside | Ship Websites with Figmahttps://figside.com/

FigsideはFigmaのデザインをインポートしてWebサイトとして公開できるサービスです。Figmaのオートレイアウト機能を使ってレスポンシブなページを作れます。

Figmaで作ったファイルのURLを指定すると、自動でWebサイトに変換されます。とはいえ、いろいろ作り方にコツがあるようで、ドキュメントをよく読んでから作った方がよさそうです。Figmaのテンプレートも用意されています。

生成されたページは、Next.jsフレームワークで構築されたReactアプリになっているそうです。そして、公開はホスティングサービスのVercelの無料プランが使われているという、イマドキの作りになっていました。

図6 FigmaのデザインをWebサイトに変換できるサービス
図6 FigmaのデザインをWebサイトに変換できるサービス

おすすめ記事

記事・ニュース一覧