@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 { AvifAPngLocaleContent } from '../index';
|
|
5
|
-
|
|
6
|
-
const slug = 'avif-to-png-converter';
|
|
7
|
-
const title = 'AVIFをPNGにオンラインで変換';
|
|
8
|
-
const description =
|
|
9
|
-
'透明度を維持しながらAVIF画像をPNGに変換します。ファイルをアップロードする必要はありません。ブラウザ上でのローカル処理で、無料で無制限に使用できます。';
|
|
10
|
-
|
|
11
|
-
const ui: ImageConverterUI = {
|
|
12
|
-
dragText: 'AVIFファイルをドラッグ...',
|
|
13
|
-
convertText: '即座にPNGに変換します',
|
|
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 { AvifAPngLocaleContent } from '../index';
|
|
5
|
+
|
|
6
|
+
const slug = 'avif-to-png-converter';
|
|
7
|
+
const title = 'AVIFをPNGにオンラインで変換';
|
|
8
|
+
const description =
|
|
9
|
+
'透明度を維持しながらAVIF画像をPNGに変換します。ファイルをアップロードする必要はありません。ブラウザ上でのローカル処理で、無料で無制限に使用できます。';
|
|
10
|
+
|
|
11
|
+
const ui: ImageConverterUI = {
|
|
12
|
+
dragText: 'AVIFファイルをドラッグ...',
|
|
13
|
+
convertText: '即座にPNGに変換します',
|
|
14
|
+
selectFiles: 'ファイルを選択',
|
|
15
|
+
processedFiles: '処理済みファイル',
|
|
16
|
+
downloadAll: 'すべてダウンロード (.zip)',
|
|
17
17
|
pending: '待機中',
|
|
18
|
-
bibliographyTitle: '参考文献',
|
|
19
|
-
faqTitle: 'よくある質問',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const faq: AvifAPngLocaleContent['faq'] = [
|
|
23
|
-
{
|
|
24
|
-
question: 'なぜAVIFをPNGに変換する必要があるのですか?',
|
|
25
|
-
answer:
|
|
26
|
-
'AVIFは圧縮には優れていますが、古いブラウザや従来の画像エディタでの互換性は限られています。AVIFからPNGに変換することで、元のファイルの透明度を維持し、すべてのアプリケーションで開けるようになります。',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
question: '元のAVIFファイルの透明度は維持されますか?',
|
|
30
|
-
answer:
|
|
31
|
-
'はい。透明な背景を削除してしまうJPGとは異なり、PNGへの書き出しでは、当コンバーターはアルファチャンネルをそのまま維持します。',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
question: '画像がインターネットにアップロードされないというのは本当ですか?',
|
|
35
|
-
answer:
|
|
36
|
-
'本当です。当コンバーターは、デバイスの内部JavaScriptエンジンを使用して、100%ローカルに実行されます。',
|
|
37
|
-
},
|
|
38
|
-
];
|
|
39
|
-
|
|
40
|
-
const howTo: AvifAPngLocaleContent['howTo'] = [
|
|
41
|
-
{
|
|
42
|
-
name: 'AVIFファイルを追加する',
|
|
43
|
-
text: '指定されたエリアに直接ドラッグするか、ボタンを使用してデバイス内のフォルダを参照してください。',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: '即時処理',
|
|
47
|
-
text: 'HTML5プロセッサが画像をレンダリングします。数マイクロ秒で自動的に形式がPNGに切り替わります。',
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
name: 'PNGファイルを取得する',
|
|
51
|
-
text: '変換された画像を一つずつダウンロードするか、ZIPボタンを使用して一括で保存してください。',
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
|
|
55
|
-
const seo: AvifAPngLocaleContent['seo'] = [
|
|
56
|
-
{
|
|
57
|
-
type: 'title',
|
|
58
|
-
text: 'AVIF-PNGコンバーター:ウェブ配信用からプロの編集まで',
|
|
59
|
-
level: 2,
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
type: 'paragraph',
|
|
63
|
-
html: 'AVIFは、ウェブで画像を提供するための理想的な形式です。小さく、効率的で、高品質です。しかし、デザインツールでこれらの画像を編集、レタッチ、または加工しようとすると、AVIFは障害となります。Figma、Photoshop、Illustrator、Sketch、および実質的にすべてのプロフェッショナルなデザインツールは、透明度を伴う作業や非可逆編集のためにPNG形式を想定しています。AVIFをPNGに変換することは、ウェブ配信の世界とクリエイティブな編集の世界をつなぐ架け橋となります。',
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
type: 'title',
|
|
67
|
-
text: 'AVIF vs PNG:配信 vs 編集',
|
|
68
|
-
level: 3,
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
type: 'paragraph',
|
|
72
|
-
html: 'AVIFは配信形式として際立っています。ファイルが小さく、読み込みが速く、アルファチャンネルをサポートし、並外れた視覚品質を備えています。しかし、ツールのエコシステムは限られています。ほとんどのデザインソフトウェアはAVIFを直接インポートできず、クリエイティブなワークフローを中断させます。FigmaでAVIFを開こうとしたり、Photoshopにレイヤーとしてインポートしようとしたりしても、うまく機能しません。',
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
type: 'paragraph',
|
|
76
|
-
html: 'PNGはデジタルデザインのネイティブ形式です。可逆圧縮、完全なアルファチャンネルのサポート、およびすべてのクリエイティブツールとのユニバーサルな互換性を備えたPNGは、最高級の作業形式です。スケーリング、レタッチ、複数の形式へのエクスポート、またはレイヤー作業が必要な場合、PNGはそのプロセスで詳細やピクセルを一切損なうことがないことを保証します。',
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
type: 'title',
|
|
80
|
-
text: '比較:クラウドコンバーターと当サイトのローカルアーキテクチャ',
|
|
81
|
-
level: 3,
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
type: 'comparative',
|
|
85
|
-
items: [
|
|
86
|
-
{
|
|
87
|
-
title: 'クラウドコンバーター',
|
|
88
|
-
description: 'AVIFファイルをリモートサーバーにアップロードして処理するツール。',
|
|
89
|
-
icon: 'mdi:cloud-upload',
|
|
90
|
-
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
-
points: [
|
|
92
|
-
'デザイン画像がサードパーティのサーバーに送信される',
|
|
93
|
-
'ネットワーク遅延による待機時間が発生する',
|
|
94
|
-
'アルファチャンネルの喪失や変化の可能性がある',
|
|
95
|
-
'一括変換を困難にするサイズ制限がある',
|
|
96
|
-
],
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
-
description: 'Vanilla JSテクノロジーとCanvas APIを使用してブラウザで直接処理。',
|
|
101
|
-
icon: 'mdi:laptop-mac',
|
|
102
|
-
highlight: true,
|
|
103
|
-
points: [
|
|
104
|
-
'アルファチャンネルを完璧な精度で維持',
|
|
105
|
-
'データ転送のない即時変換',
|
|
106
|
-
'ファイル、サイズ、または一括処理の制限なし',
|
|
107
|
-
'独自の設計資産に対する完全なプライバシー',
|
|
108
|
-
],
|
|
109
|
-
},
|
|
110
|
-
],
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
type: 'title',
|
|
114
|
-
text: '透明度を伴う技術的な変換の仕組み',
|
|
115
|
-
level: 3,
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
type: 'paragraph',
|
|
119
|
-
html: 'モダンなブラウザは、統合されたAV1エンジンによりAVIFをネイティブにデコードします。ファイルを読み込むと、ブラウザはアルファチャンネルの全情報を保持しながらメモリ内でデコードします。透明度を含むデコードされた画像は、アルファチャンネルを維持するための正しい構成モードでHTML5の<code>Canvas</code>要素上に描画されます。',
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
type: 'paragraph',
|
|
123
|
-
html: '背景を白で塗りつぶして透明度を破壊してしまうJPGへの書き出しとは異なり、<code>toBlob(\'image/png\')</code>を使用したPNGへの書き出しは、アルファチャンネルを完全に維持します。その結果、元のAVIFのすべてのピクセル、すべての半透明、およびすべての詳細を保持する可逆圧縮のPNGが得られます。',
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
type: 'tip',
|
|
127
|
-
title: 'あらゆるデザインツールにとって必須の事前ステップ',
|
|
128
|
-
html: 'Figma、Photoshop、Illustrator、またはあらゆるデザインツールにインポートする前に、AVIFをPNGに変換してください。これらのアプリケーションはAVIFを直接読み込みませんが、PNGはすべてのツールでネイティブに動作し、透明度と品質を完璧に維持します。',
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
type: 'title',
|
|
132
|
-
text: '使用例:AVIFをPNGに変換する必要がある場合',
|
|
133
|
-
level: 3,
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
type: 'list',
|
|
137
|
-
icon: 'mdi:check-circle',
|
|
138
|
-
items: [
|
|
139
|
-
'Figma、Sketch、Adobe XD、またはその他のUIデザインツールへのインポート。',
|
|
140
|
-
'透明度を維持したままPhotoshop、Affinity Photo、またはGIMPでレイヤーとして編集。',
|
|
141
|
-
'アイコンやスプライト生成のソースとしての使用。',
|
|
142
|
-
'標準的なデザインソフトウェアを使用しているクライアントや共同作業者への送信。',
|
|
143
|
-
'可逆編集形式での透明度を含む画像のアーカイブ。',
|
|
144
|
-
],
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
type: 'title',
|
|
148
|
-
text: '結論:ウェブとデザインをつなぐ架け橋',
|
|
149
|
-
level: 3,
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
type: 'paragraph',
|
|
153
|
-
html: 'AVIFとPNGは、現代のワークフローにおける完璧なパートナーです。ウェブでの効率的な配信にはAVIF、デザインツールでの編集や共同作業にはPNGを使用します。当コンバーターを使用すれば、一方から他方への移行は即時かつプライベートに行われ、細部まで維持されます。視覚的な資産が重要である場合に、まさに必要なものです。',
|
|
154
|
-
},
|
|
155
|
-
];
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
export const content: AvifAPngLocaleContent = {
|
|
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: AvifAPngLocaleContent['faq'] = [
|
|
23
|
+
{
|
|
24
|
+
question: 'なぜAVIFをPNGに変換する必要があるのですか?',
|
|
25
|
+
answer:
|
|
26
|
+
'AVIFは圧縮には優れていますが、古いブラウザや従来の画像エディタでの互換性は限られています。AVIFからPNGに変換することで、元のファイルの透明度を維持し、すべてのアプリケーションで開けるようになります。',
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
question: '元のAVIFファイルの透明度は維持されますか?',
|
|
30
|
+
answer:
|
|
31
|
+
'はい。透明な背景を削除してしまうJPGとは異なり、PNGへの書き出しでは、当コンバーターはアルファチャンネルをそのまま維持します。',
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
question: '画像がインターネットにアップロードされないというのは本当ですか?',
|
|
35
|
+
answer:
|
|
36
|
+
'本当です。当コンバーターは、デバイスの内部JavaScriptエンジンを使用して、100%ローカルに実行されます。',
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const howTo: AvifAPngLocaleContent['howTo'] = [
|
|
41
|
+
{
|
|
42
|
+
name: 'AVIFファイルを追加する',
|
|
43
|
+
text: '指定されたエリアに直接ドラッグするか、ボタンを使用してデバイス内のフォルダを参照してください。',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: '即時処理',
|
|
47
|
+
text: 'HTML5プロセッサが画像をレンダリングします。数マイクロ秒で自動的に形式がPNGに切り替わります。',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: 'PNGファイルを取得する',
|
|
51
|
+
text: '変換された画像を一つずつダウンロードするか、ZIPボタンを使用して一括で保存してください。',
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const seo: AvifAPngLocaleContent['seo'] = [
|
|
56
|
+
{
|
|
57
|
+
type: 'title',
|
|
58
|
+
text: 'AVIF-PNGコンバーター:ウェブ配信用からプロの編集まで',
|
|
59
|
+
level: 2,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
type: 'paragraph',
|
|
63
|
+
html: 'AVIFは、ウェブで画像を提供するための理想的な形式です。小さく、効率的で、高品質です。しかし、デザインツールでこれらの画像を編集、レタッチ、または加工しようとすると、AVIFは障害となります。Figma、Photoshop、Illustrator、Sketch、および実質的にすべてのプロフェッショナルなデザインツールは、透明度を伴う作業や非可逆編集のためにPNG形式を想定しています。AVIFをPNGに変換することは、ウェブ配信の世界とクリエイティブな編集の世界をつなぐ架け橋となります。',
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
type: 'title',
|
|
67
|
+
text: 'AVIF vs PNG:配信 vs 編集',
|
|
68
|
+
level: 3,
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: 'paragraph',
|
|
72
|
+
html: 'AVIFは配信形式として際立っています。ファイルが小さく、読み込みが速く、アルファチャンネルをサポートし、並外れた視覚品質を備えています。しかし、ツールのエコシステムは限られています。ほとんどのデザインソフトウェアはAVIFを直接インポートできず、クリエイティブなワークフローを中断させます。FigmaでAVIFを開こうとしたり、Photoshopにレイヤーとしてインポートしようとしたりしても、うまく機能しません。',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
type: 'paragraph',
|
|
76
|
+
html: 'PNGはデジタルデザインのネイティブ形式です。可逆圧縮、完全なアルファチャンネルのサポート、およびすべてのクリエイティブツールとのユニバーサルな互換性を備えたPNGは、最高級の作業形式です。スケーリング、レタッチ、複数の形式へのエクスポート、またはレイヤー作業が必要な場合、PNGはそのプロセスで詳細やピクセルを一切損なうことがないことを保証します。',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
type: 'title',
|
|
80
|
+
text: '比較:クラウドコンバーターと当サイトのローカルアーキテクチャ',
|
|
81
|
+
level: 3,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
type: 'comparative',
|
|
85
|
+
items: [
|
|
86
|
+
{
|
|
87
|
+
title: 'クラウドコンバーター',
|
|
88
|
+
description: 'AVIFファイルをリモートサーバーにアップロードして処理するツール。',
|
|
89
|
+
icon: 'mdi:cloud-upload',
|
|
90
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
+
points: [
|
|
92
|
+
'デザイン画像がサードパーティのサーバーに送信される',
|
|
93
|
+
'ネットワーク遅延による待機時間が発生する',
|
|
94
|
+
'アルファチャンネルの喪失や変化の可能性がある',
|
|
95
|
+
'一括変換を困難にするサイズ制限がある',
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
+
description: 'Vanilla JSテクノロジーとCanvas APIを使用してブラウザで直接処理。',
|
|
101
|
+
icon: 'mdi:laptop-mac',
|
|
102
|
+
highlight: true,
|
|
103
|
+
points: [
|
|
104
|
+
'アルファチャンネルを完璧な精度で維持',
|
|
105
|
+
'データ転送のない即時変換',
|
|
106
|
+
'ファイル、サイズ、または一括処理の制限なし',
|
|
107
|
+
'独自の設計資産に対する完全なプライバシー',
|
|
108
|
+
],
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
type: 'title',
|
|
114
|
+
text: '透明度を伴う技術的な変換の仕組み',
|
|
115
|
+
level: 3,
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
type: 'paragraph',
|
|
119
|
+
html: 'モダンなブラウザは、統合されたAV1エンジンによりAVIFをネイティブにデコードします。ファイルを読み込むと、ブラウザはアルファチャンネルの全情報を保持しながらメモリ内でデコードします。透明度を含むデコードされた画像は、アルファチャンネルを維持するための正しい構成モードでHTML5の<code>Canvas</code>要素上に描画されます。',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'paragraph',
|
|
123
|
+
html: '背景を白で塗りつぶして透明度を破壊してしまうJPGへの書き出しとは異なり、<code>toBlob(\'image/png\')</code>を使用したPNGへの書き出しは、アルファチャンネルを完全に維持します。その結果、元のAVIFのすべてのピクセル、すべての半透明、およびすべての詳細を保持する可逆圧縮のPNGが得られます。',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
type: 'tip',
|
|
127
|
+
title: 'あらゆるデザインツールにとって必須の事前ステップ',
|
|
128
|
+
html: 'Figma、Photoshop、Illustrator、またはあらゆるデザインツールにインポートする前に、AVIFをPNGに変換してください。これらのアプリケーションはAVIFを直接読み込みませんが、PNGはすべてのツールでネイティブに動作し、透明度と品質を完璧に維持します。',
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
type: 'title',
|
|
132
|
+
text: '使用例:AVIFをPNGに変換する必要がある場合',
|
|
133
|
+
level: 3,
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'list',
|
|
137
|
+
icon: 'mdi:check-circle',
|
|
138
|
+
items: [
|
|
139
|
+
'Figma、Sketch、Adobe XD、またはその他のUIデザインツールへのインポート。',
|
|
140
|
+
'透明度を維持したままPhotoshop、Affinity Photo、またはGIMPでレイヤーとして編集。',
|
|
141
|
+
'アイコンやスプライト生成のソースとしての使用。',
|
|
142
|
+
'標準的なデザインソフトウェアを使用しているクライアントや共同作業者への送信。',
|
|
143
|
+
'可逆編集形式での透明度を含む画像のアーカイブ。',
|
|
144
|
+
],
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
type: 'title',
|
|
148
|
+
text: '結論:ウェブとデザインをつなぐ架け橋',
|
|
149
|
+
level: 3,
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: 'paragraph',
|
|
153
|
+
html: 'AVIFとPNGは、現代のワークフローにおける完璧なパートナーです。ウェブでの効率的な配信にはAVIF、デザインツールでの編集や共同作業にはPNGを使用します。当コンバーターを使用すれば、一方から他方への移行は即時かつプライベートに行われ、細部まで維持されます。視覚的な資産が重要である場合に、まさに必要なものです。',
|
|
154
|
+
},
|
|
155
|
+
];
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
export const content: AvifAPngLocaleContent = {
|
|
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
|
+
};
|