週刊Webテク通信

2019年6月第2週号1位は、 4ピクセルベースライングリッドの考え方と使い方、気になるネタは、iTunesは廃止へ、機能は3つのアプリに分割--アップル、macOS Catalinaを発表

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

1. The 4px baseline grid — the present – UX Collectivehttps://uxdesign.cc/the-4px-baseline-grid-89485012dea6

4ピクセルベースライングリッドの考え方と使い方を解説しています。

縦の間隔を4ピクセル単位のグリッドに合わせるのですが、文字をバウンディングボックスではなく、実際の文字の高さをベースに揃えるという考え方が特徴です。

Sketchでのレイアウト方法を紹介していますが、コーディングの際には再現するのが大変そうだと思いました。

図1 4ピクセルベースライングリッドの考え方と使い方
図1 4ピクセルベースライングリッドの考え方と使い方

2. CSS Grid: No Nonsense Layouts | TestDriven.iohttps://testdriven.io/blog/css-grid/

実用的な例をもとに、CSSグリッドを使ったレイアウト手法を学べる記事です。

CSSグリッドの例として、テレビのテストパターン、座席表、基本的なWebアプリケーションと3つのレスポンシブなレイアウトをCodePenを使って紹介しています。

図2 CSSグリッドレイアウトの手法を紹介
図2 CSSグリッドレイアウトの手法を紹介

3. 3 Essential Design Trends, June 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/06/3-essential-design-trends-june-2019/

2019年6月のウェブデザインのトレンドを3つ取り上げています。

  1. カラーの背景の上の白い文字のナビゲーション
  2. 完全なグリッド

円をデザインに使うことの流行りは繰り返しており、ほかのトレンドに依存しないところが利点とのことでした。

図3 今月のウェブデザインのトレンド3つ
図3 今月のウェブデザインのトレンド3つ

4. Prevent Page Scrolling When a Modal is Open | CSS-Trickshttps://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

モーダルウィンドウが開いているときに、ページがスクロールされるのを防ぐ方法を解説しています。

フレームワークで用意されているハンバーガーメニューでも、ページがスクロールされてしまうものも多く、このテクニックを活用したいところです。

図4 モーダルウィンドウが開いているときにページがスクロールされるのを防ぐ方法
図4 モーダルウィンドウが開いているときにページがスクロールされるのを防ぐ方法

5. CSS Calendar Examples From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-calendars/

CSSによるカレンダーのコーディング例をまとめた記事です。

JavaScriptで自動生成するカレンダーや、カレンダーアプリを想定したUIのものなど、バリエーション豊かなカレンダーを紹介しています。

図5 CSSによるカレンダーのコーディング例いろいろ
図5 CSSによるカレンダーのコーディング例いろいろ

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

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

LandingPagr is a Free Editing Tool to Write your Landing Page Copy On - LandingPagr.comhttps://www.landingpagr.com/

ランディングページのモックアップを簡単に作れるサービスです。あらかじめ用意されたテンプレートのテキスト部分を変更していくことでランディングページが作れます。

17種類のブロックが用意されており、その中から使うブロックを決めて文字部分を書き換えます。できることは文字を変更することだけで、レイアウトの変更や並び替えはできませんし、ダミーの枠線だけのイメージを、手持ちの画像と差し替えることもできません。

ランディングページのコピーライティングを考えるためだけのサービスなのですが、フォーマットが決まっていて、お手本となるコピーが入っているので、文面を考えやすくなる可能性は高いでしょう。どこかを編集するとその時点でURLが生成され、ほかの人に見てもらうことができます。

図6 ランディングページのモックアップを簡単に作れるサービス
図6 ランディングページのモックアップを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧