週刊Webテク通信

2021年6月第3週号 1位は，フォントは5種類あれば十分という主張と選び方，気になるネタは，Apple Musicが空間オーディオとロスレスオーディオの提供を開始

Webテク, Webデザイン, Web広告, フォント, SVG, CSS, 空間オーディオ, ロスレスオーディオ

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

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

1. All you need is 5 fonts | Better Web Typehttps://betterwebtype.com/articles/2021/06/07/all-you-need-is-5-fonts/

フォントは5種類あれば十分という記事です。

自分用の5つのフォントに含める必要があるものをまとめていました。

  • 幾何学的なサンセリフ書体
  • 長いテキストに使える品質の良いセリフ書体
  • いろいろなところで使えるフォント
  • Webできれいに表示されるフォント
  • バリアブルフォント

図1　フォントは5種類あれば十分という主張と選び方

図1　フォントは5種類あれば十分という主張と選び方

2. 3 Essential Design Trends, June 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/06/3-essential-design-trends-june-2021/

注目すべきデザイントレンドを3つまとめています。

  1. ファーストビューに写真を入れない
  2. 左寄せの見出しが目立つヒーローエリア
  3. 面白いフォント

図2　3つの重要なデザイントレンド

図2　3つの重要なデザイントレンド

3. 11 landing page design tipshttps://www.designyourway.net/blog/misc/11-landing-page-design-tips-you-should-follow-today/

ランディングページをデザインするヒントを紹介した記事です。

  1. ブランドに忠実であり続ける
  2. シンプルに保つ
  3. ユーザーに新しいことを教える
  4. モバイルに対応する
  5. カスタマイズする
  6. 直帰率を減らす
  7. ページの読み込みスピードを確認する
  8. 次の行動への誘導をわかりやすくする
  9. Googleの広告に最適化する
  10. コンバージョンを促進する
  11. 文章に気を配る

5のカスタマイズは，ユーザーに合わせて変化する，パーソナライズされたランディングページを作るということです。

図3　ランディングページをデザインするヒント

図3　ランディングページをデザインするヒント

4. Does the Hamburger Menu Make Mincemeat of UX Design?https://www.uxpin.com/studio/blog/hamburger-menu-and-ux-design/

ハンバーガーメニューに関する考察です。何度も同じような記事を見てきましたが，ハンバーガーメニューの問題点や代替案を紹介しています。

アメリカでの調査結果だと思いますが，45歳以上のインターネットユーザーの48％はハンバーガーメニューの三本線のアイコンが何を意味するのか知らないそうです。

ハンバーガーメニューの代替手段で最もよく使われているのがタブメニューで，ほかにフローティングハンバーガー，スワイプによるナビゲーションを挙げていました。

図4　ハンバーガーメニューに関する考察

図4　ハンバーガーメニューに関する考察

5. Adding Shadows to SVG Icons With CSS and SVG Filters | CSS-Trickshttps://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/

SVGアイコンに影をつける方法を解説した記事です。CSSのfilterプロパティを使う方法と，SVGフィルターを使う方法があります。

CSSのfilterプロパティは使いやすいですが制限が多いです。一方SVGフィルターはいろいろなことができるぶん複雑で，HTML内に記述しないといけません。

図5　SVGアイコンに影をつける方法

図5　SVGアイコンに影をつける方法

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

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

Over Hangmanhttps://over-hangman.iwgx.io/

ハングマンと呼ばれる英単語を当てるゲームのテクノロジー用語バージョンです。5回までミスがOKで5つのステージがあります。

CSSプロパティ名，テキストエディタの名前，Webブラウザの名前などを当てる問題にチャレンジします。画面上にキーボードを出してアルファベットを選ぶと，間違えた文字がわかりやすくて便利です。

React + Typescriptで作られていてVercel（Netlifyのようなサービス）で公開しているそうです。CSSフレームワークにTailwind CSSを使っています。

図6　テクノロジー用語を当てるハングマンゲーム

図6　テクノロジー用語を当てるハングマンゲーム

今週の気になるWebネタ

Apple Musicが空間オーディオとロスレスオーディオの提供を開始 | TechCrunch Japanhttps://jp.techcrunch.com/2021/06/09/2021-06-08-apple-music-launches-spatial-audio-and-lossless-audio-adds-spatial-audio-playlists/

Apple Musicで空間オーディオ（Spatial Audio）とロスレスストリーミングを利用できるようになりました。新たな音楽体験を追加料金なしで提供しているところが競合との差別化になりそうです。

ロスレスオーディオはファイルの容量も大きいので，特にiPhone上で再生するときはストレージ容量を気にする必要があります。なお，ハイレゾロスレスは外付けのデジタル/アナログUSBコンバーターを使う必要があるとのこと。

空間オーディオはこれまでApple TVの映像作品で聴くことができたのですが，ついにApple Musicの楽曲でも聴けるようになりました。対応しているのは全楽曲の中でごくわずかですが，曲数的にはそれなりにあり，専用のプレイリストで楽しむことができます。

Webテク, Webデザイン, Web広告, フォント, SVG, CSS, 空間オーディオ, ロスレスオーディオ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote