gihyo.jpサイトのロゴ

週刊Webテク通信

2018年12月第3週号1位は、デザインツールに関するアンケート調査の結果発表、気になるネタは、「キャリアメール」まだ4割のスマホユーザーが使用─⁠─MMD調査

2018-12-20

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

1. Uxtools.co | 2018 Design Tools Survey Resultshttp://uxtools.co/survey-2018

約2800人のデザイナーからの回答を元にした、デザインツールに関するアンケート調査の結果をまとめた記事です。

以下、わたしが印象的に思った点をざっくり挙げます。

  • 回答したデザイナーの国別でインドが5位
  • Mac強し、Sketch強し
  • Figmaは存在感を増し、今後最も期待されている
  • Adobe XDは健闘しているが、Adobe離れが進んでいることも感じる
図1　デザインツールに関するアンケート調査の結果発表
図1　デザインツールに関するアンケート調査の結果発表か

2. Design Handoff: 7 Things Must Known About Design Specs for Developershttps://www.mockplus.com/blog/post/design-handoff

ウェブデザインの場合、デザインとコーディングを同じ人が行うケースもありますが、分業する場合には素材や仕様などの受け渡しが発生します。この受け渡しのことをHandoffと呼ぶようで、Sketchファイルからレイアウト指示書を生成するZeplinのようなHandoffツールと呼ばれるジャンルもできています。

この記事では、デザイナーから開発者へのHandoff（受け渡し）をスムーズにするための7つのヒントを紹介しています。

  1. 効果的なコミュニケーションを確立する
  2. 受け渡しのためのチェックリストを準備する
  3. 高品質の素材を準備する（命名規則の定義、独立した画面の集まりではなくフローを共有する）
  4. ツールを使って受け渡しを自動化する
  5. 極端なケースも想定してデザインをする
  6. 複雑なアニメーション効果を詳細に説明する
  7. 受け渡し会議のスケジュールを決める
図2　デザイナーから開発者への受け渡しをスムーズにするための7つのヒント
図2　デザイナーから開発者への受け渡しをスムーズにするための7つのヒント

3. 7 Things You Must Remove From Your Website Before 2019 - SpyreStudioshttps://spyrestudios.com/7-things-you-must-remove-from-your-website-before-2019/

2019年になる前に、ウェブサイトから取り除くべきものを7つ紹介しています。

  1. マウスオーバーで操作するナビゲーションメニュー
  2. レスポンシブでない要素
  3. ビットマップのアイコン
  4. ソーシャルメディアとの連携
  5. ストックフォト
  6. プレスリリースとプレスへのリンク
  7. ユーザー情報を求めすぎるフォームや複雑なフォーム

1はマウス以外での操作が増えているから、4はほとんど使われないしサイトから離脱させるための「ネオンサイン」だからとのことです。

また、プレスリリースはブログに投稿した方が良く、ユーザーの信用を得るにはプレスリリースよりユーザーの声をコンテンツの軸にすべきと解説しています。

図3　2019年になる前にウェブサイトから取り除くべき7つのもの
図3　2019年になる前にウェブサイトから取り除くべき7つのもの

4. 2019 UI and UX Design Trends | Shakurohttps://shakuro.com/blog/2019-ui-and-ux-design-trends/

2019年に向けて、UIとUXのデザイントレンドをまとめています。

  • 強力なブラウザ
  • 目的のあるアニメーション
  • 3Dのインターフェイスと奥行きのあるフラットデザイン
  • 超現実的なデザイン
  • グラデーション2.0、鮮やかな色、暗さ
  • 可変フォント
  • Figma
  • 音声UI
  • UXライティングとUX編集
  • 肩書きとしてのプロダクトデザイナー
図4　2019年に向けてのUIとUXのデザイントレンド
図4　2019年に向けてのUIとUXのデザイントレンド

5. Pantone's Color of The Year is Living Coral, Examples of Use - Designmodohttps://designmodo.com/pantone-color-2019/

Pantoneの選ぶ2019年の色「Living Coral」の説明と、この色を使った例を紹介しています。

ちなみに、Living Coralのカラーコードは「#FF6F61⁠」⁠、RGBで表すと「rgb（255, 111, 97⁠）⁠」です。

図5　Pantoneの選ぶ2019年の色・Living Coralの説明と使用例
図5　Pantoneの選ぶ2019年の色・Living Coralの説明と使用例

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

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

Google Earth Studiohttps://www.google.com/intl/ja/earth/studio/

Google Earth Studioは、Google Earthの3D画像と衛星画像を使ったアニメーションを作れるサービスです。ドローンで空撮したような映像を室内にいながら作成できます。

After Effectsなどのアニメーション作成ツールと同様に、キーフレームを設定して直感的にムービーを作れます。地図と3D＆衛星画像との2画面を同時に表示して、カメラの移動するルートを地図上で設定することも可能です。

ニュースで事件現場を紹介する動画や、マラソンのコース案内が簡単に作れそうです。なお、ニュース配信、研究、教育、公益を目的とする場合は無料で使えるそうです。現在、登録制のプレビュー版となっています。

図6　3D画像と衛星画像を使ったアニメーションを作れるサービス
図6　3D画像と衛星画像を使ったアニメーションを作れるサービス

おすすめ記事

記事・ニュース一覧