比花知春 × ポンコツ
年末に向け我がINDIVIDUAL LOCKERのPVも急上昇。皆様ありがとうございます。
komimemoも見る人増えているので、お知らせなど。
……………
以前、全画面背景スライドjQueryについて書いてましたが、そのWebサイトができました。(というか一ヶ月前に出来てましたが)
比花知春さんという福岡を拠点に活動されているシンガーソングライターのサイト！住友林業CMイメージソング三代目シンガーとして歌声NOWオンエア！かわいいな！
比花知春 Higa Chiharu Official Website : http://higachiharu.com/
で、このサイトの制作はPoncoz creative。通称ポンコツ。
福岡在住クリエイターによる面白課外活動。リーダーの宮崎くんはももいろクローバーZ、通称ももクロのツアーグッズとか藤井リナのカレンダーとかデザインしてるイケメン君。メンバーにはMdN書籍の著書たくさんのlolo66高野さん(現在も新たに執筆中)などなど、ワンダフルな面々。
…と、食いついてもらえそうなプロフィールをチラ見せしつつ、ポンコツのWebサイトをご覧くださいませ。(一ヶ月前を最後に休止中ですが)
Poncoz creative : http://poncoz.com/
そんなポンコツのスタイリスト、kitchen of clieのクロカワ君が、西日本最大級のヘアメイク&スタイリングイベント ASIA BEAUTY CONGRESS 2011 にてHEAVENS賞受賞！スバラシイ！(一ヶ月前の事なんですが)
以上、お知らせでした。
…………一ヶ月前ばっかりやん！
画像の転載・転用を禁止します。
©JORKER ENTERTAINMENT/©Poncoz Creative/©松本庄太郎(写真)
背景画像をブラウザ全画面使ってスライド表示させるためのあれこれ
前々から使ってみたかった背景画像全画面スライド表示できるjQuery。
ちょっとお手伝いしてるサイトで試しに使ってみることにしたので紹介がてら私的まとめ。サンプルサイトはTEE STORE終了とともに遊んでるドメインindividuallocker.netにて。
サンプル: http://www.individuallocker.net/
かつてWebサイトの背景画像全画面表示といえばFlashだったわけですが、最近はjavascriptでやれちゃったりします。検索すればいろいろ出てきますが、中でもわかりやすかったのが『maxImage Scaling Plugin』。スライドできちゃう優れもの。
maxImage Scaling Plugin: http://www.aaronvanderzwan.com/maximage/
デザイン的には、ブラウザサイズによって画像サイズが可変するので、文字配置はおのずと四隅に寄せるのがベターになるわけですが、一箇所の隅に固めるよりもフッター部分を分離させて下部固定させるのが良いなと思い、サンプルのようなhtml/cssにしました。
確認済ブラウザ: Mac (Chrome, Safari, FireFox) / Win (IE7, Chrome)
ただ、全画面にする意味というのは、その背景画像を大きく見せて印象に残すことにあるわけで、デザインよりも写真のクオリティが重要になってきます。この場合のクオリティとは『何を印象に残したいのか、演出したいのか』ということになるのですが、解像度的なクオリティを落としたくないというのも正直なところ。
プロならPhotoshopを使って上手く減色すればいいかもですが、もっと手軽にJPEG再圧縮して容量を軽くできるWebサービス『JPEG mini』が便利です。
JPEG mini: http://www.jpegmini.com/
色数にもよりけりですが、50%ぐらいは圧縮されます。
全画面に使う写真の大きさとサイズですが、大きさは横1200px〜1600pxぐらいでサイズは200KB以下(できれば100KBぐらい)を目安にすると良いと思います。思い切ってモノクロにするとグッとサイズも落ちますし、文字の色などにも悩まなくて済みます。
TwitterやFacebook、mixiなどのSNSでコミュニケーションを深めるのが普通になり、ホームグラウンドであったはずの自分のWebサイトがすっかり放置状態だな〜という人も多いと思います。そんなとき、この全画面表示を使ったトップページで自分の世界観を演出して、あとはTwitterやFacebookへと導くのも一つの方法かなと思いますです。
クーポン集客とアタッター
以前Twitterを使ったINDIVIDUAL LOCKER Tシャツプレゼントに使用した「アタッター」がiPhoneアプリになりました。今回もデザイン担当しましたので宣伝。プレゼント企画への参加がより簡単・手軽に行えます。iPhoneユーザーは是非使ってみてね！
アタッター (for iPhone): http://itunes.apple.com/jp/app/id393523703
直接的集客のクーポンと、リピートに繋げれるアタッター
最近、共同購入クーポンサービスが流行してますよね。美容・飲食はもちろんのことキャバクラにゴルフ場チケットと特化したサービスもあり様々。いずれにしても要の部分はソーシャルメディアを活用していることでしょうか。
中でも驚異的な割引率で日本でも急速に浸透してきている「GROUPON (グルーポン)」。先日会ったヘアメイクさんによると福岡でも活用してる美容室が増えてきているとか。それに合わせてか、美容材料業者がiPadをタダ配ったりしてるそうなので、かつての美容業界に見られたクーポン系紙媒体への過剰投資時代も終焉と言ったところでしょうかね。
ただ、割引率で釣る直接的集客のクーポン型サービスは、リピートを確保するには他のアクションが必要。そこを補完するのがTwitterなどのソーシャルメディアなのかなと。以前ならショップブログがその位置だったのかもしれませんが、即応性と伝播性、そしてなんと言ってもその気軽さには敵わない。集中的なクーポン型サービスと、Twitterをベースにフォロワーとの関係を深めることができるアタッターと、短期長期と目的に応じて使い分けるのは、集客からリピートへの流れに有効な感じがします。
もちろん最大のリピーター確保の条件は実店舗なり商品の力なわけですから、リアルがおろそかになったら本末転倒ですけどね。
Twitterを使ったプレゼント企画はアタッターWebサイトから: http://atatter.jp/
年末にかけアクセス急増のINDIVIDUAL LOCKER。年内にまたプレゼント立ててみるかな…と思ったけど、リピーターの目的はやはり画像の質と量だよね！がんばりますですハイ。
………
ちなみにアタッターの企画・開発を行っているイラスティックコンサルタンツ(株)は、先日モリサワからリリースされた書体アプリ「文字の手帖01」の企画・開発も担当されているそうです。グラフィックデザインに興味のある方には特にオススメ。アプリデザインも秀逸！
文字の手帖01: http://itunes.apple.com/jp/app/id396832421