週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UI, ワイヤーフレーム, アニメーション, Mac

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

ネットで見かけた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サイトに変換できるサービス

今週の気になるWebネタ

「Apple M1」搭載Macのモニター出力に複数の制約--EIZOが注意喚起 - CNET Japanhttps://japan.cnet.com/article/35163757/

そのパフォーマンスが大好評のM1 Macですが，外部モニター出力には制約があるようです。EIZOが制約事項や対策方法を公表しました。

発売当初にも，Macにつなぐ拡張ドックを出しているCalDigitが，外部モニタ2台でデュアルモニタにできないことを発表して話題になりました。M1のMacBookでは，本体モニタ＋外部モニタのデュアルモニタもできないと誤解した人も多いようです。

外部モニター2台に表示できないのはM1 Macの制約のようですが，Mac MiniはHDMI出力と併用することで，同時に2台の外部モニターに出力できるそうです。

Webテク, Webデザイン, Web広告, UI, ワイヤーフレーム, アニメーション, Mac

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote