週刊Webテク通信

2020年11月第4週号 1位は，デザインの一貫性についてのまとめ，気になるネタは，OPPO，巻取りスマホのコンセプトモデル「OPPO X 2021」を公開

Webテク, Webデザイン, Web広告, UI, UX, アニメーション, CSS, スマートフォン

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

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

1. User Experience: Insights Into Consistency in Designhttps://blog.tubikstudio.com/design-consistency/

デザインの一貫性についてまとめた記事です。なぜ重要なのか，どのような一貫性の種類があるのか，具体的にどう実現するのかを解説しています。

デザインの一貫性が重要な理由
  • 新しいユーザーにとってユーザーインターフェイスを学習しやすい
  • ユーザーの混乱を減らすのでエラーが少なくなる
  • ユーザーの認知的な負荷を減らし時間と労力を節約する
  • 一貫性はWebサイトやアプリケーションのブランドイメージを強力にする

図1　デザインの一貫性についてのまとめ

図1　デザインの一貫性についてのまとめ

2. The UI & UX Tips Collection: Volume One. | Marc Andrewhttps://marcandrew.me/ui-ux-tips-collection-vol-one/

UI＆UXのヒントをまとめた記事です。

第1弾として34個紹介していましたが，ここでは最初の10個を紹介します。

  1. わずかな境界線で要素をより明確にする
  2. 見出しの文字間隔を詰めて見た目のバランスを良くする
  3. 一貫性を保つために同じスタイルのアイコンを使う
  4. 1種類のタイプフェイスを使うだけで十分
  5. ホワイトスペースはUIデザインの友達。たっぷり使う。うまく使う
  6. 長いコンテンツのときは文字サイズ20ptを試してみる
  7. タイプスケールを使って調和の取れたフォントサイズを定義する
  8. 均一感を持たせるため，ベースカラーを元に色を決める
  9. ユーザーが初めて使うときのガイドで経験を向上させる
  10. 影がひとつの光源から来ているようにする

図2　UI＆UXのヒント集

図2　UI＆UXのヒント集

3. UI Interactions & Animations Roundup #12 | Codropshttps://tympanus.net/codrops/2020/11/17/ui-interactions-animations-roundup-12/

UIインタラクションとアニメーションの面白い例を，dribbbleからまとめています。

アイコンアニメーション，テキストワープ，3D回転の効果がトレンドとのことでした。

図3　UIインタラクションとアニメーションの例いろいろ

図3　UIインタラクションとアニメーションの例いろいろ

4. Behind the feature: the making of the new Auto Layouthttps://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

グラフィックツールのFigmaのオートレイアウトが新しくなりました。

この公式の記事は，オートレイアウトのコンセプトや歴史を説明して，どういう経緯で機能強化していったかのメイキングです。

図4　Figmaの新しくなったオートレイアウトのメイキング

図4　Figmaの新しくなったオートレイアウトのメイキング

5. Tailwind CSS v2.0 – Tailwind CSShttps://blog.tailwindcss.com/tailwindcss-v2

ユーティリティファーストのCSSフレームワークTailwind CSSが2.0になりました。この公式の記事では，バージョン2.0での新機能を紹介しています。

Bootstrap 5もそうですが，Tailwind CSS v2.0もIE11をサポートしていません。いよいよIE対応を切り捨てる時代が来たことを実感しますね。

図5　バージョンアップしたTailwind CSSの新機能について

図5　バージョンアップしたTailwind CSSの新機能について

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

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

Bubbles: Video and Screenshot Collaborationhttps://www.usebubbles.com/

BubblesはWebページのスクリーンショットかスクリーンキャストを撮って，コメントを付けて共有できるサービスです。Webサイトの校正などに使うためのもので，Chromeの拡張機能として提供されています。

スクリーンショットの特定の箇所にコメントを付けられるサービスはたくさんありますが，画面操作の動画を撮ってコメントできるのは珍しいと思います。しかもユーザー登録不要で手軽に使えて完全無料というありがたいサービスです。

動画の撮影時には音声も収録できるので，Webページをスクロールしたり操作しながら喋りで説明を入れられます。ページ遷移も1つの動画にまとめられるので便利だと思いました。

図6　画面を撮影してコメント，共有できるサービス

図6　画面を撮影してコメント，共有できるサービス

今週の気になるWebネタ

OPPO，巻取りスマホのコンセプトモデル「OPPO X 2021」を公開 - ケータイ Watchhttps://k-tai.watch.impress.co.jp/docs/news/1289759.html

OPPOが巻き取り式のスクリーンを搭載したスマートフォンを発表しました。6.7インチから7.4インチに電動で変化するそうです。

折りたためる「フォルダブル」に続き，巻き取り式の「ローラブル」ということですね。ちなみに巻き取り式のテレビはLGが商品化していました。

将来的には何種類にもサイズを変えられるディスプレイもできそうですね。タブレットやノートパソコンに搭載されるのも期待したいです。

Webテク, Webデザイン, Web広告, UI, UX, アニメーション, CSS, スマートフォン

著者プロフィール

芦之由（あしのよし）

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/