週刊Webテク通信

2020年4月第3週号 1位は，リモートワークに関するヒント，記事，ツール，気になるネタは，AppleとGoogleが新型コロナ感染チェック用モバイルアプリを共同開発，プライバシー保護も確約

Webテク, Webデザイン, Web広告, リモートワーク, CSS, AI, レスポンシブ対応

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

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

1. Mode Remotehttps://moderemote.com/

リモートワークに関するヒント，インタビュー，記事，ツールなどをまとめたサイトです。インタビューに登場する人や追加したい情報を受け付けています。

リモートワークに役立つツールは現在88個掲載されており，カテゴリ別に見ることもできます。また，ホームオフイススペースに最適なデスク，イス，機器の紹介もあります。

日本にもこんな感じのサイトがあるといいなと思いました。

図1　リモートワークに関するヒント，記事，ツールなどをまとめたサイト

図1　リモートワークに関するヒント，記事，ツールなどをまとめたサイト

2. High-Converting Landing Page Examples From 2019 and 2020 | Campaign Monitorhttps://www.campaignmonitor.com/blog/email-marketing/2020/04/high-converting-landing-page-examples-from-2019-and-2020/

コンバージョン率の高いランディングページを作るためのヒントと事例を紹介しています。

  • ランディングページはゴールに焦点を当てる
  • 魅力的なグラフィックを使ってページの特徴を強調する
  • ページ上の情報量を制限する
  • 特別なランディングページプロジェクトのために新しいドメインを作成する
  • サイトに長く滞在してもらうために長文コンテンツをページに追加する

図2　コンバージョン率の高いランディングページのヒントと事例

図2　コンバージョン率の高いランディングページのヒントと事例

3. BEM Naming Cheat Sheet by 9elementshttps://9elements.com/bem-cheat-sheet/

命名規則BEMのチートシートです。パンくずリスト，ボタン，カード，リスト，ナビゲーションなどでの記述例を図解とコードで解説しています。

BEMについて学ぶための参考文献へのリンクもありました。

図3　命名規則BEMのチートシート

図3　命名規則BEMのチートシート

4. CSS Circle Image: "How To" Complete Guide - Coding Dudehttp://www.coding-dude.com/wp/css/css-circle-image/

CSSで画像を円形にトリミングして，レスポンシブ対応にするコーディング方法を解説した記事です。

border-radiusだけでなく，clip-pathを使う方法も紹介していました。

図4　CSSで画像を円形にトリミングしてレスポンシブ対応にする方法

図4　CSSで画像を円形にトリミングしてレスポンシブ対応にする方法

5. Top Illustration resources to level up your project | Jim Raptis Portfoliohttps://raptis.wtf/top-illustration-resources-to-level-up-your-project/

プロジェクトをレベルアップするための，イラスト関連の素材，アプリ，ツールを紹介した記事です。

ただのイラスト素材ではなく，レイアウトしたり色を変えたり，カスタマイズしてオリジナルを作れるものがまとめられています。

図5　イラスト関連の素材，アプリ，ツール

図5　イラスト関連の素材，アプリ，ツール

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

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

Generated Photos | Unique, worry-free model photoshttps://generated.photos/

AIが生成した顔写真をダウンロードしたり，APIで生成できるサービスです。全ての画像は著作権，頒布権，侵害訴訟，ロイヤリティを気にせずあらゆる目的に使えると書いてあります。

顔写真は，性別，年齢，肌の色，瞳の色，髪の色・長さ，表情で絞り込めます。顔写真を1つ選んで詳細画面に移動すると，似た顔の写真も表示されます。背景色を変更でき，背景を透明にしてPNGでダウンロードも可能です。

無料で使用する場合は，このサイトへのリンクを必ず入れる必要があります。リンクを入れたくない場合や，商用利用するときには月29ドルの有料プランが必要です。有料プランでは高解像度の画像を入手できます。

図6　AIが生成した顔写真をダウンロードできるサービス

図6　AIが生成した顔写真をダウンロードできるサービス

今週の気になるWebネタ

AppleとGoogleが新型コロナ感染チェック用モバイルアプリを共同開発，プライバシー保護も確約 | TechCrunch Japanhttps://jp.techcrunch.com/2020/04/11/2020-04-10-apple-and-google-are-launching-a-joint-covid-19-tracing-tool/

AppleとGoogleが協力して，個人が新型コロナウイルスの感染リスクにさらされたかどうかをチェックできるツールを開発中です。ライバル同士が手を組んだということでも話題になっています。

スマートフォンのBluetoothによりユーザー同士の接近をモニターするそうで，だからスマートフォン2大OSのiOSとAndroidの開発元が協力してるということですね。プライバシー保護についても最大限の注意を払っているようです。

日本では位置情報などを企業に渡すことを極度に怖がる人が多い印象があります。この仕組みが始まるときには，メリットとデメリットとをわかりやすく説明して，多くの人に協力してもらえるといいなと思います。

Webテク, Webデザイン, Web広告, リモートワーク, CSS, AI, レスポンシブ対応

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote