週刊Webテク通信

2021年6月第4週号1位は、CSSでの縦横比の設定方法、気になるネタは、Spotifyがライブオーディオアプリ「Greenroom」提供開始、Clubhouseのライバル誕生

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

1. Let's Learn About Aspect Ratio In CSS - Ahmad Shadeedhttps://ishadeed.com/article/css-aspect-ratio/

CSSで縦横比を指定する「aspect-ratio」プロパティが主要ブラウザで使えるようになったので、便利になった点などを解説しています。

実際のコーディング例が豊富でとても参考になります。

図1 CSSでの縦横比の設定方法を解説
図1 CSSでの縦横比の設定方法を解説

2. Visual Design Principles in UX - Drawerhttps://drawer.design/blog/visual-design-principles-in-ux/

UXにおけるビジュアルデザインの原則を解説しています。

  • スケール
  • コントラスト
  • バランス
  • ゲシュタルト
  • 見た目での優先順位

ゲシュタルト原理は、人間の脳が見た画像を意味のあるものに統合して整理することと解説していました。

図2 UXにおけるビジュアルデザインの原則
図2 UXにおけるビジュアルデザインの原則

3. Want to Design a Stunning Website? 9 Tips to Impress Your Clienthttps://www.makeuseof.com/design-stunning-websites/

クライアントを感動させる魅力的なウェブサイトをデザインするためのヒントです。

  1. 整理整頓された最小限のデザイン
  2. ファーストビューのコンテンツを特に大切にする
  3. コールトゥアクションボタンを一定間隔で配置する
  4. 読みやすく見やすいコンテンツを提供する
  5. ユーザーを引きつける見出しを作る
  6. 読み込み速度に気をつける
  7. 見た目の優先順位に沿ってデザインする
  8. 快適なナビゲーションを提供する
  9. 人物の写真など視覚的な手がかりとなるものを加える
  10. いろいろなデバイスに対応する
図3 魅力的なウェブサイトをデザインするためのヒント
図3 魅力的なウェブサイトをデザインするためのヒント

4. Making Tables With Sticky Header and Footers Got a Bit Easier | CSS-Trickshttps://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/

ヘッダとフッタを固定したテーブルの作り方を紹介した記事です。

テーブルのヘッダとフッタを「position: sticky」で固定する方法で、今は主要ブラウザで機能します。また、横スクロールの場合に最初の列を固定するテクニックも紹介しています。

図4 ヘッダとフッタを固定したテーブルの作り方
図4 ヘッダとフッタを固定したテーブルの作り方

5.Predesignhttps://predesign.me/

WebデザインやアプリのUIデザインに役立つ、スマホやブラウザの枠が入ったPDFファイルを配布しています。

紙にプリントアウトして使うためのものですが、iPadとApple Pencilで手書きするときのベースにするなどデジタルでも使えそうです。

図5 スマホやブラウザの枠が入ったPDFを配布
図5 スマホやブラウザの枠が入ったPDFを配布

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

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

Dive Into the World of Colors | colors.toolshttps://www.colors.tools/

ColorsはアートワークやWebインターフェイスに適した色を探すことができるサービスです。6つのツールに分かれていて無料で利用できます。

  • 調和の取れた2色~4色のパレットを作れる Color Harmonies
  • 色のカラーコードやRGB値などの値を取得できる Color Details
  • 2つの色から中間色をつくれる Color Mixer
  • 色調を変えたパレットを作れる Tones
  • 色合いを変えたパレットを作れる Tint and Shades
  • 明るさと暗さを変えたパレットを作れるLighten and Darken

シンプルでわかりやすいユーザーインターフェイスです。作ったカラーパレットを出力する機能はなく、色の値をコピーして利用することになります。

図6 色を見つけるための6つのツール
図6 色を見つけるための6つのツール
図7 Tint and Shades で10色のパレットを作った例
図7 Tint and Shades で10色のパレットを作った例

おすすめ記事

記事・ニュース一覧