週刊Webテク通信

2020年5月第5週号 1位は,ウィンドウサイズが中途半端なときの「中間の」デザインが崩れる問題と対策,気になるネタは,ZOZO,Web会議向け“着るグリーンバック”Tシャツ発売 デジタルファッションを提案するページ開設で

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

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

1. Thinking About The In-between Design Caseshttps://ishadeed.com/article/in-between/

レスポンシブウェブデザインにおいて,ウィンドウサイズが中途半端なときの「中間の」デザインが崩れたり見栄えが悪くなる問題について,よくある例を紹介するとともに解決法を提案しています。

タブレットサイズとモバイルサイズとの「中間の」横幅の場合に,メニューの項目の一部が改行されて下に行ったり,横幅いっぱいに広がったコンテンツが大きすぎたりするケースですね。

対策のため気をつける点として,以下の3つを挙げていました。

  • 画面サイズによるブレイクポイントだけでなく,コンテンツによってのブレイクポイントを考える
  • デザイナーと話す
  • 最新CSSテクニック(CSSグリッド,Flexボックス,CSS比較関数)を使用する

また,この「中間の」問題を見つけるためにテストする方法も解説しています。

図1 ウィンドウサイズが中途半端なときの「中間の」デザインが崩れる問題と対策

図1 ウィンドウサイズが中途半端なときの「中間の」デザインが崩れる問題と対策

2. 6 web accessibility features that benefit more people than you think | Global Accessibility Awareness Day | The Big Hackhttps://bighack.org/6-web-accessibility-features-that-benefit-more-people-than-you-think-global-accessibility-awareness-day/

すべてのユーザーに役立つ6つのWebアクセシビリティ機能を紹介しています。

  • コントラストのよい色の組み合わせ
  • わかりやすいい言葉で書く
  • ビデオのクローズドキャプション
  • キーボードのみのナビゲーション
  • 論理的な見出しの階層構造
  • 大きなリンク,ボタン,コントロール

図2 6つのWebアクセシビリティ機能

図2 6つのWebアクセシビリティ機能

3. How to create neumorphism web components/elements with only CSS and HTML - Themesberghttps://themesberg.com/blog/tutorial/neomorphic-elements-css-html-tutorial

ニューモーフィズムのコンポーネント,エレメントをHTMLとCSSで実装するコーディング例を紹介した記事です。

最後に,ニューモーフィズムのコンポーネントが用意されたNeumorphism UIを無料で提供しています。そして,Neumorphism UI PROという有料版も提供していました。

図3 ニューモーフィズムをHTMLとCSSで実装する例

図3 ニューモーフィズムをHTMLとCSSで実装する例

4. 7 Examples of Scroll-Triggered Animations in Web Design - Onextrapixelhttps://onextrapixel.com/scroll-triggered-animations-web-design/

スクロールとともにアニメーションするウェブデザインの例を7つ紹介しています。

スペースを犠牲にすることなく,それほどコストをかけずに動きのあるサイトにできるので,このアプローチは人気があるとのことでした。

図4 スクロールとともにアニメーションするウェブデザインの例

図4 スクロールとともにアニメーションするウェブデザインの例

5. The Kawaiization of product design - DESK Magazinehttps://vanschneider.com/the-kawaiization-of-product-design

プロダクトデザインのカワイイ化(Kawaiization)について解説しています。

柔らかい色で,形は丸みを帯びていて,タイポグラフィは目立たない,親しみやすくカワイイスタイルのものを,この1,2年の間にブランドとプロダクトデザインでよく見かけるそうです。アプリデザインでの例を多数掲載しています。

カワイイを利用することで,ありふれたタスクや不快なタスクをより楽しくする効果があるとのことで,⁠生産性ツールは,どうぶつの森のような見た目になり始めている」と世界的にヒットしている「あつまれ どうぶつの森」の名も出てきていました。

図5 プロダクトデザインのカワイイ化

図5 プロダクトデザインのカワイイ化

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

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

Walkie | Real time voice chat for your teamhttps://walkie.chat/

Walkieはチームで使うリアルタイムボイスチャットのサービスです。まだスタートしていないサービスなのですが,これからのリモートワーク時代に注目されると思います。

機能を音声チャットのみに絞っているのが特徴で,テキストチャットより感情や意思を伝えやすいと主張しています。グループのメンバーが常につながっている状態で,手軽に指定したメンバーとボイスメッセージでリアルタイムのやり取りができます。

ボイスメッセージが来ると自動で再生されますが,作業に集中したいときなどはオフにしておき,オンにしたときに録音を聞くこともできます。すべての音声は24時間保存されるとのこと。リモートワークでの同僚とのやり取りに良さそうな,企業向けのサービスだと思いました。

図6 チームで使うリアルタイムボイスチャットサービス

図6 チームで使うリアルタイムボイスチャットサービス

今週の気になるWebネタ

ZOZO,Web会議向け“着るグリーンバック”Tシャツ発売 デジタルファッションを提案するページ開設で - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2005/22/news098.html

ZOZOがZoomのバーチャル背景機能を利用して,グリーンのTシャツにデザインを映すデジタルファッションを提案しています。Tシャツ上で動画が動いてるのは,なかなか新鮮です。

アイデアとしては以前からありますが,グリーンのTシャツ販売と動画/画像の提供をしているところがニュース性がありさすがです。配布している素材が今後増えるといいと思います。

この手のサービスを提供する場合,デジタルリテラシーが低い人に向けて,テクニカルな解説をわかりやすくできるかどうかがポイントでしょう。ZOZOのページでは,さらっとした説明ではありますが,イラスト画像を使ったり,FAQを用意したりの工夫が見られました。

著者プロフィール

芦之由(あしのよし)

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

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

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