週刊Webテク通信

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

ネットで見かけた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 自分の欲しい情報がまとまったメルマガを作れるサービス

おすすめ記事

記事・ニュース一覧