週刊Webテク通信

2018年12月第4週号 1位は，2019年版のロゴデザインのトレンドまとめ，気になるネタは，家族型ロボット「LOVOT」発表，四次元ポケットのないドラえもんを目指した

Webテク, Webデザイン, Web広告, モバイルアプリ, UX, UI, 写真, ロボット

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

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

1. 2019 Top Best Logo Designs + Trends & Inspirational Showcase | JUST™ Creativehttps://justcreative.com/2018/12/18/logo-design-branding-trends-2019/

ロゴデザインのトレンドをまとめた記事の2019年版です。

事例も豊富で傾向がよく分かります。

  1. 形状が変わるロゴ（アルゴリズムで変化／デバイスのスクリーンサイズで変化／名刺・Tシャツなど使われる場所での変化／子供向けキャンペーンには子供向けロゴなどマーケティングによって変化）
  2. 極度のミニマリズム
  3. 空白を活かす
  4. 細部まで精巧
  5. 親しみやすい幾何学図形
  6. 重ね合わせ
  7. 歴史的なロゴ
  8. 錯視
  9. バッジ
  10. 手書きのレタリング
  11. ほぼフラット（フラットデザイン＋影）
  12. 楽しく賑やか
  13. 新たなヴィンテージ
  14. 80年代と90年代

図1　2019年版のロゴデザインのトレンドまとめ

図1　2019年版のロゴデザインのトレンドまとめ

2. Review of Popular Interface Design Trends in 2018 | Tubik Studiohttps://tubikstudio.com/review-popular-interface-design-trends/

2018年のウェブサイトやモバイルアプリのインターフェイスデザインのトレンドをまとめています。

  • 3Dグラフィックス
  • パーソナライゼーション
  • 全画面の背景イメージ／背景動画
  • ウェブ用の複雑なデジタルイラスト
  • ビジュアルでストーリーを語る
  • ボタンを使わないインタラクション
  • UI指向のブランディング
  • 興味を引く簡便なUIアニメーション
  • 目立つタイポグラフィと丁寧に作られたタグライン
  • 読みやすさ
  • 切り替え効果の実験的な試み
  • 興味を引くヒーローイメージ
  • 細部まで芸術的なUI
  • 分割スクリーン
  • レイヤーが複数重なったレイアウト
  • 高品質の写真コンテンツ
  • ビデオコンテンツの成長
  • ポスターのようなウェブページ
  • 実験的な色使い

図2　2018年のインターフェイスデザインのトレンド

図2　2018年のインターフェイスデザインのトレンド

3. How To Improve UX of Web Formshttp://maxsnitser.com/blog/how-to-improve-ux-of-web-forms

ウェブフォームのUXを改善する方法を紹介しています。

  • 複数カラムより1カラムが良い
  • 論理的な順番に並べる（名前を尋ねる前に住所を聞いたりしない）
  • 入力フィールド数は最小にする
  • 複雑なフォームは複数ページに分割する
  • グループ分けする
  • 小さなフォームではラベルテキストはフィールドの上に簡潔に
  • プレースフォルダーをラベルテキスト代わりに使わない
  • ボタンの機能によって見た目，配置を変える
  • ユーザーが過去に選んだ項目などからフォームの初期値を設定する
  • 自動的にフォームを埋める機能を許可する
  • フィードバックを表示する場所を用意しておく

図3　ウェブフォームのUXを改善する方法

図3　ウェブフォームのUXを改善する方法

4. Best Free Tools for Adding Dynamic Animations to UI - Designmodohttps://designmodo.com/dynamic-animations-ui/

UIにアニメーションを追加するためのライブラリを多数紹介しています。

ボタンやハンバーガーメニューのアニメーション，スクロールによって動く効果などを簡単に適用できるライブラリを掲載しています。

図4　UIにアニメーションを追加するためのライブラリいろいろ

図4　UIにアニメーションを追加するためのライブラリいろいろ

5. Inspirational Websites from 2018 | Codropshttps://tympanus.net/codrops/2018/12/18/inspirational-websites-from-2018/

Codropsが選ぶ，今年刺激を受けた革新的なサイトをまとめた記事です。

今年は，歪みのある効果とカスタムカーソルが印象的だったようです。

図5　今年刺激を受けた革新的なサイトのまとめ

図5　今年刺激を受けた革新的なサイトのまとめ

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

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

Remove Background from Image – remove.bghttps://www.remove.bg/

remove.bgは写真から人物だけを切り抜くサービスです。写真をアップロードして5秒待つだけで切り抜きが完了します。

完全無料のサービスですが，切り抜いた画像は500ピクセル程度のPNGファイルでしかダウンロードできません。ウェブサイトで使うにしてももうちょっと解像度が欲しいですし，さらに微調整することを考えるとマスク付きのPSDファイルも欲しいなと欲が出てきますね。

将来的には，そういったプロのニースに応える有料版が出てくるんではないかと期待しています。こういった面倒で創造性のない作業がAIなど機械に任せられるようになるのは良いことだと思います。

図6　写真から人物だけを切り抜くサービス

図6　写真から人物だけを切り抜くサービス

今週の気になるWebネタ

家族型ロボット「LOVOT」発表，四次元ポケットのないドラえもんを目指した - 週刊アスキーhttps://weekly.ascii.jp/elem/000/000/423/423275/

ロボットベンチャーのGROOVE Xから，家族型ロボット「LOVOT（ラボット）⁠」が発表されました。利便性ではなく，抱いたときの心地よさや愛くるしいしぐさ，憎めないキャラクターを追求したロボットとのことです。

気になるお値段は，2体セットで59万8000円。2体で相互にコミュニケーションを取ったり性格が違ったりと，2体いるとLOVOTの良さがより伝わることから，まずはセット販売からスタートするそうです。1体では34万9000円です。

さらに，月額費用が必要で，一番安いプランでも1体あたり9980円かかります。相対的にaiboの値段（本体19万8千円／月額2980円〜）が安く感じてきますね。aiboもLOVOTも故障などに備えたケアプランが別途ありますし，ロボットと家族になるにはランニングコストがそれなりにかかるのはしょうがなさそうです。

Webテク, Webデザイン, Web広告, モバイルアプリ, UX, UI, 写真, ロボット

著者プロフィール

芦之由（あしのよし）

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

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

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