ant2マガジン
2021年08月
2021.08.25
ファイルの拡張子について
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、
誠にありがとうございます。
今回は、ホームページ制作には必ず必要となってくる画像やPDFなどの「ファイルの拡張子」についてご紹介します。
拡張子とは
拡張子とは、パソコンやスマートフォンなどで扱うファイルの種類を識別するためにファイル名末尾の「.(ピリオド)」以降につけられる3文字前後の文字列のことを指します。
例：
「aaaa.jpg」 →拡張子は「.jpg」
「bbbb..txt」 →拡張子は「.txt」
拡張子がついているファイルはそのファイルが何のファイルであるのかを判別し、ファイルをクリックすると対応したアプリケーションで開くことができます。
※対応したアプリケーションプログラムがダウンロードされていない場合は開くことができません。
拡張子の特徴
拡張子は数多く存在し、ファイルによって特徴があり、それぞれの特徴や用途によって使い分けが必要となります。
また、拡張子によっては拡張子を変更すると開けなくなるものや自分が思っているかたちで表示されないもの、
ファイル自体が拡張子の違いによって壊れてしまうものもあるので注意が必要です。
主要な拡張子
画像ファイルの拡張子
| .jpg（.jpeg） | .gif | .png | |
|---|---|---|---|
| 色数 | フルカラー1670万色 | 256色 | フルカラー1670万色 |
| 圧縮形式 | 非可逆圧縮形式 →上書き保存で画像が劣化してしまう |
可逆圧縮形式（ロスレス圧縮） | 可逆圧縮形式（ロスレス圧縮） |
| 背景の透過 | ✕ | 〇 | 〇 |
| 容量 | 小さくできる | 軽め | フルカラーにすると.jpgよりも重くなる |
| アニメーション | ✕ | 〇 | ✕ |
| おすすめ用途 | 写真 | ロゴ・ボタン・アイコン・イラスト | 写真・イラスト |
※画像ファイル拡張子「.heic」について
「.heic」はApple社がiOS11から採用したオリジナルの拡張子です。
特徴としては、【高画質・容量が軽い（JPEGの半分くらいの容量）】があげられます。
iPhoneで使用する分には問題ありませんが、Windowsのパソコンで開く場合この拡張子に対応していない場合があります。
そのため、対応していないパソコンで使用する際は「.heic」→「.jpg」へ拡張子を変換してご利用ください。
★2021年現在、「.heic」はどのブラウザでも対応していません。
WEB上で「.heic」の画像を表示させたい場合には拡張子変換が必須となります。
★iPhoneで撮る写真を「.heic」から「.jpg」へ変更する方法
iPhoneの【設定】アプリ→【カメラ】を選択→【フォーマット】を選択→【互換性優先】を選択
iPhoneのカメラで撮影する写真は「.jpg」形式で保存されるようになります。
音声ファイル
| .wav | .mp3 | |
|---|---|---|
| 特徴 |
|
|
動画ファイル
| .wmv | .avi | .mpeg（.mpg） | |
|---|---|---|---|
| 特徴 |
|
|
|
その他の主な拡張子
| 拡張子名 | 形式 |
|---|---|
| .tiff／.tif | 画像ファイル |
| .bmp | 画像ファイル |
| .txt | テキストファイル |
| .csv | テキストファイル |
| PDFファイル | |
| .html／.htm | HTMLファイル |
| .xml | XMLファイル |
| .css | スタイルシート |
| .js | JavaScriptファイル |
| .zip | 圧縮ファイル |
拡張子の表示・非表示について
Windows10のデフォルトの設定で拡張子が非表示になっていますが、設定で変更することが可能です。
エクスプローラーのリボンから変更する方法
- エクスプローラーのリボンから「表示」タブをクリック
- 「表示/非表示」内の『ファイル名拡張子』のチェックボックスにチェックをいれる
【チェックを入れる前】
【チェックを入れた後】
ファイル名の後ろに拡張子が表示されます。
ペイントによる画像ファイルの形式変換
Windows10に標準搭載されている「ペイント」では、画像や写真のファイル形式を変更して保存することができます。
形式変更できるファイルの拡張子
- PNG
- JPEG
- BMP
- GIF
- TIFF
- HEIC
変更方法
- 形式変更したい画像や写真をペイントで開く
- リボンから「ファイル」タブをクリック
- 一覧から「名前を付けて保存」にマウスを近づけると形式変更一覧が表示されます
- 変更したい形式を選択して保存
ant2 CMSで使用できる拡張子
ant2 CMSではサーバーブラウザーで各種ファイルを管理しており、サイトで使用する画像や各種ファイルは、サーバーブラウザーにアップロードする必要があります。
アップロードできるファイル拡張子は下記となります。
画像
| 拡張子 | 3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、jpg、gif、jpeg、png、tiff、tif、swf、fla、flv、zip、txt |
|---|---|
| 上限 |
32MB |
ファイル
| 拡張子 | csv、doc、csv、doc、docm、docx、ods、odt、otf、pdf、ps、rtf、ttf、xls、xlsm、xlsx、odp、pps、ppsm、ppsx、ppt、pptm、pptx、3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、heic、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、aac、m4a、mp3、oga、wav、as、as3、asm、cpp、cs、css、cxx、diff、erb、erl、groovy、gvy、h、haml、hh、hxx、js、json、jsx、less、lst、markdown、md、mdown、mkdn、ml、mm、out、plist、properties、sass、scm、script、scss、sml、sql、txt、vb、vi、vim、xhtml、xml、xsd、xsl、yaml、yml、htm、html、lzh、zip、tar、gz、7z、rar |
|---|---|
| 上限 | 32MB |
今回は拡張子についてご紹介いたしました。
拡張子の種類や違いを理解し、より適したファイルを使用することでユーザーファーストなホームページを制作することができます。
また、拡張子を見える設定にすることでよりスムーズな制作ができるかと思います。
ant2 CMSは主要なファイルは勿論その他のファイルもアップロード可能となっておりますので
是非、この機会に拡張子による見え方の違いなどをお試しください。
2021.08.11
Google A/Bテスト[２]
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
前回に続いて、GoogleのA/Bテストについてご紹介します。
目次
- パターンの追加と編集
- ターゲットの設定
- 目標の設定
- レポートの確認
前回はGoogleオプティマイズの初期設定までをご紹介しました。
ここからは新たなテストを開始するときには、都度設定が必要となります。
その１ パターンを追加する
エクスペリエンスの作成後はテストパターンを作成していきましょう。
『パターンを追加』をクリックし、パターンの名前を入力して『完了』をクリックすると、【パターン】の画面にオリジナルと追加したパターンが表示されます。
さらにパターンを追加することもでき、3つ以上のパターンでのテストも可能です。
その２ ビジュアルエディターによるパターンの編集
作成したパターンの『編集』をクリックすると、サイト上でパターンの編集ができるビジュアルエディターが開きます。
編集したい箇所をクリックすると右側に表示されているボックスからテキストや背景など様々な編集ができます。
編集ができたら右上の『完了』をクリックし、左上の矢印でオプティマイズの管理画面に戻ることができます。
（試しにテキストの背景カラーを編集してみました。かなり直感的に編集できます！）
編集した内容は、右上の『＜＞』ボタンの『CSS』から確認することができます。
編集したパターンのプレビューは『プレビュー』から各デバイスのプレビューを確認できます。
モバイル プレビュー
●『デバック』では下記のターゲティング設定で指定した条件の動作確認が可能です。
ターゲティング設定でパターンを適用するユーザーを絞り込んでいる場合は、デバックモードで意図した絞り込みになっているかを確認しておきましょう。
その３ ターゲティング設定
ターゲティング設定により、テストの対象にするユーザーをさまざまな条件で絞り込むことができます。
１．ページターゲティング
URL の条件を指定することで、テストの対象にするページを絞り込みます。
特定の1ページのみを指定したり、正規表現を用いた条件指定により特定のカテゴリに該当するページ群（例えば、ECサイトにおける商品詳細ページ）をテスト対象とすることができます。
参考：Google Optimize ヘルプ URL ターゲティング
２．オーディエンスターゲティング
さまざまな条件指定により、テストの対象にするユーザーを絞り込むことができます。
例えば、特定の地域のユーザーのみをターゲットにしたり、特定の広告媒体経由で流入したユーザーのみをターゲットにしたりといったことが可能です。
その４ 目標設定
メインの目標1つと副目標2つの計3つの設定ができます。
設定した目標に基づいて、どちらのパターンが望ましいのかを評価します。
設定できる目標は、大きく分けてアナリティクスの目標・システム・カスタムの3種類です。
●アナリティクスの目標
リンクさせた Google アナリティクスで設定されている目標を使用します。
●システム
Google オプティマイズで用意されている目標です。セッション時間、ページビュー数、直帰数があります。
●カスタム
Google オプティマイズで直接作成可能な目標です。イベントもしくはページビュー数を条件とします。
ここまで設定できれば、実際にA/Bテストを開始しましょう。
レポートの確認方法
テストを開始した後はレポートタブからレポートを確認できます。
例の画像では『リーダーが見つかりませんでした』となっていますが、これは「どのパターンもオリジナルもほとんど差がない」ということを表しています。
そのほかにも様々なステータスがありますので、一部紹介します。
●テスト セッションが不十分です・・・テストセッションは発生していますが、すべてのパターンを分析できるだけの十分なデータが集まっていない状態です。
●テストを続けてください・・・テストを開始して2週間以上経過していないか、データ量が不十分な状態です。
●少なくとも1つのパターンがオリジナルよりも優れています・・・オリジナルを上回るパターンが１つ以上見つかってはいるものの、最善なパターンを特定するにはデータが足りない状態です。
●オリジナルがリーダーです・・・オリジナルより優れたパターンが見つからなかったという結果です。
●1つ以上のリーダーが見つかりました・・・データが十分に収集され、オリジナルよりも優れているパターンが1つ以上見つかった状態です。
以上のように、 Google オプティマイズを導入し、A/Bテストを行うことができます。
管理画面もわかりやすく、特にビジュアルエディターでのパターン編集は直感的で簡単に作業できるので、一度お試しいただくことをおすすめいたします。
ant2 CMSでは、テスト実施後のサイト編集作業も同じように直感的な操作で簡単に行えます。
この機会に是非、ご検討ください。
2021.08.02
Google A/Bテスト[1]
こんにちは。
アントアントのメルマガ担当です。
今回は2回に分けて、GoogleのA/Bテストについてご紹介します。
目次
- 『A/Bテスト』 とは
- Googleオプティマイズ
- A/Bテストの初期設定
『A/Bテスト』とは
A/Bテストは主にインターネットマーケティングで用いられる手法です。
WEBサイトのページや広告で使用する画像のAパターンとBパターンを作成し、「どちらがより良い結果を出せるか」を検証することです。
場合によっては2～3パターンなど、回数を重ねる検証方法もあります。
Googleオプティマイズ
Googleオプティマイズは、Google が無料で提供しているツールのひとつで、さまざまなWEBサイトのテストを行うことができます。
Googleアナリティクスや、Googleタグマネージャーとも連携することができ、A/Bテストのほかに、異なるURLを用意し比較する「リダイレクトテスト」、ページ内の画像要素の組み合わせを変更した「多変量テスト」も可能です。
GoogleオプティマイズでのA/Bテストは、通常は時間と手間が必要なテストページの作成作業が管理画面上で簡単に作成でき、テスト開始後の集計も自動のため、工数を削減できるのがメリットです。
一方デメリットとして、GoogleオプティマイズでのA/Bテストではページのチラつき（ページフリッカー）が発生することがあります。
チラつきの度合いによっては、ユーザーがサイトを離れる原因となり、機会損失につながる可能性があります。
※このメルマガではチラつきを回避するための方法もご紹介します。
A/Bテストの初期設定
それでは実際にGoogleオプティマイズの設定方法を確認していきましょう。
１．アカウントとコンテナの作成
手順１
Googleオプティマイズを開いて「利用を開始」をクリック。
お知らせメール受信の設定が開くので、選択し先へ進んでください。
手順２
アカウントの設定を行います。
チェックボックスが表示されるので任意でチェックを入れ、完了するとコンテナが作成されます。
※利用規約へのチェックは必須となります。
２．Analyticsとの連携
事前にサイトをGoogle Analyticsに登録しておく必要があります。
参考：ant2 CMSのメールマガジン『Google Analytics GA4について』
手順１
右上の「設定」からコンテナ設定を開き、詳細の「アナリティクスへリンクする」をクリックします。
手順２
「プロパティのリンク」で、Googleアナリティクスのプロパティが表示されるので、テストを行いたいプロパティを選択し、右上の「リンク」をクリックします。
３．オプティマイズタグをサイトに追加
Googleオプティマイズでとサイトを接続するために、オプティマイズスニペット（Googleオプティマイズのタグ）をサイトに設置する必要があります。
手順１
コンテナ設定のコンテナIDをコピーします。
手順２
Google Analyticsの管理画面で取得できるトラッキングコードの「gtag('config' 行」に、以下の例のようにオプティマイズのコンテナIDを追加します。
例：gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'コンテナID'});
手順３
コンテナIDを追記したトラッキングコードをサイトの＜HEAD＞タグの先頭に追加します。
※ant2 CMSの場合、「アクセス解析を設定」のメニューから[トラッキングコード]の項目に入力することで＜HEAD＞タグの先頭に設置できます。
！アンチフリッカースニペット（ページのチラつき防止）の設置
冒頭のデメリットでご説明したとおり、A/Bテストを実施するとページのチラつきが発生することがあります。
チラつきが発生した際は、前述のオプティマイズスニペットがきちんと設置されているかを確認してください。
それでもチラつきがある場合はチラつき回避のタグ（アンチフリッカースニペット）を設置してください
手順４
Googleオプティマイズのインストールを確認してください。
４．エクスペリエンスの作成
アカウントとコンテナを作成したあとは、エクスペリエンスを作成します
名前、テストを行うURL、テストのタイプを選択します。（今回はA/Bテストを選択します）
ここまでが初期設定となります。
次回のメールマガジンでは、実際にテストパターンを作成する手順をご紹介します。
- 1 / 1
