週刊Webテク通信

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

ネットで見かけた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 写真から人物だけを切り抜くサービス

おすすめ記事

記事・ニュース一覧