週刊Webテク通信

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

ネットで見かけた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が生成した顔写真をダウンロードできるサービス

おすすめ記事

記事・ニュース一覧