週刊Webテク通信

2021年4月第4週号1位は、Figmaの自動レイアウト機能を解説、気になるネタは、Spotifyが車載用エンターテインメントシステム「Car Thing」米国内でリリース

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

1. Design good practices | Auto Layout in Figmahttps://goodpractices.design/figma-autolayout

Figmaの自動レイアウト機能をサンプルを交えて解説した記事です。

  • 基本を知る
  • リサイズ
  • 制約(Constraints)オプション
  • 入れ子になったレイアウト

わたしは、なんとなくで使っていたんですが、一度じっくり学びたいなと思いました。

図1 Figmaの自動レイアウト機能を解説
図1 Figmaの自動レイアウト機能を解説

2. 5 Design Tips to Speed Up Your Sitehttps://www.userback.io/blog/speed-up-your-site

Webサイトをスピードアップするための5つのヒントを説明しています。

  1. 画像を圧縮する
  2. 動画は(YouTubeから)埋め込む
  3. ページレイアウトを(レンダリングし直しが発生しないよう)安定させる
  4. サイトで使うファイルを圧縮する
  5. フィードバックを得る
図2 Webサイトをスピードアップするための5つのヒントを解説しています
図2 Webサイトをスピードアップするための5つのヒントを解説しています

3. 8 Thank You Page Examples to Inspire your Landing Pages - noupehttps://www.noupe.com/design/thank-you-page-examples-to-inspire-your-landing-pages.html

サンキューページの例を8つ紹介しています。申し込みなどのフォーム送信後に表示されるページです。

次のステップを提供したり、ソーシャルメディアでの共有を求めるなど、サンキューページの機能を事例とともに解説しています。

図3 サンキューページの事例いろいろ
図3 サンキューページの事例いろいろ

4. 30 Inspiring Web Design Concepts with 3D Graphics - Design4Usershttps://design4users.com/web-design-concepts-3d-graphics/

3Dグラフィックスを使ったWebデザインのコンセプトを多数紹介しています。

シンプルでポップな3Dイラストが流行りですが、リアルでクールな感じのものもありました。

図4 3Dグラフィックスを使ったWebデザインいろいろ
図4 3Dグラフィックスを使ったWebデザインいろいろ

5. A Beginner's Guide to the Latest Bootstrap 5 Utilities - Designmodohttps://designmodo.com/bootstrap-5-utilities/

Bootstrap 5のユーティリティクラスの初心者向けガイドです。

コンポーネントのためのクラスではなく、色や余白などを細かく設定するためのユーティリティクラスがBootstrap 5には増えています。ユーティリティクラスといえばTailwind CSSですが、ある程度同じような指定方法ができるようになっているんですね。

図5 Bootstrap 5のユーティリティクラスの初心者向けガイド
図5 Bootstrap 5のユーティリティクラスの初心者向けガイド

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

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

Monster Mash: New Sketch-Based Modeling and Animation Toolhttp://monstermash.zone/

Monster MashはGoogleが大学などと共同開発した3Dアニメーション作成ツールです。ブラウザ上で簡単な操作で3Dモデリングとアニメーション制作ができます。

平面に描いた形が立体化されるだけでもすごいのですが、人間や動物が歩くアニメーションを簡単に作れてしまうのには驚きました。動かしたい場所にポイントを打って動かすのですが、ほかの部分も自動で連動して生き物っぽく動くので、少ないポイントでも複雑な動きを作れます。

このツール上でしか描画できないので、パソコンでペンタブレットや液晶ブレットを使うか、iPadとApple Pencilを使うのが良さそうです。写真やイラストをテクスチャーとして利用でき、背景画像も設定できます。

実際のアニメーションの例や使い方はGoogle AI Blogの記事Google AI Blog: Monster Mash: A Sketch-Based Tool for Casual 3D Modeling and Animationをご覧ください。

図6 簡単操作で3Dモデリング&アニメーション制作ができるサービス
図6 簡単操作で3Dモデリング&アニメーション制作ができるサービス

おすすめ記事

記事・ニュース一覧