週刊Webテク通信

2019年3月第3週号1位は、WordPressデザインの2019年のトレンド、気になるネタは、Apple Musicの歌詞検索、日本でも

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2019年3月11日~3月17日の間に見つけた記事のベスト5です。

1. 11 WordPress Design Trends for 2019 – eWebDesignhttps://ewebdesign.com/2019-wordpress-design-trends/

WordPressでのウェブデザインの2019年のトレンドをまとめています。

  1. 非対称でグリッドを使わない
  2. ポップアップが消滅し固定される要素が増えた
  3. 最大主義(しかしそれはまたミニマリズムでもある)
  4. モバイルファーストなデザインと親指フレンドリーなナビゲーション
  5. 彩度の高い配色
  6. ベクトルベースのイラストを多用したデザイン
  7. モノクロのパレット
  8. 太いフォントを使う
  9. 動画がさらに目立つようになる
  10. グラデーションが帰ってきた
  11. バーチャル/拡張現実感
図1 WordPressデザインの2019年のトレンド
図1 WordPressデザインの2019年のトレンド

2. Enhancing Website Design with UX Writing | Webdesigner Depothttps://www.webdesignerdepot.com/2019/03/enhancing-website-design-with-ux-writing/

UXライティングによってウェブデザインを強化する方法を解説した記事です。UXライターの視点から、デザインを良くするために気をつけることをまとめています。

  1. 色で混乱させない
  2. 対称性を維持する
  3. 段落を分ける
  4. 見出しが占めるスペースを意識する

2は、横並びのレイアウトになった場合に、各要素の文字数を揃えるといった意味です。

図2 UXライティングによってウェブデザインを強化する方法
図2 UXライティングによってウェブデザインを強化する方法

3. 13 Instagram Accounts for UX, UI Design | Practical Ecommercehttps://www.practicalecommerce.com/13-instagram-accounts-for-ux-ui-design

UX/UIデザインに関する投稿をしているInstagramのアカウントを13個紹介しています。

Instagramだけで情報発信しているUI/UXデザイナーはあまりいないと思いますが、画像ギャラリー的に作品を見られて興味深いです。どういうハッシュタグをつけているのかも参考になります。

図3 UX/UIデザインに関する投稿をしているInstagramアカウント
図3 UX/UIデザインに関する投稿をしているInstagramアカウント

4. Web Design Museum 1991 – 2006https://www.webdesignmuseum.org

1991年から2006年までのウェブデザインをキャプチャ画像で閲覧できます。企業/ブランド別や、年別に絞り込んで見ることが可能です。

1990年から2017年までのウェブデザインの歴史もまとめてあり、読み応えがあります。

図4 ウェブデザインの歴史を振り返る⁠博物館⁠サイト
図4 ウェブデザインの歴史を振り返る“博物館”サイト

5. Using Shaders to Create Realistic Special Effects in Web Designhttps://speckyboy.com/shaders-realistic-special-effects-web-design/

水滴や海などをWebGLでリアルにシェーディングした例をCodePenよりまとめています。

GLSL(OpenGL Shading Language)というシェーダ専用言語を使っているようです。

図5 リアルにシェーディングした効果の例いろいろ
図5 リアルにシェーディングした効果の例いろいろ

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

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

FastCharts.iohttps://fastcharts.io/

テキストデータからグラフを生成するサービスです。タブ区切りかカンマ区切りのテキストから簡単にグラフを作れます。

グラフは面グラフ、棒グラフ、縦棒グラフ、折れ線グラフの4種類から選べます。デフォルトでもきれいなグラフを作ってくれて、サイズや色など細かい調節も可能です。棒グラフの棒の色は変えられません。

サンプルのデータを用意しているので、すぐに試すことができます。作ったグラフはPNGかSVGでダウンロードできます。ウェブサイトに埋め込む機能も欲しいと思いました。

図6 テキストデータからグラフを生成するサービス
図6 テキストデータからグラフを生成するサービス
図7 FastCharts.ioで生成したグラフの例
図7 FastCharts.ioで生成したグラフの例

おすすめ記事

記事・ニュース一覧