週刊Webテク通信

2020年4月第4週号 1位は，リモートワークでチームで作業するのに役立つツールいろいろ，気になるネタは，Facebookが友だちや家族への特別の愛と気づかいを表現する新リアクション「care」を追加

Webテク, Webデザイン, Web広告, リモートワーク, イラスト, メルマガ, Facebook, CSS

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

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

1. 16 Tools for Keeping Your Remote Design Team Together (and on Task) | Webdesigner Depothttps://www.webdesignerdepot.com/2020/04/16-tools-for-keeping-your-remote-design-team-together-and-on-task/

リモートワークでチームで作業するのに役立つツールをまとめた記事です。

以下のカテゴリーに分けて16個のツールを紹介しています。

  • デザイン作業のためのプロジェクト管理とコラボレーション
  • 一般的なプロジェクト管理とコラボレーション
  • 会議ツール，仮想オフィス，コミュニケーションハブ
  • デザインライブラリーとドキュメント整理
  • 共同での校正と編集ツール
  • 個人が平静でいるためのツール

図1　リモートワークでチームで作業するのに役立つツールいろいろ

図1　リモートワークでチームで作業するのに役立つツールいろいろ

2. Listboxes vs. Dropdown Listshttps://www.nngroup.com/articles/listbox-dropdown/

リストボックスとドロップダウンリストを比較した記事です。

リストボックスは，1つしか選べないものと複数選択できるもの，スクロールするものとしないものに分けられます。さらに見た目も，ドロップダウンが展開した状態のようなリスト表示と，チェックボックスとがあります。

ドロップダウンリストは1つしか選択できず，スクロールするものとしないものに分けられます。

それぞれの利点と欠点の紹介と，どういう基準でどちらが使用できるかの表が参考になります。

図2　リストボックスとドロップダウンリストの比較

図2　リストボックスとドロップダウンリストの比較

3. Why editorial illustrations look so similar these days — Quartzhttps://qz.com/quartzy/1728767/why-editorial-illustrations-look-so-similar-these-days/

エディトリアルデザインに使われるイラストが最近どれも似通っている理由を開設した記事です。ベクターベースでフラットな塗り，シンプルな形状，少ない色数のイラストのことで，正式な呼び名はなくフラットイラストレーション，コーポレートメンフィスなどと呼ばれています。

理由としては，3つのTとして，テクノロジー（technology⁠）⁠，テイスト（taste⁠）⁠，テリブルペイ（terrible pay）が挙げられていました。

コンピューターで描くテクノロジーの要素と，ベクターアートの味わい（taste⁠）⁠，そしてイラストレーターへの報酬が減っている（terrible pay）ので効率を追求するようになったのが理由ということです。

図3　エディトリアルデザインのイラストが最近どれも似通っている理由

図3　エディトリアルデザインのイラストが最近どれも似通っている理由

4. Newsletter Signup: 7 Essential Tips for Higher Subscription Rates - noupehttps://www.noupe.com/business-online/newsletter-signup-7-essential-tips-for-higher-subscription-rates.html

ニュースレター（メルマガ）の購読者を増やすためのテクニックをまとめています。

  1. フォームのデザインに注意する
  2. ニュースレターのサインアップメールを送信
  3. 入力フィールドをセグメント化
  4. コールトゥアクションを改善する
  5. 新しい購読者に報酬を与える
  6. ニュースレターに登録するタイミングの微調整
  7. フォームのA / Bテスト

図4　ニュースレターの購読者を増やすためのテクニック

図4　ニュースレターの購読者を増やすためのテクニック

5. Tips to Nailing Big Typography Designshttps://line25.com/articles/big-typography

大きなタイポグラフィを使ったデザインを効果的にするためのヒントを紹介した記事です。

大きなタイポグラフィの基準とその影響，タイポグラフィのトレンドについてまとめています。

図5　大きなタイポグラフィを使ったデザインのヒント

図5　大きなタイポグラフィを使ったデザインのヒント

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

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

Dark CSS theme generator | Night Eyehttps://nighteye.app/dark-css-generator/

ウェブサイトのダークモード用CSSを自動で作ってくれるサービスです。URLを指定するだけでCSSを生成します。見事にダークテーマを作ってくれるので驚きました。

できたCSSは表示するか，コピー，ダウンロードできます。そのCSSを適用した状態を見る機能はありませんが，ブラウザのデベロッパー機能を使えば確認できます。

ほぼ全てのウェブサイトをダークモード表示に変更する，ブラウザ拡張機能「Night Eye」と同じアルゴリズムを使っているそうです。拡張機能は有料ですが，このジェネレーターは無料で使えるのでありがたいですね。

図6　ダークモード用CSSを自動生成するサービス

図6　ダークモード用CSSを自動生成するサービス

今週の気になるWebネタ

Facebookが友だちや家族への特別の愛と気づかいを表現する新リアクション「care」を追加 | TechCrunch Japanhttps://jp.techcrunch.com/2020/04/18/2020-04-17-facebook-adds-new-care-emoji-reactions-on-its-main-app-and-in-messenger/

Facebookの「いいね！」のオプション的なリアクションに「care」が追加されます。「⁠新型コロナ・パンデミックの中で誰かを気にかける気持ちを表す新たな方法」とのことです。

「うけるね！」「⁠すごいね！」のとき出てくる黄色い顔の絵文字ががハートを抱いたようなデザインです。Messenger版の「care」は鼓動するハートで，従来のハートを長押しすると出せるそうです。

この「care⁠」⁠，日本語だと「気をつけて」「⁠お大事に」といったところでしょうか。「⁠悲しいね」より相手に寄り添ってる感じがしますし，実装されるとかなり使われそうな予感がします。

Webテク, Webデザイン, Web広告, リモートワーク, イラスト, メルマガ, Facebook, CSS

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote