週刊Webテク通信

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

Webテク, Webデザイン, Web広告, 自動レイアウト機能, 3D

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

ネットで見かけた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モデリング＆アニメーション制作ができるサービス

今週の気になるWebネタ

Spotifyが車載用エンターテインメントシステム「Car Thing」を米国内でリリース | TechCrunch Japanhttps://jp.techcrunch.com/2021/04/17/2021-04-13-spotify-launches-an-in-car-entertainment-system-car-thing/

Spotifyが発表した「Car Thing」は，クルマの中で音楽やポッドキャストを聴くためのデバイスです。大きなダイアルが付いているところが面白いと思いました。

ダイヤル操作だけでなく，タッチ操作，音声コントロールもできます。運転中だと音声命令が中心になると思いますが，信号待ちのときにダイヤルでさっと操作できるのも便利そうです。

現地の口コミを見ると，すでにApple CarPlayやAndroid Autoに対応したタッチスクリーンの付いた自動車が多いとか，スマートフォンからBluetoothで再生できるカーオーディオをつかえば十分とか言われていました。でも，米国のSpotify Premium加入者に送料のみ負担で本体は無料で提供されるので，争奪戦にはなりそうですよね。

Webテク, Webデザイン, Web広告, 自動レイアウト機能, 3D

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote