gihyo.jpサイトのロゴ

週刊Webテク通信

2018年10月第4週号1位は、スライダーがダメな理由と、どうしてもスライダーを使いたい場合の改善策、気になるネタは、iPadにPhotoshop“完全版”がやってくる--2019年登場、イラスト特化の新アプリも

2018-10-25

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

1. Why Web Sliders Suck and 5 Ways To Fix Them - UX/UI Advicehttps://dconstrct.com/product-and-design/sliders-suck-how-fix-them/

スライダーがダメな理由と、クライアントがどうしても使いたいという場合にスライダーを改善する方法を紹介しています。

スライダーのUX的に悪いところ
  • 切り替わりが速すぎて読めないことがある
  • 広告に見えるので無視される
  • アクセシビリティが悪い
スライダーのSEO的に悪いところ
  • サイトが重くなる
  • コンテンツが押し出されて表示されなくなることで検索結果のランクが下がる
  • モバイルデバイスでうまく表示されない
どうしてもスライダーを使いたい場合の改善策
  1. メインイメージとして使わず、文字の入っていない画像だけのスライダーにしてメインコピーの横などに配置する
  2. スライドを3つ以下にして、最も重要なものを1枚目にする
  3. 自動再生をやめてユーザーの操作で次のスライドに移るようにする
  4. スワイプで動かせるなど、モバイルユーザーに配慮する。モバイル用に別画像を用意するなどファイルサイズにも気をつける
  5. A/Bテストをする
図1　スライダーがダメな理由と、どうしてもスライダーを使いたい場合の改善策
図1　スライダーがダメな理由と、どうしてもスライダーを使いたい場合の改善策

2. Top 5 Graphic Design Trends of 2018 (+ a Preview of 2019) | Design Shackhttps://designshack.net/articles/trends/graphic-design-trends/

2018年のグラフィックデザインのトレンドを5つまとめています。

  1. 明るい色
  2. 三次元の静物要素
  3. グラデーション
  4. 最小限のナビゲーション
  5. カラーオーバーレイ写真

また、2019年のトレンドとしては以下の項目が挙がっていました。

  1. ベージュ色
  2. VRとMR（Mixed Reality）
  3. スクリプトフォント
  4. 「バグった」ような効果
  5. ホンモノのイメージ
図2　2018年のグラフィックデザインのトレンド
図2　2018年のグラフィックデザインのトレンド

3. Everything you need to know about skeleton screens – UX Collectivehttps://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a

スケルトンスクリーンについて、その概要や定義から、効果的な設計方法までをまとめた記事です。

スケルトンスクリーンとは、データの読み込み中に表示する、骨組み状態の画面のこと。本当に読み込み時間を短く感じさせる効果があるのか、どのように設計すればより効果的かなどのテスト結果を報告しています。

図3　スケルトンスクリーンについてまとめた記事
図3　スケルトンスクリーンについてまとめた記事

4. The Evolution of Website Web Design Trends from the 90s to Nowhttps://line25.com/articles/website-web-design-trends-evolution

90年代から現在までのウェブデザインのトレンド・進化をざっくりとまとめた記事です。

  • 1995～2003年 クリックしてください
  • 2000年 ホワイトスペース
  • 2003～2010年 Web 2.0
  • 2010～2012年 スキュアモーフィックデザイン
  • 2014～2016年 無限スクロール
  • 2012年～現在 ミニマリズムデザイン
図4　90年代から現在までのウェブデザインの進化のまとめ
図4　90年代から現在までのウェブデザインの進化のまとめ

5. The Hidden Power of Reward Systems In Design – UX Planehttps://uxplanet.org/the-hidden-power-of-reward-systems-in-design-78e2dd7b6bf6

アプリやサービスをデザインする上での、リワード（ご褒美・報酬）の秘めたる力について解説しています。

リワードには以下のようなものがあります。

  • 記事を全部見終わったら特別なメッセージが出る
  • Facebookなどソーシャルメディアでの「いいね！」の仕組み
  • ゲーム的要素を取り入れる
  • 商品や金銭などの報酬を与える
図5　リワード（ご褒美・報酬）の秘めたる力について
図5　リワード（ご褒美・報酬）の秘めたる力について

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

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

Planable | Social Media Collaboration and Approval Platformhttps://planable.io/

Planableは、ソーシャルメディアのコンテンツ管理のためのWebサービスです。Instagram、Facebook、Twitter、LinkedInのアカウントを管理できます。

この手のサービスはいくつかありますが、各ソーシャルメディアに投稿したときの見え方をプレビューできるのが特徴です。非公開のアカウントで実際に投稿して、画像の見え方などを確認している人もいるくらいなので、簡単にチェックできるのは便利ですね。

チームでコンテンツを管理したりコメントのやり取りができ、ユーザーごとに権限を変えられます。スケジュール投稿も可能です。有料のサービスで、一番下のプランは24ドルからとなっています。

図6 ソーシャルメディアのコンテンツ管理ツール

おすすめ記事

記事・ニュース一覧