週刊Webテク通信

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

ネットで見かけた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

おすすめ記事

記事・ニュース一覧