ホームページ制作のYOUE-BLOG

忘れてはいけないこと

Kazuhiro Sato — Mon, 14 May 2012 09:44:20 +0000

以前、某有名結婚披露宴会場にてプロフィール、儀式ムービーなどを映写上映するアルバイトをしていた経験があります。

仕事自体はシンプルです。
上映の出番がきたら、プロジェクターをセットして、再生ボタンを押すだけです。たったこれだけです。
時給は、結構な額をいただいていました。

誰でも出来る簡単なアルバイトと思いきや、現場は戦場でした。
お客様にとっては、一世一代の晴れ舞台です。
ミスは許されない仕事です。
プレッシャーに押しつぶされ、入ってもすぐに辞めていく人はあとを絶たなかったです。
それでも、決してタフとは言えない自分が続けられたのは理由があります。

スクリーンに映し出される映像に、感動している列席者を眺めることが嬉しくてなりませんでした。
そんな瞬間に居合わせることが、いつしか自分の原動力になり、失敗をして大迷惑をかけても、また現場に向かわせてくれました。
もともと映画が好きでしたので、映画を作って、お客さんの涙を誘ったり笑わせたりできたら、どんなに素晴らしいだろうなと考えていました。
規模や状況は違っても、それに近い感覚で仕事に取り組んでました。

アルバイト経験談はこのぐらいにして、本題の「忘れてはいけないこと」です。
日々の業務に追われ、目の前の仕事をこなすことにとらわれて、純粋な感覚や好奇心を埋没させてはいけないなと、最近はよく考えています。モノを創る場に身を置く人たちは特にです。そんなシンプルで強い欲求が原動力になり、背中を押し、走らせてくれます。

そして、形になったモノには創った人のそんな姿勢や言葉では言い表せない何かが宿り、それに触れた人にも伝わるはずだと信じています。

安いポップミュージックのような青臭いことをつらつらと書き綴ってしまいましたが、改めて忘れてはならないことだと思っています。

お金をかけずにインターネットで集客をしたい人がやるべき6つのこと【BtoB向け】

Yutaka Moromizato — Mon, 07 May 2012 13:54:55 +0000

検索しても上位に表示されないようなサイトのオーナーは、どうやって集客したらいいの？とお悩みだと思います。

SEOやネット広告にお金を掛けてもいいかもしれませんが、BtoBの場合、その前にやっておくべきことがあります。

ここでは、お金をかけずにインターネットで集客を図りたい方が取り得る施策を６つにまとめました。

1．コンテンツをちゃんと作る

はい。コンテンツに勝るSEOはありません。
つまり、ユーザーが喜ぶような情報・コンテンツを発信して下さい、ということです。

何が喜ばれるかは、そのサイトのユーザー層によって異なります。
ターゲットユーザーが誰で、何を望んでいるかをよく考えてみましょう。
読む人の気持ちになって、コンテンツをちゃんと作りましょう。

2．小まめに更新する

手間がかかる作業ですが、定期的に情報を更新していくことが重要です。
再訪問してくれたユーザーへガッカリ感を与えないためにも。小まめな更新。
これ実はSEO的にも重要なのです。

3．ソーシャルサービスを利用する

Twitter、Facebook、場合によってはmixiでもいいです。全て無料です。
個人的な付き合いの人に対してでもいいので、サイトを更新したらお披露目しましょう。
その内の10％くらいの人が再訪してくれるはずです。

4．他のブログへコメントする

いつも見ている他のブログへ感謝の意を込めて、コメントしてみましょう。
さりげなく自分のホームページやブログのアドレスを添えて。

私自身でいえば、面白法人カヤックさんのブログに紹介された時は、少しばかりですがアクセスを頂きました。

心の通ったコミュニケーションをすれば、それに応えてくれる人もいるんだなぁ、と感じましたよ。

この時のトキメキ、プライスレス。

5．ネタは書き留める

そうこうしている内に今日も時間が経って、やっぱり更新するのは明日にしよう…みたいな状況になっていませんか？
日ごろからブログを書くことを頭の片隅において、ネタを書き留める癖をつけておくといいですね。

とは言えですよ。

大変じゃないですか。それって。

だから、パッとメモが残せる「Evernote」をオススメします。紙でも良いんですけど何処か行っちゃいますからね。ちょっとの言葉でもいいので。無料ですよ。

6．オリジナルであること

仮に同じことを書いていても、貴方が書いた言葉と、誰かが書いた言葉では全く違った印象をもたれるものです。
自分の言葉でちゃんと書きましょう。

最後に

地道に積み上げた人が最後には勝ちます。
ローマは一日にして成らず。継続はチカラなり。コツコツ書きましょう。
貴方のことに注目してる人がきっと居ますから。

WordPressにjQueryを組み込む方法。

Natsuki Yuyama — Mon, 23 Apr 2012 09:18:41 +0000

WordPressでjQueryを使いたいと思った時に、自分でサイトからダウンロードをして..という作業は不要です。
なぜなら、wordpressにはデフォルトでjQueryやprototypeなどが入っているからです。

それを知らずに、いつも通り読み込もうとしていた私:(

WordPressではどうすればいいかというと、

という記述を＜/head＞の直前に書きます。
二行目は、自分で用意したjsファイルです。

ブラウザで確認すると、

というかんじで、jQueryが追加されています。

また、wordpressではコンフリクトをおこさないために、”$”ではなく”jQuery”をつかっているので、
コードのなかの”＄”は”jQuery”に置き換えましょう。一斉置換すると楽です。

jsを外部からではなく直接書き込みたい場合は、
＜?php wp_head(); ?＞のあとに書いていきます。
（それ以前に書くと、jQueryが読み込まれるまえに実行してしまうことになります。）

これで完了です！

画像やテキストをランダム表示させる簡単な方法

Kazuhiro Sato — Mon, 16 Apr 2012 11:28:40 +0000

バナー広告などでよく目にすると思いますが、ページを読み込む度に違う画像やテキストを表示させる簡単な方法を自分なりに整理をしてみたいと思います。

Javascriptを使用しますが、仕組みはシンプルです。

Javascript内に画像やテキストの記述をして、表示させたい場所を指定するだけで実装出来てしまいます。

以上です。
Javascript内に記述した6つの画像リンクの候補から、ランダムで選ばれてhtmlに表示させることができます。複数表示しても、重複することなく表示することが出来ます。

簡単ではありますが、整理していきます。

まず変数の宣言です。

var randObjects=[
'',
'',
'',
'',
'',
''
];

表示させたい画像やテキストをすべて記述します。この候補内からランダムで選ばれます。また、数が多くなるようなら、外部Javascriptファイルに記述して、htmlファイルに読み込ませる方法でもよいと思います。最後尾6番目のカンマ（,）は不要です。IE8以下のブラウザではエラー表示されます。

次に関数の定義を行います。

function randWrite() {
var rr = parseInt(Math.random() * randObjects.length);
document.write(randObjects.slice(rr)[0]);
randObjects.splice(rr,1);
}

ここでランダムで選ばれた文字列が重複しないように処理をして、画像やテキストを書き出します。
2行目でrandObjectsの文字列をランダム取得します。
3行目で抽出、書き出します。
4行目で重複しないように削除します。

最後にhtml内の表示させたい場所を指定します。

定義した関数を記述します。

これでランダムな画像やテキストの表示ができると思います。

これから画像をランダムに表示しようと考えてる方や試行錯誤してる方にとって、ほんの少しでも参考になればと思います。

携帯で撮った写真をおしゃれなポラロイド写真風にする方法。レベル：☆

Natsuki Yuyama — Mon, 27 Feb 2012 15:51:19 +0000

先日お仕事で公園に行く機会がありました。
毎日ほとんどパソコンの前ですごしているので、新鮮で良いですね！

今回は、上の写真にように、ふつうの写真をポラ風にする方法をご紹介します。
この写真も、普通の携帯で撮ったものをちょっと加工しただけです。

今はスマホアプリなんかでも出来ますが、
自分でも簡単にできちゃいますよー:)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

必要素材：ポラ風にしたい画像
アプリケーション：Photoshop CS4（他のバージョンでもOK）
所要時間：15分程度

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

１：新規作成から好きなサイズのキャンバスを作ります。（とりあえず500×500くらいあれば十分です）

２：長方形ツールで、四角をひとつ、その上に一回り小さい四角をもう一つ描きます。

わかりやすいように色をかえてますが、大きいほうの四角がポラの白い枠になります。
色はあとで変えられるので今は何色でも大丈夫です。

３：メニューバーの、ファイル→配置　で、写真を配置。
写真のレイヤーを選択、右クリック→クリッピングマスクを選択。

で、こうなったはず！

４：白い枠を作っていきます。大きいほうの四角の色を白に変えます。
下の画像のこれ！の部分をダブルクリックで色変更できます。

５：大きい四角のレイヤーが選択されたまま、メニューバーの、レイヤー→レイヤースタイル→ドロップシャドウ　を選択。
下の画像のように設定します。

６：今度は小さい四角のレイヤーを選択します。メニューバーの、レイヤー→レイヤースタイルから、内側シャドウを選択。
下の画像と同じように設定します。

こんな感じになったでしょうか？
あとは、メニューバーのイメージ→トリミングで余白を消して保存すれば、
ポラ風画像の完成です。

ちなみに冒頭の画像は、白枠にすこしくすんだ色を選んで紙のテクスチャを加えたり、
画像部分にトンネルエフェクトをかけたりしてレトロ風にしています:)

そのまま貼りがちなブログ用の写真も、少し手を加えてみれば、
もっと素敵なブログに仕上がると思いますよー。
ぜひやってみてください。

Webを最大限に活用するのに必要な4つの取り組み

Yutaka Moromizato — Mon, 20 Feb 2012 15:00:22 +0000

規模に関係なくWebを上手に使いこなすことで、めざましい成果を上げている企業の成功談を聞くようになって久しいですが、ここでは、Web（Webサイト）の活用するにあたって必要な取り組みを４つにまとめてみました。

また自社でWeb内製部隊を持たず、外部に発注している企業をモデルケースとしています。

取り組み１．費用対効果を考えましょう

当然の話ですが、Webサイト制作をご依頼いただくお客様の大半は、そのWebサイトを通じて何かしらの成果を求めていらっっしゃいます。

Webサイトの制作費が、1万円でも100万円でも1000万、1億円でも同じです。

成果の在り方は様々だと思います、ただし、最終的にはお金に換算できるものだと思っています。

すぐにお金として回収できるECサイトもあれば、企業の営業活動を促進／推進するコーポレイトサイトや、サービスサイト。
一時的な広告効果を高めるプロモーションサイトもあれば、短中長期の多様な点で顧客とコミュニケーションを形成するTwitterやFacebookなどのSNSもあります。

どういったWebであろうと、投資に対していくらのバックがあるのかを、よくよく吟味しなければなりません。

同業他社のデータを集めたり、似たようなケースを調べたり。徹底的に調べてみましょう。

また、売り上げには直接的な効果が見えなくても、他部分での効果が期待できるものがないかを検討してみましょう。

例えば、「従業員の作業効率が20％上がる」なども売り上げには出てこない成果の在り方です。

取り組み２．情報を更新／発信しましょう

「とりあえず今はホームページを持っていて当たり前だから・・・」
「なんか流行っているから・・・」

という理由で自社サイトを作られた企業が結構多いです。

大抵の場合、その企業のホームページは作った当時から放置され、お知らせ欄の日付が3年前のまま・・・とか結構あります。

更新されていないということは、そのWebサイトが企業の営業活動の何の助けにもなっていないという事実を物語っています。

流行に乗っかるというのは、ある意味正しい取り組み方だと言えますが、先行者利益を取れるのは極僅かです。
もし注目されたいのであれば、他社よりいち早く取りかかることが重要になります。

最初思うほどの反響を得られなかったとしても、エンドユーザーに気に入られように努力を続けることが重要です。

また、Webサイトであれば、情報が更新されている、ということ自体がSEOの評価対象になります。これも実はかなり重要です。

取り組み3．アクセス解析をしましょう

アクセス解析をしていない企業が多いことにも驚かされます。

折角作ったWebサイトなのに、

毎月どれくらいの人が見に来ているのか
どんなキーワードで見に来ているのか
どんなサイトから見に来ているのか
どのくらいのページが見られているのか
実際にお問合せに繋がった人がどれだけいるのか
どのページが一番見られていて、どのページで離脱しているのか

以上のことさえ知らなかったりします。

上記のことが分からなければ、更新する気も起きないのかもしれません。

なので、アクセス解析することと更新することはセットで考える必要があります。

例えば、ブログで記事を書いたとして、その記事が実際どれだけの人に見られたのかを知れたとします。

「記事Aはひと月で10,000PVを稼いだ、記事Bは50PVもいかなかった、この違いは何だ？」

「記事Cは3ヶ月経ってもアクセスがずーっとあるな、何でだろ？」

こういった疑問から、比較検討をしたりして、

「もしかしら、今ユーザーが求めている情報や話題はこういうことかな」

とか、

「こういう切り口の記事にはアクセスが集まりやすいな」

とか、よりユーザーから支持されるためのヒントや示唆を与えてくれるのがアクセス解析なのです。

まずはGoogleの無料アクセス解析ツール「GoogleAnalytics（グーグル解析ツール）」を導入することをお勧めします。

取り組み4．分からないことがあれば分かるまで聞きましょう

「Webって何だか分かりづらいな・・・」

「インターネットとか言われてもよく分からんのよ、本当のとこ」

「横文字ばっか使われて、さっぱりだ」

というお話をお聞きすることが多いです。

このケースでお客様がとられる行動は2パターンしかありません。

自分の言葉で理解できるまでとことん追求する
理解できないのであきらめる

自分の言葉で分かるまで、きちんと説明を要求しましょう。

自分たちにとって専門外のことを聞くことは恥ずかしことではありません。

そして、横文字を毛嫌いせずに一からお勉強するつもりで貪欲に吸収していく姿勢が大切だと思います。

さいごに

今回は基本的な取り組み方をまとめました。

それぞれ細かく言えば、もっと色々とあるのですが、それは各々でまとめたいと思います。

実際やってみると、結構大変かもしれませんが、少なからず企業活動の助けになると確信していることだけをまとめましたので、少しでも役に立てれば良いなと思います。

グラデーション

Natsuki Yuyama — Mon, 13 Feb 2012 10:48:33 +0000

去年の１１月末、自宅から見えた朝焼けです。
色調補正などの加工は全くしていません。
空のグラデーションと、周りの建物が影になっているコントラストがとてもキレイで、
日が昇るまでの間かなりの枚数撮ってしまいました。
作ろうと思ってもなかなか出せる色じゃないですよね。

こういう自然の色とか形とかも取り入れて、デザインに生かしていきたいです。

改めて読んで”良かった”サッカー日本代表監督の記事

Yutaka Moromizato — Mon, 06 Feb 2012 11:17:52 +0000

過去に書いたブログを見返していた時に、以前取り上げたある記事が目に止まった。

約2年前、ザ・ハウスの中でＷｅｂ事業部を立ち上げて、独立を目指していたときに読んだ記事だ。

当時の僕は、右も左も分からない状態だった。
まだザ・ハウスという会社の中で一事業部でしかなかったので、社長としての自覚はなく、腹を括れていなかった。

そんな折に読んだ記事がこれ。

当時感じたことと、今の自分がどう違っているかな、というのを知りたくて読み返してみた。

岡田武史氏が語る、日本代表監督の仕事とは

当時は、「この人すごいな」とか「こんな風になれるのだろうか」という感想しか持ち得なかった。

改めて読んでみて、「それは分かるなー」と思うことがたくさんあった。
考え方、配慮、割り切り、心の持ちようなど全てにおいて。

「何かを背負うヒト」という点において、日本代表監督も企業の経営者も変わらないんだな、と。

例えば、今採用を行っている。

面接で色々な話を聞いて、能力や資質などを検討して、実際現場でどのくらい活躍できるかをイメージする。

でも、実際はその通りになることの方が稀である。

大抵、面接でヒトは嘘をつくからだ。

面接で、その人の全てを理解することなど不可能なのだから、ある種、”勘”でやっているところがある。

AさんとBさん、どっちにするか。どっちも入れるか。

Aさんが経験者で、Bさんは未経験者。

実務能力で見ればAさん。でも、BさんにはAさんにはないポテンシャルを感じる。

Aさんは人当たりがよいから即現場でも活躍できるかも。

Bさんは口べただから、大丈夫かな。

それとも二人とも一緒に入れちゃうか。

他の社員との組み合わせでどうなるかな。

それぞれどういう面で成長していくだろうか。

色々考える。
ただし、採用は論理的に頭で考えても分からないことだらけだ。

で、最後は”勘”で決める。

頭で考えても分からないことを決めるのが「決断する」ということ。

死ぬほど頭で考えて、それでも分からないことを決断するには、無心になることが重要だと監督は言っている。

「嫌われたくない」とか「あいつこう思うだろうな」とか「上手くいかなかったらどうしよう」とか一切かなぐりすてて、無心で決める。

ただ一つ、それがチームに勝利をもたらすかどうかという1点に集中して。

といっても、簡単には無心になれないのが人間。

日本代表監督もヒトの子、企業の経営者もヒトの子だから、やっぱりヒトから嫌われるようなことは避けたい、好かれていたい。

そこで一瞬の判断が鈍る。それが致命傷になる。

これはすごくよく分かる、僕も判断に鈍って、痛い辛い想いをした過去がある。

ただ、けっこうな致命傷をうけても、ギリギリで生き残れれば、もう下はないのだから足がつく。

ある意味、開き直れる。

そういう経験が「今に繫がっているのだな」と監督の記事を読み返して感じられたのは、自分には大きな収穫だった。

ということで、今日のまとめ。

何かに迷ったときは、「無心になってみる」こと。

PHPに詳しくない私がWordPressのテンプレートを作ってみる【その１：デザイン】

Natsuki Yuyama — Sat, 28 Jan 2012 06:47:45 +0000

今度このYOUEブログをリニューアルすることになり、只今デザインを作成中です:)

WordPressのデザインテンプレートは前から作ってみたいと思っていたので、
この機会にちょっと作ってみようとおもいます。

今回は練習に、個人ブログのテンプレートを作成します。

■用意するもの
デザイン
WordPress
PHPとMySQLが利用できるサーバー

■完成までの流れ
１）デザイン作成
２）HTMLでコーディング
３）コーディングしたページをWordPressの形式に置き換える

です。

まずはデザインを作ります。
作るページは、最低、

・トップページ
・記事ページ

の２ページがあれば良いようです。
WordPressをインストールしたときのデフォルトのテンプレートを参考にしながら、
こんな感じにしました。

・トップ

・記事ページ

記事が読みやすいように、できるだけシンプルにしました。

これを通常のwebサイトと同じようにHTMLとCSSで組んでいきます。

次回へ続きます。

jQueryを使ってランダムに読みこまれた外部ファイルでスライドショーする方法

Yutaka Moromizato — Mon, 23 Jan 2012 11:02:45 +0000

タイトル分かりづらいですね。すみません。

お仕事でこんなご要望を頂きました。

１．TOPページのメイン部分をフェードインフェードアウトさせて欲しい
２．アクセスごとに表示されるものがランダムで切り替わるようにして欲しい

１．については、スライドショーを実現させるだけなので、適当なjQueryプラグインを探してきて実装させました。

２．については、random関数を用いればできそうだ、ということだったのですが、複数あるファイルをランダムで読み込み、更にjQueryスライドショーを稼動させる、というのが課題でした。

まずはファイルを読みこんでみる

jQueryの命令文で「load」というのがあります。

これを使うことで、外部ファイルをインクルードさせることが可能になります。

早速やってみます。

まずは、jQueryを読み込みます。（ダウンロードはこちらから）

ダウンロードしたjQueryはヘッド内で読み込んでおきます。

次に外部から読みこむファイルの展開先と、読みこむファイルを指定します。

$(function(){
　$(“#hoge”).load(“hoge.html”);
});

上記では、「#hoge」へ、読み込んだ「hoge.html」を差し込むことになります。

HTMLはブランクでも大丈夫です。（Web標準を気にされる方は他の方法を考えましょう）

これだけです。

jQueryで、SSIならぬCSIが出来たと思います。

ランダムで読みこむファイルを変える

ランダム関数で、複数ファイルの中からランダムで読みこむファイルを切り替えます。

$(function(){
　var ran = Math.floor(Math.random()*2)+1;
　$("#hoge").load("ran"+".html");
});

変数”ran”に整数を代入します。この場合、1か2が代入されることになります。
数値を代入された変数”ran”を”.html”の前にくっつけてloadさせているので、「1.html」もしくは「2.html」が読みこまれることになります。

ランダムで読み込んでjQueryスライドショー

本日の本題です。

$(function(){
　var ran = Math.floor(Math.random()*2)+1;
　$("#hoge").load(
　　ran + ".html",
　　null,
　　function () {
　　　$("#transitionEffect .effectContainer").fadeTransition({
　　　　pauseTime: 3000,
　　　　transitionTime: 1000,
　　　　ignore: "#introslide",
　　　　delayStart: 0,
　　　　manualNavigation: false,
　　　　pauseOnMouseOver: false,
　　　　createNavButtons: true
　　　});
　　}
　);
});

フェードインフェードアウトのプラグインは適当です。
loadの第3引数部分（7行目～15行目）が、通信完了時のコールバック関数になっているので、ここにフェードインフェードアウトに必要な設定を書いておきます。

サンプルはこちら

サンプルファイルもダウンロードできます。