週刊Webテク通信

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

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

ネットで見かけた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 モバイルアプリなどのモックアップ画像を作るサービス

今週の気になるWebネタ

世界初の折りたたみスマホ「FlexPai」,中国メーカーのRoyoleから登場 - CNET Japanhttps://japan.cnet.com/article/35128045/

世界初の画面ごと折りたためるスマートフォンは,中国のRoyole(ロヨル)社より登場しました。あまり聞き慣れない会社ですが,フレキシブルディスプレーをコンシューマの手元に届けた世界初の会社で,わずか5年で企業価値が50億ドルに急成長したユニコーン企業だそうです。

写真や動画で見る限り,二つ折りにしたときの厚みが結構あるなと思いましたが,折れ目が付いたりはしないようでなかなかの完成度だと感じました。ただ,これが未来のスタンダードになるかというと疑問を覚えます。

フレキシブルなディスプレイといえば,LGが発表したスクリーンを巻き取り収納できるテレビは良いアイデアだと思いました。これは追随するメーカーもいるはずですし,一時的にかもしれませんが流行りそうな予感がします。

著者プロフィール

芦之由(あしのよし)

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

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

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