週刊Webテク通信

2022年5月第4週号1位は、顧客にやさしいWebデザインの15の原則、気になるネタは、「SUZURI」NFTコンテンツのグッズ販売可能に MetaMaskと連携

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

1. 15 Web Design Principles for a Customer-Friendly Websitehttps://kinsta.com/blog/web-design-principles/

顧客にやさしいWebデザインの原則を15項目で解説しています。

  1. ページはナビゲートしやすい必要がある
  2. 常にネガティブスペース(ホワイトスペース)を活用する
  3. 一貫性があり、かつ魅力的なページであること
  4. 補色を取り入れる
  5. ターゲットオーディエンスを念頭に置いてデザインする
  6. フォントは読み取り可能でアクセシビリティに配慮したものにする
  7. フィッツの法則とヒックの法則に従う
  8. 重要な情報を強調するために不変性を使用する
  9. CTAではクリックしたくなる明確な言葉を使う
  10. FパターンまたはZパターンを利用する
  11. 優れたWebサイトは速くてモバイルフレンドリー
  12. テキストを手ごろなサイズで分割する
  13. グリッドを利用する
  14. バランスを忘れない
  15. 細部に注意を払う
図1 顧客にやさしいWebデザインの15の原則
図1 顧客にやさしいWebデザインの15の原則

2. LCH is the best color space for UI | Deep dive into color theory | Atmoshttps://atmos.style/blog/lch-color-space

UIデザインに適しているLCHという色空間を推奨する記事です。LCHはHCL、CIELAB、LAB、CIELUV、CIELCHとも呼ばれる国際照明委員会(CIE)によって定義された色空間です。

LCHはLightness、Chroma、Hueの頭文字ですが、日本語に訳すと明度、彩度、色相になるので、HSB=Hue(色相⁠⁠、Saturation(彩度⁠⁠、Brightness(明度)と順番が違うだけで同じになってしまいますね。

LCHのメリットとして以下のことを解説していました。

  • HSLでは同じ明度の2つの異なる色のコントラスト比がかなり違ってしまうが、LCHではほぼ同じコントラスト比になる
  • 同じコントラスト比で色だけを変えられるので、UIでさまざまな色を試すことが簡単になる
  • カラーパレットに色を追加するのが簡単
図2 UIデザインに適した色空間LC
図2 UIデザインに適した色空間LC

3. Blocassethttps://blocasset.com/

Web3に関連するデザイン素材を売買するサービスです。今のところイラストと3Dイラストが登録されています。

売り買いはWeb3関連サービスらしく暗号資産で行います。現時点では1000円以下の安いものが中心でした。まだ登録されている素材は少ないです。

図3 Web3に関連するデザイン素材のマーケットプレース
図3 Web3に関連するデザイン素材のマーケットプレース

4. AnimatiSS - A nice, colorful collection of CSS animations for your projectshttps://xsgames.co/animatiss/

CSSアニメーションのコレクションです。拡大、回転、スライドなどのアニメーションを、効果を確認してコードを取得できます。

このツールを作った人はほかにもいろんなツールを作っていて、ページの最後にそれらのツールへのリンクアイコンが並んでいます。

図4 CSSアニメーションのコレクション
図4 CSSアニメーションのコレクション

5. Humbleicons – free icons for your better UIhttps://humbleicons.com/

UIに使えるフリーのアイコンセットです。個人・商用プロジェクトに無料で使用できます。

SVGスプライト、SVGインラインのどちらかで配置します。

図5 UIに使えるフリーのアイコンセット
図5 UIに使えるフリーのアイコンセット

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

先週の気になるツール/サービス

PhotoRoomhttps://app.photoroom.com/create

PhotoRoomは高品質の商品PR画像を簡単に作れるサービスです。商品写真をアップすると、自動で切り抜かれ、背景などを組み合わせられます。

豊富なテンプレートを元に訴求力のある商品画像を自動で作れますし、位置やサイズ、色などのカスタマイズも可能です。バッチ処理で複数の画像をまとめて自動で作れるのも便利そうです。

無料で使えるテンプレートもありますが、全ての機能を使うには有料のプロ版にアップデートする必要があります。人気のあるモバイルアプリをブラウザで使えるようにしたものでした。

図6 高品質の商品PR画像を簡単に自動で作れるサービス
図6 高品質の商品PR画像を簡単に自動で作れるサービス

今回で「週刊Webテク通信」は終了します。長い間ありがとうございました。

おすすめ記事

記事・ニュース一覧