週刊Webテク通信

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

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

ネットで見かけた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で生成したグラフの例

今週の気になるWebネタ

Apple Musicの歌詞検索,日本でも 「彼女にすればどうにでもなるし」検索で「Shangri-La」 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1903/15/news082.html

Apple Musicでの歌詞を使った曲検索が,日本語でも使えるようになりました。歌詞が登録されていない曲では当然歌詞での検索はできませんが,それでも大きな進歩です。

検索結果に歌詞の一部が表示されるので,歌詞から検索されていることがわかります。iTunes Storeでも歌詞検索できるとのことでやってみたんですが,確かに検索されているものの,歌詞で検索されたかどうかがわかる表記がありませんでした。

「○○という歌詞の曲をかけて」とSiriに話しかけて曲を再生することもできるそうです。スマートスピーカーに歌詞の一部を言えばその曲を再生してくれるのは便利なはずだと思いました。

著者プロフィール

芦之由(あしのよし)

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

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

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