週刊Webテク通信

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

ネットで見かけた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 サイト上にポップアップ表示されるビデオを作るサービス

おすすめ記事

記事・ニュース一覧