週刊Webテク通信

2019年8月第2週号 1位は， レスポンシブWebデザインのデザインパターン5つ，気になるネタは，不正ログイン続出の「7pay」，わずか3カ月で終了

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, CSS, Payサービス

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

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

1. 5 Really Useful Responsive Web Design Patterns | Design Shackhttps://designshack.net/articles/ux-design/5-really-useful-responsive-web-design-patterns/

レスポンシブWebデザインのデザインパターンを5つ紹介しています。

  1. モンドリアン
  2. 基本的なギャラリー
  3. 注目アイテム
  4. カラム反転
  5. シャッフル

ワイヤーフレームのような図で，画面サイズでの変化を上，左下，右下の3種類紹介しています。3つあわせて1つの画像になっているので，3つの状態ということがわかりにくいのでご注意ください。

図1　レスポンシブWebデザインのデザインパターン5つ

図1　レスポンシブWebデザインのデザインパターン5つ

2. Top 10 most deadly CSS mistakes made by new and experienced developers - Painless CSShttps://www.painlesscss.com/top-10-css-mistakes.html

CSSを書く上での致命的なミスを10個解説した記事です。

  1. CSSを学習するための体系的な計画に従わない
  2. ドキュメントを読まない
  3. 命名規則を使わない
  4. モバイル用より前にデスクトップ用にデザインする
  5. レイアウトからデザインを切り離さない
  6. ドキュメントの流れを壊す
  7. ピクセルパーフェクトなデザインを達成しようとする
  8. 単位にpxを使う
  9. HTMLを書くときにSEOを無視する
  10. タグのツリー構造を追ってセレクタを記述する

図2　CSSを書く上での致命的なミス

図2　CSSを書く上での致命的なミス

3. 10 Best Design Systems for 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/08/10-best-design-systems-for-2019/

Google，マイクロソフト，Appleなどが公開しているデザインシステムを，合計10種類紹介しています。

デザインのガイドラインや使用するコンポーネントなどをまとめたものがデザインシステムです。

ネットショップサービスのShopifyのデザインシステムの名前が，Polaris（＝北極星）というのがしゃれています。基準，指針とするものなので，北極星に見立てているんですね。

図3　デザインシステムを10種類紹介

図3　デザインシステムを10種類紹介

4. 8 Fantastic Examples of Isometric Illustrations in Web Designhttps://speckyboy.com/isometric-illustrations-web-design/

アイソメトリックイラストを使ったWebデザインの事例を8つまとめています。

斜め上からの視点「アイソメトリックビュー」で描かれたもので，一般的にX軸，Y軸をそれぞれ水平線から30度傾けた状態で作図します。

図4　アイソメトリックイラストを使ったWebデザインの事例いろいろ

図4　アイソメトリックイラストを使ったWebデザインの事例いろいろ

5. Introducing Duotonehttps://blog.fontawesome.com/introducing-duotone/

アイコンフォントサービスのFont Awesomeの一部のアイコンが「デュオトーン」に対応しました。

1つのアイコンに半透明の部分があることで，2色のように見えます。また，CSSで指定することで2色の別の色を設定することも可能です。

なお，このデュオトーンのアイコンを使えるのは，有料版のユーザーのみとなっています。

図5　Font Awesomeの一部のアイコンがデュオトーン対応

図5　Font Awesomeの一部のアイコンがデュオトーン対応

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

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

WebShots | Automated Website Screenshotshttps://pagecapture.xyz/

WebShotsはウェブサイトのスクリーンショットを，スケジュールを設定して自動で撮ってくれるサービスです。競合サイトのチェックや自社サイトのアーカイブ，SNSのフォロワー数の確認，ランキングサイトのチェックなどの用途が考えられます。

URLを指定して，スクリーンショットを撮るインターバルを毎時／毎日／毎週／毎月などから設定します。オプションとして，スクリーンショットの画面サイズやUser Agentも選べます。

月額24ドルのプランと，スクリーンショットを撮った数によって金額が変わるプランがあります。月に100枚までだと4ドルというお手軽な値段で使えます。月額24ドルのプランではスクリーンショットを無制限で取得でき，150サイトまで設定できて，5ユーザーまで使用できます。

図6　ウェブサイトのスクリーンショットをスケジュールを設定して撮るサービス

図6　ウェブサイトのスクリーンショットをスケジュールを設定して撮るサービス

今週の気になるWebネタ

不正ログイン続出の「7pay」，わずか3カ月で終了 セブン＆アイHDが謝罪，再挑戦も示唆 (1/2) - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1908/01/news151.html

不正ログインの被害が相次いで，世間を騒がせた7payですが，9月30日での終了が発表されました。ネットをずいぶん騒がせましたが，徐々に忘れられるのでしょう。

不正ログイン被害の原因については「リスト型攻撃の可能性が高い」とのことで，複数端末からのログイン対策や二要素認証などの防御方法が十分でなかったことが影響しているようです。

○○Payを使っていないわたしですが，そもそもコンビニやスーパーで買い物をほとんどしないからだと最近気づきました。一方でPayPalはよく使っています。

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, CSS, Payサービス

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote