週刊Webテク通信

2022年3月第1週号 1位は，有名サービスのアプリやサイトのUIにダメ出し，気になるネタは，Instagramの「リール動画」，Facebookでも利用可能に

Webテク, Webデザイン, Web広告, モバイルアプリ, UI, UX, クレイモーフィズム, CSS, ドメイン名, 動画

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

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

1. Do Netflix, HBO, Spotify, Twitter, Hulu, Apple and Google, agree with these designers? | by Ryan Houk | Jan, 2022 | Mediumhttps://ryanhouk.medium.com/do-netflix-hbo-spotify-twitter-hulu-apple-and-google-agree-with-these-designers-9d8d8ae2e9a1

Netflix，Spotify，Apple，GoogleなどのモバイルアプリやサイトのUIにダメ出しをしています。

以下の項目に分けて実例をもとに問題点を指摘していました。

  • 背景とのコントラスト
  • ボタン
  • UIレイアウト
  • 文字のセンター揃え
  • 色の使い方
  • マージンと間隔

図1　有名サービスのアプリやサイトのUIにダメ出し

図1　有名サービスのアプリやサイトのUIにダメ出し

2. 24 Sizzling Landing Page Examples For Red Hot Conversionshttps://smartblogger.com/landing-page-examples/

魅力的なランディングページの実例を多数紹介した記事です。それぞれのページの良い点悪い点を解説していて参考になります。

以下の項目に分けて事例を紹介していました。

  • ユーザー登録のためのランディングページ
  • SaaSのランディングページ
  • リードマグネット（見込み客を引き寄せるもの＝無料で提供する資料など）をダウンロードさせるランディングページ
  • ECサイトのランディングページ
  • 長いフォームのランディングページ

図2　魅力的なランディングページの事例を紹介

図2　魅力的なランディングページの事例を紹介

3. Five UI/UX tools you need to learn at 2022 | by Navid Semi | Feb, 2022 | Mediumhttps://medium.com/@NAVIDSEMI/five-ui-ux-tools-you-need-to-learn-at-2022-1d805cba4f9e

UI／UXデザインのツールを5つ紹介しています。

  • Figma
  • Adobe XD
  • Sketch App
  • Invision Studio
  • FlowMapp

FlowMappはUXデザインに特化したツールで，サイトマップやワイヤーフレーム作成に使うものです。FigmaやXDの前段階のツールという位置付けですね。

図3　UI／UXデザインのツールを5つ紹介

図3　UI／UXデザインのツールを5つ紹介

4. 8 CSS Snippets That Bring Claymorphism to Lifehttps://speckyboy.com/css-snippets-claymorphism/

クレイモーフィズムのCSSコーディング例をまとめています。粘土っぽい印象の立体的で角が丸い柔らかい印象の形状です。

カードやボタンを目立たせるのに有効そうですが，サイト全体をこのテイストでまとめるには，まだほかにたくさんのクレイモーフィズムのUI要素が必要だと感じました。

図4　クレイモーフィズムのCSSコーディング例いろいろ

図4　クレイモーフィズムのCSSコーディング例いろいろ

5. 6 Domain Name Trends for 2022 - The Media Temple Bloghttps://mediatemple.net/blog/web-development-tech/6-domain-name-trends-for-2022/

ドメイン名のトレンドについてまとめた記事です。

  1. .meは今後も人気が続くはず
  2. .liveは人気が上昇し続ける
  3. 「meta」というキーワードは急上昇する
  4. 記述的なドメイン（xbox.gamesのようなドメイン名全体で意味がわかりやすいもの）はますます人気が高くなる
  5. 短いドメインへの需要が高まる
  6. .ecoとエコに関係するドメインはより人気になる

図5　ドメイン名のトレンドまとめ

図5　ドメイン名のトレンドまとめ

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

先週の気になるツール／サービス

Pagify - Convert your Google Doc to a website in under 30 seconds.https://www.gopagify.com/

PagifyはGoogle ドキュメントをWebサイトに変換するサービスです。ユーザー登録など不要で，Google ドキュメント（のドキュメント）を「Webに公開」したあと，そのリンクを入力するだけでページが生成されます。

スマートフォンで見たときに，Google ドキュメントのWeb公開より見やすいと感じました。ただし，大きい画像が自動でウィンドウ幅にリサイズされる機能はありません。ページ設定でのドキュメントの上下左右の余白がそのまま適用されるので，小さめ（0.6cmくらい）に調整すると良いと書いてありました。

実は事前にページを生成しているわけではなく，ページにアクセスしたときに動的に生成しているようです。元のGoogle ドキュメントを変更すれば，Pagifyのページにも反映されます。

図6　GoogleドキュメントをWebサイトに変換するサービス

図6　GoogleドキュメントをWebサイトに変換するサービス

今週の気になるWebネタ

Instagramの「リール動画」，Facebookでも利用可能に - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2202/24/news087.html

Meta（旧Facebook)は，ショート動画サービスReels（リール）の提供を150カ国以上に拡大し，日本でも使えるようになりました。TikTokのようなショート動画サービスで，2019年からInstagramで提供していました。

ほかのサービスを真似した機能をまずInstagramに搭載して，うまくいったらFacebookにも採用するのはストーリーと同じ展開ですね。今後InstagramとFacebookのクロス投稿もできるよう検討しているようです。

さっそくFacebookでリールを見てみました。友達の投稿が優先的に表示されますが，友達以外の動画もどんどん表示されます。そこがストーリーとの違いとも言えますね。また，ストーリーと違ってリンクを入れられないので，ブログへの誘導などはできません。

Webテク, Webデザイン, Web広告, モバイルアプリ, UI, UX, クレイモーフィズム, CSS, ドメイン名, 動画

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote