STAFFBLOG スタッフブログ

メルマガ配信システム「Benchmark Email」〜レポート編〜



こんにちは!
荒木です。

以前メルマガ配信システム「Benchmark Email」というシステムについて
実際のメルマガの作成方法をご紹介させていただきましたが、
今回は実際に配信した後のレポート(効果測定機能)についてご説明いたします。



Benchmarkemailのトラッキングツールでは、メールの 開封率、クリック率、エラー率などが正確かつリアルタイムで確認いただけます。過去のニュースレターとの比較検証や、アンケート回収結果の分析、また、誰がニュースレターを友達に転送したかまで、細かく分析することも可能です。

出典:Benchmark Email




前回の記事をまだ読まれていない方は下記よりご覧ください。
メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜
https://www.fvs-net.co.jp/blog/12875


メルマガ配信システム「Benchmark Email」〜メルマガ作成編〜
https://www.fvs-net.co.jp/blog/13995





まずはじめに

まずは管理画面より

  1. サイドメニューの「レポート」から確認する(過去配信したメルマガのレポートをまとめて比較することができます。)
  2. 中央部分の直近に配信したメールのレポートを個別に確認する

といったように2通りの確認の方法がございますので、
お好きな方をご選択ください。






複数のレポート(効果測定機能)の確認(比較)方法


サイドメニューのレポートをクリックすると下記のような画面が表示されます。

そこで① → ②の順番で進んでください。

※過去配信したすべてのメールを選択したい場合は「レポートを比較」の左側にありますチェックボックスにチェックを入れることで全選択できます。

※しかしデフォルトで10件表示されますが10件以上配信されている場合は、
 右下の「表示」という部分で10・25・50・100という風に表示件数を変更されて全選択を行ってください。


次に「レポートを比較」をクリックすると下記のような画面が表示されますので、
大まかなデータに関してはこちらで確認してもっと詳細を確認したい場合は、
左上の「Table」から「Graph」へ切り替えます。





個別のレポート(効果測定機能)の確認方法


一番最初の管理画面もしくはメールレポートのどちらかで確認したいメルマガのタイトルをクリックします。

そうすると下記のような画面が表示されます。

※配信したコンタクトリストを確認したい場合いは、
 右上の「リストを確認する」をクリックすることで確認することができます。(下記参照)


レポートには大まかに分けて4種類のレポートがあります。
 



基本情報


こちらは先ほどもお見せしましたが、
全体的なレポートを確認する画面になります。



※4種類のレポートどれを開いていても下記の操作が可能です。(右上の「・・・」をクリック)
 
  1. メール再送信
  2. サブアカウントに共有
  3. このメールを再利用する
  4. シェア
  5. Download PDFでダウンロード(PDF形式でダウンロード)
  6. Excel形式でダウンロード
  7. 印刷
 



レポート詳細


こちらの画面では、
  • 配信先のメールアドレス
  • 名前
  • Device(受信者がどの端末でメルマガを開封したか)
  • 開封された日付
という情報を確認することができます。

 



リンククリック


メルマガ内に配置したリンクのクリック状況を確認することができます。


クリック率(クリックスルー率)とは
受信者、購読者がリンクをクリックすること。クリック率(CTR)とはメール配信して開封された数をクリック数で割った値。


ユニーククリック【Unique Click】とは
1人のユーザーがリンクをクリックすること。あるURLが何回、特定のユーザーによってクリックされたのかがユニーククリック数の指標となる。尚同一ユーザーからの複数回クリックはこの合計数には影響されない。


URLクリックパフォーマンス
こちらではどのURLを何人の人が何回クリックしたかなどを確認することができます。


クリックマップ
実際に配信したメルマガ上でどのリンクがどの程度クリックされているかを数値化してわかりやすく確認することができます。
 



開封マップ


配信したメルマガがどういった地域で開封されたかを確認することができます。

※しかしIPアドレスの情報が不適当な場合や提供されなかった場合、それらのデータは「開封マップ」に反映されません。





最後に


今回でBenchmark Emailの登録→編集→効果測定までの流れは完結です!

これで皆さんも一通りBenchmark Emailの使い方についてご理解いただけたかと思います♪

普段からお客様や会員の方などへ定期的に配信している情報などがあればこれを機に是非導入・活用されてみてくださいね(^o^)/

もし導入などをご検討されているお客様がいらっしゃれば弊社までご連絡いただければ導入支援やサポートなどをさせていただきますのでお気軽にご相談いただければと思います!

はじめてのはしもと -映画館編-

どうも!ついに30になりましたハシモトです。

春ですね〜何かが始まる予感の季節、、
20代のころに感じていた微かな期待感と漠然としたワクワク感もなく、、
落ち着いたプライベートを過ごしています。なんせ大人の大人(30)ですから(๑⁼̴̀д⁼̴́๑)ドヤッ‼

落ち着いてくると人混みにも行きたくないし、遠出もしたくない
でも新しいことをしたい・・・だって春だもん・・・

そんなあなたにオススメスポットがあります!
それは映画館!

私が大人の大人(30)になって映画館で初めて体験した3つのオススメをご紹介いたします!!

レイトショー


レイトショーとは
毎日20時以降からやっている夜の時間の映画です。

とある日の平日。ハシモトは唐突に映画を観に行きたい衝動に駆られました。
調べると仕事帰りに行けるのはレイトショー。 そして急で”急だから”誘う相手も居ないので1人・・・。

「え〜女1人で映画なんてさみしいな〜」と思うかもしれませんが、
実際行ってみると年配のサラリーマンや、仕事帰りっぽい大人な女性、常連そうなおじいちゃん。などなど
案外、一人映画に来てる方が多かったです。(安心♥)

私はチョコチュロスを買ってど真ん中でドヤ顔しながら、映画を鑑賞。
人も少なく、騒ぐ子もいないので、気にせずゆっくり映画の世界に浸って映画を堪能することができ
大人な時間を過ごしました・・・

またレイトショーは料金が割引になります。
通常1800円→レイトショー・1300円
ゆっくり観れるうえに500円も安くなるなんて・・・!
もっと早くにレイトショーに行っとけばよかったな〜とつくづく思いました。

オススメポイント
・通常より安く観れる
・静かにのんびり映画の世界に浸れる(平日だと特に)
・1人観の方も多いので1人映画デビューには最適
・運がよかったらその日の夢に映画俳優が出てくる


ライブビューイング


ライブビューイングとは

今まで売り切れで行けなかったコンサートや、会場が家から遠くて参加出来なかったイベントがお近くの映画館で観ることが出来ます!!

出典:ライブ・ビューイング・ジャパン


意味はわかるけど、結局どんな感じ??と思っていたところ
知人から「お笑いライブのライブビューイング行かない?」と誘っていただけたので、「喜んで!」とハシモトは行くことに・・・

映画館に入ると画面には、開演前のライブの会場(東京)にどんどん人が入ってザワザワしている様子が生放送で映し出されていて、まるで同じ会場にいるかのよう。
でもコチラ(映画館)は会場のようにギュウギュウな座席じゃないので楽ちんです♪

開演されると、カメラワークも場面によって切り替わり、とても観やすい!
お笑いだったので会場も映画館も一段となって笑っていました。

とあるゲストコメディアンが台本無視して暴走しグダグダになっていく様子もそのまんま生放送。

何処にいても全国各地の人たちが同じ作品を同じ時間に楽しめる。
良い時代になったものだ・・・としみじみ思いました。

オススメポイント
・リアルタイムで放送される(ライブビューイングの方へ向けてのコメントもくれたりする)
・遠出をしなくていいので交通費がかからない
・どこの席に座っても大画面ではっきり観える
・混雑の中、並ばなくていいので1人観でもへっちゃら


4DX


4DXとは

4DXとは、現在、映画業界で最も注目を集める、最新の<体感型(4D)>映画上映システムです。
モーションシートが、映画のシーンに完全にマッチした形で、前後&上下左右に<動き>、その衝撃を再現。
さらに、嵐等のシーンでは<水>が降り、<風>が吹きつけ、雷鳴に劇場全体が<フラッシュ>する他、映画のシーンを感情的に盛り上げる<香り>や、臨場感を演出する<煙り>など、様々なエモーショナルな特殊効果で、≪目で観るだけの映画≫から≪体全体で感じる映画≫の鑑賞へと魅力的に転換致します。
通常のシアターでは得ることができない特殊効果によって、映画の持つ臨場感=魅力を最大限開放することができる、アトラクション・スタイルの映画上映システムです。

出典:ユナイテッド・シネマ


うむむむ・・・よくわかんないけど、なんか楽しそうだ!ハシモトはずっとずっと観たかった憧れの4D映画をついに観てきました!!!

選んだ映画はアクション映画。元々3Dの映画ではなかったので、今回は3Dメガネの着用はなしでした。
金額は通常料金+1000円。その日はレディースデイだったので通常より安く観れましたが・・・通常だと映画の割には結構しますね。

それだけの価値があるのかな・・とモサモサ考えながら映画館に入りました。
結果・・・・楽しかった!!私は価値があったと思いました。
アクション映画を映画館で観たのも初でしたが・・・4D映画はアクションが絶対いい!
嵐のシーンなどでは座席が動くし、風や、雷雨などなど盛りだくさん!!
顔面に水を浴びた時は予想以上の量だったのでたまがりました(笑)メガネが水滴だらけになって前が見えない(笑)
でも、それはON/OFFのスイッチがついてるのでご安心を。
まさに体感アトラクションといった感じで、遊園地好きは好きかと思います!

調べると4D映画にも種類があり4DX、MX4D、D-BOX・・・と色々あるそうです(私が観たのは4DX)。機会があれば違う種類のでも観てみたいです・・・・!!!

オススメポイント
・風、香り、音、光 4感を使って体感できる
・映画の内容に興味がなくても楽しめる
・遊園地好きはテンションがあがる
・水にはドキっとする♥


さいごに

いかがでしたでしょうか。こんな身近で当たり前のところに「初めて」ってあるんですね〜初めてのことってやっぱりワクワクしますね〜
大人の大人でも、まだまだ未体験のことが、あなたの身近にたくさん転がっているかもしれません!
いろいろチャレンジして人生を楽しみましょう!

最近ハシモトが未体験でしてみたい事はボルタリングです(๑⁼̴̀д⁼̴́๑)ドヤッ‼ 
次回(?)も お楽しみに〜〜

IT導入補助金を活用してHP作ろう!

yamamoto
2018/03/20
閲覧所要時間:約3

こんにちは!
昨年度に引き続き、今年もIT導入補助金が実施されることになりました。
弊社ではこの補助金の「IT導入支援事業者」として登録しております。

こちらの補助金をうまく活用してホームページを作成されたいというお客様がおられましたら、
ぜひお早めに弊社までご相談ください!

今回の記事では、この補助金について簡単にご紹介したいと思います!
※現段階では未確定情報を多く含みますのでご了承ください。

IT導入補助金とは?



IT導入補助金は、中小企業・小規模事業者等のみなさまが自社の課題やニーズに合ったITツール(ソフトウエア、サービス等)を導入する経費の一部を補助することで、みなさまの業務効率化・売上アップをサポートするものです。

自社の置かれた環境から強み・弱みを認識、分析し、把握した経営課題や需要に合ったITツールを導入することで、業務効率化・売上アップといった経営力の向上・強化を図っていただくことを目的としています。

出典:サービス等生産性向上IT導入支援事業





補助対象はどんなものがあるの?


今回の対象につきましては、まだ正式な発表がないため未確定ですが
昨年度については概ね以下のような内容で実施されました。

①パッケージソフトの本体費用

②クラウドサービスの導入・初期費用
 ※クラウドサービスにおける契約書記載の運用開始日(導入日)から
  1 年分までの サービス利用料・ライセンス/アカウント料

③社外・社内・取引先向けホームページ制作サービス初期費用
 ※導入日から 1 年間の WEB サーバー利用料も計上可能。
 (ただし、 既存ホームページの日常的な更新・改修費用は、補助対象外)

④上記導入に関する費用
 ※IT ツールの導入に伴う教育、操作指導に関する 費用、
  事業計画の検討に係わるコンサルテーション費用
 ※契約書記載の運用開始日(導入日)から 1 年分までの問い合わせ、
  サポート対応に 関する費用、保守費用 含む

※昨年度の内容となります。実際の内容については、正式な発表をお待ちください。


補助率、下限/上限額について



こちらも昨年度につきましては、概ね以下のような内容で実施されました。

① 補助率 = 2/3以内

※導入コストの1/3負担でOK
※補助金は支払い後の入金となります。(一度全額のお支払いが必要)


② 補助下限/上限額 = 20万 〜 100万円

※導入費 150万円 × 2/3 = 100万円の補助(上限額)
※導入費 30万円 × 2/3 =  20万円の補助(下限額)


いつから実施されるの?


現時点(2018/3/20)ではIT導入支援事業者の登録申請の開始予定日のみ発表されています。
詳しくは、続報を公式サイトよりご確認ください。

IT導入補助金 公式サイト
https://www.it-hojo.jp/


  IT導入支援事業者の登録申請 : 2018年3月28日(水)開始予定

  ITツール(ソフトウエア、サービス等)登録申請 : 未定

  交付申請・実績報告 : 未定


まとめ


ホームページを新規立ち上げ・リニューアルしたかったけど予算などで躊躇されていた企業様、
この制度を活用いただければかなり費用を抑えることが可能です!

少しでも気になるという方はぜひ弊社までご相談ください!
計画書作成のコツやノウハウについてもアドバイス可能です!
どうぞご検討ください!

Googleアナリティクスの基本の8ポイントを理解しよう!

yamamoto
2018/02/28
閲覧所要時間:約4

自社のHPをお持ちのみなさま、Googleアナリティクスは活用されていますか?
ホームページは作ってそのままでは非常にもったいないです。

「どのくらいの人がHPを見に来てくれているのか?」
「どんなページ(コンテンツ)が人気なのか?」
「どんなデバイスで見てくれているのか?」
・・・などなど

自社のサービスの改善に必要な情報分析がこのツールなら簡単にできます!
これまで「なんか難しそうだなー」と敬遠されていたお客様も、まずはここだけでもという項目を8つまとめましたので見ていただけたら嬉しいです。

Googleアナリティクスとは


Google Analytics(グーグル アナリティクス)は、Googleが無料で提供するWebページのアクセス解析サービスです。
弊社では基本、全てのお客様のホームページにこのGoogleアナリティクスを組み込んでおります。


Google アナリティクスでは訪問者のトラフィックを分析し、アトリビューション機能で広告効果を分析したり、訪問者やそのニーズを総合的に把握できます。参照元レポートなどのツールを使用すれば、訪問者がサイトにたどり着いたルートや、アクセスに使用しているデバイスを特定できます。ページ解析機能では、訪問者が探しているものや好きなものの特定も可能です。こうした情報からマーケティングやサイトのコンテンツをカスタマイズし、成果の向上につなげることができます。

Googleアナリティクス公式サイトより



まずは重要7項目を理解しよう!



Googleアナリティクスの管理画面にログインし、「ユーザ」のメニューの中から「概要」をクリックしていただくと、上記の「ユーザーサマリー」が表示されます。
このページに記載されている、8つが基本項目となりますので紹介していきます!

①ユーザー ②新規ユーザー ③セッション ④ユーザーあたりのセッション ⑤ページビュー数 ⑥ページ/セッション ⑦平均セッション時間 ⑧直帰率



①ユーザー


あなたのサイトを訪れた「人」の数です。人単位で計測するので、一定期間内で10ページも20ページも見てくれたとしても、何回訪問しても「1」とし てカウントされます。どれだけの人数が利用してくれているのかを見る際 に重要な指標になります。 Aさんが別のサイトに移動した後、30分以上経った後にあなたのサイトに戻ってきた場合も「ユーザー=1」。Aさん、Bさん、Cさんがあなたのサイト を訪問した場合は「ユーザー=3」となります。


②新規ユーザー


上記のユーザー数の中でも、初めてホームページに訪問した人の数です。


③セッション


セッションとは、ユーザーがあなたのサイトを訪問してから、離脱するまでの一連の流れをまとめた単位です。つまり「訪問数」のことです。あなたのサイトに1人が訪問して、Aというページ、Bというページ、Cというページの3ページを見てから別のサイトに行った場合、セッションは「1」 とカウントされます。
※同じユーザーが30分以上間隔をあけて再度あなたのサイトを 訪問すると、新たにセッションがカウントされます。その他にも、日付をまたいでも新規セッションとカウントされます。

④ユーザーあたりのセッション


ユーザー1人あたりの平均セッション数です。


⑤ページビュー数


サイト内で見られたページ数を指します(PV数とも略されます)。ユーザーが1人であっても、あなたのサイトに訪れて、サイト内を移動し、 複数のページを見た場合は、それぞれが1ページビューとして数えられます。 Aさんが、あなたのサイトを4ページ見た場合「ページビュー数=4」となり ます。Aさん、Bさん、Cさんが、あなたのサイトを1ページずつ見た場合は「ページビュー数=3」となります。


⑥ページ/セッション


その名のとおり、ページビュー数をセッション数で割った数字です。 例えばページビュー数が10でセッション数が5だとすると、ページ/セッションは「2」になります。


⑦平均セッション時間


あなたのサイトを訪問してくれる人が、あなたのサイトに滞在してくれている平均時間です。
一概に言えませんが、この時間が長ければユーザーが 「ページの内容をしっかり見てくれている」可能性があります。


⑧直帰率


あなたのサイトの1ページだけを読んで、他のサイトへ離脱してしまう、もしくはブラウザを閉じてしまう人の率です。こちらも業種や目的によって様々ですが一般的には40%程度が目安と言われています。 ただし、リピーターの多いブログサイトでは比較的高い数値が出る傾向にあります。リピーターは最新の記事を1ページだけ読んで満足し帰っていくためです。


まとめ


いかがでしたでしょうか?
専門用語が多いので難しそうな印象はありますが、中身を見てみると以外に単純な気がして来ませんか?

Googleアナリティクスにはこれ以外にも様々な分析機能がありますが、まずは上記の基本7ポイントを理解して、ホームページの改善や次のリニューアルに向けての情報分析に活用して行きましょう!



メルマガ配信システム「Benchmark Email」〜メルマガ作成編〜


こんにちは!
荒木です。

以前メルマガ配信システム「Benchmark Email」というシステムについて
導入〜リストの登録までをご紹介させていただきましたが、
今回は実際に配信するメールの作り方をご説明していきたいと思います。

前回の記事をまだ読まれていない方は下記よりご覧ください。
メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜
https://www.fvs-net.co.jp/blog/12875



ステップ0 管理画面〜メルマガの作成方法の選択まで

早速メルマガを作成してみましょう!

まずは管理画面!

こちらの管理画面昨年12月24日あたりからガラッとトップページ及びその他ページのデザインが新しくなっております!!(ちょっと謎のキャラクターがいて一瞬困惑しましたが・・・・。汗)

それでは順を追ってメルマガの作り方をご説明いたします。

左側のメニューで「メール」をクリックします。

「通常メール配信」を選択した状態で下の「次へ」をクリックします。

「ドラッグ&ドロップ形式」を選択し「次へ」をクリックします。
※こちらのメール作成形式に関しては、
 ・HTMLコードを理解されている方
 ・画像や動画など入れずテキストだけでいい方
 以外の場合は基本的に「ドラッグ&ドロップ形式」を選択すれば問題ありません。




ステップ1 詳細 〜 件名やSNSへの共有設定をしてみよう 〜

1.メール詳細 → 「メール名」にベンチマークの管理画面上で管理するメールの名前を入力します。
2.第一印象 → 「件名」にはメールを受信した際に表示されるメールの件名を入力します。

上記2箇所を入力し「保存&次へ」をクリックします。
メルマガ配信時にTwitterやFacebookへ同時に投稿したい場合は、
「共有」の項目でお好きな共有方法へチェックを入れてください。




ステップ2 リスト 〜 配信先の選択してみよう 〜

すでに登録された配信先のリストを選択し「保存&次へ」をクリックします。
リストの登録方法がわからない方は下記よりご確認ください。
メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜
https://www.fvs-net.co.jp/blog/12875

上記のように表示される場合は気にせず「次へ」をクリックします。




ステップ3 エディター 〜 実際にコンテンツの編集をやってみよう 〜

さてここから本格的にメルマガの見た目の部分の作り込みを行っていきたいと思います。

まずは「レイアウト」を決めていきます。(後ほどレイアウトを変更することも可能です。)

※上記赤枠の部分をクリックすることでレイアウトの確定(選択)ができます。


上記目の形をしたアイコンがありますがこちらをクリックすると
下記のようにプレビューで実際にどのような配置になっているかの確認ができます。

レイアウトを選択すると次に下記のような編集画面が表示されます。
こちらの編集画面では実際に画像や動画を配置したり、
テキストを挿入したり様々なことができます。


上記のように左側のブロックを右側のエリアへドラッグ&ドロップすることで簡単に画像やテキスト、ボタンの配置が可能となります。

▼画像ブロックをドラッグ&ドロップした後に画像を選択すると下記のように表示されます。

配置した画像の上へマウスを重ねることで左から「移動」「編集」「複製」「削除」という緑のアイコンメニューが表示されます。

「編集」をクリックするか配置した画像をクリックすることで、
下記のように左側へ編集メニューが表示されます。
こちらの編集が完了したら「保存&閉じる」をクリックして編集は完了です。

このように全てのブロックが個別に編集ができるようになっておりますので、
いろいろブロックを配置したり編集したりしてみてください♪

編集が完了したら「保存&次へ」をクリックします。




ステップ4 配信設定 〜 配信するスケジュールを決めてみよう 〜


編集が完了すればやっと最後に配信の設定になります。

スケジュール詳細 → 「送信オプション」で
  • すぐに送信する
  • 配信スケジュール
  • 下書きとして保存-配信はされません.後で送信
のいずれかを選択してみましょう。

2番目の「配信スケジュール」を選択した場合はご希望の日時を設定し一番下の「配信設定」をクリックすることで配信予約が完了します。

上記「メールを確認する」というリンクをクリックすると下記のように実際に配信される際のプレビューを確認することができます。

以上でメルマガの作成・編集から配信までの流れになります。




配信予約後について


無事に配信設定まで完了したと思っていて後から「あっ!ここの内容が間違っている!」などということがあると思います。
また配信日時を間違えてしまったなどですね。

そのような時でもご安心ください。

配信予約をした日時までだったらまだ修正が可能なのです。

下記メール一覧のページを再度開き、
配信予約したメールのタイトルをクリックすることで再度コンテンツや配信スケジュールの変更が可能となっております。

またひとまずその時に配信予約を完了せず、
後から改めて配信予約を行いたい場合は
上記で記載した「スケジュール詳細」 → 「送信オプション」 → 「・下書きとして保存-配信はされません.後で送信」を選択することで配信予約を行った後でも下書きの状態に戻すことが可能です。

「・下書きとして保存-配信はされません.後で送信」を選択した後の画面は下記になります。




最後に


みなさんいかがでしたでしょうか?

「Benchmark Email」を使うことで全然WEBの知識がなくても案外簡単に今時のメルマガが作れることがお分かりになったと思います!

これを機に導入されてみてはいかがでしょう?

もちろん弊社までご連絡いただけましたらサポートはさせていただいますのでご安心くださいね。

もしもっとここの部分を知りたい!などがあれば弊社荒木までお問い合わせください。

メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜

メイン画像

こんにちは!
荒木です。

突然ですが、
みなさん自社のサービスや商品などどのようにアピールされていますか??

雑誌やテレビ、ホームページ上への掲載、SNSでの情報発信と様々な方法で、
アピールされているかと思います。

しかし昔から今も続いている情報発信ツールとして、
「メルマガ(メールマガジン)」の存在を忘れてはいませんか?

確かに今の時代メールよりもSNSなどでの情報収集が気軽にできるようになっておりますが、
今のメルマガ配信システムは驚くほど便利になっているんです!!

ちなみに弊社でも実際に導入しております(^ ^)

おまけにこちらの「Benchmark Email」は実は毎月250通以内であれば無料で始められるんです!


それでは弊社でも導入しているメルマガ配信システムである「Benchmark Email」の導入から実際の配信までをご紹介させていただきます( ´ ▽ ` )ノ

新規アカウントの取得

まず Benchmark Email のホームページを開きます。
Benchmark
https://www.benchmarkemail.com/jp/


ベンチマークトップページ
次に右上の「無料トライアル」をクリックし、
アカウントの登録画面を開き必要な情報を入力後、
「無料アカウント作成」をクリックします。

※「無料アカウント作成」をクリック後下記のような画面になりますので、
 ベンチマークよりメールが届いているかどうかを確認します。

メアド承認お願いします
すると下記のようなメールが届きますので、
「メールアドレスを認証する」というリンクをクリックします。

メール画面
上記「メールアドレスを認証する」というリンクをクリック後は下記のような画面になりますので、そのまま「ログイン」をクリックします。

こちらで新規アカウントの取得は完了です。




管理画面(ダッシュボード)の説明&マイアカウント設定


ダッシュボードについて

ログイン後下記のような画面が表示されます。

ダッシュボード
こちらが管理画面になります(以下ダッシュボード)。


ダッシュボードを開いたらまずやっていただきたい設定が・・・・。

そう!「マイアカウント設定」です!!!
こちらは後々どちらにしろしっかり設定しておいたほうがいいところなので、最初にやっておきましょう!




マイアカウント設定

ダッシュボードの右上にありますアカウント名の部分へマウスを持っていくと
アカウントに関してのメニューが表示されます。

その中で「アカウント設定」という項目をクリックすると下記のような画面が表示されます。

マイアカウント設定
デフォルトでは上記のように何も表示されておりませんので、
下記のようにできるだけ必要な項目を埋めてみましょう!

マイアカウント設定→情報入力後
上記全て入力が完了したら最後に「保存」のボタンを押してアカウントの設定は完了です。



コンタクトリストの作成

まずダッシュボードより下記の4箇所どちらからでも結構ですのでクリックしてリストの追加画面を開きます。

ダッシュボード→リストの追加
次に下記のようにリストを登録するための画面が表示されます。

※「リスト名」はいつでも変更ができますのでとりあえずデフォルの名前のまま進めます。

新規リストの作成→インポート
それでは次に各リストの追加方法をご説明します!



インポート機能を使って作成

こちらの登録方法はECサイトを運営していたり、
すでに配信先をリスト化してまとめられているお客様向けです。

リストの追加→インポート
上記「アップロード注意」をしっかりとご確認いただいた上でファイルを選択しアップロードしていただくと簡単に登録ができます。



その前にどういった項目でリストを作成すればいいかわからないという方は下記よりリストの作成方法をご説明いたします。


リスト一覧ファイルの作成方法
まず上部メニューより「コンタクト」をクリックして、
コンタクトリストのダッシュボードを開きます。

コンタクトリストダッシュボード
次に中央部分のリスト一覧の中から「サンプルリスト」をクリックして開きます。

リストを開くと下記のような画面が表示されますので、
ここで右側の「リストアクティビティー」の中から「Excel形式でダウンロード」をクリックします。

コンタクトリスト
次にExcelファイルでダウンロードする際に
含まれる項目を選択してチェックを入れます。

Excel形式でダウンロード→項目選択
チェックを入れ終わったら下の「CSVファイルに保存する」もしくは「EXCELファイルに保存する」のどちらかをクリックしファイルをダウンロードします。

※最低限上記3つの項目へチェックを入れていただければ大丈夫かと思います。


※Excel形式でダウンロードする際には「.xls」の形式でダウンロードされますが、
 アップロードする際には「.xlsx」と「.xls」はどちらでもアップロードは可能となっております。


ダウンロード後のExcelファイルを開くと下記のようになっております。
(※名と姓は変更しております。)

Excel形式でダウンロード
この状態で1行目はそのまま削除せず、
2行目から追加したいアドレスを追加していきます。

全ての入力が完了すれば再度Benchmarkの画面を開き先ほどご説明した様に
ファイルをアップロードします。

以上でインポート機能を使ってのリストの作成は以上です。



コピー&ペーストで作成

こちらの登録方法は登録したい件数が複数ある場合(例えば50件未満で)に便利な登録方法となっております。

リストの追加
上記の入力フォーム部分へメールアドレスを1行に1つのアドレスを入力し、
2件目以降はカンマ(,)などの記号で区切っている場合は削除して、
改行してご入力もしくはコピー&ペーストを行ってください。

最後に入力が完了したら右下の「リストの追加」をクリックして完了です。


※こちらの登録方法はメールアドレスのみの登録が可能となっており、
 名や姓などのアドレス以外の情報を別画面よりご入力いただく必要がございます。

下記誤った入力例となります。

リストの追加→NG-1
リストの追加→NG-2
※上記の様に誤った方法で入力し右下の「リストの追加」をクリックすると下記の様なエラーが表示されます。

リストの追加→エラー


1件ずつ登録

下記の様に好きな項目へ入力するだけで簡単に登録ができます!

1件ずつ登録
上記オプションフィールドへ記載されている項目名は自由に変更ができます。

下記「リストアクティビティー」の中から「編集」をクリックします。

コンタクトリスト→編集
顧客リストの編集
上記「オプション変更」をクリックすると
下記の様なオプション項目が表示されこちらから項目名を変更できます。

顧客リストの編集→オプション変更
変更が完了したら「保存」をクリックして完了です。




以上で「Benchmark Email」の導入&リストの登録方法は終わりです。



最後に

今回は導入とリストの登録方法をご紹介いたしましたが、
結構簡単な操作で尚且つ細かいところまで設定できるとなれば
試しに導入してみてはいかがでしょうか?

次回は実際にメルマガを作成していく「メルマガ作成編」で
どの様にメルマガを作っていくかという部分をご紹介していきたいと思います。

是非お楽しみに〜〜〜( ´ ▽ ` )ノ

もしご不明な点やこれから導入をご検討中の方は是非弊社までお問い合わせください♪

メールトラブルでまず確認しておきたいこと

shuhei
2017/08/29
閲覧所要時間:約3

kaisya_komaru_man


お久しぶりです。西村です。

日々の業務であたりまえのように使用しているメール。
突然のトラブルでお困りになったことはありませんか?

今回はそんな時にどう対処すればスムーズに解決できるかをご紹介したいと思います。

どこに問題があるのかを確認しよう!

問題を解決するには、それがどのような問題かをはっきりさせることが大切です!
まずはどこに問題があるのか、下記のリストに沿ってを確認してみましょう。

  • どのような状況で問題が起こったのか?
  • 受信・送信はできるか?
  • どのメールアドレスが問題なのか?
  • エラーメッセージはないか?

どのような状況で問題が起こったのか?

まずは何をしようとしたら問題が起こったのか確認します。
例えば「新しくメールを使おうと設定している時」に問題があるのであれば、設定のどこかに間違いがある可能性が高いです。
弊社のホームページにも設定方法が載っているので、ここを参考にしながら進めてみましょう。
トラブルシューティング
https://www.fvs-net.co.jp/support/


「今まで問題なく使用できていたのに、突然使えなくなった」といった場合であれば、残りのチェック項目も確認しましょう。

受信・送信はできるか?

受信だけできない、送信だけできない、どちらもできないなど、様々なトラブルがあります。
トラブルが起こっているメールとは異なるメールアドレスがあると検証し易いので、フリーメールなどの利用をオススメします。
これにより、ある程度原因の予想ができます。

例)
受信だけできない -> メールボックスの容量?
送信だけできない -> 送信先でのトラブル?
送受信ができない -> サーバー側の不具合?

どのメールアドレスが問題なのか?

ここでは例を混じえながら説明します。
メールトラブル
AさんとBさんは同じ会社、Cさんは別の会社のメールを使用しているとします。
Aさんから社外のCさんに送った時にエラーが出た場合、AさんかCさんのどちらかに問題があります。
次に、社内のBさんからCさんに送った時にエラーが出なければ、これはAさんに問題がある可能性が高そうです。

このように検証を重ねることで、どのメールアドレスに問題があるのかを判断できます。

エラーメッセージはないか?

最も解決のヒントになるものが、エラーメッセージです。
使用しているメールソフトで表示されたり、送信先のサーバーから自動で返信されて来たりします。
エラーメッセージの内容を検索してみると、多くの解決のヒントが見つかるでしょう。
メールソフトのエラーはこちらで操作している時に発生するので分かりやすいですが、送信先から来るメールは英文メールの場合もあるので見落としがちです。
件名が「Undelivered Mail Returned to Sender」になっているものがよく見られるので、注意しましょう。

スクリーンショット 2017-08-29 15.49.42


それでもやっぱり原因が分からない!

kaisya_man_bad

上記で挙げたもの以外にも、社内ネットワークの問題やウイルス対策ソフトとのバッティングなど、様々な可能性があります。
WEBの世界も日々進化しているので、これから先、新たな問題が発生する可能性も0ではありません。

弊社では、弊社サーバーをご契約されているお客様を対象に、メールに関するサポートも行っております。
こちらの記事の内容を確認された上でご連絡頂けると、よりスムーズな解決につながります。
お困りの際はお気軽にご相談ください。

修正依頼はこのツールで決まり!? AUN(あうん)の使い方

araki
2017/06/21
閲覧所要時間:約5

AUN(あうん)
こんにちは荒木です。


皆さん仕事の中で修正依頼を出す際にどのようなツールをお使いですか??

普段PCに慣れていない方だとこのWEBページの修正点をどのようにして相手に伝えよう・・・。
などと悩んだことはありませんか?


普段だとWEBページのキャプチャを撮り、
そのキャプチャに修正箇所を書き込んだり、
印刷して手書きで修正箇所を書き込みそれをFAXで相手に送るなど
色々やり方はあるかと思います。

しかし今回ご紹介するツールは、
PC操作が苦手な方でも簡単に導入できるツールとなっております。

こちらの記事を最後まで読んでいただくときっと
数分あれば下記のような修正指示を出すことができること間違いなし!!!


Windows・MACどちらでも関係なく使用でき、
専用のアプリをインストールしたりする必要もありません。

下記ページにアクセスすれば誰でもすぐに利用することができます!

AUN[あうん]: ビジュアルコミュニケーションツール
https://aun.tools/


※会員登録不要、利用料も無料です。



AUN(あうん)とはどんなツール?


AUN(あうん)とは?
付箋紙の感覚でサイトや画像にメモを貼って、共有できるツール。会員登録不要・利用料無料・パスワード設定可能・URL入力のみで簡単にWEBページのキャプチャが撮れるなど初心者でも簡単に導入できる便利なツールです。







AUNの使い方

それでは早速AUNの使い方についてご紹介していきます。
本当に直感的で操作も複雑ではないので利用したことがない方は是非利用されてみてください(o^^o)


1. AUNに画像を取り込む

AUNでは3種類の画像の取り込み方があり、
自分にあった取り込み方法をご選択ください。

1. WEBページのURLを入力しキャプチャを撮って取り込む
2-1
「キャプチャ」というボタンの左側へ「デスクトップ」というボタンがありますが、
ここでお好きなデバイス用のキャプチャを撮ることができます。

【 デバイスの選択肢 】


【 トリミング 】


ここではURLを入力後、「キャプチャ」というボタンを押すと上記のような選択肢が表示されます。
すべての画面を全体的に取り込みたい場合は「しない」を選択。

▼「しない」を選択した場合の取り込み画面
もし一部のキャプチャだけが必要な場合は「トリミングする」をクリックすると、
ドラッグで必要な範囲を選択できるようになっております。

▼「トリミングする」を選択した場合の取り込み画面

※選択範囲につきましては1度選択した後でも自由に範囲を変更できます。





※実際のページとは表示が多少異なる場合がございます。


2. PC内にある画像を取り込む
2-2
既にPC内に保存している画像をドラッグアンドドロップもしくは「選択」ボタンから特定のファイルを指定して取り込むことができます。



3. クリップボードから取り込む
2-3
画面のスクリーンショットを撮った状態でAUNの画面で貼り付けをすることで画像を取り込むことができます。

クリップボードとは
「コピー」や「切り取り(カット)」したデータを一時的に保存しておく場所を、「クリップボード」といいます。入力の手間を省き、入力ミスを少なくする非常に有益な機能です。

Windows・MACそれぞれのスクリーンショットの撮り方につきましては下記よりご確認ください。(AUNの画面から確認することも可能です。)
画面スクリーンショットの撮り方
https://aun.tools/web/visual/inc/pdf/howto_screenshot.pdf





画像にメモを書き込む


画像の上でメモを書きたいエリアをドラッグで選択します。
メモの追加−1
追加したメモに関しては左側に一覧として表示されますので、
そちらからメモの編集・移動・削除が行えます。


メモの追加
メモの追加−2

※メモを追加する際にはPC内にあるファイルも併せて添付することができます。


メモの編集
メモの移動


メモの移動
メモの編集


メモの削除
メモの削除




キャプチャを追加する

1回の修正指示で1ページとは限りません。
「このテキストがこのページとこっちのページにも入っている。」などという場面が少なくないはずです。

そこでAUNでは1ページだけではなく複数ページのキャプチャを追加することができるんです!

追加方法は簡単!

まず下記のように右上もしくはページの最下部に「 + 」のアイコンがありますので、
そちらをクリックしていただくと別ページのキャプチャを取り込むことができます。
(キャプチャの取り込み方は一番最初の取り込み方法と同じです。)





キャプチャを共有する

さてキャプチャの追加やメモの追加が完了すれば次は相手に送ってみましょう!

送り方もとても簡単!!!

編集が終わったら下記の図の通り右上の「保存&終了」をクリック。

共有する際のタイトルを入力します。


もし特定の人意外に見られたくない場合はパスワードを設定することも可能です!

下記のように「閲覧パスワードを設定」にチェックを入れお好きなパスワードを入力していただくだけで簡単に設定ができるようになっています。


2箇所(パスワードを設定しない場合は1箇所)の入力が完了したら、
その下の「保存する」のボタンをクリックします。

すると下記のように「共有URL」が表示されますので、
こちらのURLをコピーしてメールに貼り付けたり、
「メールで送る」を選択すればご自身がおつかいのメールソフトが立ち上がりそこから
URLを送信することもできます。





キャプチャの再編集&PDFの書き出し

上記の画面で間違えてURLをコピーせずに閉じてしまっても大丈夫!

閉じた後の画面では共有するためのリンクのコピーや、
再編集・PDFなどでの書き出しなどの操作が可能です。
エクスポートを押すとZIPファイルをダウンロードすることができます。

ダウンロードしたZIPを解凍するとPDFファイルが入っております。




最後に

これでビジュアルコミュニケーションツール AUN(あうん)の使い方は以上になります( ´▽`)

どうでしょう!?
説明をみるとちょっとめんどくさい感じはありますが、
実際に使ってみるととても便利なツールだと感じるはずです!!!

是非日々の業務の中へ取り入れてみてはいかがですか( ^_^)/?


それではまたいつの日か便利なツールがあればご紹介していきたいと思います♪

Snapseedアプリを使って自分好みにの写真を編集してみよう!!〜 ツール編 〜

araki
2017/02/07
閲覧所要時間:約6

はい!みなさんおひさしぶりです!!

日々の猫背のおかけで重度の肩こりに悩まされ、
それを改善しようとバランスボールに乗りながら業務に励み、
結局1週間ちょっとで断念してしまった荒木でぇ〜〜〜〜〜〜〜〜〜〜す!!!!!!

2017年になり始めてのブログの担当がまわってきましたよぉ〜〜〜〜〜〜〜〜〜!!!!!!!!

っということで「あけましておめでとうございます。」m(_ _)m
今年もどうぞよろしくお願い致します。

話は変わりますが、最近特にこの生まれながらの天パのおかげで、
いろいろな人に覚えていただくという場面に遭遇することが多くなってきましたねぇ〜〜〜

嬉しいことですね〜〜〜〜〜〜

・・・・・。

そんなことはどうでもいいんです!!!!!

みなさん前回僕がInstagramについて書いた記事を覚えていらっしゃいますでしょうか・・・・。

片手で持てるiPhoneをわざわざ両手で握りしめ、
何度も何度もしつこいぐらいにスクリーンショットを撮って
完成させたあの記事のことを・・・・・・。

もぉそんな記事のことなんか1mmも覚えてないよっていう人のために、
一応ご紹介だけでもさせてやってください・・・・。(._.)

そして忘れないでやってください・・・・・。

これから始めるInstagram(インスタグラム)〜 基本編 〜
https://www.fvs-net.co.jp/blog/11818
さてさて前置きが長くなってしまいましたが、
さくっと機能を紹介していきますね!!!

まずはじめに

ひとまずこのアプリをダンロードしないことには話になりません!!!!!!
っということでひとまずこちらのアプリをダウンロードしましょう!!!!!!!

Snapseed
Snapseed
開発元:Google, Inc.
無料
posted with アプリーチ
ダウンロードが完了しアプリを立ち上げてみると下記のような画面が表示されます。(今回はiPhoneの画面でご説明します)

snapseed-1
アプリを開きどこでもいいので任意の場所をタップします。

①「端末から開く」→すでに撮りためた写真を選択することができます。
「カメラ」→カメラを起動し撮影することができます。
「最新の画像を開く」→その名の通り最近追加された画像を開くことができます。

② ①で選択した写真でよければ右上の「使用」をタップします。

IMG_6931
次に上記のように編集画面のホームが表示されます。

①別の写真を開きたい場合はこちらの「開く」から再選択ができます。
②「保存」「コピーを保存」「エクスポート」の3種類の保存方法が選択できます。
③編集をやり直したり編集した内容を確認することができます。
④Facebook、Twitter、Instagram、Pinterest、Tumblrなどの様々なSNSに連携しており編集後すぐにアップすることが可能です。
⑤こちらから実際に画像にフィルターをかけたり、色合いなどの編集を行います。

snapseed-2
このように色合いからぼかし、画像の変形、テキストの追加、フィルターなど、
本当に細かく調整できるようになっております。

今回はツールとフィルターがたくさんありますので、
まずツールの方から機能を紹介していきたいと思います!!!!!
(フィルターについての説明は次回ご紹介します♪)

その前に・・・・。

snapseed-3
基本的全てのツールやフィルターで上下にスライドさせることで他の調整する項目へ切り替えたり、より細かい調整を行うことができますので必ず覚えておきましょう!!!

またこちらのアプリの中で出てくる「コントラスト」や「アンビアンス」・・・・と様々な専門用語が出てきて聞くだけでかなり難しそうというイメージがあるかもしれませんが、もぉこの際様々な用語が飛び出しますが特に覚える必要はございません!!!!!

実際に触って自分好みの編集ができればそれでOKなんですd( ̄  ̄)

なので今回は余計な説明ははぶき、

「 実際に触ってみると写真はこういう風に変化するよぉ〜〜! 」
「 自分のちょうどいいところを見つけてねぇ〜〜〜!!! 」

っということだけざっと実際の画面でご紹介していきたいと思います。

画像調整

明るさ

snapseed-4
ん〜僕は必ずと言っていいほどこの明るさはいじりますね( ̄^ ̄)ゞ

なんてったって時には写真を撮ったあとに「あぁ〜〜〜あと少し明るく撮っておけばよかったぁ〜〜〜」と
自分の撮影技術を責めてしまう人も中にはいることでしょう・・・。

僕もその中の一人です。
こんな調整しなくてもいいような撮影技術を身につけようと思う今日この頃・・・・・・_φ( ̄ー ̄ )

コントラスト

snapseed-5
 

彩度

snapseed-6
 

アンビアンス

snapseed-7
 

ハイライト

snapseed-8
 

シャドウ

snapseed-9
 

色温度

snapseed-10
 

写したものによって色温度を調整するとより雰囲気が出るかも・・・・・。

ディティール

snapseed-11
 

切り抜き

snapseed-12
 

回転

snapseed-13
 

変形

snapseed-14
 

ホワイトバランス

snapseed-15
先ほどご紹介した「色温度」と結構似ていますね!!
もぉこれもお好きな方をお使いください!!!!

 

ブラシ

snapseed-16
 

部分調整

snapseed-17
これも結構便利ですよね〜♪
「この箇所をピンポイントで少し明るくしたい!!!!」っという時に活躍しますね( ̄ー ̄ )

 

シミ除去

snapseed-18
 

周辺減光

snapseed-19
これも僕はたまに使いますよ〜〜〜〜〜〜♪
「なんかこの部分だけをちょっと強調したいなぁ〜」っていう時に使ったりしますね♪

 

テキスト

snapseed-20
 

カーブ

snapseed-21
 

こちらは2017年2月1日頃にアップデートでつかされた機能で、
Photoshopをお使いの方にはお馴染みのトーンカーブ機能と同じように、
写真の色調を調製することができます!!!

最後に

いかがでしたでしょうか??
ささっと説明がてら実際の画面をお見せしましたが次回は
「もっと写真に変化をつけたい!!」
っという方のためにフィルターのご紹介をいたしますので、
どうぞお楽しみに〜〜(^o^)/

あっ!!!
「こういう体操が肩こりにきくよぉ〜〜〜〜〜!」
「こういう道具をつかうと多少は肩こり和らぐよぉ〜〜〜〜!!!」
っという情報をお持ちのかたはぜひフロンティアビジョンの荒木までご連絡ください( ̄^ ̄)ゞ

それではまたいつの日か♪

firefox を最新版 ( ver.50 ) にアップデート後、Bookmark Favicon Changer で設定したブックマークレットのアイコン(ファビコン)が初期化された!

fujie
2016/11/17
閲覧所要時間:約12

firefox-50
「Firefox 50」が安定版に。拡張機能のパフォーマンス改善や脆弱性の修正が行われる
http://forest.watch.impress.co.jp/docs/news/1030197.html

「Firefox 50」正式版がリリース、キーボードショートカットの更新やページ内検索機能を強化
http://gigazine.net/news/20161116-firefox-50/


firefox がとうとう バージョン「50」 になりました!
いろいろ強化・修正されたみたいで、

特に、

・border-radiusを用いて作成された角丸の点線と破線の描画に関する不具合を修正しました
という修正が入り、個人的に非常に高まっております!


border-radius とは角丸を表現する CSS で、
最近の Web サイトでは使わない方が珍しいくらい多用しているプロパティの一つです。

丸くした箇所に沿って線を引いたりなども多用しますが、たまにその線を点線や破線にすることもあります。
しかし角丸指定と点線や破線を同時に使うと、直線になってしまうというバグが firefox ではずーっと残っていて ( 2007年ごろから ) デザインを再現するには画像などで対応するしかなく、大変だったのですが、今回の新しいバージョンでは指定した通りになるようになった!ということです。
border-radius: 50%; などという円になる表現で点線や破線を指定した際が特にクリティカルなバグで、すべて直線になってしまいデザインを再現しにくいのが悩みでしたが、新しいバージョンが世の中に浸透していけばもっと楽しく・簡単に実装ができそうです!


今までの firefox の場合、これらは同じ直線でした…。
firefox-50-border-before-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-before-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-before-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定
しかし バージョン「50」 になったこれからの firefox の場合、ただしく描画されます!
firefox-50-border-after-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-after-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-after-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定




以上、嬉しい前置きでした。


本題(私のブックマークレット環境について)

さて、私はコーディング作業や確認作業、調べ物など、ブックマークレットを多用しており、これが無いと仕事に支障がでます…。

常時、ブラウザの右上に設置しており、ワンクリックで即座に動作させるようにしております。
( https 化してある Web サイト上で、たまに動作しないのが辛いところ…。 )

firefox-50-bookmarklet 右上はこんな感じに。

テキスト(ブックマークの名前)を空にし、アイコンのみにすることで、限られたブラウザのスペースを節約しております!

  • をクリックするとポップアップを表示し、日本語を入力すると Google 翻訳で英語に。
  • をクリックするとポップアップを表示し、英語を入力すると Google 翻訳で日本語に。
といった使い方をしています。




ただしこれはアイコンがあるから、簡単に見分けがつくわけで…
アイコンが無いと、下記の様な感じになります。

firefox-50-bookmarklet-noicon
これは大変ですね。
というわけで、アイコンを設定できるアドオンが存在します。

Bookmark Favicon Changer
https://sites.google.com/site/sonthakit/bookmarkfaviconchanger


こちらを使うと右クリックからのコンテキストメニューで、アイコンを簡単に変更したり保存したりができます。
バージョン「50」より以前まではこちらでまったく問題ありませんでした。

バージョンアップ直後は問題なかったのですが、「追加のツールと機能」のカスタマイズを行うと、アイコンが初期化されてしまい、以後変更ができなくなってしまいました。

いろいろ検証した結果、
  • http や https から始まる URL には今まで通り問題ない
  • javascript: から始まる URL には適用されない
ということがわかりました。

そこでハック的な考えで、
一度別の URL に変えてアイコンを設定し、また URL を戻すと上手くいくのでは…?
ということで実践しましたが、適用直後は想像通り上手くいきました。

が、やはり「追加のツールと機能」のカスタマイズを行うと、初期化されてしまい、無駄な作業の連続でした…。



解決策は…ユーザースタイルシート !


かなり右往左往しましたが、ユーザースタイルシート というのを思い出し、
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/

こちらのユーザースタイルシートを管理できるアドオンを導入し、なんとかならないか挑戦しました。

実はユーザースタイルシートは Web サイトの調整だけでなく、ブラウザの外観も操作することができるのです!
ユーザースタイルシート自体は Google Chrome にも存在します。


DOM Inspector
https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/

さらにこちらの DOM Inspector というアドオンで外観の要素 ( CSS を付与する箇所 ) を特定し、いざアイコン設定のスタイリングです。



要素の名前は「toolbarbutton」

toolbarbutton という要素 ( タグ ) にスタイルを付与していきます。

( ※未確認事項 ) 私の場合はブックマークツールバーという枠に、各ブックマークレットを収めているため、もしかしたらいくつか違いがあるかもしれません。

下準備として、名前を空にしていたブックマークレット達に、「bookmarklet_〇〇」といった形式で名前を付けてあげます。
〇〇は任意です。 先ほどの Google 翻訳だったら bookmarklet_google-translate-ja-to-en などの様に。
こうすることで追加したスタイルが toolbarbutton 全域に適用されるのを防ぐ書き方がをすることができます。

/* HTML */
<toolbarbutton label="bookmarklet_〇〇"></toolbarbutton>

/* CSS */
toolbarbutton[label^="bookmarklet_"] {
  background: no-repeat center center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
  text-indent: 100%;
  transition: background-color .175s, background-size .175s;
  white-space: nowrap;
}
toolbarbutton[label^="bookmarklet_"]:hover {;
  background-color: #fff !important;
  background-size: 13px 13px !important;
}
toolbarbutton[label^="bookmarklet_"] .toolbarbutton-icon {
  visibility: hidden;
}


この CSS で、toolbarbutton の label ( 名前 ) 属性の値の先頭に bookmarklet_ を含んでいる要素だけにスタイルを付与することができます。
background にはデフォルトのスタイルがいくつか入っていて綺麗に打ち消すのが手間なので !important で強制してあげます。

目指すのはアイコンのみの省スペースかつ分かりやすい表示で、テキスト ( 名前 ) は不要なので、テキストを消す処理も忘れずに入れます。
また、デフォルトのアイコンが toolbarbutton-icon というクラス名で子要素に存在するので、こちらも邪魔になるので非表示にします。

その際に display: none; に使用して要素を消してしまうと、画像の高さを横幅が失われて、幅が小さくなってしまうので、非表示専用のプロパティ「visibility」を活用します。

ここまでをベースとして、各々にアイコンを設定していきます。

アイコンは base64 形式にすると、画像としてどこかにアップロードする手間が不要でおすすめです。
変換には様々な手段がありますが、
画像をbase64エンコードするツール
https://syncer.jp/base64-encoder

こちらの Web サービスが動作も良く、気の利いたコピー機能を提供してくださるのでおすすめです!


最後に、やっとやりたかったアイコンの設定です。

/* Google 翻訳にて、日本語を英語に */
toolbarbutton[label="bookmarklet_google-translate-ja-to-en"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABcElEQVQ4jZ2SMWtUURCFn6ygiYmViorCIgtbLNy9c757eTzX4qUI5A/cJlXAEFIIFomgkiZNLFLkB6RYsNBCe8FWsBEEbS1EQhCSQCqxsLG5C9vE9+LAaQbOx5yZKbz3XeAX8AP4nnUs6Uld1xeLpvLedyW97ff785OepJWzAFVVzQALzrkb/wUAZs3sqZltDwaDuaIpAvB1qj/RUfY8O/cEdV1fNrMtSbvOuSsTwCdgPRtXgP2zAKPRaB5YjjHenGS6BbwCVqcAL4DllFKn8QoppU5ZlleLorgwPWZVVTON5jblve+a2UNJj2KM98xsHdjx3ndb/QkwBj7kPX3OV/mW+9daTRFCqCUtAe/NbANYbR2hLMs7wGHWH+AE+ClprW2EB8Cb/HAH3vv7wKaZ7QCzbQBjSS9z9t/AqaTXwDjGeLcRMBwOTdJzSe8kreUn2wshLPZ6vUv/NJvZbUkfgd0QgqWUOmZ2HXgMfHHOlX8B3QSQeDjyLakAAAAASUVORK5CYII=' ) !important;
}

/* Google 翻訳にて、英語をに日本語 */
toolbarbutton[label="bookmarklet_google-translate-en-to-ja"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jb2Tv0ubYRDHX0ocCsVJsEiHDEqHhOTu+7m3ISLhAf8AF3ETbKfS2UIHh9LBoYV27vS21EXc3XQJdHFzcFHwJ+ggLu3SodDlTQkhRTPYg1uO5z58v8/dZSmliplVJX1y9/mIeAq8i4hlM6tmtwUwARTAoaRtYF/SMdAFilsBfaBXpZLvkt4Cc/96GxF1d39Zq9Ue9QqLwBVwCvwGroGLZrP5bBig1WqNS3ov6WOWUqoAq8CqmVWBS0DAlqSlRqPxRNIBcNyXZ8BP4ObvH0TEN+Bc0i/gCNgAina7/XBQgaRpSZ8jYiEDxty9A3yQtCvpOfAFWMvzfHaYhTzPH5uZAWOZJIAd4E05tgdmNgOsA2fuPnXnSdxblJ5XBrNer0/eFbAiaTMiXvSaga67d0YBvE4pVXo1oBgJ4O7rkqbNrFruy9aoCvaAr+XdFMDh/7Ug6QY46VvnH+7e+QMGaIYRE1OajgAAAABJRU5ErkJggg==' ) !important;
}


base64 形式に変換したアイコンを background-image で背景画像として設定します。
これで完成です!。



期待の効果は!?とまとめ

さて、今回の難関であった、アイコン初期化されないように維持できるかですが…。
「追加のツールと機能」のカスタマイズを開いたり、動かしたりしても全く問題ありませんでした!嬉しい!


実はバージョン「50」以前の Bookmark Favicon Changer を使用時でも、稀に初期化されてしまう現象に遭遇しており、何度か設定しなおしたことがありました。
その度にクリックでアイコンをひとつひとつ登録していく操作が面倒くさいと思っていたのですが、今回の件でまとめて解決したので、悩まされましたが最終的に満足いく結果になりました。よかったです。



firefox-50-bookmarklet-cmpletion 最後に私の右上の完成はこんな感じです。なぜか最近恒例の GIF。
無駄に、 transition ( 変形を滑らかにするプロパティ ) をつけて楽しめるようにしました!



以上です。みなさんも、よき firefox & ブックマークレット ライフを!!



ちょっと古くなりましたが、過去に紹介したアドオンとブックマークレットの記事

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介