週刊Webテク通信

2020年7月第3週号1位は、ウェブデザインが似通っている理由とその対策、気になるネタは、Web会議「Microsoft Teams」バーチャルルームに集まれる「Togetherモード」

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

1. Why Do Websites Look the Same? | Webdesigner Depothttps://www.webdesignerdepot.com/2020/07/why-do-websites-look-the-same-and-should-we-care/

なぜウェブデザインはどれも似通ってしまっているのか、その理由とそうならないため何ができるかを考えた記事です。

理由と考えられる以下の項目にわけて解説しています。

  1. デザイン教育
  2. デザイン関連のブログとVログ
  3. デザインツールとフレームワーク
  4. ユーザーデータ
図1 ウェブデザインが似通っている理由とその対策
図1 ウェブデザインが似通っている理由とその対策

2. Design Trend: A New Generation of Image Sliders | Design Shackhttps://designshack.net/articles/trends/image-sliders/

新時代の画像スライダーの実例をまとめています。いろいろなスライダーのアイデアが見られます。

全画面でサイトのナビゲーションになっているスライダーや、ECサイトで使われるシンプルなスライダーなどが紹介されていました。

図2 新時代の画像スライダーいろいろ
図2 新時代の画像スライダーいろいろ

3. Battle of the interface design tools - Simple Threadhttps://www.simplethread.com/battle-of-the-interface-design-tools/

インターフェイスをデザインするツールとして、Sketch、Figma、InVision Studio、Adobe XDを比較した記事です。

Adobeのインターフェイスデザインに対する取り組みに関しては否定的で、結論としてはFigmaをオススメしていました。

図3 インターフェイスデザインツールの比較
図3 インターフェイスデザインツールの比較

4. The Comeback of Fun in Visual Designhttps://applypixels.com/blog/comeback

macOS 11 Big Surでのデザインの変化の影響を受けて、これからのビジュアルデザインが変わっていくことを予測しています。

macOS 11 Big Surのアイコンには奥行き、テクスチャ、ライティングが使われていて、ミニマリズムの要素が薄れてきているようです。

macOS 11 Big Surでのデザインは「judicious expressiveness(賢明な表現力⁠⁠」がキーワードのようで、judiciousは「思慮深い、 分別のある、賢明な」といった意味があります。

これまでもAppleのデザインは完全なフラットデザインではなく一貫性がない部分もありましたが、今後ますますリアルな表現が増えていくようです。

図4 Appleのデザインの変化と今後のビジュアルデザイン
図4 Appleのデザインの変化と今後のビジュアルデザイン

5. 24 examples of creative illustration use in mobile design | Dribbble Design Bloghttps://dribbble.com/stories/2020/07/10/illustration-in-mobile-design

モバイルデザインでのイラストの使用例を多数まとめた記事です

以下のカテゴリにわけて紹介しています。

  • 抽象的
  • 3Dイラスト
  • フラットスタイル
  • 手描き風
図5 モバイルデザインでのイラストの使用例
図5 モバイルデザインでのイラストの使用例

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

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

Automatic visual testing for every page - PageWatchhttps://pagewatch.dev/

PageWatchはウェブサイトを自動でテストして問題発見を手助けするサービスです。レイアウトエラー、スペルミス、読み込み速度の遅さ、リンク切れを見つけてくれます。

複数のデバイスでの表示チェックをして、レイアウトの崩れなどの問題を指摘してくれる機能は魅力的です。サイト全体でまとめてリンク切れのチェックをしてくれるのも便利なはずです。

料金はページ数をベースに計算されます。標準のプランでは1ページあたり2ドルの月額制で、一見安いのですが大規模なサイトでは相当高い金額になりそうですね。

図6 ウェブサイトの自動テストサービス
図6 ウェブサイトの自動テストサービス

おすすめ記事

記事・ニュース一覧