週刊Webテク通信

2018年1月第2週号 1位は,2017年に人気のUIデザインツールまとめ,気になるネタは,AmazonはFire TVのYouTubeアプリをアップデートしてユーザーをWebブラウザーに誘導

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

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

1. Reviewing the most popular UI design tools in 2017https://designrevision.com/reviewing-popular-ui-design-tools-2017/

2017年に人気のUIデザインツールについて評論した記事です。Sketch,Adobe XD,Gravit Designer,Affinity Designer,Figma,Photoshopの各ツールについて,詳細な解説と良い点・悪い点をまとめています。

全部読むのが面倒という人のために,以下の内容が最初にまとめられていました。

  • UIデザインに真剣に取り組みMacを使っているのならSketch
  • デザインとプロトタイプの両方を同じツールで行いたいのならAdobe XD
  • 専門デザイナーがいない小規模のリモートチームに参加していて,リアルタイムのコラボレーション機能を備えたツールを探している場合はFigma
  • クロスプラットフォームで使える強力なベクター編集ツールが必要な場合は,Affinity DesignerまたはGravit Designer

図1 2017年に人気のUIデザインツールまとめ

図1 2017年に人気のUIデザインツールまとめ

2. Web Design Trends 2018: What Will Make an Impact This Year?https://www.shopify.ca/partners/blog/web-design-trends-2018

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

  1. バリアブルフォント
  2. より創造的なレイアウト
  3. WebVRの台頭
  4. 人工知能
  5. 持続可能なデザイン
  6. 包括的なデザイン
  7. 倫理的なデザイン
  8. デザインシステム
  9. 声によるユーザーインターフェイス
  10. ホームページの終焉
  11. ブランド体験
  12. ストーリーを語る力

図2 2018年のウェブデザインのトレンド

図2 2018年のウェブデザインのトレンド

3. Chrome is turning into the new Internet Explorer 6 - The Vergehttps://www.theverge.com/2018/1/4/16805216/google-chrome-only-sites-internet-explorer-6-web-standards

ChromeがかつてのInternet Explorer 6のような存在になりつつあることに警鐘を鳴らす記事です。

Web標準規格を無視したり,Chromeでしか動作しないサービスが出てきていることから,ChromeがIntrnet Explorer6と同じような道を歩み始めているのではないかと指摘しています。

ウェブブラウザの歴史をざっと振り返ることができるのも,この記事の面白いところです。

図3 ChromeがIntrnet Explorer 6のようになりつつある件について

図3 ChromeがIntrnet Explorer 6のようになりつつある件について

4. CSS Background Patterns From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-background-patterns/

CSSだけで作った背景パターンを,コード共有サービスCodePenから紹介しています。

ドットや斜線,チェック柄のようなものから,ハート型や複雑な模様までいろいろなパターンがありました。

図4 CSSだけで作った背景パターンいろいろ

図4 CSSだけで作った背景パターンいろいろ

5. Fun Times With Sizing Grid Elements | CSS-Trickshttps://css-tricks.com/fun-times-sizing-grid-elements/

CSSグリッドのグリッド要素がグリッド領域のサイズと必ずしも同じではないという事実を利用した,面白い効果の実験です。

フォームのフィールドのサイズ変更や,カーテンのように開く効果を実装した例を紹介しています。

図5 グリッド要素のサイズ変更を面白い方法で実装した例

図5 グリッド要素のサイズ変更を面白い方法で実装した例

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

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

Listly | Fully-automated Web Scrapinghttps://www.listly.io/

Listlyはウェブページから情報を収集してExcelファイルに変換するサービスです。たとえばECサイトから商品リストのExcelファイルを生成できます。

例として掲載されているECサイトからの情報取得の場合,サムネイル画像のURL,ブランド名,商品名がリンク付きのExcelファイルに変換されています。自社サイトの場合は元々データベースを持っているはずなので,ライバルサイトを研究するなどグレーゾーンな使われ方が想定されている気がします。

ログインせずに試すことができますが,ログインすると複数サイトをまとめて処理したり,スケジュールを設定して一定間隔ごとに情報取得できるようになります。Chromeの拡張機能もあり,これを使えばログインが必要なページの場合も情報取得できるそうです。

図6 ウェブページの情報を収集してExcelファイルに変換するサービス

図6 ウェブページの情報を収集してExcelファイルに変換するサービス

今週の気になるWebネタ

AmazonはFire TVのYouTubeアプリをアップデートしてユーザーをWebブラウザーに誘導 | TechCrunch Japanhttp://jp.techcrunch.com/2017/12/29/2017-12-28-amazon-updates-fire-tvs-youtube-app-to-redirect-users-to-a-web-browser-instead/

GoogleとAmazonがもめていることから,Amazon Fire TVへのYouTubeの提供が停止されるという問題ですが,見られなくなる事態は回避したようです。ブラウザ(SilkかFirefox)を使ってYouTubeが見られるという解決策で,根本的な解決にはなっていませんが。

ツイッターで調べてみると,ブラウザでも同じ操作感なので問題なしという発言がある一方,使えなくなって不便と言っている人もいます。アプリから使えなくしたというGoogleの攻撃は効果はあったと言えるでしょう。

この問題から話は逸れますが,Fire TVでFirefoxアプリを使ってウェブが見られるというのは面白いかもしれません。ウェブからアプリへという流れが一段落して,もう一度ウェブへという動きにも繋がるんじゃないかと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

バックナンバー

週刊Webテク通信

  • 2018年1月第2週号 1位は,2017年に人気のUIデザインツールまとめ,気になるネタは,AmazonはFire TVのYouTubeアプリをアップデートしてユーザーをWebブラウザーに誘導

バックナンバー一覧

コメント

コメントの記入