仕事をする相手の見極め方

フリーランスでWebサイトがあると様々な人から問い合わせや見積もり依頼が来ます。
その中で継続できるクライアント、できないクライアント、相手にしないクライアントに分かれると思うのですが自分なりのその見極める手段を書いておきます。

とりあえず会いましょう、打ち合わせしましょうというクライアントは避ける

これはクリエイティブ業界では既に鉄板になりつつあり、まず会ってどんな人なのか探ってみよう、どんなことができるのか聞いてみようというスタンスのクライアントは、案件があってそれを完遂するために仕事相手を探しているわけではないので、「会う=仕事の受注につながる」という流れを作りづらいケースが多いです。
こちらが忙しいかどうかを考慮しているクライアントは最初のコンタクトで事細かに内容を送ってくれる場合がほとんどなので、自分は「とりあえず」とわかる場合に「具体的な案件があった際にご連絡ください 」と返信することが多いです。

見積もりを依頼される場合は、まず予算と納期を聞く

相手がどのような状況で見積もりを取っているかわからないので、まずは案件が実際にあるのかどうかを判断する上でも予算とスケジュールを聞き、その返事をもらってから見積もりを行うようにしています。また相見積もりを取っている場合のケースを、

  1. フローとして相見積もりが必要とされるケース
  2. 安いところで決める前提のケース
  3. 相場観がわからないので複数比較したいケース

の3つに分類すると、
1.は費用感がわかっていて、具体的な返答を期待している場合が多いので、金額以外の工数やフローについて明示すると受注につながる可能性が多い印象があります。
2.はコスト面を重視するとともにリスクヘッジを軽視したり、納期が現実的でない場合が多いのでその前提で対応する必要があります。
3.については、何がどの程度コストがかかり、どのようなスキルセットでやるかなど、わかりやすく提示することで受注につながりやすくなり、信用が得られれば継続を見込めるクライアントになる可能性が高いです。
上記3つを念頭に見積もりの内容や出し方を判断するとともに返事をもらう際に内容を引き出せるかどうかで受注できるかどうかの判断もつけやすくなると思います。(断るという判断をするかどうかも大事) 

経験則から来る直感は当たる

たとえば、1年に1度問い合わせが来て、メールなどのやりとりしていると突然途絶えたり、相手が個人だからと夜なべ前提のスケジュールを要求したりといったことから、とりあえず作ってください、できたものを送ってくださいというものの、納品・請求書が送付されても費用を払わないクライアント等、世の中には不条理な条件でフリーランス相手に仕事を依頼するクライアントも少なからず存在します。

何度も経験していると無意識にその特徴に当てはまるケースが出てくると迷いが生じたり、これはやめるべきという 選択肢が出てくることがあります。その場合はできる限りリスクヘッジを行い、一度断っても、相手がこちらに対して、何か評価できることがあれば再びコンタクトを取ってくれるので、そのときが来ることを信じてこの場は断る。という判断も大切です。

相手が仕事相手として不安な場合はfacebookなどで知り合いがいるか、知っている企業か、といったところや、必要であれば帝国データバンクなどで手短の業績を見て判断することも大事です。自分自身は実績とWebサイトの内容を見て、会社の実態があるか不透明な場合は業績を調べるようにしています。

※随時文字修正します。

MacでSVNを使う場合の方法(Eclipse)

最近はバージョン管理などはGitで行うところがほとんどと思うのですが、コストをあまりかけずにSVNを使いたい場合にEclipseベースで簡単に導入できたのでメモ。

大まかな手順は

  1. Eclipseを動かすためのJAVA SDKをインストール
  2. その後Eclipseをインストール
  3. SVN関連のコンポーネントを追加(参考元
その他、Xcodeを入れておくとターミナルからSVNを操作できます。
OS X El Captainの場合、Eclipseを使う際にJAVAのSDKが別途必要になるのですが、それ以外は特に難しいことはなくNodeなどを入れるよりも簡単にできると思います。
 

 

OS X El Capitanへのアップデート後のNode.jsあれこれ

Office2016がOS X10.9に対応していなかったり、勢いでOS X El Capitan入れてしまったりしたついでにフロントエンドの開発環境とNode.js周りにも手を入れようとnvmではなくnodebrewをインストールして動く状態になったので、その際に起きたトラブルの解決方法などをメモ。

参考にしたサイト
node.jsのversionを管理するためにnodebrewを利用する 
nodebrew で Mac の Node.js 環境をスッキリさせた

クリーンインストールでない場合は一度Node.jsを削除、その後nodebrewをインストールする手順なのですが、Node,jsをどこからインストールしたかでNode.jsやnpmなどがいつまでも居座ってくれたりしてしまいます。

自分の場合はhomebrewで最初にNode.jsを入れてしまい、Node.jsは入れ替えられてもnpmがうまくいかず、node周りを一度unlinkしないといけませんでした。
brew & node関連は上のリンクとこの辺りが参考になりました。
http://apple.stackexchange.com/questions/65714/brew-link-node-creates-removes-different-number-of-symlinks-when-repeated

その他ruby / gem /compassのアップデートでつまづいたりしましたが、このあたりを参考にインストール。

これで終わりかと思ったらgulp / grunt でwatchがエラーで終わらない状態に。
どうやらファイル数?に制限がある設定らしく、それを.bash_profileに

ulimit -n 1024
ulimit -u 1024

を追記して無事動くようになりました。

nodebrewはすごく操作しやすいのですが、バージョンごとに入れると1つあたりの容量が600MBぐらいになったりするので容量に余裕がない場合は注意が必要です。

 

 

 

WordPressのプラグイン、Thumbnail For Excerptsで画像がない場合の処理をjQueryで行う方法

WordPressでサムネイルを出力できる便利なプラグイン「Thumbnail For Excerpts」で画像がない場合にjQueryをつかって画像を指定したものに書き換えるスクリプトを書いたのでそのメモ。

See the Pen memo : WP Thumbnail For Excerpts by Kentaro Kitagawa (@cdbk) on CodePen.

仕組みはeachで画像タグを探し、src属性がない、もしくは値がない場合に指定した画像のアドレスに書き換える処理を行っています。
セレクターを工夫すると処理が早くなったりすると思うのですが、今回は一番楽な方法にしました。

前回のタイポグラフィのjQueryスクリプトを少しオシャレにしてみた。

See the Pen Typography 2 “span” by Kentaro Kitagawa (@cdbk) on CodePen.

前回公開したタイポグラフィのjQueryに少し手を加えて、クラスをつけた要素ないのも時に自動でSPANを追加して、タイポグラフィのモーションをつけられるようにしてみました。

試しにこの記事につけているのですが、他のページでつけてみたりしたところ、全部処理が終わるまでに10秒以上かかってしまったため、実用的ではないと思い、この記事ページだけにとどめることにしました→CodePenで使えそうな感じのサンプル作りました。

jQueryをつかって1文字ずつランダムに表示させるサンプル

このサイトのヘッダーで使っているタイポグラフィーのアニメーションのサンプルをcodepenに載せてみました。

See the Pen Typography by Kentaro Kitagawa (@cdbk) on CodePen.

わかりやすいよう1文字ずつ<span>で囲い、それにクラスをつけて処理を行っているのですが、SEOの面などできになる場合は1文字ずつ<span>をjQueryなどで追記したほうがよいかもしれません。

仕組み

変化させたい文字にクラスをつけ、前から順に配列に格納、配列内をシャッフルしてから1文字ずつ表示させるアニメーションを実行させるようにしています。

IE8対応のためにやっていること・気をつけていること

このサイトはIE8は非対応でアクセスするとヒストリーバックで戻るようにしているのですが、仕事上IE8の割合が10%を切っても対応が必要な場合があったり、すでに組み上がっているサイトをIE8に対応させたりといったことが多々あるので、メモがてら少し記事にしてみることにしました。

HTML5以降で使用されるタグを避ける

<header>や<footer>、<main><section>といったHTML5から使われ始めたタグを使わない。既に組み上がったHTMLでIE8に対応させる際は、HTMLだけでなくCSSも変更が必要になる。

スマホやタブレット専用のサイトであればHTML5のタグを使っていても問題が出ることはないけれど、デスクトップ向けの時はHTML5からのタグは避けたほうが良い場合が多い。

レスポンシブレイアウトでIE8に対応させる方法

media queriesでデバイスやウインドウサイズを元にスタイルを変更している場合は、JavaScriptでその時々によってクラスを出力するといった方法をとる。css3-mediaqueries.jsを使う方法もあるけれど、確実じゃない場合が多いため、私はクラスを出力、そのクラスごとにCSSを指定することが多いです。

避けておきたいCSSのセレクターと対処法

何かと便利な擬似セレクターもIE8で使えないものがあるので、その際はクラスで:first-childにあたるところには.firstchild、last-childは.lastchildといったクラスをつけるようにしています。これもjQueryなどを使えば奇数のブロックにのみクラスをつけるといったことが可能なので、動的に出力する場面でもクラスを割り振ることで再現しやすくなります。

困る前にPIE.jsを使ってみる

透過や角丸といったところは画像にしてしまう前にまずはPIE.jsを使ってみる。

たまに適用されない場合もありますが、ほとんどの場合は適用する要素にCSSのposition:relativeを指定すると反映されます。

 

昔のIE6への対応と比べるとIE8への対応はものすごく楽なのですが、マークアップの表現の幅が広がっている今、求められるCSSやレイアウトの方法がIE8でそのまま使えないことがネックになることが多いので多少なりとも、役に立つことがあれば加筆したいと思います。

jQueryとPreloadJSをつかってページのローディングを実装したときのサンプル

このサイトで使っているPreloadJSを使ったローディング機能のサンプルをCodePenに掲載しました。

PreloadJSは読み込む内容を配列で格納して処理を行う必要があるので普通は静的にJSON形式のリストを用意するのですが、それだとページを更新するたびにJSONも更新しないといけないのでIDを付与した画像をjQueryで配列に格納する処理を行ってからローディングするようにしています。

詳細は下記サンプルを

See the Pen ZYRVOG by Kentaro Kitagawa (@cdbk) on CodePen.

2015年版のデザインにリニューアル

2015 02 20 0 42 33

ようやく2015年版のデザインをリリースできました。

前のブログにも書いたのですが、今回はできる限りWordPressの管理領域から離れて、PHP/JSベースのシンプルな構造に変更しました。

現状、ページ毎に単体でハッシュでロードしたりといったことはしておりませんが、ページ読み込み時にPreloadJSでプレローディングするように一応しています。

今回は完全にレスポンシブレイアウトでスマートフォンにも最適化。Webフォントも幾つか使い、いわゆる画像テキストを減らしました。

まだ少しレイアウト、体裁がおかしいところはありますが、徐々に整えていく予定です。

SEM向けの広告ページなども幾つかあるので、そのあたりも順次更新、仕事の依頼はお問い合わせフォームもしくはfacebookでいただければスムーズに可否や応答ができると思います。

最近、営業メールは控えてくださいと書いていてもほとんど減らない&メールを返事しても回答が来ないところが多かったのでメアドなどは外しました。

年賀サイトに載せたスロット型おみくじの仕組み

2015年の年賀サイトに載せている、スロット型のおみくじ、

Slot sample 01

スロットのようなことを以前JS(jQuery)でやろうとした際、画像をつかい、上下にアニメーションでループするサンプルなどがネットを探しても見つからなかったので諦めていたのですが、いい状態にうまくできたので掲載しました。

今回のスロットは

・ループをどのようにして実現するのか、
・開始、停止をどのようにしてスムーズに導くか、
・リアルな動きの再現方法は?

というところに着目して作っています。

ループをどのようにして実現するのか

Webという特性上、3Dの円柱を横回転させるようなアニメーションを再現するのはとてもコストがかかってしまうので、表示するエリアのパターンを並べ、それを反復させることで無限ループのような錯覚を起こし、再現するようにしています。

開始、停止をどのようにしてスムーズに導くか

スタートした際にすでにストップするまでの時間が決まっている場合は1パターンのアニメーションを用意するだけで解決するのですが、ユーザーがスタートとストップのタイミングを決めるものなので、スタートからループまでのアニメーション、ループ時のアニメーション、ループからストップまでのアニメーションと3パターン用意して実装しています。

リアルな動きの再現方法は?

実際に無限ループ、回転しているように見せるために背景にグラデーションを入れるとともに、ループ中にストロボ現象をアルファの制御で引き起こすことで逆回転のように見える錯覚を再現しています。また、ストップの際に1つ先まで進んでから戻るようなアニメーションにしています。

今回のスロットをjQueryのプラグインのようにできればいいのですが、実装するサイズや内容の数でレイアウトや幅が変わってしまうので今のところはプラグインにはしておりません。

2015年 年賀サイト