週刊Webテク通信

2021年6月第4週号 1位は，CSSでの縦横比の設定方法，気になるネタは，Spotifyがライブオーディオアプリ「Greenroom」を提供開始，Clubhouseのライバル誕生

Webテク, Webデザイン, Web広告, CSS, UI, UX, テーブル, カラーパレット, アプリ

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2021年6月14日～20日の間に見つけた記事のベスト5です。

1. Let's Learn About Aspect Ratio In CSS - Ahmad Shadeedhttps://ishadeed.com/article/css-aspect-ratio/

CSSで縦横比を指定する「aspect-ratio」プロパティが主要ブラウザで使えるようになったので，便利になった点などを解説しています。

実際のコーディング例が豊富でとても参考になります。

図1　CSSでの縦横比の設定方法を解説

図1　CSSでの縦横比の設定方法を解説

2. Visual Design Principles in UX - Drawerhttps://drawer.design/blog/visual-design-principles-in-ux/

UXにおけるビジュアルデザインの原則を解説しています。

  • スケール
  • コントラスト
  • バランス
  • ゲシュタルト
  • 見た目での優先順位

ゲシュタルト原理は，人間の脳が見た画像を意味のあるものに統合して整理することと解説していました。

図2　UXにおけるビジュアルデザインの原則

図2　UXにおけるビジュアルデザインの原則

3. Want to Design a Stunning Website? 9 Tips to Impress Your Clienthttps://www.makeuseof.com/design-stunning-websites/

クライアントを感動させる魅力的なウェブサイトをデザインするためのヒントです。

  1. 整理整頓された最小限のデザイン
  2. ファーストビューのコンテンツを特に大切にする
  3. コールトゥアクションボタンを一定間隔で配置する
  4. 読みやすく見やすいコンテンツを提供する
  5. ユーザーを引きつける見出しを作る
  6. 読み込み速度に気をつける
  7. 見た目の優先順位に沿ってデザインする
  8. 快適なナビゲーションを提供する
  9. 人物の写真など視覚的な手がかりとなるものを加える
  10. いろいろなデバイスに対応する

図3　魅力的なウェブサイトをデザインするためのヒント

図3　魅力的なウェブサイトをデザインするためのヒント

4. Making Tables With Sticky Header and Footers Got a Bit Easier | CSS-Trickshttps://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/

ヘッダとフッタを固定したテーブルの作り方を紹介した記事です。

テーブルのヘッダとフッタを「position: sticky」で固定する方法で，今は主要ブラウザで機能します。また，横スクロールの場合に最初の列を固定するテクニックも紹介しています。

図4　ヘッダとフッタを固定したテーブルの作り方

図4　ヘッダとフッタを固定したテーブルの作り方

5．Predesignhttps://predesign.me/

WebデザインやアプリのUIデザインに役立つ，スマホやブラウザの枠が入ったPDFファイルを配布しています。

紙にプリントアウトして使うためのものですが，iPadとApple Pencilで手書きするときのベースにするなどデジタルでも使えそうです。

図5　スマホやブラウザの枠が入ったPDFを配布

図5　スマホやブラウザの枠が入ったPDFを配布

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

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

Dive Into the World of Colors | colors.toolshttps://www.colors.tools/

ColorsはアートワークやWebインターフェイスに適した色を探すことができるサービスです。6つのツールに分かれていて無料で利用できます。

  • 調和の取れた2色～4色のパレットを作れる Color Harmonies
  • 色のカラーコードやRGB値などの値を取得できる Color Details
  • 2つの色から中間色をつくれる Color Mixer
  • 色調を変えたパレットを作れる Tones
  • 色合いを変えたパレットを作れる Tint and Shades
  • 明るさと暗さを変えたパレットを作れるLighten and Darken

シンプルでわかりやすいユーザーインターフェイスです。作ったカラーパレットを出力する機能はなく，色の値をコピーして利用することになります。

図6　色を見つけるための6つのツール

図6　色を見つけるための6つのツール

図7　Tint and Shades で10色のパレットを作った例

図7　Tint and Shades で10色のパレットを作った例

今週の気になるWebネタ

Spotifyがライブオーディオアプリ「Greenroom」を提供開始，Clubhouseのライバル誕生 | TechCrunch Japanhttps://jp.techcrunch.com/2021/06/17/2021-06-16-spotify-launches-its-live-audio-app-and-clubhouse-rival-spotify-greenroom/

SpotifyからClubhouseのようなアプリGreenroomが登場しました。以前買収したLocker Roomをベースに機能強化し，Spotifyに合わせた配色になっています。

ClubhouseもTwitterスペースもソーシャルな繋がりができている中，新たな場所であるGreenroomでまた繋がりを作るのは面倒と思う人も少なくないと思います。ただ，SpotifyでフォローしているポッドキャスターのGreenroomでの配信が通知される機能が興味深いです。

録音機能が用意されているのも，基本録音禁止のClubhouseと別の路線で面白いです。テキストチャットができたり，スピーカーがバーチャル拍手をもらった数が累積されるなどの差別化ポイントもあります。Spotifyのネームバリューもあり，意外とこのジャンルの中で検討するかもしれません。

Webテク, Webデザイン, Web広告, CSS, UI, UX, テーブル, カラーパレット, アプリ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote