週刊Webテク通信

2020年1月第4週号 1位は，2020年に見ておくべき7つのUIトレンド，気になるネタは，Chromeアプリ，Windows，Mac，Linux向けは2020年12月にサポート終了

Webテク, Webデザイン, Web広告, UI, UX, CSS, Chrome

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

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

1. 7 UI trends to watch in 2020https://www.imaginarycloud.com/blog/7-ui-trends-for-2020/

2020年に見ておくべき7つのUIトレンドを紹介した記事です。

  1. 2D＆3Dイラストレーション
  2. アニメーション
  3. スマートフォンのフルスクリーン，モバイルファースト
  4. 色数の多いカラーパレット
  5. 特大のフォント
  6. グリッドを無視，非対称のレイアウト
  7. ニューモーフィズムデザイン

図1　2020年に見ておくべき7つのUIトレンド

図1　2020年に見ておくべき7つのUIトレンド

2. Web Design Trends - Predictions For 2020 - 1stWebDesignehttps://1stwebdesigner.com/web-design-trends-predictions-for-2020/

2020年のウェブデザインのトレンドをまとめた記事を，まとめて紹介しています。

それぞれの記事でトレンドとして挙げられた項目をリストで紹介しているので，この記事を読むだけで2020年のウェブデザインのトレンドを網羅することができそうです。

図1　2020年のウェブデザインのトレンドをまとめた記事のまとめ

図1　2020年のウェブデザインのトレンドをまとめた記事のまとめ

3. 13 ways to vertical center - LogRocket Bloghttps://blog.logrocket.com/13-ways-to-vertical-center/

CSSで垂直方向にセンター揃えする方法を13種類まとめています。

  1. 絶対配置と自動マージン
  2. トップから50%とtranslate -50%
  3. テーブル
  4. 見えないエレメントを使った方法
  5. マージンオートのflexアイテム
  6. flexコンテナの擬似要素
  7. フレックスコンテナの揃え
  8. フレックスアイテムの揃え
  9. グリッドコンテナの揃え
  10. グリッドアイテムの揃え
  11. グリッドの疑似要素
  12. 明示的なグリッド行の配置
  13. グリッドアイテムの自動マージン

図3　CSSで垂直方向にセンター揃えする方法いろいろ

図3　CSSで垂直方向にセンター揃えする方法いろいろ

4. CSS Grid Template Areas In Actionhttps://ishadeed.com/article/grid-area/

CSSグリッドでウェブページをデザインする方法を，段階を追って丁寧に解説した記事です。

CSSグリッドが使えないブラウザにはFlexboxを使ったレイアウトを適用する，プログレッシブエンハンスメントの考え方でのコーディング方法も紹介しています。

図4　CSSグリッドでのレイアウト方法を解説

図4　CSSグリッドでのレイアウト方法を解説

5. Top UI UX Design Inspiration | UX Planethttps://uxplanet.org/top-ui-ux-design-inspiration-d5c3689d6cfa

UI／UXデザインの参考になる作品をDribbbleから紹介しています。

若いデザイナーの，そこまで「いいね」を集めていないけど優れた作品をピックアップしているとのことでした。

図5　UI／UXデザインの参考になる作品いろいろ

図5　UI／UXデザインの参考になる作品いろいろ

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

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

LinkkPro - One Link for all your social media profiles.https://linkk.pro/

LinkkProは自分のプロフィールページを作るためのサービスです。ソーシャルメディアのプロフィールからのリンク先にして，他のソーシャルメディアやブログなどへのリンク集として使うことを想定しています。

各種ソーシャルメディアへのリンク，メールアドレス，ウェブページへのリンクを追加していきページを作ります。リンクにはサムネイル画像を入れられます。背景はテーマから選んだり，色のカスタマイズも可能です。

月6ドルの有料プランもありますが，基本的な機能は無料プランでも使えます。無料プランでも入れられるリンクの数に制限はないですし，アクセス解析も見られます。

図6　シンプルなリンク集ページが作れるサービス

図6　シンプルなリンク集ページが作れるサービス

今週の気になるWebネタ

Chromeアプリ，Windows，Mac，Linux向けは2020年12月にサポート終了 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2001/16/news074.html

Chromeアプリが終了というニュースがツイッターで話題になっていました。以前から出ていた話題ですが，一般の人に伝わってしまっていろんな誤解を生んでいるようです。

サポート完全終了までのスケジュールが発表されたことがきっかけですが，AndroidやiOSのChroneブラウザのアプリが終了するようにも読めること，Chromeアプリとは何かがわかりにくいことから混乱している人が多く見受けられました。

英語ではChrome Appなので，日本でもその名前のままにしておけば良かったのかもしれませんね。なお，Chrome OSでAndroidアプリが使えるようになったのも，Chromeアプリ完全終了の理由のひとつのようです。

Webテク, Webデザイン, Web広告, UI, UX, CSS, Chrome

著者プロフィール

芦之由（あしのよし）

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

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

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