週刊Webテク通信

2018年6月第4週号 1位は，デザイン作業の段階に分けておすすめのUXツールを紹介，気になるネタは，Instagram、YouTubeに対抗する長尺動画サービス「IGTV」提供開始

Webテク, Webデザイン, Web広告, UX, アニメーション, CSS, 動画配信

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2018年6月4日～6月10日の間に見つけた記事のベスト5です。

1. UX Design Tools for 2018 (For Mac AND PC) – Prototyprhttps://blog.prototypr.io/ux-design-tools-for-2018-for-mac-and-pc-320a7be230c9

UXデザインツールについて，デザイン作業の段階に分けておすすめのツールを紹介しています。

  • コンセプト＆インスピレーション
  • コラボレーション＆バージョン管理
  • ワイヤーフレーム＆初期段階のデザイン
  • プロトタイピング
  • 高い精度でのデザイン
  • プレゼンテーション＆文書化
  • 開発者への橋渡し

UIデザインツールを各種紹介した「Best UI Design Tools, 2018 - UX Tricks」という記事もありました。

図1　デザイン作業の段階に分けておすすめのUXツールを紹介

図1　デザイン作業の段階に分けておすすめのUXツールを紹介

2. Never Overlook Animation in UX – The Lair – Mediumhttps://medium.com/the-lair/never-outlook-animation-84eafcddf414

UXにおけるアニメーションの重要性を解説した記事です。

アニメーションは，以下の用途に分けられるとのこと。それぞれのアニメーションの例も掲載しています。

  • 状況を示す
  • ナビゲーション
  • 反応を返す

図2　UXにおけるアニメーションの重要性

図2　UXにおけるアニメーションの重要性

3. How to Use Pre-Built Websites to Avoid Making These Unforgivable Design Mistakeshttps://line25.com/wordpress-themes/how-to-use-pre-built-websites

避けたいウェブデザインの間違いを5つまとめた記事です。

  1. 目標から逸脱しない
  2. 重要なコンテンツを見つけにくくしない
  3. 有名な他のサイトのように見えるものを作らない
  4. 独創性を追求するあまり混乱させない
  5. 業界標準を無視しない

図3　避けたい5つのウェブデザインの間違い

図3　避けたい5つのウェブデザインの間違い

4. 5 Design & Development Skills to Learn This Summerhttps://speckyboy.com/design-development-skills-learn/

この夏，デザイン＆開発スキルのために学ぶべきことを5つ紹介しています。

  1. CSSグリッド
  2. JavaScript
  3. マイクロインタラクション
  4. デザインシステム
  5. タイポグラフィ

図4　デザイン＆開発スキルのために学ぶべきこと5つ

図4　デザイン＆開発スキルのために学ぶべきこと5つ

5. Easier scrollytelling with position stickyhttps://pudding.cool/process/scrollytelling-sticky/

CSSの「position: sticky」を使用して，スクロール時に固定される要素を簡単に作る方法をレクチャーしています。

「position: sticky」を使うと，親要素の中でのみスクロール時に固定する要素がJavaScript不要で作れて便利です。

図5　スクロール時に固定される要素を簡単に作る方法

図5　スクロール時に固定される要素を簡単に作る方法

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

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

Wonderhttps://wonder-bot.com/

ロッカーのキーの番号，家のプリンタのインクカートリッジの型番などを覚えさせ，尋ねると答えてくれる個人用チャットボットを作れるサービスです。Slack，Messenger，Google Home，Amazon Echoに対応しています。

SlackとMessengerで試してみましたが，日本語も問題なく使えました。それぞれのサービスと連携させると，あとは「Remenber ○○ is ××」のようにWonderに話しかけると内容を覚えてくれます。Slackと連携した場合は，Wonderの管理画面を使って覚えさせたい内容を登録できます。

たとえば「メインイメージ」というキーワードに対し「1380x1035 px」と登録するなど，ウェブ制作やブログ，SNS運用に役立てることもできると思います。

図6　備忘録的に使えるチャットボット

図6　備忘録的に使えるチャットボット

今週の気になるWebネタ

Instagram、YouTubeに対抗する長尺動画サービス「IGTV」提供開始 | マイナビニュースhttps://news.mynavi.jp/article/20180621-651478/

InstagramがIGTVという動画サービスを開始しました。専用アプリもありますが，Instagramから利用することも可能です。一見ストーリーの延長線上かと思えるのですが，作り込んだ動画をアップする場という位置付けのようです。

これまでストーリーで15秒，投稿では60秒までの動画しか扱えませんでしたが，IGTVでは最長10分（多数のフォロワーを持つ認証済みアカウントで，PCからの投稿なら最長60分）の動画をアップロードできます。

縦長動画専用というところが注目されており，縦長動画用の編集アプリやテクニックが今後ホットな分野になるように感じます。iMovieは基本的に縦長動画に対応していませんし，使いやすい縦長動画編集アプリを開発すれば大ヒットするんじゃないでしょうか。

Webテク, Webデザイン, Web広告, UX, アニメーション, CSS, 動画配信

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote