週刊Webテク通信

2020年3月第3週号 1位は，新しく現代的な色のトレンド7つ，気になるネタは，Chatwork，SaaSベンダー9社によるテレワーク支援のオンライン展示会

Webテク, Webデザイン, Web広告, CSS, アイコン, テレワーク, メルマガ

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

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

1. 7 New & Modern Color Trends 2020 | Design Shackhttps://designshack.net/articles/trends/color-trends/

新しく現代的な色のトレンドを7つ紹介しています。

  1. パステルカラーを使ったウェブデザイン
  2. グラデーションを使ったアイコンデザイン
  3. レトロなネオンカラーを使ったロゴデザイン
  4. デュオトーンを使ったポスターデザイン
  5. 色あせた色を使ったラベルデザイン
  6. 黒と金色を使った商品デザイン
  7. 暗い色を使ったアプリUIデザイン

図1　新しく現代的な色のトレンド7つ

図1　新しく現代的な色のトレンド7つ

2. CSS Viewport Unitshttps://ishadeed.com/article/viewport-units/

CSSビューポートユニットについて，使用方法とユースケース，問題の解決方法について解説した記事です。

以下のような興味深い情報が掲載されていて参考になります。

  • 親要素の幅に関係なく画像を幅100%にする方法
  • ページのコンテンツが少ない場合もフッタをウィンドウの最下部に配置する方法
  • サイト上部に入れたカラーのボーダーの幅を画面サイズによって変える方法
  • 高さを100vhにしてもモバイルでスクロールが発生する問題の解決法

図2　CSSビューポートユニットについてのまとめ

図2　CSSビューポートユニットについてのまとめ

3. How to Create Cool Website Designs Without Sacrificing Usabilityhttps://line25.com/articles/cool-website-designs

ユーザビリティを犠牲にすることなく，クールなウェブサイトをデザインするためのヒントをまとめた記事です。

  • 常にシンプルに
  • ホームページはミニマルにする必要がある
  • フォント
  • ナビゲーション
  • 視覚的階層構造
  • グリッドを使うなど区画化したデザイン
  • 画像とイラストを使う
  • ファーストビューに注意する
  • 人物写真を使う
  • 広告をエレガントに配置する（または広告を配置しない）
  • モバイル最適化
  • 読み込み速度
  • 連絡先
  • 改善する

図3　ユーザビリティを犠牲にせずクールなウェブサイトをデザインする方法

図3　ユーザビリティを犠牲にせずクールなウェブサイトをデザインする方法

4. Learn Box Alignmenthttps://ishadeed.com/article/learn-box-alignment/

CSSのFlexboxとGridによる要素の揃えを学べます。テーブルの上に置いた4つの料理の配置の仕方を，コードと表示結果の画像で確認できるようになっています。

また，記事の最後に「インタラクティブデモ」としてCodePenが埋め込まれていて，実際にその場でコードを書き換えて結果を確認できる仕掛けも良くできています。

図4　CSSのFlexboxとGridによる要素の揃えを学習

図4　CSSのFlexboxとGridによる要素の揃えを学習

5. Coronavirus awareness iconshttps://www.iconfinder.com/p/coronavirus-awareness-icons

新型コロナウイルス関連の題材のときに使えるアイコンセットを多数紹介しています。

手洗い，消毒やマスクをしている人，ウイルスそのものなど，いろんなテイストの様々なアイコンが用意されていました。

図5　新型コロナウイルス関連のアイコンいろいろ

図5　新型コロナウイルス関連のアイコンいろいろ

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

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

Mailbrew - Beautiful Automated Newslettershttps://mailbrew.com/

Mailbrewは自分の欲しい情報がまとまったメルマガを作れるサービスです。Twitter，YouTube，RSSなどの新着をまとめてメール配信できます。

情報発信者が自分発の情報を配信するのに使えるかと思ったのですが，このサービスにユーザー登録しないとメールを受け取れないので，メルマガのようには使えませんでした。ユーザー同士だと他の人が作ったものを見たり，それをベースにカスタマイズも可能です。

無料プランでは，RSSとRedditしか登録できず，週1回しかメールを配信できません。月10ドル（年間まとめ払いで月8ドル）の有料プランにすると，発行できるメルマガ数は無制限で，発行スケジュールも毎日／毎週／毎月から選べ，情報元もTwitter，YouTube，Googleニュースなどが選べるようになります。

図6　自分の欲しい情報がまとまったメルマガを作れるサービス

図6　自分の欲しい情報がまとまったメルマガを作れるサービス

今週の気になるWebネタ

Chatwork，SaaSベンダー9社によるテレワーク支援のオンライン展示会 - CNET Japanhttps://japan.cnet.com/article/35150814/

Chatworkが「テレワークオンライン展示会」を開催しています。企業のテレワークのサポートをしている弁護士とテレワークを推進するツールベンダーが有志として集まっての実施とのことです。

オンラインセミナーによるカンファレンスのほか，お役立ち資料集，お役立ちツール集が公開されています。ツールはこの展示会に参加している日本企業のものが紹介されているようですが，資料集にはSlackやZoom関連の情報もありました。

新型コロナウイルスの影響でテレワークが注目されて，Chatworkなどコラボレーションツールを提供する側にはとてもチャンスだと思います。日本における企業のIT化が進むきっかけにもなりそうなので，関連ツールのベンダーには頑張って欲しいですね。

Webテク, Webデザイン, Web広告, CSS, アイコン, テレワーク, メルマガ

著者プロフィール

芦之由（あしのよし）

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

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

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