週刊Webテク通信

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

ネットで見かけた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 シンプルなリンク集ページが作れるサービス

おすすめ記事

記事・ニュース一覧