@jjlmoya/utils-converters 1.25.0 → 1.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/category/i18n/de.ts +1 -1
- package/src/category/i18n/en.ts +1 -1
- package/src/category/i18n/fr.ts +1 -1
- package/src/category/i18n/id.ts +1 -1
- package/src/category/i18n/it.ts +1 -1
- package/src/category/i18n/nl.ts +1 -1
- package/src/category/i18n/pl.ts +1 -1
- package/src/category/i18n/pt.ts +1 -1
- package/src/category/i18n/sv.ts +1 -1
- package/src/tests/bibliography_wellformed_export.test.ts +46 -0
- package/src/tests/category_seo_quality.test.ts +74 -0
- package/src/tests/faq_count.test.ts +1 -1
- package/src/tests/no_h1_in_components.test.ts +1 -1
- package/src/tests/seo_parity.test.ts +2 -2
- package/src/tests/seo_wellformed_export.test.ts +65 -0
- package/src/tests/tool_validation.test.ts +15 -15
- package/src/tool/avifAJpg/i18n/en.ts +164 -164
- package/src/tool/avifAJpg/i18n/es.ts +164 -164
- package/src/tool/avifAJpg/i18n/fr.ts +164 -164
- package/src/tool/avifAJpg/i18n/ja.ts +166 -166
- package/src/tool/avifAJpg/i18n/ko.ts +166 -166
- package/src/tool/avifAJpg/i18n/zh.ts +166 -166
- package/src/tool/avifAJpg/seo.astro +15 -15
- package/src/tool/avifAPng/i18n/en.ts +164 -164
- package/src/tool/avifAPng/i18n/es.ts +164 -164
- package/src/tool/avifAPng/i18n/fr.ts +164 -164
- package/src/tool/avifAPng/i18n/ja.ts +166 -166
- package/src/tool/avifAPng/i18n/ko.ts +166 -166
- package/src/tool/avifAPng/i18n/zh.ts +166 -166
- package/src/tool/avifAPng/seo.astro +15 -15
- package/src/tool/avifAWebp/i18n/en.ts +164 -164
- package/src/tool/avifAWebp/i18n/es.ts +164 -164
- package/src/tool/avifAWebp/i18n/fr.ts +164 -164
- package/src/tool/avifAWebp/i18n/ja.ts +166 -166
- package/src/tool/avifAWebp/i18n/ko.ts +166 -166
- package/src/tool/avifAWebp/i18n/zh.ts +166 -166
- package/src/tool/avifAWebp/seo.astro +15 -15
- package/src/tool/bmpAJpg/i18n/en.ts +164 -164
- package/src/tool/bmpAJpg/i18n/es.ts +164 -164
- package/src/tool/bmpAJpg/i18n/fr.ts +164 -164
- package/src/tool/bmpAJpg/i18n/ja.ts +166 -166
- package/src/tool/bmpAJpg/i18n/ko.ts +166 -166
- package/src/tool/bmpAJpg/i18n/zh.ts +166 -166
- package/src/tool/bmpAJpg/seo.astro +15 -15
- package/src/tool/bmpAPng/i18n/en.ts +164 -164
- package/src/tool/bmpAPng/i18n/es.ts +164 -164
- package/src/tool/bmpAPng/i18n/fr.ts +164 -164
- package/src/tool/bmpAPng/i18n/ja.ts +165 -165
- package/src/tool/bmpAPng/i18n/ko.ts +165 -165
- package/src/tool/bmpAPng/i18n/zh.ts +165 -165
- package/src/tool/bmpAPng/seo.astro +15 -15
- package/src/tool/bmpAWebp/i18n/en.ts +164 -164
- package/src/tool/bmpAWebp/i18n/es.ts +164 -164
- package/src/tool/bmpAWebp/i18n/fr.ts +164 -164
- package/src/tool/bmpAWebp/i18n/ja.ts +166 -166
- package/src/tool/bmpAWebp/i18n/ko.ts +166 -166
- package/src/tool/bmpAWebp/i18n/zh.ts +166 -166
- package/src/tool/bmpAWebp/seo.astro +15 -15
- package/src/tool/gifAJpg/i18n/en.ts +164 -164
- package/src/tool/gifAJpg/i18n/es.ts +164 -164
- package/src/tool/gifAJpg/i18n/fr.ts +164 -164
- package/src/tool/gifAJpg/i18n/ja.ts +166 -166
- package/src/tool/gifAJpg/i18n/ko.ts +166 -166
- package/src/tool/gifAJpg/i18n/zh.ts +166 -166
- package/src/tool/gifAJpg/seo.astro +15 -15
- package/src/tool/gifAPng/i18n/en.ts +164 -164
- package/src/tool/gifAPng/i18n/es.ts +164 -164
- package/src/tool/gifAPng/i18n/fr.ts +164 -164
- package/src/tool/gifAPng/i18n/ja.ts +166 -166
- package/src/tool/gifAPng/i18n/ko.ts +166 -166
- package/src/tool/gifAPng/i18n/zh.ts +166 -166
- package/src/tool/gifAPng/seo.astro +15 -15
- package/src/tool/gifAWebp/i18n/en.ts +164 -164
- package/src/tool/gifAWebp/i18n/es.ts +164 -164
- package/src/tool/gifAWebp/i18n/fr.ts +164 -164
- package/src/tool/gifAWebp/i18n/ja.ts +166 -166
- package/src/tool/gifAWebp/i18n/ko.ts +166 -166
- package/src/tool/gifAWebp/i18n/zh.ts +166 -166
- package/src/tool/gifAWebp/seo.astro +15 -15
- package/src/tool/imagenBase64/i18n/en.ts +154 -154
- package/src/tool/imagenBase64/i18n/es.ts +154 -154
- package/src/tool/imagenBase64/i18n/fr.ts +154 -154
- package/src/tool/imagenBase64/seo.astro +15 -15
- package/src/tool/jpgAIco/seo.astro +15 -15
- package/src/tool/jpgAPng/i18n/en.ts +164 -164
- package/src/tool/jpgAPng/i18n/es.ts +164 -164
- package/src/tool/jpgAPng/i18n/fr.ts +164 -164
- package/src/tool/jpgAPng/i18n/ja.ts +166 -166
- package/src/tool/jpgAPng/i18n/ko.ts +166 -166
- package/src/tool/jpgAPng/i18n/zh.ts +166 -166
- package/src/tool/jpgAPng/seo.astro +15 -15
- package/src/tool/jpgAWebp/i18n/en.ts +164 -164
- package/src/tool/jpgAWebp/i18n/es.ts +164 -164
- package/src/tool/jpgAWebp/i18n/fr.ts +164 -164
- package/src/tool/jpgAWebp/seo.astro +15 -15
- package/src/tool/pngAIco/seo.astro +15 -15
- package/src/tool/pngAJpg/i18n/de.ts +21 -21
- package/src/tool/pngAJpg/i18n/es.ts +177 -177
- package/src/tool/pngAJpg/i18n/fr.ts +137 -137
- package/src/tool/pngAJpg/i18n/id.ts +89 -89
- package/src/tool/pngAJpg/i18n/it.ts +89 -89
- package/src/tool/pngAJpg/i18n/ko.ts +177 -177
- package/src/tool/pngAJpg/i18n/nl.ts +20 -20
- package/src/tool/pngAJpg/i18n/pl.ts +89 -89
- package/src/tool/pngAJpg/i18n/pt.ts +89 -89
- package/src/tool/pngAJpg/i18n/ru.ts +177 -177
- package/src/tool/pngAJpg/i18n/sv.ts +89 -89
- package/src/tool/pngAJpg/i18n/tr.ts +89 -89
- package/src/tool/pngAJpg/seo.astro +15 -15
- package/src/tool/pngAWebp/i18n/en.ts +164 -164
- package/src/tool/pngAWebp/i18n/es.ts +164 -164
- package/src/tool/pngAWebp/i18n/fr.ts +164 -164
- package/src/tool/pngAWebp/seo.astro +15 -15
- package/src/tool/svgAJpg/i18n/fr.ts +164 -164
- package/src/tool/svgAJpg/seo.astro +15 -15
- package/src/tool/svgAPng/i18n/fr.ts +164 -164
- package/src/tool/svgAPng/seo.astro +15 -15
- package/src/tool/webpAIco/seo.astro +15 -15
- package/src/tool/webpAJpg/seo.astro +15 -15
- package/src/tool/webpAPng/bibliography.ts +13 -13
- package/src/tool/webpAPng/i18n/de.ts +166 -166
- package/src/tool/webpAPng/i18n/es.ts +171 -171
- package/src/tool/webpAPng/i18n/fr.ts +166 -166
- package/src/tool/webpAPng/i18n/id.ts +166 -166
- package/src/tool/webpAPng/i18n/it.ts +166 -166
- package/src/tool/webpAPng/i18n/nl.ts +166 -166
- package/src/tool/webpAPng/i18n/pl.ts +166 -166
- package/src/tool/webpAPng/i18n/pt.ts +166 -166
- package/src/tool/webpAPng/i18n/ru.ts +166 -166
- package/src/tool/webpAPng/i18n/sv.ts +166 -166
- package/src/tool/webpAPng/i18n/tr.ts +167 -167
- package/src/tool/webpAPng/seo.astro +15 -15
|
@@ -1,168 +1,168 @@
|
|
|
1
1
|
import { bibliography } from '../bibliography';
|
|
2
|
-
import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
|
|
3
|
-
import { generateSchemas } from '../../../shared/logic/schemas';
|
|
4
|
-
import type { GifAWebpLocaleContent } from '../index';
|
|
5
|
-
|
|
6
|
-
const slug = 'gif-to-webp-converter';
|
|
7
|
-
const title = 'GIFを静的WebPにオンライン変換';
|
|
8
|
-
const description =
|
|
9
|
-
'アニメーションGIFを静的WebPに変換します。透明度を維持。サーバー不要。ブラウザ内でローカルに処理。無料。';
|
|
10
|
-
|
|
11
|
-
const ui: ImageConverterUI = {
|
|
12
|
-
dragText: 'GIFファイルをドラッグ...',
|
|
13
|
-
convertText: '即座にWebPに変換する',
|
|
14
|
-
selectFiles: 'ファイルを選択',
|
|
15
|
-
processedFiles: '処理済みファイル',
|
|
16
|
-
downloadAll: 'すべてダウンロード (.zip)',
|
|
2
|
+
import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
|
|
3
|
+
import { generateSchemas } from '../../../shared/logic/schemas';
|
|
4
|
+
import type { GifAWebpLocaleContent } from '../index';
|
|
5
|
+
|
|
6
|
+
const slug = 'gif-to-webp-converter';
|
|
7
|
+
const title = 'GIFを静的WebPにオンライン変換';
|
|
8
|
+
const description =
|
|
9
|
+
'アニメーションGIFを静的WebPに変換します。透明度を維持。サーバー不要。ブラウザ内でローカルに処理。無料。';
|
|
10
|
+
|
|
11
|
+
const ui: ImageConverterUI = {
|
|
12
|
+
dragText: 'GIFファイルをドラッグ...',
|
|
13
|
+
convertText: '即座にWebPに変換する',
|
|
14
|
+
selectFiles: 'ファイルを選択',
|
|
15
|
+
processedFiles: '処理済みファイル',
|
|
16
|
+
downloadAll: 'すべてダウンロード (.zip)',
|
|
17
17
|
pending: '待機中',
|
|
18
|
-
bibliographyTitle: '参考文献',
|
|
19
|
-
faqTitle: 'よくある質問',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const faq: GifAWebpLocaleContent['faq'] = [
|
|
23
|
-
{
|
|
24
|
-
question: 'なぜアニメーションファイルを現代的な静的WebP形式に変換するのですか?',
|
|
25
|
-
answer:
|
|
26
|
-
'WebPはGoogleの圧縮標準です。驚くほど軽量で、透明度をきれいに維持します。GIFからWebPに移行することで、重いアニメーションが排除され、Webスピードが飛躍的に向上します。',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
question: '元の画像は透明のままですか?',
|
|
30
|
-
answer:
|
|
31
|
-
'はい。JPEGとは異なり、WebPコンテナは複雑なアルファチャンネルを尊重します。すべてのシルエットは元のまま完璧に保たれます。',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
question: 'ファイルはどこにアップロードされますか?',
|
|
35
|
-
answer:
|
|
36
|
-
'アップロードは行われません。処理はブラウザのJavascriptによってPC上で完全に行われ、外部への送信は一切ありません。',
|
|
37
|
-
},
|
|
38
|
-
];
|
|
39
|
-
|
|
40
|
-
const howTo: GifAWebpLocaleContent['howTo'] = [
|
|
41
|
-
{
|
|
42
|
-
name: 'アニメーションを開始',
|
|
43
|
-
text: '外部接続なしで、数十のGIFをデリミタゾーンに移動してドロップします。',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: '見えない大きな変化を目撃',
|
|
47
|
-
text: 'ローカルキャンバスデコーダーが出力を生成する間、ミリ秒単位で変化するプログレスインジケーターを確認してください。',
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
name: '変換された結果を保存',
|
|
51
|
-
text: '抽出されたファイルを個別に取得するか、「Zipダウンロード」を押してすべてをパッケージ化します。',
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
|
|
55
|
-
const seo: GifAWebpLocaleContent['seo'] = [
|
|
56
|
-
{
|
|
57
|
-
type: 'title',
|
|
58
|
-
text: 'GIF to WebP コンバーター:重いアニメーションに代わる現代的な選択肢',
|
|
59
|
-
level: 2,
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
type: 'paragraph',
|
|
63
|
-
html: 'アニメーションGIFは現代のWebコンテンツにおける恐竜のようなものです。不釣り合いな帯域幅を消費し、あらゆるページのPageSpeedを低下させ、数千のWebサイトにおける総重量の大部分を占めています。典型的な5MBのアニメーションGIFは、同じ視覚的品質を維持しながら1MB未満のWebPアニメーションに変換できます。WebPは、Web上のGIFを置き換えるためにGoogleが特別に設計した後継形式です。',
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
type: 'title',
|
|
67
|
-
text: 'GIF vs WebP:Webの過去と現在のギャップ',
|
|
68
|
-
level: 3,
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
type: 'paragraph',
|
|
72
|
-
html: 'GIFはもともとアニメーション用に設計されていない1987年の形式です。アニメーション機能は後からの「ハック」として追加されました。256色のパレット、非効率な圧縮、オーディオ処理の不可などは、これがもはや旧式の形式であることを示しています。2010年にGoogleによって開発されたWebPは、損失あり・なしの両方で優れた圧縮を提供し、ネイティブのアニメーションサポートと完全なアルファチャンネルを備えています。',
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
type: 'paragraph',
|
|
76
|
-
html: 'Web開発者にとって、ページ上のGIFをWebPに置き換えることは、Google PageSpeedスコアを10〜30ポイント向上させることを意味します。ページの軽量化は、Core Web Vitalsの改善、SEOランキングの向上、およびサーバーの帯域幅コストの削減につながります。これは単なる見た目の改善ではなく、技術的なアーキテクチャの決定です。',
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
type: 'title',
|
|
80
|
-
text: 'インフラ比較:ローカル vs クラウド',
|
|
81
|
-
level: 3,
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
type: 'comparative',
|
|
85
|
-
items: [
|
|
86
|
-
{
|
|
87
|
-
title: 'クラウドコンバーター',
|
|
88
|
-
description: 'リモートサーバーでGIFを処理するプラットフォーム。',
|
|
89
|
-
icon: 'mdi:cloud-upload',
|
|
90
|
-
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
-
points: [
|
|
92
|
-
'アニメーションがインターネット経由でサードパーティのサーバーに送信される',
|
|
93
|
-
'アップロードとダウンロードの際のネットワーク遅延による待機時間',
|
|
94
|
-
'サイズ制限(重いGIFは拒否されることが多い)',
|
|
95
|
-
'ファイルの保持や分析に関するリスク',
|
|
96
|
-
],
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
-
description: 'Vanilla JSテクノロジーを使用して、ハードウェア上で直接処理。',
|
|
101
|
-
icon: 'mdi:laptop-mac',
|
|
102
|
-
highlight: true,
|
|
103
|
-
points: [
|
|
104
|
-
'GIFがデバイスから離れることはありません',
|
|
105
|
-
'ネットワークの待機時間なしで瞬時に変換',
|
|
106
|
-
'サイズ制限なし:あらゆる重量のGIFを処理可能',
|
|
107
|
-
'完全なプライバシー:外部送信は0バイト',
|
|
108
|
-
],
|
|
109
|
-
},
|
|
110
|
-
],
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
type: 'title',
|
|
114
|
-
text: 'ローカルでのGIF to WebP変換の仕組み',
|
|
115
|
-
level: 3,
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
type: 'paragraph',
|
|
119
|
-
html: 'ローカル変換にはHTML5 Canvas APIを使用します。GIFはブラウザのネイティブなImage要素として読み込まれます。キャンバスに描画することで、グラフィックエンジンはすべての透明度情報とともに最初のアニメーションフレームをキャプチャします。<code>toDataURL(\'image/webp\')</code>メソッドは、フレームをRAMから直接WebPとしてエクスポートします。',
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
type: 'paragraph',
|
|
123
|
-
html: 'WebPは完全なアルファチャンネルをサポートしているため、背景を追加することなく、生成されたWebPでGIFの透明度が維持されます。WebPの圧縮アルゴリズムはGIFやPNGよりも大幅に効率的であり、これが最終的な出力のファイルサイズが劇的に減少する理由です。',
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
type: 'tip',
|
|
127
|
-
title: '確実なPageSpeed改善',
|
|
128
|
-
html: '5MBのアニメーションGIFは、1MB未満のWebPになる可能性があります。WebサイトのページにGIFがある場合、それらをWebPに置き換えることで、Largest Contentful Paint (LCP)やTotal Blocking Time (TBT)を直ちに改善し、SEOランキングに直接影響を与えることができます。',
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
type: 'title',
|
|
132
|
-
text: '変換されたWebPの活用事例と互換性',
|
|
133
|
-
level: 3,
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
type: 'list',
|
|
137
|
-
icon: 'mdi:check-circle',
|
|
138
|
-
items: [
|
|
139
|
-
'PageSpeedスコアを改善するためにWebページ上のGIFを置き換える。',
|
|
140
|
-
'Discord、Slack、現代的なプラットフォーム用に最適化されたアバターやステッカー。',
|
|
141
|
-
'デジタルマーケティングキャンペーン用のバナーやビジュアル。',
|
|
142
|
-
'プログレッシブWebアプリケーション(PWA)でのアニメーション。',
|
|
143
|
-
'Chrome、Edge、Firefox、Safari 14以降、およびすべての現代的なブラウザに対応。',
|
|
144
|
-
],
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
type: 'title',
|
|
148
|
-
text: '結論:GIFを21世紀仕様に移行しましょう',
|
|
149
|
-
level: 3,
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
type: 'paragraph',
|
|
153
|
-
html: 'WebサイトのすべてのGIFは、最適化の機会を逃しています。当サイトのツールは、ブラウザで直接、即座に、安全に、制限なくGIFをWebPに変換します。その結果、ファイルサイズは最大5倍削減され、完璧な透明度とすべての現代的なブラウザとの互換性が保証されます。',
|
|
154
|
-
},
|
|
155
|
-
];
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
export const content: GifAWebpLocaleContent = {
|
|
159
|
-
slug,
|
|
160
|
-
title,
|
|
161
|
-
description,
|
|
162
|
-
ui,
|
|
163
|
-
seo,
|
|
164
|
-
faq,
|
|
165
|
-
bibliography,
|
|
166
|
-
howTo,
|
|
167
|
-
schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
|
|
168
|
-
};
|
|
18
|
+
bibliographyTitle: '参考文献',
|
|
19
|
+
faqTitle: 'よくある質問',
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const faq: GifAWebpLocaleContent['faq'] = [
|
|
23
|
+
{
|
|
24
|
+
question: 'なぜアニメーションファイルを現代的な静的WebP形式に変換するのですか?',
|
|
25
|
+
answer:
|
|
26
|
+
'WebPはGoogleの圧縮標準です。驚くほど軽量で、透明度をきれいに維持します。GIFからWebPに移行することで、重いアニメーションが排除され、Webスピードが飛躍的に向上します。',
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
question: '元の画像は透明のままですか?',
|
|
30
|
+
answer:
|
|
31
|
+
'はい。JPEGとは異なり、WebPコンテナは複雑なアルファチャンネルを尊重します。すべてのシルエットは元のまま完璧に保たれます。',
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
question: 'ファイルはどこにアップロードされますか?',
|
|
35
|
+
answer:
|
|
36
|
+
'アップロードは行われません。処理はブラウザのJavascriptによってPC上で完全に行われ、外部への送信は一切ありません。',
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const howTo: GifAWebpLocaleContent['howTo'] = [
|
|
41
|
+
{
|
|
42
|
+
name: 'アニメーションを開始',
|
|
43
|
+
text: '外部接続なしで、数十のGIFをデリミタゾーンに移動してドロップします。',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: '見えない大きな変化を目撃',
|
|
47
|
+
text: 'ローカルキャンバスデコーダーが出力を生成する間、ミリ秒単位で変化するプログレスインジケーターを確認してください。',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: '変換された結果を保存',
|
|
51
|
+
text: '抽出されたファイルを個別に取得するか、「Zipダウンロード」を押してすべてをパッケージ化します。',
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const seo: GifAWebpLocaleContent['seo'] = [
|
|
56
|
+
{
|
|
57
|
+
type: 'title',
|
|
58
|
+
text: 'GIF to WebP コンバーター:重いアニメーションに代わる現代的な選択肢',
|
|
59
|
+
level: 2,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
type: 'paragraph',
|
|
63
|
+
html: 'アニメーションGIFは現代のWebコンテンツにおける恐竜のようなものです。不釣り合いな帯域幅を消費し、あらゆるページのPageSpeedを低下させ、数千のWebサイトにおける総重量の大部分を占めています。典型的な5MBのアニメーションGIFは、同じ視覚的品質を維持しながら1MB未満のWebPアニメーションに変換できます。WebPは、Web上のGIFを置き換えるためにGoogleが特別に設計した後継形式です。',
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
type: 'title',
|
|
67
|
+
text: 'GIF vs WebP:Webの過去と現在のギャップ',
|
|
68
|
+
level: 3,
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: 'paragraph',
|
|
72
|
+
html: 'GIFはもともとアニメーション用に設計されていない1987年の形式です。アニメーション機能は後からの「ハック」として追加されました。256色のパレット、非効率な圧縮、オーディオ処理の不可などは、これがもはや旧式の形式であることを示しています。2010年にGoogleによって開発されたWebPは、損失あり・なしの両方で優れた圧縮を提供し、ネイティブのアニメーションサポートと完全なアルファチャンネルを備えています。',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
type: 'paragraph',
|
|
76
|
+
html: 'Web開発者にとって、ページ上のGIFをWebPに置き換えることは、Google PageSpeedスコアを10〜30ポイント向上させることを意味します。ページの軽量化は、Core Web Vitalsの改善、SEOランキングの向上、およびサーバーの帯域幅コストの削減につながります。これは単なる見た目の改善ではなく、技術的なアーキテクチャの決定です。',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
type: 'title',
|
|
80
|
+
text: 'インフラ比較:ローカル vs クラウド',
|
|
81
|
+
level: 3,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
type: 'comparative',
|
|
85
|
+
items: [
|
|
86
|
+
{
|
|
87
|
+
title: 'クラウドコンバーター',
|
|
88
|
+
description: 'リモートサーバーでGIFを処理するプラットフォーム。',
|
|
89
|
+
icon: 'mdi:cloud-upload',
|
|
90
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
+
points: [
|
|
92
|
+
'アニメーションがインターネット経由でサードパーティのサーバーに送信される',
|
|
93
|
+
'アップロードとダウンロードの際のネットワーク遅延による待機時間',
|
|
94
|
+
'サイズ制限(重いGIFは拒否されることが多い)',
|
|
95
|
+
'ファイルの保持や分析に関するリスク',
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
+
description: 'Vanilla JSテクノロジーを使用して、ハードウェア上で直接処理。',
|
|
101
|
+
icon: 'mdi:laptop-mac',
|
|
102
|
+
highlight: true,
|
|
103
|
+
points: [
|
|
104
|
+
'GIFがデバイスから離れることはありません',
|
|
105
|
+
'ネットワークの待機時間なしで瞬時に変換',
|
|
106
|
+
'サイズ制限なし:あらゆる重量のGIFを処理可能',
|
|
107
|
+
'完全なプライバシー:外部送信は0バイト',
|
|
108
|
+
],
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
type: 'title',
|
|
114
|
+
text: 'ローカルでのGIF to WebP変換の仕組み',
|
|
115
|
+
level: 3,
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
type: 'paragraph',
|
|
119
|
+
html: 'ローカル変換にはHTML5 Canvas APIを使用します。GIFはブラウザのネイティブなImage要素として読み込まれます。キャンバスに描画することで、グラフィックエンジンはすべての透明度情報とともに最初のアニメーションフレームをキャプチャします。<code>toDataURL(\'image/webp\')</code>メソッドは、フレームをRAMから直接WebPとしてエクスポートします。',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'paragraph',
|
|
123
|
+
html: 'WebPは完全なアルファチャンネルをサポートしているため、背景を追加することなく、生成されたWebPでGIFの透明度が維持されます。WebPの圧縮アルゴリズムはGIFやPNGよりも大幅に効率的であり、これが最終的な出力のファイルサイズが劇的に減少する理由です。',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
type: 'tip',
|
|
127
|
+
title: '確実なPageSpeed改善',
|
|
128
|
+
html: '5MBのアニメーションGIFは、1MB未満のWebPになる可能性があります。WebサイトのページにGIFがある場合、それらをWebPに置き換えることで、Largest Contentful Paint (LCP)やTotal Blocking Time (TBT)を直ちに改善し、SEOランキングに直接影響を与えることができます。',
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
type: 'title',
|
|
132
|
+
text: '変換されたWebPの活用事例と互換性',
|
|
133
|
+
level: 3,
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'list',
|
|
137
|
+
icon: 'mdi:check-circle',
|
|
138
|
+
items: [
|
|
139
|
+
'PageSpeedスコアを改善するためにWebページ上のGIFを置き換える。',
|
|
140
|
+
'Discord、Slack、現代的なプラットフォーム用に最適化されたアバターやステッカー。',
|
|
141
|
+
'デジタルマーケティングキャンペーン用のバナーやビジュアル。',
|
|
142
|
+
'プログレッシブWebアプリケーション(PWA)でのアニメーション。',
|
|
143
|
+
'Chrome、Edge、Firefox、Safari 14以降、およびすべての現代的なブラウザに対応。',
|
|
144
|
+
],
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
type: 'title',
|
|
148
|
+
text: '結論:GIFを21世紀仕様に移行しましょう',
|
|
149
|
+
level: 3,
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: 'paragraph',
|
|
153
|
+
html: 'WebサイトのすべてのGIFは、最適化の機会を逃しています。当サイトのツールは、ブラウザで直接、即座に、安全に、制限なくGIFをWebPに変換します。その結果、ファイルサイズは最大5倍削減され、完璧な透明度とすべての現代的なブラウザとの互換性が保証されます。',
|
|
154
|
+
},
|
|
155
|
+
];
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
export const content: GifAWebpLocaleContent = {
|
|
159
|
+
slug,
|
|
160
|
+
title,
|
|
161
|
+
description,
|
|
162
|
+
ui,
|
|
163
|
+
seo,
|
|
164
|
+
faq,
|
|
165
|
+
bibliography,
|
|
166
|
+
howTo,
|
|
167
|
+
schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
|
|
168
|
+
};
|