週刊Webテク通信

2021年5月第3週号 1位は,UIデザインに色を適用するための初心者向けガイド,気になるネタは,日本のQRコード普及,海外に遅れ コロナ禍で利用場面拡大も

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

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

1. A Beginner’s Guide to Applying Color in UI Design | George Francishttps://georgefrancis.dev/writing/a-beginners-guide-to-applying-color-in-ui-design/

UIデザインに色を適用するための初心者向けガイドです。白黒の状態から色を選んでいく過程を丁寧に解説した,チュートリアル形式になっています。

テキストの要素ごとに細かくグレーを使い分けるための,明度の違う複数のグレーの作り方や,UIに一貫性を持たせるための色味を付けたグレーを使う方法など,地味ながら有用なテクニックを紹介していました。

図1 UIデザインに色を適用するための初心者向けガイド

図1 UIデザインに色を適用するための初心者向けガイド

2. HTML Tips - Marko Denic - Web Developerhttps://markodenic.com/html-tips/

HTMLのちょっとしたテクニック集です。昔はJavaScriptを使わないとできなかったことが,今はHTMLだけで簡単にできたりします。

プルダウンで候補も選べて文字入力もできる検索窓が,HTMLだけで簡単に作れることは知りませんでした。

図2 HTMLのちょっとしたテクニック集

図2 HTMLのちょっとしたテクニック集

3. 7 Elements of a Highly Usable Landing Page | Design Shackhttps://designshack.net/articles/ux-design/elements-of-a-highly-usable-landing-page/

役に立つランディングページの7つの要素をまとめた記事です。

  1. 差別化された独自性のある販売提案
  2. 構造が明確
  3. ターゲットを絞った見出しと裏付けとなる文章
  4. 適切な色の組み合わせ
  5. 信頼性
  6. すばらしい画像
  7. コンバージョン後のページ

図3 役に立つランディングページの7つの要素

図3 役に立つランディングページの7つの要素

4. 8 Stunning Examples of CSS & JavaScript 3D Text Effectshttps://speckyboy.com/css-js-3d-text-effects/

CSSとJavaScriptを使ってテキストを3D風に扱う効果をまとめた記事です。

上品で落ち着いたものから,インパクトのあるアニメーションまで,いろいろな効果を紹介していました。

図4 CSSとJavaScriptによるテキストの3D効果

図4 CSSとJavaScriptによるテキストの3D効果

5. A Look at Tailwind CSS - Ahmad Shadeedhttps://ishadeed.com/article/on-tailwindcss/

Tailwind CSSについて,この記事の作者が思うところをまとめています。Ahmad Shadeedさんの記事はとても参考になるものばかりです。これまでも何度もこの連載で取り上げてきました。

Tailwind CSSについての問題点を指摘している部分が多いですが,良いところや目指すところもちゃんと踏まえた冷静な意見です。

多言語のWebサイトには適してないという指摘は,わたしは考えたこともなかったので勉強になりました。

図5 Tailwind CSSについて思うところ

図5 Tailwind CSSについて思うところ

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

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

Video chat with real-time collaboration - Ducklyhttps://duckly.com/

Ducklyはブラウザ上でチームで共同作業ができるようにするサービスです。Webページを共有すると,Figmaのようにチームメンバーのカーソルが色分けされて表示されます。

ビデオ通話の機能もあり,話をしながらNotionなどのWebサービスを共同編集できます。VSCodeなどからコードを共有して,ペアプログラミングを行うことも可能です。

共有はURLで行い,アカウントなしで参加できるそうです。フリープランは1回につき60分までで参加者の上限6人の制限があり,時間無制限で20人までの月10ドルのプランもあります。

図6 ブラウザ上でFigmaのようにチームで共同作業できるサービス

図6 ブラウザ上でFigmaのようにチームで共同作業できるサービス

今週の気になるWebネタ

日本のQRコード普及,海外に遅れ コロナ禍で利用場面拡大も - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2105/11/news145.html

QRコードに関する調査結果によると,日本は欧米や中国に比べQRコードの普及が遅れているそうです。QRコードを使ったことがあると答えた人が日本では約60%で,約70~90%の欧米や中国比べて低い数字になっています。

ほかの設問でQRコード決済に関するものがあるのですが,QRコード=QRコード決済の意味で使っているわけではなさそうでした。日本で開発されてガラケー時代から使われてきたQRコードなのに,60%の普及率は少なすぎると感じますね。

QRコードは日本の自動車部品メーカーのデンソーが発明したもので,工場での部品管理のために開発されました。その技術が優れていることはもちろん,使用料を取っていないこともあって,世界に広く普及したようです。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote