jQuery Mobileを使ったスマートフォン用壁紙ダウンロード用サイト『WALLPAPER COLLECTION for スマートフォン』つくりました!

スマートフォン用の壁紙がダウンロードできるサイト、『WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery mobileを使用しています。
スマートフォンをお持ちの方、ぜひぜひアクセスしてみてくださいー!!

スマートフォン用の壁紙がダウンロードできるサイト
WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery Mobileを使用しています。

サイトのベースはWordPress+jQuery Mobile

いつものようにベースはWordPressを使っていて、WordPress+jQuery Mobileでできています。

ちょうどPC用の壁紙ダウンロードサイト壁紙カレンダーのガラケー/スマートフォン版を作ろうと、素材をちょこちょこ準備していたところにちょうど良く使ってみたかったjQuery Mobileが結びついた感じです。

画像を指定サイズに切り出すPHPの処理は壁紙カレンダーのものをアレンジすればすぐできそうだったのと、画像の加工、WordPressへの登録等はすでに行っていて、あとは表示部分を整えればいいだけになっていたのもあり、jQuery mobileを使ってのフロント部分の実装はあっという間にできました。

WordPress+jQuery mobileおそるべし。

作った動機と目的

今回の作った動機は

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

×

スマートフォン対応を勉強しておきたかったから

です。

新しいことを勉強するときはただ勉強するだけじゃ、ちーっとも覚えられないので、「とりあえずやってみる」っていうのを大事にしています。

た だやってみても表に出ないんじゃやる気があんまり出ないので、「勉強ついでに手間がかからずに作れて、管理も手間がかからないもので、やりたいこと(学び たいこと)がしっかり理解できて、且つ少しでもいいから誰かの役に立つ」ものを探し出して一応サービスとしてカタチになるようにしています♪

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

もともとPC用の壁紙ダウンロードサイトの壁紙カレンダーはPhotoshopの練習で写真加工したり、色味を強く現像してみたりいろいろ試しているのですが、たまーに「おぉ!これは!」と思うものができるのですが使い道がないのでもったいないので何かに使えないかなぁと思いつき、カタチにしたのですが、PC用の壁紙って横長な訳ですよ…!

縦長の行き場がなかったので、今回スマートフォン版で消化することができました☆(というほど世に出せるようなたいしたものではないのですが…)

スマートフォン対応を勉強しておきたかったから

スマートフォン対応って今後お仕事で増えてくるだろうなと思ったので今のうちにしっかり理解しておきたかったので


はじめてのjQuery Mobileでとても参考になったサイト

今回、はじめてjQuery Mobileを使用するにあたり、わかりやすくて参考になったサイトをご紹介します


今後の課題

  • 現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する
  • トップページの画像がスライドするところのアニメーションをCSS3でやる
  • 選べるデザインを増やす
  • スマートフォンを…

現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する

現在発売されているスマートフォン(Android端末)のスペック一覧をH2Oスペースのたにぐちさんがまとめて下さっていて(すばらしいまとめありがとうございます!!)→Android端末のスペックをまとめてみています

これをみながら一旦はすべて対応したのです…が。

壁紙のサイズ=画面解像度ではない機種がある

壁紙のサイズ=画面解像度ではない機種があることがわかり。

GalaxySは画面の解像度は480px x 800pxなのに壁紙のサイズは 960px x 800pxらしい…!ということが発覚したのです。

もしかしたらほかにもそんな機種があるのかも?と、今は私のほうで壁紙のサイズがわかった機種、iPhone,iPad,GalaxySのみ対応にしています。

いろいろ調べてみたのですが各機種の画面解像度は書いてあっても、壁紙サイズがあんまり書いてないのです…!数値さえわかれば1分で対応できるのに!!><

この機種を使っていて、この機種の壁紙のサイズはこれだよ!とか壁紙サイズの一覧があるよ!なんて情報をお持ちの方はぜひお知らせいただけるとうれしいです;;

トップページの画像がスライドするところのアニメーションをCSS3でやる

トップページのスライドしている画像の部分、今はjQueryを使って実装しているのですが、携帯端末にはきつい&何回かページ遷移してもどってくると消えてなくなるwのでCSS3アニメーションでなんとかしたいなー、と思っています。

ただなんかもう全っ然やり方がわからないので、twitterで5509のnoriさんがいつかブログに書くといってくれたのでそれを首を長ーーーーくして待っていようかと思っています(…)

選べるデザインを増やす

とりあえず勢いでリリースしてしまったのでまだあまり種類は多くないのですが、GWなどを使ってたくさんアップできればなーと思っています。がんばる!

スマートフォンを…

買おうかな、そろそろ…w


スマートフォンをお持ちの皆様、ぜひぜひご利用いただけるとうれしいです♪

スマートフォン用の壁紙ダウンロードサイト
WALLPAPER COLLECTION for スマートフォン

ようやくこのブログ用の スマートフォン用テーマ作りました

ようやくこのブログ用の スマートフォン用テーマ作りました!
今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、今使っているPC用のテーマをベースに、テーマを作ってみました。

このブログのスマートフォン用テーマ作ってみましたー!

現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。
(※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました!)

今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、
今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。

とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆
(あといろいろコード見直してもうちょいスムーズに表示されるようにします><たぶんいろいろと無駄なことしてるはず。)

で、スマートフォン用デザイン。

やらなきゃやらなきゃと思いつつ、
なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。

スマートフォン用デザインの基本などに関しては、
今回以下のページがとっても参考になりました!

また、このブログはWordpressを利用しているのですが、
WordPressのスマートフォン対応と言えばwp-touchなどプラグインで一発で対応できるものが有名だったりするのですが、

今回は上にも書いた通り、このプラグインは使わず、普段のテーマ作り方でスマートフォン用テーマを作りました。
wp-contents内にpc用とスマートフォン用のテーマを置いている状態です。

2つのテーマの切り替えには、 iPhone theme switcherというプラグインを使用しています。

プラグインを有効化し、使用したいテーマを選ぶと、iPhone・iPadからのアクセス時に設定したテーマを読み込むようになります。

ただ、このプラグインだとiPhoneの時しかこのデザインにならない上、iPadでもこちらのテーマが有効になってしまいます。

なので、twitterで@rintaxさんにアドバイスいただいた方法で、端末の判定を変更しました。
このプラグインの端末判定の箇所の判定条件を書き換える方法で、Androidを追加、iPadを削除しています。

ただ、スマートフォン向けの表示のさせ方に迷っていて、スマートフォンってPCサイトも問題なく見れるのがいいところでもあるような気がするので、一律強制的にスマートフォン用デザインを出すのってどうなのだろう?と思っています。

というのも、PC用とスマートフォン用でまったく同じ内容が乗っているならいいけど、PCサイトにはあるなにかがスマホ用だと足りない…とかあったらPCサイトの方がみたい!って時もあると思うし…。

はじめはPC用サイトを出す
→スマートフォンからのアクセスの場合はヘッダーにメッセージをだして、スマートフォン用テーマがあって切り替えられることを告知
→一度切り替えたらもう一回切り替えるまでそっちのテーマ

の方法もいいのかなーとも思ったり。

その場合だとWordPress theme switcherあたりを使うことになるでしょうか。

いや、スマホもってないんでよくわからないんですけどね…!(笑)

もうちょっと他の対応サイトなどを見て、いい方法を考えようと思います!

あと、考えるにあたっていろいろと参考になるサイトやプラグインの情報を頂いたのでメモ。

いろんなやり方ができそうです。

…さて。

今回テーマ自体はさくさく順調に作れたのですが、

WordPressのiPhone用テーマを作るにあたって困ったことがひとつだけありました。それが記事に張り込んでいる画像…!

PCで見ることを前提に、記事中には幅500pxぐらいの画像を埋め込んでいるので、難の指定もないそのままの状態では、画像がはみ出してしまいました。

でもmax-widthが使えるので、max-width: 100%で枠内に納められるじゃん!と喜んだのもつかの間、はり込んでいる画像にheightとwidthが入っていたため、横幅はいいのですが縦は指定されたピクセル数で表示されてしまって、横幅はいいものの、今度は縦に長くなってしまいました…。

javascriptでごにょごにょすれば消せるみたいなのですが…※

最初から本文にwidthやheightが入っていなければ表示させるときになにも気にしなくていいので、そっちのほうがいいなー?ということで、今回は本文からwidthとheightを消すことにしました。

※追記:かちびと.netのシロさんにjQueryで.removeAttr(“width”).removeAttr(“height”)で取ったらいいよ!と教えていただきました!ありがとうございます!!

とりあえず過去のエントリーの分は、一括でheightとwidthを削除してしまうとして…。

これから記事を書くとき、はじめからwidthとheightが入らないようにしたい…!(そもそもheightとwidth書かない派なので前々から気になってた)

そしてできればコアファイルはいじりたくない…

誰かいい方法知らないだろうか?と思いツイートしてみたところ

@jim0912さんが、functions.phpに書くだけでWordPressの画像挿入時にwidthとheight指定が入らないようにする方法を教えてくださいました!

本当にありがとうございます!!!

WordPressの画像挿入時にwidthとheight指定が入らないようにする
http://www.warna.info/archives/700/

動作もばっちりでした!

これで画像の幅問題も解決しました☆わーい☆

実は今お仕事でもいろいろとスマートフォン用のデザインを作っていたりするのですが、IE気にしなくていいってことがこんなに楽しいことだとは思わなかった…!w

いろいろできてとっても楽しいです(笑)

☆おまけ

実はtwitterで画像や動画が簡単に共有できるサービスのシャッターのサイトもスマートフォン用のデザインを最近やっと用意しました!(サムネイルのところなど一部まだ対応中のところもありますが)

よかったら見てみてくださいねー!

PROJECT311-震災寄付作品集-のサイト作成のお手伝いをさせていただきました

PROJECT311という、マンガ家やイラストレーターやカメラマンなどの作品を集め作品集にして販売し、その売上を全額寄付するプロジェクトのサイト作成をお手伝いさせていただきました。

ブログに書くのが遅くなりましたが
先日、PROJECT311という電子書籍チャリティープロジェクトのサイト作成をお手伝いさせていただきました。

PROJECT311 -震災寄付作品集-

デザインとコーディングをさせていただきました。
tumblrをカスタマイズして作っています。

このプロジェクトは、マンガ家やイラストレーターやカメラマンなどの作品を集め作品集にして販売し、その売上を全額寄付するプロジェクトです。

イラストレーターのりゅうらさんの呼びかけのもと現在51人の作り手の方々が作品を提供してくださっていて、現在第一弾が発売中です。

第一弾には、漫画家のひうらさとるさん、俳優の川岡大次郎さんなども参加されています。

311円で電子書籍として販売されており、売上は全額寄付されます。

こちらのサイトで購入することが可能です。
http://p.booklog.jp/book/23074

かなり見応えのあるページ数ですので、ぜひ見てみてください!

また、現在第二弾に向けて準備中で、プロアマ問わず、作品を提供してくださる方を募集中とのことです。

詳細はこちらをご覧下さい。


私もなにかできることをやっていきたいと思っています。

当面はこういったWebでのお手伝いや、募金と献血を中心に、できることを続けていきたいと思っています。

こういった活動など、私でなにかお役に立てるようなことがあればできる限り協力させていただきたいと思っておりますのでどうぞお気軽にお声かけ下さいね。

WordCamp Fukuoka 2011のサイトができるまで。

今年も福岡でWordCamp開催です!
今年はサイトデザインを担当させていただきましたー!今日はその時の行程などをかいてみました♪

あのWordCampが今年も福岡にやってきます!
今年は2011年2月19日、九州産業大学にて開催です!

ということで、今年はなんと!サイトデザインとコーディングを担当させていただきました…!!

このデザインにした理由と作業の流れ等を書いておきたいと思います。

デザインを起すにあたって

今年のキーワードは【Publish】です。

WordPressが、自身を「Blog Tool and Publishing Platform」とうたっていること、近年さまざまなPublishの方法がうまれてきていることなどから、今年は、【Publish】をテーマに、デザインやアイディアが生み出されるまでの過程にも焦点をあてていこう!ということのようです。

Skypeで様々なアイディアを頂く

Skypeで会議をしました。
それぞれが【Publish】という言葉に持つイメージやサイトの方向性について話していきました。

以下のような様々な意見が出ました。

  • アイデアを生み出してそこから広い範囲に伝えていくまでのプロセスにもスポットを!
  • 誰でもアイデアを、好きなようにパブリッシュできるよ、という流れで
  • パブリッシングなので、落ち着いた感じよりももっと躍動的な感じ?
  • アイデアを生み出してそこから広い範囲に伝えていくまでのプロセス
  • かめはめ波なイメージだなぁ。→パブリッシュ
  • 僕はあまり激しいイメージ無いけどな、紡ぐっていうイメージ持ってるので
  • ピープルズパワー的な、土一揆的な激しいイメージ
  • どちらかというと、縁の下の力持ち的なイメージです
  • 革命です!

上記を元にデザインを考える

革命といえばもうこのフランス革命のイメージが一番に出てきたのですが…

お話を聞いてみて、全体を通して感じたことは、今回のテーマに関して

「みなそれぞれの感じ方や考え方、思いがあり、それぞれに個性豊かに表現している」

なぁということでした。

そこで、

WordPressの使い方や、そもそもなにを使ってPublishするのかは十人十色。
形にとらわれず、いろんな方法で、自分なりに、あなたもPublishしてみませんか?
そんなきっかけになるイベントですよー!

ということをデザインで表現できたら一番よいのではないか、と考えました。

そんなことを考えながら、紙にぐりぐりとイメージを書きなぐっていき…
今回のいろんな形、いろんな色のあるにぎやかなデザインの原案が完成しました。

ロゴは、様々なフォントを使い、いろいろな色、大きさを組み合わせたものに。

メインビジュアルはカラフルな鉛筆や本を使用することにより、
いろんな色(表現方法)があり、それは人それぞれ、というイメージを表してみました。

気軽に遊びにきてもらえる雰囲気にしたかったので、
あまり難しいイメージになりすぎないよう
手書き風のやわらかさのある線&紙のようなテクスチャで親しみやすい感じを出しました。

でも書体は明朝体でしっかりとしたイベントであるイメージも残し、

熱い気持ちで開催している!というメンバーの気持ちも
右上の旗で表現してみました。

コーディングする

今回のデザインは、影や質感のあるパーツが多かったこともあり、
透過pngを多用しました。

一応IE6でも問題なく見られるよう、
透過pngに関してはDD_belatedPNGというjavascriptを使って対応しました。

あと、はソースを見る人がきっといる!と思ったので、
コメント欄にちょっと文字を入れておきました。

HTML5でやってみようかとも思ったのですが、
時間もなかったこともあって、今回できませんでした…。

かわりにValidなHTMLになるようには気をつけました。

テーマ化する

テーマ用のページは、トップページ、記事ページ、ページ用ページの3パターンをつくりました。
この状態で@takayukisterさんにお渡しし、登録用の処理などを追加していただきました。

公開&参加登録受付中です

ということで、こんなかたちで出来上がり、
現在公開中&参加登録受付中です。

WordPressを使ったことがない、という方にも楽しんでいただける
インストール体験ワークショップや、
午前中は、その場にいるメンバーでテーマを決め、話を進めていくアンカンファレンスというおもしろい試みも予定されています。

セッションもWordPressの話だけにとどまらず、
様々なジャンルの方々が、いろいろな方面からお話をしてくださいます。

みんなボランティアで運営していて、いいイベントにするべく、一生懸命準備しています。

年に一度の楽しいお祭りです。
ぜひ、お越し下さいね。

WordCamp Fukuoka2011
http://2011.wordcampfukuoka.com/

2011年2月19日 九州産業大学にて開催

参加料は1000円です。

当日は、大教室(メインセミナー)中教室×2(ミニセミナー)、ワークショップ会場

去年はテーマの作り方について発表させていただいたのですが、
実は今年も中教室で30分ほどお時間を頂いたきました。
今年は、今回のこのサイトができるまでの流れの詳細や、
WordCamp運営に関わることのよいところなどを
お伝えする時間にできれば思っています。

お時間のある方はお立ち寄りいただけますと幸いです^^

写真や動画つきのつぶやきが楽しめる国産Webサービス「シャッター」制作ウラ話

昨年から写真や動画つきのつぶやきが楽しめる国産Webサービス
シャッター」というサイトをやっています。

昨年末、PC版のデザインを新しくしました。そのデザインリニューアルのときのことをまとめてみました。

昨年、

写真や動画つきのつぶやきが楽しめる国産Webサービス「シャッター」

というサイトがオープンしたのをご存知ですか?

http://shtt.jp/

twitterで写真や動画つきのつぶやきが楽しめる国産Webサービスです!

写真も動画もどっちの投稿もおまかせ!!

PCだけでなく、もちろん携帯での閲覧、投稿にも対応しています!

動画も写真も自動的に適切な形に変換するので
携帯でもスマートフォンでもラクラク見れますよ☆

あなた専用の投稿用メールアドレスを発行しますので
携帯からの投稿も楽々です♪♪

まだまだユーザーさん少ないので、みんなぜひ使ってくださいねー!><。

http://shtt.jp/

ということで。

説明が長くなりました、このシャッター、
これまでひとりで作ってきたお役に立ちますでしょうかシリーズ同様
お仕事関係ないプロジェクトなのですが、

はじめて人と一緒に作りました!

今回、福岡のプログラマさん、@rytichに声をかけていただき、
私はデザインとコーディング、jQueryでの動きの実装などなどを担当しています。

このシャッターですが、オープンしてまだ日が浅いにもかかわらず、

年末、PC版のデザインををリニューアルしました!

できて早々デザインリニューアルした理由

シャッターはcakePHPで作られているのですが、
携帯でのアクセス時は携帯用のCSSをインラインで書き出すこともできるので
携帯・PCともにビュー部分は同じテンプレートを使って、
CSSだけでデザインを切り替えよう!としていたのです。

が…。

携帯とPC、画面サイズも違えば操作方法も違う2つを
CSSだけで切り替えてみせるというのは難しく、
見栄えが(特にPC版が)中途半端なものになってしまっていました…。

トップページに新着一覧を載せる方法や件数も
やっぱり携帯とPCが同じではこれもどちらも中途半端なことになってしまいました。

結果、PC版と携帯版のテンプレートをわけることになり、
PC版だからこそできることをとりいれたデザインを作ることにしたのですが、
ある程度ユーザーさんが集まって、投稿が集まるようになってからじゃないと
新着写真にずっと同じ写真が表示されっぱなしになってしまう…という懸念事項もあったため、すこしずつですがユーザーさんが増えてきたこのタイミングでのデザイン刷新となりました。

使ってくださっている皆さん、本当にありがとうございます!><

ということで、新デザインはこんな感じです。

デザインテーマなど

  • twitterと連携させて使うサービスであることが分かりやすいよう、ブルー系
    →twitterが鳥のアイコンなので、デザインは空をイメージ
  • ロゴもtwitterのロゴ同様丸みを帯びたもの

というコンセプトでデザインしてみました。

画像の見せ方試行錯誤

携帯版も同様なのですが、サムネイルをどうするかとても悩みました。

正方形に切り抜くか、切り抜かずにリサイズか…

正方形に切り抜きは見た目にはとっても綺麗なのですが、
切り抜くことによって撮ったものの位置、構図が変わってしまうのが個人的にはイヤだったので、
切り抜きはなしで、一定サイズの正方形に収まる最大のサイズでサムネイルを作る仕様になりました。

これはどっちがいいのかいまだ悩み中です。

みなさんは切り抜いて正方形とどちらがお好みですか??

この配置にするために、縦方向の中央揃えが必要になったので、
これもjQueryで対応しています。

こちらの記事を参考にさせていただきました!

jQueryでボックスの中の画像の縦位置を中央に揃える
http://www.tinybeans.net/blog/2010/06/21-120821.html

ソーシャルブックマークいろいろ

twitter以外でもいろいろなところで簡単に共有できるよう、いろいろ用意しました。

ほかにもjQueryでいろいろ

■サムネイルにマウスオーバーで説明ポップアップ

PC版と携帯版を切り替えたので、
ちょっとしたところにjQueryを使って、使いやすくなる工夫をしてみました。

サムネイルにマウスオーバーすると投稿者名と文章がぱぱっと見れるようにしました。
こちらの記事を元に実装しています。

http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery

■スライドしていくトップページの新着一覧

みんなの新着写真、みんなの新着動画の部分は、
jCarouselを使ってスライド表示させています。

http://sorgalla.com/projects/jcarousel/

■背景を動かしてみたり

雲の部分を動かしてみたりしました。
処理はこのあたりの記事が参考になります!

http://www.queness.com/post/2607/create-background-scrolling-effect-with-jquery

こんな感じで、ちょこちょこと改良中です!

説明ページやら投稿ページなど、
大事な部分にまだデザインの反映が行き届いていない…なんて部分もあるのですが
時間を見つけて鋭意改良中です!

みなさんも是非使ってみてください!

フィードバックいただけるとうれしいです♪

私の投稿した写真&動画の一覧ページはこちらです☆
http://shtt.jp/user/yuki930

.

.

.

ちなみにこの「シャッター」で
お仕事以外で個人的に作ったサイト10個目になりました☆

.

.

Fireworksの使い方やデザインTipsなどをあつめたサイト、Fireworksマニアオープンしました!

Fireworksマニアというサイトを作ってみました!!

かれこれもう10年近くFireworksを使っているのですが、
Fireworksを使ったデザインTipsがサイト、本を含めなかなか見当たらないので、
私の使いこなし術でも誰かのお役に立てるかも!と思い立ち、はじめてみました。

Fireworksマニアというサイトを作ってみました!!

かれこれもう10年近くFireworksを使っているのですが、
Fireworksを使ったデザインTipsがサイト、本を含めなかなか見当たらないので、
私の使いこなし術でも誰かのお役に立てるかも!と思い立ち、はじめてみました。

できるだけ簡単にできるものを中心に
本などにはあまり載っていなさそうな
なるほどね!な使い方をご紹介していけたらなーと思います

ひとりでも多くの方にFireworksの便利さや手軽さが伝わるとうれしいです♪

Webサイトの”色”を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪

お役に立ちますでしょうかシリーズも第6弾となりました!

Webサイトの”色”を自動で抽出、分析するサイト
Web Site Color Pickerというサイトができました♪

新サイトを作りました!
その名をWeb Site Color Pickerといいます♪

早いものでお役に立ちますでしょうかシリーズも第6弾となりました☆

このサイトは、素敵なWebサイトから配色を学ぶために便利に使えるシンプルなツールです。
お気に入りのデザインのWebサイトのURLを入れてSEARCHボタンをクリックすると、そのサイトで使われている色を抽出、分析して自動的に色コードと共に表示します。

使い方はこんな感じです。

分析してみたいサイトのURLを入れてSearchボタンを押すと…

こんな感じで、サイトの色を分析して使われている色を自動で表示します!

ただ、なにせ自動解析。

私的にはこのサイトのベスト10はこの色じゃなーい!!ってことも多々あるかと思います。
ご安心ください!抽出機能を設けました!

これを使えば、ある程度解析した分析結果から好きな色だけをスポイトで取得して
保存しておくことができるんです!

保存したデータはあとから閲覧することもできます。

とにかくわかりやすく、使いやすくするために
とてもシンプルな機能になっています。

デザイナーさんだけでなく、管理画面の着色で悩んでいるプログラマーさんなども
ぜひ試してきれいな色で管理画面をグレードアップさせてみてはいかがですか?^^

色コードを表示していますので、すぐに使えますよ♪

素敵なWebサイトから配色の妙技を学んで
デザインに役立ててくださいね♪

P.S

このサイトを作成するにあたり、ハートレイルズさまのスクリーンキャプチャサービス、
HeartRails Capture API
を使わせていただきました。
このサービスなくしてはこのサイトはできませんでした。

この場を借りて御礼申し上げます。
本当にありがとうございました!

プライベート名刺、出来上がりました。

プライベート名刺が刷り上がりましたー!!
それはもう大量に…!w

会社名刺と一緒に渡すことが多いので
ちょっと工夫してみました♪

書きたいことがいっぱいあるのですが、
なかなか時間が取れないので小ネタから消化…!

プライベート名刺が出来上がりましたー!

花ざんまい。満足…!!!

両面フルカラーです♪

調子に乗って500枚も刷ってやりました…!
だって100枚も200枚も300枚も400枚もあんまり値段変わらなかったんですもの!!><

どこに頼んだらいいか迷ってしまって
twitterで相談したらいろんな印刷会社さんを教えていただきました!感謝!!

教えていただいた中で、
両面カラーの価格と納期等を検討した結果、今回はグラフィックさんにお願いしました。
http://www.graphic.jp/

厚手マットコート180kg、6日後仕上がりの両面カラーが500枚で4650円。
初回1000円オフというすばらしいサービスがあって
なんと3650円でした!

どうしてもCSS Nite LP11の時に持っていきたくて
間に合うかそわそわしていたのですが、
私が入稿データポカしてしまいまして…

福岡で受け取ったら間に合わない!という事態に;;

1-2日でできるほかのところで100枚だけ頼むか?
いやいや、そんなにいらないしな…とかいろいろと悩んだのですが、

グラフィックさんに「東京の宿泊先に送り先を変更していただけますか?」
と問い合わせたところ、快く対応してくださいました。

というわけで、宿泊先で無事ゲット!!

LP11の会場で、会社名刺と一緒に配ることができたのでした♪

この名刺、両面にアイコン写真が入っているのですが、
会社名刺とプライベート名刺の裏面を重ねて渡すと…

こんな風にアイコンがぴょこっと見えるデザインになっているのです♪
会社名刺が通常の名刺サイズより縦が短いデザインになっているので、これを生かしてみました。

ちなみに会社の名刺もかわいくって、

カエルのエンボスが入っているのです…!(見えるかな??)

どっちの名刺もお気に入りです♪♪

ということで、

名刺がたーーーーっくさんあるので
だれか受け取ってくださーーーーーーーい!!!!(笑)