gihyo.jpサイトのロゴ

週刊Webテク通信

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

2018-06-28

ネットで見かけた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　備忘録的に使えるチャットボット

おすすめ記事

記事・ニュース一覧