週刊Webテク通信

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

ネットで見かけた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 ウェブサイトのスクリーンショットをスケジュールを設定して撮るサービス

おすすめ記事

記事・ニュース一覧