1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い方 shaperの特徴 shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。 例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。 スペースの量を変えてみた フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。 ライトモードとダークモードにも対応しており、上部のパネルで変更
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目） | Ginpen.com
22 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 VS Code はウェブ開発に便利だな～、いっそブラウザーのタブも表示できないかな～、そう考えのあなたに朗報です。できます。 題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。 デモプロジェクト よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。 ginpei/vscode-debug-web-demo 本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。 Microsoft Edge Tools で VS Code 内にブラウザーの
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
)
FontCDN - GoogleのWeb Fontをまとめてプレビュー
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。 日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認できるのがFontCDNです。 FontCDNの使い方 トップページです。多数のフォントでのプレビューが表示されています。 日本語で表示を指定した場合。 表示をタイルからリストにした場合。 使い方も分かります。 FontCDNはGoogleのWebフォントでの表示をまとめて確認することで、細かな違いも一目で分かります。フォントをカテゴリや名前でフィルタリングできるので、使いたいフォントに合わせて確認するのが容易です。 FontCDNはJavaScript製のオープンソース・ソ
台風の様子をほぼリアルタイムで更新される衛星画像でチェックできる「Zoom Earth」
ハリケーンや台風の様子を衛星画像でほぼリアルタイムにチェックできるウェブサイトが「Zoom Earth」です。Zoom EarthはGOESやひまわり8号、Meteosatといった気象衛星からのライブ衛星画像、NASAのGIBSやEOSDISから画像データ、MicrosoftのBing Maps PlatformやEsriから地図データ、National Hurricane Center・Joint Typhoon Warning Center・IBTrACSといったサービスから台風情報を得て作成されています。 Zoom Earth – ライブ衛星画像を見る https://zoom.earth/ Zoom Earthはこんな感じで、ほぼリアルタイムの衛星画像をチェックできるウェブサイトです。 画面左上には表示している衛星画像が撮影された日時および、特定の場所を検索するためのサーチバー。
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能
ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。 画像はダークモード対応サイト: Tom Brow ダークモードの実装については、当ブログの以前の記事をご覧ください。 CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。 What's New In DevTools (Chrom
Gazo-san - OpenCVを使った画像差分ソフトウェア
開発者であればテキストの差分表示にはお世話になることが多いでしょう。そして同様に画像も扱うことの多いコンテンツです。デザイナーの方であれば画像の変更前と変更後で見比べたい方もいるでしょう。 そこで使ってみたいのがGazo-sanです。単純なピクセル単位での比較とは違う画像比較ソフトウェアになります。 Gazo-sanの使い方 古い画像。 新たらしい画像。 差分です。 Gazo-sanは差分を表示する際の要素の抽出をOpenCVを使っています。その抽出された要素に対して差分を見ます。縦や横にずれていても、その部分まで調整してくれるのでテキスト用の差分ツールのように使えます。 Gazo-sanはC++製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 lifull-dev/Gazo-san: Detect difference between two images.
navi - コマンド用のチートシートコマンド
コマンド入力で詰まってしまうことが良くあります。普段から使っているコマンドであれば良いのですが、時々しか使わないものはサポートが欲しいでしょう。もちろんヘルプやmanページはありますが、すべて読むのは面倒だったりします。 そこで使ってみたいのがnaviです。多数のコマンドに対応したチートシートコマンドです。 naviの使い方 例えば navi file などと入力します。そうすると該当文字列が含まれるコマンドのチートシートが表示されます。 コマンドはインクリメンタルに絞り込めます。 naviで表示されているコマンドはそのまま実行できますので、たくさん並んだ該当コマンドを絞り込みながら、実行したいコマンドにスムーズにたどり着けます。そしてコマンドを実行していくという流れです。実際のコマンドが表示される分、ヘルプなどで調べるよりも楽そうです。 naviはShell製のオープンソース・ソフトウェ
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
macOSのメニューバーに並ぶアイコンのカオス化を解決！アイコンが大量でもすっきりさせる無料アプリ -Dozer
macOSのメニューバーに、アイコンがたくさん並んでいませんか？ 常に表示させておきたいアイコンと、非表示にさせておきたいアイコンがあると思います。メニューバーに配置されているアイコンを整理して、指定したアイコンを隠すことができる無料アプリを紹介します。 Bartenderに似た機能ですが、Dozerは無料アプリで、使い勝手は非常に簡単です。 私の環境（macOS Mojave日本語）で問題なく、利用できました。 Dozer Dozer -GitHub Dozerの特徴 Dozerのインストール Dozerの使い方 Dozerの特徴 Dozerは、macOS 10.13+、High Sierra, Mojave対応の無料アプリです。 メニューバーにあるアイコンを指定した範囲で表示・非表示を簡単に切り替えることができます。 Dozer ライセンスはBSD 3-Clause Licenseで、
Git History - ビジュアル的な差分表示
バージョン管理の肝と言えるのが差分表示でしょう。何か誤った更新があっても確認ができて、必要に応じて差し戻すこともできます。多くの場合、上下または左右に並べて比較できるようになっています。 今回はその新しい表示方式としてGit Historyを紹介します。ビジュアル的に優れた格好良い差分ビューワーです。 Git Historyの使い方 Git HistoryはGitHub上のファイルを開いた状態で、github.comをgithub.githistory.xyzにすると差分表示になります（公開されているファイルの場合）。その表示は以下のようになります。 上に出ているコミッターを切り替えると、アニメーションしながらその時のコードになります。 実際に試しているところです。 Git Historyは細かく見比べるときには使いづらいですが、雰囲気としてどれくらい変わったかを把握するには十分です。ある
ストレージの使用状況をグラフ化してどのファイル・フォルダが容量を無駄に使っているか一発で発見できる「Folder Size」
PCのHDDやSSDに保存されている不要なファイルを削除しようにも、どこに保存されているどんなファイルが容量を無駄に使っているか分からず苦労したことがある人も多いはず。「Folder Size」は1クリックで任意のフォルダ内の合計ファイルサイズを計測して、サイズが大きい順に並べたり見やすいグラフにしたりしてくれるWindows向けのフリーソフトです。計測結果からファイルを開いたり削除したりできるので、爆速でストレージ内の整理整頓ができます。 Folder Size - Freeware file size analysis. Check the directory sizes, folder sizes and file sizes on your computer with this freeware tree size analysis tool. https://www.mindge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
CSS Filters Generator - Modify images with CSS/SVG only - JustCode.today)
xbar - メニューバーに自由に情報を表示できるユーティリティ MOONGIFT