週刊Webテク通信

2021年4月第5週号 1位は，予期せぬ横スクロールが起きる問題の原因と解決方法，気になるネタは，アップル幹部が「AirTagはiPhoneから3日間離れると音が鳴る」と明かす

Webテク, Webデザイン, Web広告, オーバーフロー, UX, SVG, アニメーション, AirTag

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

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

1. Overflow Issues In CSS — Smashing Magazinehttps://www.smashingmagazine.com/2021/04/css-overflow-issues/

予期しない横スクロールが起きてしまう，オーバーフロー問題の原因と解決方法を紹介した記事です。

オーバーフローの問題が起きる一般的なケースを以下に分けて解説しています。

  • 固定幅の要素
  • 折り返しせずにFlexboxを使う
  • CSSグリッド
  • 長い英単語
  • Flexbox内の最小コンテンツサイズ
  • CSSグリッドの最小コンテンツサイズ
  • マイナスのマージン
  • max-widthを指定してない画像
  • ビューポートユニット
  • 挿入した広告

図1　予期せぬ横スクロールが起きる問題の原因と解決方法

図1　予期せぬ横スクロールが起きる問題の原因と解決方法

2. 6 UX Design Examples to Inspire Your Business’s Websitehttps://www.webfx.com/blog/web-design/ux-design-examples/

UXデザインが素晴らしい6つのサイトを紹介しています。

Appleのサイトはナビゲーション，イケアのサイトはインタラクティブ要素，Amazonのサイトは読み込み速度など，UXデザインの焦点となる要素についてそれぞれ解説しています。

図2　UXデザインが素晴らしい6つのサイト

図2　UXデザインが素晴らしい6つのサイト

3. Minimal Toolkit - Generate random user data, placeholder and image converters.https://minimaltoolkit.com/index.html

Webデザイナーや開発者の作業のスピードアップに役立つ，ミニマルなツールをセットで提供しています。ユーザープロフィールのデータやユーザーアイコン一覧などを生成できます。

開発段階でLorem ipsumと呼ばれる意味のないテキストを入れるより，ランダムな人名ジェネレーターを使う方がプロっぽいとのことでした。

図3　スピードアップに役立つミニマルなツールのセット

図3　スピードアップに役立つミニマルなツールのセット

4. Swipey image grids.https://www.cassie.codes/posts/swipey-image-grids/

SVGを使ってアニメーションするレスポンシブな画像グリッドを作る方法を紹介しています。

自由な感じにレイアウトされた写真が，ページ読み込みとともにスライドして現れるアニメーションの作り方を学べます。

図4　SVGを使ったレスポンシブな画像グリッドアニメーションの作り方

図4　SVGを使ったレスポンシブな画像グリッドアニメーションの作り方

5. How to Add a Double Border to SVG Shapes | CSS-Trickshttps://css-tricks.com/how-to-add-a-double-border-to-svg-shapes/

SVGで図形に二重の境界線を付ける方法を考えた記事です。SVGの標準機能ではできないので，工夫をして実現した7種類の方法を紹介しています。

ベストな方法があるわけではなく，それぞれ長所と短所があります。それぞれの方法を以下の項目で評価しています。

  • すべての形状で使えるか
  • コードが簡単か
  • 境界線は滑らかか
  • 背景が透明になっているか

図5　SVGで図形に二重の境界線を付ける方法

図5　SVGで図形に二重の境界線を付ける方法

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

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

FigJam is an online whiteboard for teams to explore ideas togetherhttps://www.figma.com/figjam/

FigJamはFigmaから登場したオンラインホワイトボードのサービスです。Web／UIデザインツールのFigmaからMiroと競合するサービスが出てきて驚きました。Figmaのアカウントで使えます。

軽量バージョンのFigmaと自称していますが，インターフェイスは一新されています。図形を使ったフローチャート図や付箋を簡単に作れて，手描き，テキスト，矢印とオンラインホワイトボードとして必要な機能に絞られているようです。アイコンやスタンプも用意されています。

インターフェイスは洗練されていて，動作も軽快に感じました。2022年から有料プランも登場する予定ですが，年内はすべての機能が無料で使えます。2022年以降にも無料版は提供されるようです。

図6　Figmaから登場したオンラインホワイトボードのサービスFigJam

図6　Figmaから登場したオンラインホワイトボードのサービスFigJam

今週の気になるWebネタ

アップル幹部が「AirTagはiPhoneから3日間離れると音が鳴る」と明かす | TechCrunch Japanhttps://jp.techcrunch.com/2021/04/23/apple-airtag-tracker-privacy/

Appleから紛失防止タグAirTagがついに登場しました。キーホルダーとして使えば，家の中で鍵が見つからないときにiPhoneから命令を出して音を鳴らすなどして探せます。

外出時に荷物を紛失した場合にも，AirTagが付いていれば探せる可能性が高いです。持ち主から離れたAirTagがある場合，近くにいる人のiPhoneに通知がいくそうです。

しかし，荷物が盗まれた場合，盗んだ人にAirTagが付いていることを教えることにもなってしまいます。また，持ち主から3日間（カスタマイズ可能になる予定）離れたAirTagは音を鳴らすそうですが，その間にストーカーに場所を特定される可能性もあるんじゃないでしょうか。ストーカー対策と盗難された荷物の追跡，どちらも完璧にするのは難しそうですね。

Webテク, Webデザイン, Web広告, オーバーフロー, UX, SVG, アニメーション, AirTag

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote