週刊Webテク通信

2019年4月第3週号 1位は,アイコンフォントとSVGアイコンの比較とSVGアイコンの使い方,気になるネタは,サムスン,「Galaxy A80」発表--回転するカメラ,ノッチなし

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

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

1. It's 2019! Let's End The Debate On Icon Fonts vs SVG Icons | LambdaTesthttps://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/

アイコンフォントとSVGアイコンの比較を中心に,SVGアイコンについてまとめた記事です。

以下は,アイコンフォントとSVGアイコンを比較した項目と結果です。

ファイルサイズ
→アイコンフォントがわずかに有利
アクセシビリティ
→SVGの勝ち
パフォーマンス
→SVGが若干優位
スケーラビリティ
→SVGに大きな優位性がある
アニメーション
→SVGの方が修正やスタイル制御の点ではるかに高い汎用性を持つ
配置
→SVGの方がはるかに簡単
展開の仕方(deployment)
→アイコンフォントは展開が簡単だが,SVGは高度な修正と優れたパフォーマンスを発揮する
ブラウザ互換性
→アイコンフォントは互換性が高い。SVGは非対応の環境に対応するテクニックが必要

アイコンをSVGに変換してウェブページに配置する方法についても,丁寧に解説しています。

図1 アイコンフォントとSVGアイコンの比較とSVGアイコンの使い方

図1 アイコンフォントとSVGアイコンの比較とSVGアイコンの使い方

2. Animating SVG with CSS – LogRockethttps://blog.logrocket.com/animating-svg-with-css-83e8e27d739c

CSSを使ってSVGをアニメーションさせる方法を,サンプルを使って紹介しています。

サンプルはCodePenから埋め込まれており,実際の動作を見たりコードの確認もできます。

  • ホバー時に色が変わる効果
  • 回転するアニメーション
  • ローディングバーのアニメーション
  • グラデーションを使ったローディングバーのアニメーション
  • 線が引かれて絵が描かれていくアニメーション
  • ホバー時に鼓動のように動き表情の変わるハートのアニメーション

図2 CSSを使ってSVGをアニメーションさせる方法

図2 CSSを使ってSVGをアニメーションさせる方法

3. What we’ve learned after using Webflow for 1-year | Blog | Daily.cohttps://www.daily.co/blog/what-weve-learned-after-using-webflow-for-1-year

コーディング不要でウェブページをデザインできるWebflowを1年間使っての,気に入っている機能やできることなどを解説した記事です。

  • WebflowのスタイルパネルはSketchやAdobe XDを使っている人にはすぐ親しめる
  • classの作成とスタイリングは簡単で,idは設定パネルから追加する
  • 独自のインタラクションやアニメーションを作れる
  • シンボル機能がある
  • CMSも組み込まれている
  • 細かいところまで注意が払われている
  • チュートリアルとヘルプが充実している
  • コードを埋め込める
  • 優れたレスポンシブデザイン

図2 Webflowの気に入っている機能やできること

図2 Webflowの気に入っている機能やできること

4. How to create clipped, blurred background images in CSS | CodyHousehttps://codyhouse.co/blog/post/how-to-clipped-blurred-background-images-in-css

CSSで画像の一部をクリッピングしてぼかす方法を解説しています。

写真の上に色の帯を置いてその上に文字を入れるときに,帯を半透明にしてその下の写真がぼけている,すりガラス効果のようなものを実装しています。

図4 CSSで画像の一部をクリッピングしてぼかす方法

図4 CSSで画像の一部をクリッピングしてぼかす方法

5. Simulating Mouse Movement | CSS-Trickshttps://css-tricks.com/simulating-mouse-movement/

マウスの動きをJavaScriptでシミュレーションする方法を紹介しています。マウスの動きに合わせたインタクラクションを,操作せずにデモするために作ったとのこと。

マウスの軌跡に沿ってランダムな色と形の丸が現れるスクリプトを,マウス操作なしで動作させる例などを掲載しています。

図5 マウスの動きをJavaScriptでシミュレーション

図5 マウスの動きをJavaScriptでシミュレーション

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

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

Designer Bio Generator™http://lab.sulko.co/designer-bio/

Designer Bio Generatorはデザイナーのプロフィール/経歴を自動生成するサービスです。Twitterやブログのプロフィール欄に使う目的とのことですが,役に立つというよりジョークの意味合いが強いんだと思います。

ボタンを押すだけでプロフィールがランダムに表示されます。⁠バイク乗り,レコード好き,国際的なスイススタイルの実践者,そしてフロンエンドデベロッパー」のようなパターンが決まっていて,デザイナーのプロフィール「あるある」みたいなものなんでしょう。

SNSのプロフィール欄の文章を考えるのはなかなかむずかしいので,日本語版のこういうサービスがあったら,面白がりつつも参考になると思います。このサービスの文面を翻訳するだけでも,かっこいい,苦笑されそうなプロフィールが作れそうです。

図6 デザイナーのプロフィール/経歴を自動生成するサービス

図6 デザイナーのプロフィール/経歴を自動生成するサービス

今週の気になるWebネタ

サムスン,「Galaxy A80」発表--回転するカメラ,ノッチなし - CNET Japanhttps://japan.cnet.com/article/35135592/

サムスンの「Galaxy A80」は,1つのカメラを回転させてイン/アウト両方に使えるスマートフォン。自撮りとして使うときにはカメラ部分が上にスライドするため,ノッチ(切り欠き)なしの全面スクリーンです。

スライドさせるとインカメラが出てくるのはXiaomiの「Mi Mix 3」などであったのですが,1つのカメラユニットがくるっと180度回転するアイデアは面白いです。カメラを1つにまとめる分,コストやサイズ面でのメリットもあるでしょう。

センサーがディスプレー内に埋め込まれていて,全面ディスプレーでも指紋認証が使えるところもいいですね。日本では花粉症シーズンにはマスクをして顔認証できないという人も多いので,iPhoneも全面ディスプレイ&指紋認証&ノッチなしを実現して欲しいと思います。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/