ふずブロ

ECショップやサービスを運営する人が日々の徒然を語るブログ。

一番おろかな生き物って人間じゃね?

なぜ人間は

「他の人と比較する」

ということを習得してしまったんだろう。

そんなこと習得しなければ、もっとみんな幸せだったろうに。

何かを批判することもなく、ただただ成り行きに任せて生きれただろうに。

はぁ、なんて人間はおろかなんだろう。

※別に鬱じゃありません。

マーケティング担当はSketchでラフを描けるようになるべし

以前はマーケティング担当として働いていた自分ですが、元々「自分で作りたい」という気持ちが強く、会社で働いている時も週末などの休みで開いている時間には自分でHTMLなど書いていました。

今では、Webサイトの制作も出来るようになり、マーケ担当兼制作としてフリーで働いています。

そんな僕が、マーケティング担当が仕事の幅を広げ、かつ仕事を円滑にまわすために重要だと思うのが、「ラフの作成」です。

一般的な企業だとマーケティング担当とは別に制作の担当がいるので、マーケティング担当が企画を立て、制作担当が形にしていくというケースが多いのではないかと思います。

ただ、このやり方って時間のロスがむちゃくちゃ多いです。マーケティング担当の頭のなかにあるものを、制作に伝えるというのがまず大変。イメージがすぐに伝われば良いのだが、伝えにくい新規ものの場合だとマーケティング担当の質によっては、制作に多大なる迷惑がかかる場合があります。

どんなときに迷惑がかかるかというと、「殴り書きみたいなラフ」「文章が決まってない」「イメージがない」「根本的に構成がぐちゃぐちゃ」など、結構よくありがち。そんな企画だと、制作側のフラストレーションはたまる一方なので、本当に気をつけてください。

そんなマーケティング担当は一度、ページ全体のラフを作成してみてください。制作の方の気持ちが理解できると思います。

細かなところは制作の方が専門なのでお任せしても大丈夫です。マーケティングの企画者としてやっておかないといけないのは、「構成をしっかり作ること」と「文章・キャッチコピーを一通り作成すること」、「ページのイメージ」です。「ページのイメージ」は参考ページとかで問題ありません。

この3つができていれば、制作としてはかなり負担が軽減されます。

そして、そのラフをもとに、制作者の方が話をできるので、円滑に話が進みます。慣れてくると、コーディングしやすいラフを描けるようになると思います。

ラフをつくるときは「Sketch」が便利です。デザイナーの方はイラストレーターなどで作成している方もいると思いますが、マーケティング担当なら断然Sketchがオススメです。

Sketchの最大の特徴はPowerPointのように作成できるので、とても簡単な点です。今、エクセルやパワーポイントでラフを作成してる人は、乗り換えをおすすめします。圧倒的に作成が楽です。

Sketchを使ってきれいなラフが描けるようになれば、制作の仕事はただコーディングするだけになりますので、仕事が驚くほど早く進むようになると思います。

世の中の全てのマーケティング担当が制作のことまで考えたラフを作成出来るようになれば、驚くほど業務がスムーズに進むと本気で思っています。

ぜひSketchでラフ作成をお試しください。(最後Sketchの宣伝みたいになってしまいましたが回し者ではありません。)

それでは素敵なSketchライフを!

Sketch - Professional Digital Design for Mac

ゲストハウス DENON(ドゥノン)に行ってきた。(一宮市木曽川町黒田)

一宮市木曽川黒田にあるゲストハウス DENON(ドゥノン)に行ってきました。

ホワイトデーということで普段より少しおしゃれな店にいこうと思っていたところドゥノンを見つけました。

ちょっと隠れ家感があるのがおすすめポイント1です!

ドゥノンの外観

超おしゃれです。建物にこだわりのある店主らしいです。

ちなみに夜はこんな感じ

ドゥノンの店内の様子

ガラス張りで解放感ある店内

店内もおしゃれです

天井も高く、解放感があります。

店内にはジャズが流れて、雰囲気も良いです。

ドゥノンの料理

それではお待ちかねの料理です。 まず特徴は、値段がかなりお値打ちです。今回はディナーのコース(肉料理コース)を注文したのですが、1580円です。

前菜

スープ

玉ねぎがじっくり煮込んでありました。

パスタ

ブロッコリーの食感とガーリックの味、パスタの茹で具合が最高でした。

メイン

お肉柔らかすぎです。美味しい。

デザート、ドリンク

これだけついて1580円ですよ。お値打ちにも程があります。 しかもどれも美味しいです。

今回はコースを注文したのですが、カレーもとても美味しいようなので、また食べに来ようと思います。

コースの料理を気軽に食べにこれる雰囲気がとても好きです。

ドゥノンはヘビーローテーション確定のお店です。ぜひ木曽川町黒田の近くに来るときはドゥノンにお越し下さい。

近くに木曽川のイオンやアピタがありますよ!

それでは素敵なドゥノンライフを!

Railsでwickedpdfを導入する手順(初心者用)

Rails初心者です。 以下の手順で、つまづきながらもPDFの出力まで出来たのでご紹介いたします。初心者の方にも分かりやすいよう、1から手順を紹介いたします。

下記の記事を参考にしました。 tnakamura.hatenablog.com

qiita.com

qiita.com

wickedpdfって何?

HTMLを元にPDFを生成できるライブラリです。

事前準備

プロジェクト作成

rails new sample_app

gemのインストール

今回、Rails初心者向けということで、GemfileはRailsチュートリアルで使用している下記を使用しています。

#vim Gemfile

gem 'rails',        '4.2.2'
gem 'sass-rails',   '5.0.2'
gem 'uglifier',     '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'turbolinks',   '2.3.0'
gem 'jbuilder',     '2.2.3'
gem 'sdoc',         '0.4.0', group: :doc
gem 'therubyracer', platforms: :ruby

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
end

このGemfileにwickedpdf用のgemを追記します。 gem 'therubyracer', platforms: :ruby の下に続けて記載します。

#Gemfileに追加

gem 'wkhtmltopdf-binary'
gem 'wicked_pdf'

bundle installを実行します。今回はwithout productionをつけています。

bundle install --without production

パッケージをインストール

関連するパッケージをインストールします。

yum install libXext  libXrender  fontconfig  libfontconfig.so.1

日本語フォントのインストール

日本語フォントをインストールしないと、PDFが文字化けしてしまいます。IPAフォントというものを使っています。ライセンスなどは各自ご確認ください。

yum install -y ipa-gothic-fonts
yum install -y ipa-mincho-fonts

制作

ここからは、下記記事の「コントローラーを作成」以降の手順を行ってください。 (本当は詳しく手順を記載しようと思ったのですが、本当にそのままで大丈夫でしたので省略。) tnakamura.hatenablog.com

完成形

上記の「事前準備」「制作」の手順を行うと、wickedpdfで下記のようなPDFが作成されます。

f:id:huuzoo:20160311170148p:plain

あとはPDFのviewを作っていくだけです。

補足:wickedpdfのcssや画像の読み込み

wickedpdfではcssjavascriptのファイルは下記のように読み込みます。

<%= wicked_pdf_stylesheet_link_tag "wickedpdf/custom.css" %>
<%= wicked_pdf_javascript_include_tag "wickedpdf/custom.js" %>

上記の場合、 app/assets/stylesheets/wickedpdf 配下の custom.css や app/assets/javascripts/wickedpdf 配下の custom.js が読み込まれます。

また、画像は下記のように出力します。

<%= wicked_pdf_image_tag('image.png' %>

この場合、 app/assets/images/ 配下の image.png が読み込まれます。

詳しくは下記をご覧ください。

www.virment.com

以上になります。少しでもwickedpdfを使いたい方の参考になれば幸いです。

それでは素敵なwickedpdfライフを!

なんでみんな自分のために働かないんだろう

と最近とても思う。

 

会社で働くってすごい安心だけど、油断して仕事してると将来どこでも働くことができなくなってしまいかねないから、すごい怖いところだと思う。そしてたぶんそういう状況に陥っている人はすごいたくさんいると思う。

 

会社で働く人にひとつアドバイスするなら、「自分のために」働いてほしいということ。

 

この「自分のため」というのは「独立するためのスキルを身につける」だったり「やりたいことをやるために新しい知識を身につける」など色んなことに当てはまるが、ぼんやりではなく、出来る限り具体的に意識できるものが良いと思う。

 

自分のやっていることが「会社のため」であり、自分のために繋がらないのであれば、すぐに働き方を改めるべきだと思う。

 

「自分のため」に働いていることが、結果的に「会社のため」にも繋がっているというのが一番よい状態だと思う。

 

その状態が一番モチベーションもあがるし、仕事の効率も良いと思う。

 

しかし、それが世の中の多くの企業が、会社のために働くことを再優先させてくる。だからもっと会社で働く人は、したたかにならないと。「会社のために働くもんか」と。

 

「自分のために働いてるけど、お金もらえて一石二鳥。会社のためにもなってる。」くらいの気持ちでいないといけないと思う。

 

会社は安心ではない。

 

と、元々会社で働いていたけど、フリーランスになった人の感想でした。

 

それでは良いお仕事ライフを!

Vagrantでmodern.IEを利用して、IEでの表示確認・開発環境を構築する

IEでの表示確認をする方法

こちらは下記の記事を参考にしました。

fnya.cocolog-nifty.com

上記の記事の一部抜粋をしていきます。

IEの環境をVagrantにて構築

ファイルのダウンロードは下記から行います。 Virtual Machine (VM), Windows Virtual PC & BrowserStack : Microsoft Edge Dev

The Unarchiverを使って解凍し、Vagrantで使用するboxファイルを取得します。

その後VagrantにBoxを追加します。

Vagrantfileを適宜修正し、 vagrant up すると表示されます。

日本語・キーボードの設定をする。

日本語の入力や、:(コンマ)の入力などが初期設定では異なるため、こちらの設定が必要です。 これも先ほどの記事に記載されていますので、それにそって変更してください。

以上で、modern.IEを使ったIEの表示確認の方法は完了です。

IEでの開発環境を構築する方法

開発環境(ローカルで開発する環境)の構築は下記の記事が参考になります。 tech.recruit-mp.co.jp

以上になります。modern.IEVagrantIEの表示する必要のある案件があったので、参考になった記事を紹介させていただきました。誰かの参考になれば嬉しいです。

それでは素敵なmodern.IEライフを!

Analyticsでバナーのローテーション(ランダム表示)をして効果を検証する方法

これ、最近実施して、手軽だし十分効果測定できると思ったので、ご紹介します。ぼくはwordpressで行っていますが、使うのは基本Analyticsなので、wordpressでなくてもご自身の環境に合わせて使ってください。

前提

下記について事前に知識が必要になります。

  • Analytics
  • HTML

Analyticsのカスタム キャンペーンを設定

カスタムキャンペーンを設定することで、analytics上でレポートが確認できるようになります。 確認先は 「集客」>「キャンペーン」>「すべてのキャンペーン」 となります。

f:id:huuzoo:20160310002555p:plain

カスタムキャンペーンの詳しい設定方法は下記をご覧ください。

カスタム キャンペーン - アナリティクス ヘルプ

生成ツールを使うと簡単に設定が可能です。

URL builder - Analytics Help

下記のようなコードが生成されます。

http://huuzoo.hatenablog.com/?utm_source=Google&utm_medium=banner&utm_campaign=all_footer_1

今回は、

  • キャンペーンのソース:Google
  • キャンペーンのメディア:banner
  • キャンペーン名 :all_footer_1

にて作成しています。

analyticsでローテーションする際には「キャンペーン名」が重要になります。

ローテーションしたいバナーの本数分、URLを生成しましょう。その際、「キャンペーン名 :all_footer_1」の末尾の数字を連番にしましょう。

これでanalyticsの設定はほぼ完了です。

画像の用意

使用する画像を用意します。その際、下記のように末尾に番号を連番でつけてください。

f:id:huuzoo:20160310000803p:plain

これで画像の準備は完了です。サーバー内の適切な場所に配置してください。

wordpress側の設定

ポイントはランダム関数を使用することです。サンプルコードは下記になります。

<?php $number = rand(0, 2); ?>
<a href="http://huuzoo.hatenablog.com/?utm_source=Google&utm_medium=banner&utm_campaign=<?php echo $number ?>"><img src="(画像のURL)/blog_footer<?php echo $number ?>.jpg"></a>

a href 以降に先ほど生成されたURLを貼り付けます。

ランダムに数字を生成し、URLと画像URLに出力することで、バナーの末尾の数字とURLのキャンペーン名の数字が紐付き、all_footer_1はblog_footer_1.jpg の成果とanalytics上で把握できるようになります。

ローテーションさせるバナーの本数によってランダム関数を調整してください。

これで簡単なHTMLが分かればすぐにAnalytics上でバナーの効果測定が出来るようになりました。ぜひお試しください。

素敵なAnalyticsライフを!