週刊Webテク通信

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

ネットで見かけた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のようにチームで共同作業できるサービス

おすすめ記事

記事・ニュース一覧