週刊Webテク通信

2020年3月第4週号　1位は，デザインにおけるストーリーテリングの10のヒントと事例，気になるネタは，iPadOS 13.4、3月24日にリリース決定。Magic Trackpadなど既存トラックパッドやマウスも利用可能

Webテク, Webデザイン, Web広告, ストーリーテリング, CSS, Webサービス, テレワーク, アニメーション, iPad

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

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

1. What Is Storytelling in Design? 10 Tips & Examples | Design Shackhttps://designshack.net/articles/graphics/storytelling-in-design/

デザインにおけるストーリーテリングについて，10個のヒントと事例を紹介しています。

  1. インタラクティブな体験を作る
  2. テキストを使用する
  3. ゲームをプレイする
  4. 「誰が」と「なぜ」を説明する
  5. ユーザーに納得してもらう
  6. 視覚的なテーマを確立する
  7. 感情に訴える
  8. 音を使う
  9. ユーザーのために作る
  10. 信憑性を見せる

図1　デザインにおけるストーリーテリングの10のヒントと事例

図1　デザインにおけるストーリーテリングの10のヒントと事例

2. Everything About Auto in CSShttps://ishadeed.com/article/auto-css/

CSSの値としてマージン，位置，高さ，幅などに使える「auto」に関するガイドです。autoがどう機能するかと，活用方法についてまとめています。

flexbox，CSS Gridでの自動マージンの使い方など，理解しておきたい情報が満載です。

図2　CSSの「auto」に関する完全ガイド

図2　CSSの「auto」に関する完全ガイド

3. Neumorphism and CSS | CSS-Trickshttps://css-tricks.com/neumorphism-and-css/

ニューモーフィズムデザインをCSSで実装する方法を解説しています。浮いているのではなく盛り上がっているように見える，ニューモーフィズムの特徴である効果をbox-shadowで実現しています。

ニューモーフィズムのUIを使いすぎると視覚的な階層が理解しにくくなるので，重要な部分のみに使った方がいいとのことでした。

図3　ニューモーフィズムをCSSで実装する方法

図3　ニューモーフィズムをCSSで実装する方法

4. Exciting New Tools for Designers, March 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/03/exciting-new-tools-for-designers-march-2020/

デザイナーのためのエキサイティングなツールをまとめた記事です。ウェブサービス，アプリ，チュートリアル，フォントなどを紹介しています。

有名なサービスの類似サービスをまとめたOpensource Builders，動画の背景を自動切り抜きするUnscreenなど，興味深いものがいろいろ掲載されていました。

図4　デザイナーのためのエキサイティングなツールいろいろ

図4　デザイナーのためのエキサイティングなツールいろいろ

5. 9 FontAwesome Alternatives That Are Equally As Good - Hongkiathttps://www.hongkiat.com/blog/free-font-icons-to-bookmark/

FontAwesomeの代わりになるアイコンセットをまとめています。FontAwesomeと同様の使い勝手とはいきませんが，無料で使えるものが揃っています。

Twitterの絵文字アイコンやマテリアルデザインのアイコンもありました。

図5　FontAwesomeの代わりになるアイコンセットまとめ

図5　FontAwesomeの代わりになるアイコンセットまとめ

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

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

Animockup — Free Animated Mockup Makerhttps://animockup.com/

Animockupはアニメーションするモックアップを作れるサービスです。スマホやスマートウォッチ，パソコンの画面にムービーをはめ込んで，GIFアニメかWebm，mp4でダウンロードできます。

モックアップとして選べるデバイスはAppleのもの中心に20種類くらいあります。はめ込む動画はあらかじめmp4，mov，webmフォーマットで用意しておきます。5MBまでの動画しかアップできません。

背景色を変えたり，文字を入力することも可能です。画像を追加できますが，動画より前面に表示されるので背景には使えません。ロゴなどを入れるためなのでしょう。今のところ無料で使えて，ウォーターマークが入ったりもしません。

図6　アニメーションするモックアップを作れるサービス

図6　アニメーションするモックアップを作れるサービス

今週の気になるWebネタ

iPadOS 13.4、3月24日にリリース決定。Magic Trackpadなど既存トラックパッドやマウスも利用可能 - Engadget 日本版https://japanese.engadget.com/jp-2020-03-18-ipados-13-4-3-24-magic-track-pad.html

iPad Proの新モデルが発表されましたが，トラックパッドを正式にサポートしたiPadOS 13.4も登場しました。トラックパッド付きのMagic Keyboardが話題ですが，Magic Mouse 2，Magic Trackpad 2も動作するそうです。

Magic Keyboardは2018年モデルのiPad Proにも対応するという情報はありましたが，外付けのトラックパッドも使えるかどうかの情報はなくて気になっていました。無事，対応が発表されてうれしいです。

文字入力時のカーソル移動にはトラックパッドが便利だと思いますが，iPadで文字入力しない人にはそれほど使うシーンはないかもしれません。iPadを操作している様子を画面収録するときに，カーソル的なものが表示されるとわかりやすいので，わたしはその点でトラックパッド／マウス対応に注目しています。

Webテク, Webデザイン, Web広告, ストーリーテリング, CSS, Webサービス, テレワーク, アニメーション, iPad

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote