週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote