gihyo.jpサイトのロゴ

週刊Webテク通信

2019年7月第3週号1位は、 よくある問題のあるポップアップの使い方と解決方法、気になるネタは、Apple、MacBook Air 2017と12インチMacBookを販売終了 Retina化とThunderbolt 3搭載完了

2019-07-18

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

1. Popups: 10 Problematic Trends and Alternativeshttps://www.nngroup.com/articles/popups/

よくある問題のあるポップアップの使い方と解決方法を解説しています。

  1. メインのページコンテンツが読み込まれる前にポップアップを表示する
  2. ユーザーがログインした直後にポップアップを表示する
  3. やり取りする前にEメールアドレスを尋ねる
  4. ユーザーが意味のあることをする前にフィードバックを求める
  5. 重要な作業中にユーザーにフィードバックを求めない
  6. 複数のポップアップを次々に表示する
  7. ユーザーがサブドメインまたは外部サイトに移動する前にモーダルオーバーレイを表示する
  8. モーダルオーバーレイの表示によってコンテンツへのアクセスを中断する
  9. GDPRやCookieの通知にモーダルオーバーレイ表示を使用する
  10. 具体的な利点を伝えずにモーダルオーバーレイによりサイトからアプリへ誘導する
図1　よくある問題のあるポップアップの使い方と解決方法
図1　よくある問題のあるポップアップの使い方と解決方法

2. Fun places to learn CSS Layout – Part 2: Grid Layout, by Stéphanie Walterhttps://stephaniewalter.design/blog/fun-places-to-learn-css-layout-part-2-grid-layout/

CSSグリッドを楽しく学べるサービスやサイトをまとめた記事です。

以下の項目に分けて紹介しています。

  • ゲーム
  • 見ながら確認できるツール、ジェネレーター
  • チートシート
  • 面白いデモ
  • 動画で学べる
  • その他の情報源
図2　CSSグリッドを楽しく学べるサービスやサイト
図2　CSSグリッドを楽しく学べるサービスやサイト

3. 33 Amazing Sites with Beautiful Free Icon Setshttps://blog.usepastel.com/post/33-beautiful-free-icon-sets

フリーのアイコンセットを33種類まとめています。

モノクロ／カラー、アウトライン／ソリッドといろいろなアイコンが揃っています。

図3　フリーのアイコンセットいろいろ
図3　フリーのアイコンセットいろいろ

4. CSS Lists, Markers, And Counters — Smashing Magazinehttps://www.smashingmagazine.com/2019/07/css-lists-markers-counters/

CSSでリストをスタイリングするための新しい方法を紹介しています。なお、この記事で解説している::marker擬似要素は、Firefoxだけで使える実験的な機能です。

CSSの::marker擬似要素を使うと、リスト項目の箇条書き記号部分のフォントや色を指定できます。また、contentプロパティを使って記号に絵文字を使ったり、番号付きリストでStep1、Step2のように数字だけでなく任意の文字を入れる例などが掲載されています。

図4　CSSでリストをスタイリングするための新しい方法
図4　CSSでリストをスタイリングするための新しい方法

5. Pixel - Bootstrap 4 UI Kithttps://themesberg.com/preview/pixel-lite/

Bootstrap 4用のUI Kitです。いろいろなコンポーネントがあり、シンプルできれいにまとまっています。

ライト版は無料で100コンポーネントあり、有料のプロ版は1000以上のコンポーネントがあるようです。

図5　Bootstrap 4用のUI Kit
図5　Bootstrap 4用のUI Kit

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

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

ImportDochttps://importdoc.com/

ImportDocは、Googleドキュメントをウェブサイトに簡単に埋め込めるサービスです。埋め込めるのはドキュメントだけで、スプレッドシート、スライドは埋め込めません。

Googleアカウントと連携して、Google ドキュメントを選択すると、埋め込み用のHTMLコードが生成されます。そのコードをHTML内の任意の場所に貼り付けるだけで、Google ドキュメントが表示されます。

埋め込んだ場所の幅に合わせて表示されますし、iframeで埋め込んでいるわけではないので、CSSで見た目を調整することも可能です。もちろん、Google ドキュメントを変更すると、埋め込まれた部分も更新されます。

図6　Googleドキュメントをウェブサイトに埋め込めるサービス
図6　Googleドキュメントをウェブサイトに埋め込めるサービス

おすすめ記事

記事・ニュース一覧