週刊Webテク通信

2019年1月第3週号1位は、2019年のデザインにおける重要な傾向、気になるネタは、世界初の折りたたみスマホ「FlexPai」、中国メーカーのRoyoleから登場

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

1. How will you design in 2019? - The Designesthttps://thedesignest.net/design-trends-2019/

2019年のデザインにおける重要な傾向についてまとめた記事です。

  • タイポグラフィはこぞって基本的なものに
  • イラストを使うことが増えている
  • 良い文章
  • マイクロコピーが重要
  • デザインにおけるアクセシビリティ
  • よりプライバシーに配慮する
図1 2019年のデザインにおける重要な傾向
図1 2019年のデザインにおける重要な傾向

2. Top Pens of 2018 on CodePenhttps://codepen.io/2018/popular/pens/

コード共有サイトCodePenが、2018年に多くの「いいね」を集めたコードのランキングを発表しています。

100位から10個ずつ複数ページに分けて発表していて、なかなか上位にたどり着けません。1位はCSSで描いたアニメーションするイラストでした。ベスト10のページはこちらです。

図2 CodePenの2018年のランキング
図2 CodePenの2018年のランキング

3. 8 Most Interesting JavaScript Frameworks to Learn in 2019 - Developer Drivehttps://www.developerdrive.com/2018/12/best-javascript-frameworks-learn/

2019年に学びたい、JavaScriptフレームワークを8つ紹介しています。

今年は、React、Vue.js、Angularあたりを学んでみたいと個人的に思っていたので、同じように思ってる人もいるはずと考えて取り上げました。

図3 2019年に学びたい8つのJavaScriptフレームワーク
図3 2019年に学びたい8つのJavaScriptフレームワーク

4. Will Adobe XD kill Sketch and InVision? – UX Collectivehttps://uxdesign.cc/will-adobe-xd-kill-sketch-and-invision-7fc4e562fc1a

UI/UXツール市場を現在支配しているSketchとInVisionに対抗し、Adobe XDが天下を取れるのかを推察しています。

昨年10月のアップデートで、プラグイン対応、音声プロトタイピング、自動アニメーション、リンクシンボル、ドラッグジェスチャーといった新機能が付いたことで、Adobe XDが無視できない存在になったとのことです。

そのほか、見逃せないXDの機能は以下の6つ。

  1. PhotoshopとIllustratorのファイルを開ける
  2. Sketchファイルを開ける
  3. XDファイルはAfter Effectsで開ける
  4. 開発者に受け渡す機能
  5. コメント
  6. Slackなどのコラボレーションツールとの統合

また、XDは1つのソフトウェアでワイヤーフレームから高精度のプロトタイピング、開発者への受け渡しまでできることも大きな利点になると解説していました。

図4 Adobe XDはSketchとInVisionに勝利するのか?
図4 Adobe XDはSketchとInVisionに勝利するのか?

5. Gillde - Design Inspiration - Graphic - Design - Motion - Art - Inspirations - Graphicroozanehttp://gillde.com/

デザインのインスピレーションとなる作例をたくさん集めたサイトです。

UI/UXデザイン、モーショングラフィック、イラストなどの参考になる作例をまとめたギャラリー記事を随時アップしています。

図5 デザインインスピレーションをたくさん集めたサイト
図5 デザインインスピレーションをたくさん集めたサイト

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

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

Cleanmock | Give a clean look to your great ideas with clutter free mockupshttps://cleanmock.com/designer

モバイルアプリの紹介画像などに使える、モックアップ画像(ハメコミ合成写真)を作るサービスです。iPhoneやPixel 2などの画面に、手持ちのキャプチャ画像などを合成できます。

カスタマイズ性はそれほど高くないですが、用意されているテンプレートのままで、シンプルに見映えの良い画像を作れます。

無料でも使えますが、無料版はお試し版的な意味合いのようです。高解像度の画像をダウンロードする、背景色を自由に変えるなど、多くの機能は有料版でのみ使用可能となっています。

図6 モバイルアプリなどのモックアップ画像を作るサービス
図6 モバイルアプリなどのモックアップ画像を作るサービス

おすすめ記事

記事・ニュース一覧