週刊Webテク通信

2021年3月第2週号 1位は,アイコンフォントではなくSVGを使うことのススメ,気になるネタは,憧れのタレントからサプライズでビデオメッセージが届くサービス「heyhey」日本上陸

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

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

1. Stop Using Icon Fonts by Michael Irigoyenhttps://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/

アイコンフォントの使用をやめてSVGを使おうという記事です。アイコンフォントの問題点とSVGの良い点,SVGを使う時の注意などを解説しています。

アイコンフォントと比較してのSVGの良さを,以下の項目で説明していました。

  • すぐにレンダリングされる
  • アクセシビリティの向上
  • メンテナンスが簡単
  • 鮮明にレンダリングされる
  • CSSで完全にコントロールできる

図1 アイコンフォントではなくSVGを使うことのススメ

図1 アイコンフォントではなくSVGを使うことのススメ

2. Prototyping in UX Design Guide [Free Checklist]https://adamfard.com/blog/prototyping

UXデザインのプロトタイピングについてのガイドです。

  • プロトタイプとは何か
  • プロトタイプの種類
  • プロトタイピングツール

などを解説しています。

図2 UXデザインのプロトタイピングのガイド

図2 UXデザインのプロトタイピングのガイド

3. Create Responsive Image Effects With CSS Gradients And aspect-ratio — Smashing Magazinehttps://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/

カード型レイアウトなどで複数の画像のサイズを統一するために,object-fitと共にaspect-ratioを使う方法を解説しています。aspect-ratioで縦横比を指定することで,レスポンシブで幅が変わっても同じサイズに揃えられます。

さらに画像にCSSでグラデーションを追加する方法も紹介しています。

図3 レスポンシブな画像の作り方

図3 レスポンシブな画像の作り方

4. Toolbox - Glassmorphism Generatorhttp://santhoshsivan.com/glass.html

グラスモーフィズムのジェネレーターです。ガラスのように背景がぼやける半透明の領域を作り,CSSとしてコピーできます。

前回紹介したニューモーフィズムのジェネレーターと同じところが作っていますね。

図4 グラスモーフィズムのジェネレーター

図4 グラスモーフィズムのジェネレーター

5. 20 Top Content Curation Tools for Marketers (2021)https://www.hongkiat.com/blog/content-curation-tools/

ネット上の情報を整理するコンテンツキュレーションツールを紹介した記事です。

Flipboard,Pocket,Feedly,Instapaper,Pinterest,Paper.liといったツールがまとめられています。

図5 コンテンツキュレーションツールを多数紹介

図5 コンテンツキュレーションツールを多数紹介

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

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

Video Popup Software for e-Commerce - Vidjethttps://www.vidjet.io/

Vidjetはサイト上にポップアップ表示されるビデオを作るサービスです。無料プランもありますし,ログインなしで試せるのも気が利いています。

動画の表示される位置や表示方式などを,デスクトップ用とモバイル用とで別々に設定できます。表示方法は,モーダルウインドウのように中央に表示され動画以外の部分が暗くなる表示と,右下か左下にフローティング表示されるかを選べます。

また,ページを開いたときに動画を表示するか,ボタンを押したら動画をポップアップするかを選べます。さらに,ページをスクロールしたら動画を表示する設定などもできるようです。

図6 サイト上にポップアップ表示されるビデオを作るサービス

図6 サイト上にポップアップ表示されるビデオを作るサービス

今週の気になるWebネタ

憧れのタレントからサプライズでビデオメッセージが届くサービス「heyhey」日本上陸【追記あり】 | TechCrunch Japanhttps://jp.techcrunch.com/2021/03/04/heyhey/

有名人に有料でビデオメッセージを依頼できるサービス「heyhey」がスタートしました。インドでスタートしたサービスの日本上陸とのことです。

ビデオメッセージを頼める有名人をhey!Starと呼んでいて,今のところアスリートの人が多いようです。誕生日,結婚式などのサプライズメッセージなどに使うことを想定しているサービスなんですね。

応募多数の場合は抽選になることもあるようで,メッセージの内容によっては断られるケースもあるとのこと。金額はhey!Starによって異なるようですが,今はだいたいの人が1万1千円でした。思ったより安いですし,hey!Starに人気者が増えると盛り上がるかもしれません。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote