週刊Webテク通信

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

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

ネットで見かけた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ネタ

「SUZURI」でNFTコンテンツのグッズ販売可能に MetaMaskと連携 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2205/24/news107.html

画像をアップするだけで在庫を持たずにオリジナルグッズを販売できるサービス「SUZURI by GMOペパボ」でNFTコンテンツを使ったグッズ制作ができるようになりました。

今はNFTコンテンツの制作者がグッズを作れるだけですが,将来的には商用利用許可を受けたNFTコンテンツを購入した所有者がグッズを作って販売できるようになる予定とのこと。NFTコンテンツ活用の幅が広がりそうです。

所有者がNFTコンテンツを転売したあとにはグッズを販売できなくする仕組みが作れるのか,そもそもウォレットと連携してグッズを作るメリットは作成者/購入者にあるのかなど疑問はいろいろ湧いてきますが,面白い試みだと思います。

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

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote