週刊Webテク通信

2020年10月第2週号1位は、UIデザインの危険なトレンド、気になるネタは、Hameeが小学生向けプレスマホ”発表 月額1000円で1GB、Google Playにも対応

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

1. The 5 main anti-trends in design. Everything is cool, until it isn’t cool… | by Diana Malewicz | Sep, 2020 | UX Collectivehttps://uxdesign.cc/the-5-main-anti-trends-in-design-e5629c1b217d

いま使用するのは危険なUIデザインのトレンドを5つ紹介した記事です。あまりにも多く使われすぎているので、独創性が感じられず認識されにくくなるとのことです。

  • 同じタイプのイラスト
  • unsplash(無料写真素材サイト)の写真
  • 丸みを帯びた角
  • ニューモーフィズム
  • 透明度のあるインターフェイス
図1 UIデザインの危険なトレンド
図1 UIデザインの危険なトレンド

2. CSS Responsive Image Tutorial: How to Make Images Responsive with CSShttps://www.freecodecamp.org/news/css-responsive-image-tutorial/

画像をレスポンシブ対応させる方法を解説しています。

  • 相対的な単位を使う
  • メディアクエリを使う必要はあるか?
  • max-widthプロパティが万能ではない理由
  • 高さを指定するときの問題
  • 高さを固定するときにObject-Fitを使う解決法
図2 画像をレスポンシブ対応させる方法
図2 画像をレスポンシブ対応させる方法

3. 12 Ready-to-Use Sliders for Your Website | SpyreStudiosspyrestudios.com/12-ready-to-use-sliders-for-your-website/

Webサイトにすぐに追加できる画像スライダーをまとめた記事です。

以下の2種類にわけて多数のスライダーを紹介しています。

  • すぐに使用できるスライダープラグイン
  • スライダーテンプレート
図3 Webサイトにすぐに追加できる画像スライダーいろいろ
図3 Webサイトにすぐに追加できる画像スライダーいろいろ

4. Some New Icon Sets | CSS-Trickshttps://css-tricks.com/some-new-icon-sets/

線だけで作られたSVGアイコンセットを4つ紹介しています。いずれも無料でオープンソースです。

各アイコンのSVGのコードをコピーして使えます。サイズや色、線の太さなどをカスタマイズできるアイコンセットもあります。

図4 線だけで作られたSVGアイコンセット
図4 線だけで作られたSVGアイコンセット

5. 20 Freshest Web Designs, September 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/09/20-freshest-web-designs-september-2020/

インスピレーションを得られそうなWebデザインのギャラリーです。

特大サイズの文字を使っているサイトや、文字だけで構成されたサイトなど、文字の扱いに特徴のあるサイトが目につきました。

図5 最新版のWebデザインのギャラリー
図5 最新版のWebデザインのギャラリー

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

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

Synthesia - AI video generation platformhttps://www.synthesia.io/

Synthesiaはテキストを元に人が喋っている動画を作れるサービスです。現在38の言語をサポートしていて、日本語も含まれています。

AIで生成されているんだと思うのですが、10人の人物を選び原稿を読んでもらえるそうです。人物の位置やサイズ、背景画像をカスタマイズできます。

デモページでお試しできるのですが、自然な口の動きで日本語を話してくれました。とはいえ、顔は欧米人なので違和感はあります。お試しでは3人からしか選べなかったのですが、たぶんほかにもアジアっぽい顔立ちの人はまだいなさそうです。

図6 テキストから人が喋っている動画を作れるサービス
図6 テキストから人が喋っている動画を作れるサービス

おすすめ記事

記事・ニュース一覧