HTMLメール営業!
MailChimpをガッツリ使い倒す!②

2015-12-21

mailchimp2

 

ちょっと間が開いたのですが、今回は先日書いたMailChimpに関する記事の続きです。

 

HTMLメール営業!MailChimpをガッツリ使い倒す!①

http://coqoon.jp/archives/729

 

今回は前回説明できなかった部分を少し掘り下げて説明していきたいと思います。

 

mailchimp2_01

 

MailChimpに再度ログインすると上図のような画面になっていました。

 

知らない端末からログインがあった際に本人確認をする方法を選んでください、ということを言っています。

 

筆者はSMSを選択します。

 

mailchimp2_02

 

住んでいる国と携帯の電話番号を聞いています。

 

「Japan」を選択して電話番号の頭の「0(ゼロ)」を除いた残りの番号を入力してください。

 

mailchimp2_03

 

SMSで確認コードが送られてきますので入力してください。

 

mailchimp2_04

 

ダッシュボードにやってきました。

 

ここでは現在のキャンペーン概要を一覧することが出来ます。

 

まず最初に画面上部の「Lists」ボタンを選択してください。

 

mailchimp2_05

 

前回、送信元のメールアドレスに関する説明を省略したので説明していきたいと思います。

 

「Lists」を選択してください。

 

mailchimp2_06

 

「Setting」タブから「List name and defaults」を選びます。

 

mailchimp2_07

 

「List name and campaign defaults」のページにやって来ました。

 

mailchimp2_08

 

「Default “from” email」の項目がデフォルトのデフォルトの送信元メールアドレスを記載する欄になります。

 

赤文字で「フォームに入力されているメールアドレスのドメインを確認しなくちゃいけない」と書いてあります。何故でしょうか。「Learn Why」から理由を見てみましょう。

 

mailchimp2_09

 

一部メールサービスでスパムメールをブロックするために確認メールが届くことがあるとのことです。

 

まぁ、遠回しにテキトーなドメインを登録してMailChimpからスパムメールを送るのはやめてくださいね、ということなんでしょうね。

 

先ほどの画面、赤文字の箇所にあったリンク「verify domain」を押してください。

 

mailchimp2_10

 

Coqoonのメールアドレスが独自ドメインを使用しているので独自ドメインが本当に存在するかどうかこれから確認メールを送ります。

 

mailchimp2_11

 

確認メールにコードが記載してあるので、そのコードを入力してください。

 

mailchimp2_12

 

確認が完了しました。

 

mailchimp2_13

 

赤文字が消えています。

 

少々面倒ですが新たな送信元メールアドレスを使用する場合はこのように確認作業を行う必要があるんですね。

 

mailchimp2_14

 

今度は、これも前回省略したHTMLメールの作成ページを説明をしていきたいと思います。

 

mailchimp2_15

 

画面左がメールの全体表示になっており、ブロックごとに編集を行います。

 

編集ボタンを選択してみましょう。

 

mailchimp2_16

 

このようにテキストを編集することが出来ます。

 

WordPressみたいな感覚で編集することが可能です。

 

mailchimp2_17

 

Styleページに行ってみましょう。

 

mailchimp2_18

 

ここでは全体のスタイル指定が出来ます。

 

ここもCSSの知識は問われますが、分かっている人には簡単に操作できると思います。

 

ここまで問題なければ次は「Save&Close」で一旦テキスト編集ページを閉じましょう。

 

mailchimp2_19

 

先程は画面左の説明を行ってきましたが、今度は画面右側の説明をしたいと思います。

 

今開いているページが「Contents」ページで、ここから各種コンテンツ、文章、画像、ソーシャルボタンなどをドラッグアンドドロップで画面左側に持ってこれます。

 

「Design」ページは先程のコンテンツ編集ページでいうところの「Style」と同じで、全体のデザインをスタイル指定を行うことが可能です。

 

それでは「Comments」ページとは何でしょうか。

 

mailchimp2_20

 

ここは誰か知り合いから、現在のHTMLメールに対するフィードバックをもらうための機能なんですね。

 

mailchimp2_21

 

適当なメールアドレスを入力してみましょう。

 

mailchimp2_22

 

メールを送信すると…

 

mailchimp2_23

 

このように返信が返ってくるわけですね。

 

mailchimp2_24

 

こちらから返事もできます。

 

こちらから送信したメールに返信するだけでこのようにタイムラインが生成されてやり取りが一覧できます。

 

mailchimp2_25

 

今度はHTMLメールのプレビューをしてみましょう。

 

画面上部に黒い帯があります。

 

mailchimp2_26

 

「Preview and Test」から「Enter preview mode」を選んでください。

 

mailchimp2_27

 

このようにPC、スマホ両方のプレビューを同時に行うことが可能です。

 

ここまでは大丈夫ですね?

 

最後にHTMLメールのフッターに関するコツを紹介します。

 

mailchimp2_28

 

画面左の一番下です。

 

フッターの項目はリストに登録してあるデータから独自タグを使って自動的に出力されるんですが、MailChimpはアメリカのサービスなのでフッターの書き方が日本と全然違うんですね。

 

mailchimp2_29

 

ちょっと小さいですがプレビューで見るとこんな感じ。

 

いかにも海外のサービスを使用しているというスパム感がヤバいので、手書きでフッターを修正することをオススメします。

 

mailchimp2_30

 

筆者はこんな感じになりました。

 

※ちなみにMailChimpのタグは無料プランでは取り除くことが出来ません(結構目立つサイズで配置が難しいです)。

 

mailchimp2_31

 

デフォルトの状態だと独自タグはこんな感じで配置されています。

 

使いたい箇所だけ残して後は削除してしまいましょう。

 

mailchimp2_32

 

因みにHTMLのメール配信停止用のリンクを押すとこのような画面に移動します。

 

海外のサービスなので英語なのが残念ですね。

 

営業用にMailChimpを使った際、配信停止ページが英語だとクレームに繋がりかねません。

 

ここは配信停止受付用のメールアドレスを記載しても良いかもしれませんね。

 

 

コピー出来ない場所にあるテキストをサクッとコピーする方法!

2015-12-21

pointclip

 

 

普段私たちがパソコンを使っていて文字列をコピーしたいとき、対象箇所にポインタを合わせて文字カーソルに変化させた上で右クリックなりショートカットからコピーすると思うんですけれど、中にはポインタを合わせても文字カーソルに変化しない箇所というのがあります。

 

そんな時は手打ちで文字を入力することになると思うのですが、コピーするテキストが長かったりするといちいち手作業でそんなことをやるのは面倒ですよね。今回紹介するのは、そんな「本当ならコピーできないはずの文字列」でも簡単にコピーできちゃうアプリケーションです。

 

pointclip_01

 

Point Clip

http://mt-soft.sakura.ne.jp/web_dl/petit_tool/pointClip/

 

上記の「ダウンロード」の箇所からダウンロードして下さい。

 

pointclip_02

 

「実行」してアプリケーションを起動しましょう。

 

pointclip_03

 

問題なく起動できれば上記の画面が出てくると思います。

 

pointclip_04

 

それでは試しに使ってみることにしましょう。

 

上図のタブは通常、テキストをコピーすることはできませんね。

 

ここにカーソルを合わせてみましょう。すると…

 

pointclip_05

 

アプリケーションの「accNAME」の欄にテキストが出てきたと思います。

 

これは、「今、取り込むことのできるテキストは『ポイントクリップ』ですよ」という意味なんですね。

 

Shift+Aを押してみましょう。

 

pointclip_06

 

『ポイントクリップ』という文字がテキストとして取り込まれました。

 

この状態で初めてテキストのコピー・ペーストが可能となります。

 

pointclip_07

 

こんな感じです!

 

ただ、javascriptで保護されていて上記の方法ではテキストが取り込めないものもあるんですね(日本の、トラディショナルな歌詞サイトのようにものなんかがそうです)。javascriptはブラウザの設定で無効にできるのでここではその方法も確認しておきましょう。

 

pointclip_08

 

Chromeの設定画面を開きます。

 

pointclip_09

 

pointclip_10

 

「詳細設定を変更」を押してください。

 

pointclip_11

 

「プライバシー」の「コンテンツの設定」の箇所を見てみましょう。

 

pointclip_12

 

javascriptの設定項目があります。

 

ここでjavascriptの設定を無効化してしまえばブラウザ上のコピーできないテキストもコピーできるようになります。

 

たまに使うので覚えておいてくださいね。

 

 

HTMLメール営業!
MailChimpをガッツリ使い倒す!①

2015-12-08

mailchimp_official

 

以前CoqoonでFAX営業をしていてHelloFaxは使えるのか?という検証記事を書いたのですが、

 

無料でウェブからFAX送信! HelloFaxでコスト削減はできるのか?

http://coqoon.jp/archives/266

 

Googleアナリティクスで調べてみたところFAX営業はかなりの方にホームページまで来ていただいているようです(送信先のリストを過去のデータでかなり絞っているということもあると思うのですが)。

 

「ホームページを見た上でリアクションが返ってこなかった方が大勢いた」ということは、少なくともFAXを見た時点では興味を抱いていただいたということで、ホームページの書き方に問題があるのかなと思い先週末SEOも含めてホームページの内容を見なおしていました。

 

とりあえずトップページの文言を一部変更したのですが、近いうち、早ければ来週中にコンテンツを大幅強化する予定です。商品登録用の写真撮影プランや店舗サポートに関連したプランを中心に充実させていこうと思っております。そちらの方もよろしくお願いいたします。

 

というわけで今回も営業に関連した記事を書きたいと思うのですが、FAXDMでホームページを見ていただけるということはもっと安価なEメールならどうかということで、今回は海外のメール配信サービスMailChimpを紹介したいと思います。

 

これはいわゆるメルマガサービスのようにも使えるのですが、CSVファイルを使った大規模メール送信をしたいという時にも使えるんですね(HTMLメールも使えます)。下の料金表を見てもらうと分かりやすいです。

 

mailchimp_plans

 

左が登録可能なメール受信者数、真ん中がひと月のメール配信数の上限、右が月額料金になるのですが、無料プランで月12000通メールを送信できるのなら営業用としては充分ですね(各プランの登録可能なメール受信者数が少ないのでメルマガ用には不向きなのかもしれません…)

 

それでは早速見ていきたいと思います。

 

MailChimpの使い方


 

mailchimp_01

 

MailChimp

http://mailchimp.com/

 

トップページです。右上の「Sign Up Free」から登録していきましょう。

 

mailchimp_02

 

パスワードは大文字、小文字、数字、特殊文字を最低1文字ずつ使ってください(8文字以上)。

 

mailchimp_03

 

登録したメールアドレスに確認用のメールが送られます。

 

mailchimp_04

 

これですね。「Activate Account」を押してアカウントを開始しましょう。

 

mailchimp_05

 

「私はロボットではありません」にチェックを入れてください。

 

mailchimp_06

 

造花に森に花に芝生。「草の画像をすべて選択します」とあるのですが、草がどれか分かりにくいですね。分かりにくい時は左下のボタンを押して画像を更新しましょう。

 

mailchimp_07

 

今度は分かりやすいですね。

 

mailchimp_08

 

アカウント情報の登録画面です。

 

mailchimp_09

 

事業に関する情報を聞かれています。

 

mailchimp_10

 

こっちは住所ですね。

 

mailchimp_11

 

これは業種。

「Save And Get Started」を押すと管理画面が出てきます。

 

mailchimp_12

 

最初にやってきたページは「Dashboard」です。画面下の方にはスタートアップガイドがあります。

 

…なのですが、このMailChimpは段取りに分かりにくいところがあって、下のガイドに沿っていくと余計分かりにくくなります。なので、まずここではMailChimpの段取りを説明したいと思います。

 

管理画面上部の一番左にチンパンジーのアイコンがあると思うのですが、ここが今開いているページ。Dashboardになります。アカウントで取り扱っているメール全体の概要をここで一覧するんですね。

 

その右に「Campaigns」「Templates」「Lists」「Reports」「Automation」とあります。TemplatesとLists、Reportsは分かると思います。メールの雛形と送信先のリスト、それからメール受信者の開封率なんかを解析したレポートになります。

 

※Automationは今回の記事では扱いません。有料会員限定の機能でメルマガ登録した人に対して自動的に登録確認のメールを送信するとかそういった内容だったと思います。

 

それじゃあCampaignって何だと。

 

これはですね、MailChimpでは「(リストで登録した)ある人たちに対して特定のメールを送信する一連の作業」をCampaignと表現しているんですね。なので、さっきメールを送った人と別リストの人に同じメールを送信したい時にはまた新たにキャンペーンを作り直す必要があるし、さっきメールを送ったのと同じ人に別のメールを送信したい時にはまた新たにキャンペーンを作り直す必要があります。

 

スタートアップガイドに沿ってやると最初にリストの登録(受信者リストありきという流れ)→キャンペーン作成開始→テンプレートの作成・登録→キャンペーンの送信という流れなので、ちょっと分かりにくいんです。

 

…というのを踏まえた上でスタートアップガイドを見ていきましょう。

 

mailchimp_13

 

mailchimp_14

 

上の写真のウィンドウは鬱陶しいので消しちゃいましょう。

 

mailchimp_15

 

まず最初にリストをインポートします。メール受信者のリストが既にあるという流れです。

 

mailchimp_16

 

こんな画面になったと思います。

 

登録したリストに対してメールを送信する際のデフォルトの送信者情報をここで登録する必要があります(同じ宛先に対して別のメールを送るときにちょっと不便ですよね…)。

 

mailchimp_17

 

デフォルトの送信者情報をここで記載していきましょう。

 

mailchimp_18

 

上図はメルマガ配信された場合のお知らせの受け取り方です。

 

問題なければ「Create List~」を押してください。

 

mailchimp_19

 

リストをどういった形式でインポートしますか?と聞かれています。

 

選択したら「Next」です。

 

mailchimp_20

 

ここでリストを取り込むのですが、チェックボックスで確認を求められます。

 

mailchimp_21

 

インポートしたリストの人数がプランの上限を超えた場合自動的に上位プランにアップグレードされますよ、と(無料プランはリストの人数が2000人で、ひと月のメール送信上限が12000通です)。

 

問題なければリストを取り込みましょう。

 

mailchimp_22

 

取り込み完了です。

 

mailchimp_23

 

取り込んだリストをどういう風に取り扱うのかを聞いています。設定変更したい場合はここから変更できます。

 

mailchimp_24

 

完了です。

 

mailchimp_25

 

ダッシュボードに戻ってくるとまたウィンドウが出てくるのでこれも消してください。

 

mailchimp_26

 

今度は「Create A Campaign」を選択しましょう。

 

mailchimp_27

 

リストの誰に送るか聞かれています。

 

mailchimp_28

 

Campaign infoのページにやってきました。

 

「独自タグを使って宛先欄を個人名にする」というのはメールアドレスを直に「To」に記載すると迷惑メールだと判断される可能性が高くなってしまうのでそれを防ぐために独自タグを使って宛先を個々人の名前にしますよ、という機能です。

 

mailchimp_29

 

上図の箇所では送信元メールアドレスのドメイン確認が求められています。

 

「verify this domain」を押して確認しましょう。

 

mailchimp_30

 

確認メールが送られてきます。

 

このページはそのままの状態でメールが来ているかどうか確認しましょう。

 

mailchimp_31

 

こんなメールです。「Verify Domain Access」を押してください。

 

mailchimp_32

確認が完了しました。

 

「メールを送信する以上、責任をもって受信者からのメールに答えてくださいね」ということでしょうか。

 

mailchimp_33

 

元のページに戻るとウィンドウが出ているのでこれを閉じましょう。

 

mailchimp_34

 

各種トラッキングの有無です。上図に従ってチェックしていってみてください。

 

mailchimp_35

 

ここでやっとメールのテンプレート作成に入ります。

 

mailchimp_36

 

今回は「Basic」でいきます。

 

mailchimp_37

 

筆者はこんな感じのHTMLメールが出来ました。

 

メールの作成手順ですが、長くなるのでまた次回。

 

mailchimp_38

 

送信しましょう。

 

mailchimp_39

 

ポチッと。

 

mailchimp_40

 

送信完了です。メールが届いているか見てみましょう。

 

mailchimp_41

 

確かに来てますね。以上、MailChimpの使い方に関してでした。

 

次回はメール作成の細かい手順とレポートの見方を書いてみようと思います。

 

 

商品登録代行業者イチオシ!!
店舗運営者必須ツール③ Folder Axe

2015-11-25

folderaxe_official

 

商品登録オススメツールの第三回です。

 

これまでの記事はコチラ↓

 

商品登録代行業者イチオシ!!店舗運営者必須ツール① Irvine

http://coqoon.jp/archives/182

 

商品登録代行業者イチオシ!!店舗運営者必須ツール② リサイズ超簡単!Pro

http://coqoon.jp/archives/204

 

一括登録の作業をしていると一度にアップロードできるフォルダサイズに決まりがあったりするので画像の数が多いと大変ですね。

 

今回紹介するFolder Axeは大量のファイルをいくつかある条件の中から選んでフォルダに分類するというアプリケーションです。デスクトップの整理にもうってつけですね。

 

 

Folder Axeダウンロード


 

folderaxe_01

 

公式サイトです。いつもの流れでダウンロードして下さい、といきたいのですが…

 

folderaxe_02

 

実はこのサイトからプログラムをダウンロードしようとするとトロイの木馬を検出するんですね。

 

ですのでソフトウェア紹介サイトのSoftpediaやDownload.comからプログラムを入手するようにしてください。筆者はSoftpediaから入手しました。

 

Folder Axe/ Softpedia

http://www.softpedia.com/get/System/File-Management/Folder-Axe.shtml

 

Folder Axe/ Download.com

http://download.cnet.com/Folder-Axe/3000-2248_4-75452107.html

 

 

Folder Axeの機能


 

folderaxe_03

 

こちらがFolder Axeの画面になります。

 

folderaxe_04

 

「Select Folder」で分割したいファイルの入ったフォルダを選択しましょう。

 

folderaxe_05

 

今回はこのフォルダを分割したいと思います。

 

folderaxe_06

 

「Split Type」の箇所でファイルを分割する条件を選択します。最初は「Start」というタグが選ばれていますね。

 

folderaxe_07

 

「By Amount」はファイルの数によってフォルダを分類するという条件です。これはシンプルですね。

 

folderaxe_08

 

「By Size」はファイルサイズでフォルダを分類する条件です。入力フォームの隣に「KB」というボタンがあるのでこれを押すと「KB→MB→GB→KB」という風に単位が切り替わります。画面右側の「Combine with By Amount」というボタンを押せば「By Amount」と組み合わせて使用することも出来るようです。

 

folderaxe_09

 

「By Name」。これが…少し使いにくいのですが、例えばフォームに1と入力すると先頭の英数字の数ぶんだけフォルダが作成されます。「aa」というファイルと「ab」というファイルが同じフォルダに分類されるというのは分かりますね?フォームに2と入力するとどうなるかというと今度は「aa」というファイルと「ab」というファイルそれぞれにフォルダが用意されます。フォルダ作成の条件をもう少し細かく絞れたら良いんですけどね。

 

folderaxe_10

 

「By File Type」はファイルタイプごとにフォルダを分類する条件です。これもシンプルですね。

 

folderaxe_11

 

「By File Groups」はFolder Axeであらかじめ決められている7つのグループ「Archives/Disc Images」、「Documents」、「Web/Coding/Programs」、「Images」、「Videos/Subtitles」、「Audio」、「Miscellaneous」でフォルダを作成して、そこにファイルを分類していくという条件です。

 

使いどころは限られていますが、散らかったフォルダを整理したい時などに役立ちそうですね。

 

folderaxe_12

 

最後は「By Date」。日付による分類です。これもシンプルですね。

 

folderaxe_13

 

今回は「By Size」を2MB(=2048KB)で指定します。

 

folderaxe_14

 

分割フォルダが作成されました。

 

folderaxe_15

 

少し画像が小さいのですが確かにフォルダサイズ1.82MBで分割されていますね。

 

 

商品登録代行業者イチオシ!!
店舗運営者必須ツール② リサイズ超簡単!Pro

2015-11-25

resizechokantan_official

 

前回に引き続き商品登録オススメツールの第二回です。

 

前回の記事はコチラ↓

 

商品登録代行業者イチオシ!!店舗運営者必須ツール① Irvine

http://coqoon.jp/archives/182

 

画像のサイズ変更するのにいちいち画像加工ソフトを開くのは手間ですね。今回紹介するリサイズ超簡単!Proは画像のサイズ変更と簡単な設定変更も出来るスグレモノなんです。このブログでもよく使っています。

 

それじゃあ早速見ていきましょう。

 

リサイズ超簡単!Proダウンロード


 

resizechokantan_01

 

リサイズ超簡単!Pro

http://my.reset.jp/~triton/RCKP.htm

 

まずサイトからダウンロードして下さい(ちなみに動作条件としてMicrosoft .NET Framework 2.0 がインストールされていることとあるので、そちらがまだの方はまずフレームワークのダウンロードから行ってください。)

 

リサイズ超簡単!Proの機能


 

resizechokantan_02

 

ウィンドウが立ち上がりました。

 

resizechokantan_03

 

上図の箇所から画像選択をしましょう。リストの削除もここでします。

 

resizechokantan_04

 

このように画像保存箇所のパスが表示されました(ドラッグ&ドロップでも可能です)

 

resizechokantan_05

 

保存場所や出力されるファイル名の設定をしましょう。

 

resizechokantan_06

 

画像サイズを指定します。

 

resizechokantan_07

 

色彩の補正方法を選びましょう。

 

resizechokantan_08

 

JPG、BMP、PNG、TIFFの中から画像のフォーマット選びましょう。JPGであれば更に細かく設定していきます。

 

resizechokantan_09

 

上図の箇所からリサイズ後の画像をプレビューすることもできます。

 

resizechokantan_10

 

最後に変換開始のボタンを押せば完成です。

 

resizechokantan_11

 

resizechokantan_12

 

 

商品登録代行業者イチオシ!!
店舗運営者必須ツール① Irvine

2015-11-24

irvine_official

 

今回から全三回にわたって商品登録の画像処理に関連したオススメツールを紹介していきたいと思います。今回はその第一回。

 

筆者は既存ECサイトのデータを使って別サービスで新たに店舗を立ち上げるときなど、画像ファイルは手作業で一つひとつダウンロードしている暇がないのでダウンローダーを使用して一気に取得します。

 

最近であればクラウドスペースを利用した画像ファイルのやり取りも可能だと思うのですが、商品の数によっては画像が膨大な量になることもありますし、フォルダ構造が既存サイトのものと違うと何かと不便なんですね。

 

そこで今回紹介するのは定番のフリーダウンローダーです。公式ホームページの最後の更新が2008年とかなり古いのですが、今使っても十分使用に耐えうる無料ダウンローダーなんじゃないでしょうか。

 

Irvineダウンロード&準備


 

 

irvine_01

 

Irvine

http://hp.vector.co.jp/authors/VA024591/

 

公式サイトからファイルをダウンロードできるので、ファイル上でマウスを右クリックして「管理者として実行」の項目を選んでください。

 

irvine_02

 

設定用フォルダの保存場所を選ぶよう促されるので指示に従ってください。

 

irvine_03

 

ウィンドウが立ち上がりました。画面左を見ていただくと分かると思うのですが、データを入れておくフォルダが「デフォルト」しかないので、このフォルダの中にキューフォルダ(今回の作業の大本となるフォルダ、ルートフォルダ)を作ります。

 

irvine_04

 

デフォルトフォルダの上で右クリック。「新規作成」を選択しましょう。今回はキューフォルダの名称を「Coqoon」にします。

 

irvine_05

 

キューフォルダが出来ました。今度はキューフォルダ上で右クリックして「フォルダ設定」を選択しましょう。

 

irvine_06

 

フォルダ設定のウィンドウを開くと「キューフォルダ」のタグが選択されていると思うので、これを「ファイル」のタグに切り替えてください。

 

irvine_07

 

「URL構造を再現する」という項目があるのでここをチェックしたらOKしましょう。ダウンロードしたデータの保存箇所もこのタグで指定できるので忘れずに(設定用データの保存箇所とは別です)

 

これでIrvineの準備ができました。

 

Irvineの機能


 

 

irvine_08

 

適当な画像アドレスを記載したメモ帳をデスクトップに保存します。

 

irvine_09

 

このメモ帳をIrvineのウィンドウまでドラッグ&ドロップしましょう。

 

irvine_10

 

irvine_11

 

ダウンロードが完了したので確認してみましょう。

 

irvine_12

 

フォルダ構造が再現されています。

 

irvine_13

 

irvine_14

 

この通りしっかりダウンロード出来てますね。

 

Irvineはかなり細かく設定できるので最初はとっつきにくいかもしれませんが、今回画像で見てきたように直感的な使い方も出来るように設計されています。定番なので知っていらっしゃる方も多いと思うのですが、知らなかったという方はこれを機会に使ってみてください。

 

 

Chromeでスマホサイトを見れる!
User-Agent Switcher for Chrome

2015-11-23

uaswitcher_official

 

最近ではスマートフォンやタブレット端末が普及してきたせいもあって、プライベートに限ればかなりの割合の方が携帯端末でのウェブサイト閲覧が中心になっているんじゃないかと思います。

 

運営側もサイト確認用にその都度実機で確認できればよいのですが、機種ごとに解像度がまちまちだったりするので現実的ではないですね。

 

Chromeの場合ブラウザに付いている開発者用の機能で携帯端末のサイト表示を再現することも出来るのですが、エンジニアでない方にしてみればその都度慣れない画面を開くのは手間ですし、スマホサイトが手軽にブラウザで見れるとありがたいのではないでしょうか。

 

 

User-Agent Switcherダウンロード&準備


 

screenshot_01

 

User-Agent Switcher for Chrome

http://spoofer-extension.appspot.com/about

 

User-Agent Switcher for Chrome/ Chromeウェブストア

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja

 

上記アドレスからダウンロードして下さい。

 

筆者はChromeウェブストアからいきます。

 

screenshot_02

 

右上にアイコンが出ていればダウンロードは成功です。

 

screenshot_03

 

使いはじめる前に簡単に設定をしておきましょう。一番右端、三本線のアイコンから「その他のツール→拡張機能」と進んでください。

 

screenshot_04

 

User-Agent Switcher for Chromeの項目の所にある「オプション」を押すと設定画面に飛びます。

 

screenshot_05

 

左側の項目の上から四番目「Other Settings」を押してください。

 

screenshot_06

 

上から三つめ「Send anonymous error reports」にチェックが入っています。ここにチェックの入ったままだとエラー時にいちいちレポートを送信する設定になってしまうので、このチェックを外してください。

 

User-Agent Switcher for Chromeの機能


 

screenshot_07

 

機能を見ていきましょう。Yahoo! JAPANのトップページです。PC用の表示だとこうなのですが、User-Agent Switcher for Chromeのボタンを押して「iOS→iPhone6」と選択していくと…

 

screenshot_08

 

screenshot_09

 

screenshot_10

 

と、こんな感じにPCでもiPhoneのページが見れちゃいます!

 

screenshot_11

 

アイコンの表示も「IP6」となっていますね。

 

ただ、それでもやはり擬似的に環境を再現しているだけなのでjavascriptの箇所など実機と挙動が異なるところも少なからず出てくるようです。最終的にはやはり実際の環境で確認することを忘れないで下さい。

 

 

ウェブサイト丸ごとキャプチャが取れる! FireShot

2015-11-16

fireshot_official

 

ブログは勿論のこと、簡単な情報共有するのにもウェブサイトの写真が手軽に撮れると良いですね。

 

スクリーンショットの機能自体はOSにもあるんですが、これだと余計な画まで写り込んでしまうので後から画像加工する必要がありますし、範囲選択でブラウザをキャプチャするのもいちいち面倒です。

 

今回はブラウザの拡張機能でウェブサイトの写真が撮れちゃうスグレモノ、FireShotを紹介しちゃいます!

 

 

FireShotダウンロード


 

実はこのFireShot、WindowsでもMacでも利用できるのですが、Macでは使用できる機能に制限があって全ての機能を利用できません。それと残念ながらSafariには対応してないです。

 

ですのでFireShotの実力を発揮するにはWindowsでの使用をオススメします。

 

Fireshot(有料版・無料版)

http://getfireshot.com/

 

FireShot(無料版)/ Google Chrome

https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

 

FireShot(無料版)/ Firefox

https://addons.mozilla.org/ja/firefox/addon/fireshot/

 

FireShot(無料版)/ Internet Explorer

http://download.cnet.com/FireShot-Pro/3000-12512_4-10862847.html

 

今回筆者が試す環境はChrome(Windows)です。上記アドレスから移動すると、

 

2015-11-16_17h00_22_R

 

上のような画面が出てくるのでブラウザに拡張機能を追加していきましょう。

 

2015-11-16_17h02_34_R

 

2015-11-16_17h05_41_R

 

2015-11-16_19h24_14_R

 

上記のような画面が出てくれば完了。

 

2015-11-16_19h25_29_R

 

右上に新たにボタンが追加されています。

 

2015-11-16_19h29_19_R

 

これだけでも手軽にキャプチャが撮れて十分便利なのですが、Chromeで無料版の全ての機能を開放させるためにはもうひと手間必要。

 

Firefoxであれば最初から「高度な機能」まで開放されているのですが、Chromeはウェブストアの仕様上、追加でインストールする必要があります。

 

2015-11-16_19h30_03_R

 

2015-11-16_19h31_45_R

 

2015-11-16_19h34_21_R

 

今度は「FireShot Lite」ではなく、「FireShot」になってますね。無料版の全ての機能が開放されました。

 

 

FireShotの機能


 

2015-11-16_19h35_44_R

 

Fireshotのボタンを押すと出てくる

 

  • ページ全体
  • 見える範囲
  • 選択された範囲
  • ブラウザウィンドウ
  • すべてのタブ

 

の5つの中からキャプチャーを撮りたい箇所を指定して

 

2015-11-16_19h39_35_R

 

  • 編集
  • 保存
  • PDFとして保存
  • OneNoteに送る
  • アップロード
  • 印刷
  • クリップボードにコピー
  • メールで送信
  • 外部エディタで開く

 

のどれか一つを指示します。

 

 

編集

 

2015-11-16_19h53_38_R

 

FireShotには簡単な画像エディターが付いてます。

 

ちょっとした書き込みだったら別途ツールを開くことなく済んじゃいますね。

 

アップロード

 

2015-11-16_19h55_32_R

 

アップロードっていうのは各種SNSとの連携。

 

Twitter、Facebookとの連携も簡単です。

 

外部エディタ

 

筆者はWindows環境にPhotoshopを入れてないので確認できませんでしたが、Photoshopとの連携も可能だそうですよ!

 

 

 

以上、FireShotの紹介でした!

 

無料のキャプチャツールは数多くありますが、気になったときに気軽に使えるというのはありがたいですね。

 

設定が細かすぎないシンプルさが良いです。