両面フルカラーで小量の名刺が当日でも1時間でなんとかなった話

今回は「名刺が急に必要/手元にプリンタがない/当日即必要/両面フルカラー/少数(100枚以下)/できるだけ安く/名刺のデータはあるor作れる」という状態で名刺を急ごしらえできたお話です。

今回は「名刺が急に必要/手元にプリンタがない/当日即必要/両面フルカラー/少数(100枚以下)/できるだけ安く/名刺のデータはあるor作れる」という状態で名刺を急ごしらえできたお話です。

とんでもない忘れ物した

先日、大変ありがたいことにCSS Nite Nagoyaでお話をさせていただきました。(その記事はこちら

その際…まさかまさかの大失態。

名刺を忘れたのであります。
嫌な予感はしていたんです。
なにかそわそわするというか…。

気がついたのは福岡空港。
はい、もう取りに帰っていてはフライト時間に間に合いません。

どうしよう…!!!!!

到着する前から名古屋の人に助けを求める迷惑な私

「名古屋駅周辺で”両面カラーで即日”名刺印刷できるところ知りませんか?」
とtwitterで投げかけたところ、さまざまな情報が寄せられました。
ありがとうございます;;

キンコーズいってみたら?の声

教えていただいた中で一番多かったのがキンコーズ。
全国いろいろなところにありますが、私は利用したことがありませんでした。
サイトで調べてみたところ、名刺印刷のサービスがありました。

c0f4fa579548fd8edf421b97287a62d9
http://www.kinkos.co.jp/sales/business_card.html

とあります。

そしてさらに下の方をみると…

c1eb7361ffeef2238265a6b0a9cf71f5
両面カラーは倍の料金です
スピード仕上げは30%アップ

ほう…。

両面カラーだと高すぎた

となると…。

100枚で12,558円…!(1枚 約126円)
50枚でも9,827円…!(1枚 約197円)

Oh…!これは高すぎる…!!!
背に腹は変えられないといってもこれはかなり高級な名刺になってしまいます…。

でもとりあえずキンコーズへ行ってみた

でも、もしかしたら安く作る方法があるかもしれない。
とりあえいってみるだけいってみることにしました。

まず、店内に入ると軽く放置されました。
当然ですね、基本セルフのお店ですもんね…。
店員さんにおそるおそる話しかけます。

私「あの…名刺を印刷したいんですが…」
店員さん「あ、はーい。自分で印刷されますか?」
私「(自分でできるの?じゃあそれで…!)あ、はい」
店員さん「ソフトは何を使われますかー?」
私「Illustratorです」
店員さん「それでは2番のWindowsにどうぞー!」

いわれるがままに2番のWindowsに座る私。

えと、どうしたらいいのかな…

とりあえず席の周辺を見回します。
カラープリント料金の料金表が貼ってあります。
(※写真撮り忘れちゃったのでサイトより転載)

cd64aa64a467eab9ba56c23ebb13f810
http://www.kinkos.co.jp/price/self.html#01B

印刷の料金が書いてあります。
B5〜A3…。

名刺サイズの紙、みたいな選択肢はありません。(そりゃ普通ないですよね…)

教えて!店員さん!

私「あの…自分で名刺印刷ってできるんですか…?」
店員さん「できますよー。A4とかにプリントしていただいて

私「…A4に出して自分で裁断するってことですか?」
店員さん「そうですねー」
私「紙質は…」
店員さん「紙、選べますよ

私「両面印刷は…」
店員さん「できますよ、その場合カラープリントの料金が倍料金になります」

ほほう…!
ということで学びました。

データづくりから紙選びからプリントアウトから裁断まで全部自分でやれば安くできる!

当然といえば当然なのですが。
キンコーズはひとりで全部やる仕組みが整ってました。
全部自分でやれば当然最初に見ていた名刺印刷をお願いする料金より遥かに安く作れます

店頭に簡易裁断機が用意してあるので、プリントアウトしたあと好きなサイズに自分で裁断すればいい

自分で裁断すればいいのか!

c191f72af6a9801c779e7ecac777cf24
http://www.kinkos.co.jp/office/self.html

こんな感じで、店頭には簡易裁断機が置いてあります。
これで自分で切ってしまえばOK☆

(めちゃくちゃいい切れ味!!!!とは言えませんでしたが、はさみやカッターで切るよりは楽)

紙質は選べる

コピー用紙みたいな紙に印刷しても…って思っていたのですが、
好きな紙を選んでその紙にプリントしてもらえるようです。

622ee294ae8780d41ca936130f6f82a4
http://www.kinkos.co.jp/office/self.html

持ち込みも可能みたいなのですが、
店舗にも十分すぎる種類の紙が置いてありますよ☆

まわりを見てみると…
ありました。

紙見本の束!

紙は種類によって値段もさまざま。
名刺用の分厚い紙とかもちゃんとあります!

自分で見て選べるのがいいですね。

名刺向きとか注釈してあるので選びやすいです。
用紙によって値段もさまざまなのですが、
私は厚くてお値段も手頃な一枚24円のマットポスト紙をセレクトしました。

両面プリントは倍料金

ea081aceadb68938d8872c9193c81670

両面プリントもできました。
片面の倍の印刷料金で両面プリントできます。

A4カラー片面が一枚54円なので両面で108円でした。

というわけで、
紙代とあわせて1枚(名刺10枚分)132円。

これにパソコン使用量がかかるのでもうちょいプラスされますが、
だいたい1枚当り13.2円。

おおお!プリントをお願いするより断然安い!!

裁断が気がかりではありますが、
簡易裁断機が無料で使えるようになっていますのでとりあえずそれでなんとかなりそう…
というわけで、自分でなんとかすることにしました。

A4に名刺を10枚敷き詰めたデータを作る

私の名刺データは印刷会社さんにお願いしていたので
1枚分で両面別々にデータを作っていたため、
A4に敷き詰めて並べたデータを作る必要がありました。

ということで、店舗のWindowsで作業します。
A4用紙に敷き詰めていきます。

表面、裏面、それぞれ10枚ずつ並べて
データを作ります。

紙の指定、枚数を伝えてデータを店頭のプリンタに送る

データができたら、プリンタにデータを送ります。

まず卓上にある、プリント枚数指定の紙に紙の種類、両面か片面か、何枚必要かなどの必要データを書き込みます。
それを店員さんに手渡したら準備完了。

指示を頂けますので、指定のプリンターで通常の印刷処理と同じようにプリントを選んでプリンタにデータを送ります。

一枚刷り上がったら、「こんなかんじになりますけど大丈夫ですかー?」と見せてもらえます。
一度確認できるのがうれしいですね♪

OKであれば残りをプリントアウトしてもらいます。

お金を払う

あとは完成したものを受け取って料金をお支払い。

まず、店頭のPCの使用料が250円
名刺の紙が24円x10枚
プリント代が52円(両面なので倍額の104円)x10

裁断ミスとかもあると思ったので、
念のため多めに名刺100枚分、10枚刷ってみました。

合計1,530円
税込みでも1,606円ですみました!

なので最終的には一枚当り 16円。

自分で裁断

あとは店頭に置いてある無料で使える裁断機で裁断します。

私は裁断回数を減らそうと隙間なくぴっちり並べてしまったのですが、
両面印刷だったのでやっぱりどうしてもちょっとだけずれてしまっていて(私のデータの作り方が悪かったんだと思うのですが)

私の作っているデザインがフチまでびっちりデザインが入っている名刺なこともあって
このズレのせいで切り落とす際に変に隣のデザインが入りこんでしまったり、白い淵が残ってしまったりでフチがちょっと残念クオリティになってしまいました…。

裁断回数は増えますが、私の名刺みたいなデザインの方は切り落とし用の余白もつけてプリントアウトしたほうがいいです!(当たり前か)

というわけで、急ごしらえの割にはいい感じの名刺をGETすることができました!!!
印刷は思っていたより(失礼)きれい!

印刷用データの工夫と私の裁断技術さえもうちょっとよければ最終的な仕上がりももっとキレイにできたはず…!

ということで、名刺をうっかり忘れた残念な私のキンコーズレポートでした。
同じ状況でうわー!!!っとなってるデザイナーさんのお役に立てますように♪

キンコーズさん、本当にお世話になりました!
全然システムを理解できていない私に優しくしてくださって本当にありがとうございました☆

ちなみに

キンコーズは九州・広島だけ運営が違う。サイトも違う

調べていて気がついたのですが、キンコーズは九州•広島エリアだけサイトが別になってました。
どうも運営している会社が違うっぽい…?
今回、名古屋エリアが含まれている方のサイトの価格を載せたのですが、
九州広島エリアだと全体的にもうちょっとお値段安めでした。

九州広島エリアのサイトはこちら
http://e-creous.com/

キンコーズのサイトはこちら
https://www.kinkos.co.jp/

パソコンつなげる店舗もある

今回はパソコンをお借りしてそのパソコンから出力しましたが、店舗によっては自分のマシンからの出力もできるみたいです。
私がいった店舗も自分のマシンから出力できたみたいです。あとから知った…w

印刷のクオリティ

帰ってきてから、印刷会社さんに頼んでいるいつもの名刺と比べてみました。

今回の名刺も単品で見ると綺麗だと思ったのですが、
比べて見ると、いつもの名刺の方が印刷がきめ細かく、滑らかで綺麗でした…!
(紙も違うのでそれもあるとは思いますが)

でも名刺としては十分クオリティーですので、
困ったときは行く価値ありかと思います☆

最後に

名古屋のみなさま、裁断面が不揃いの名刺をお渡ししてしまい申し訳ありませんでした><

TalkNote with CSS Nite in NAGOYA 「Girls’ Talk!!」に登壇させていただきました。

TalkNote with CSS Nite in NAGOYA にて
石嶋さん、藤田さんという素敵なおふたりとお話しさせていただきました。

耳を傾けてくださったみなさま、お世話になったみなさま、本当にありがとうございました!

TalkNote with CSS Nite in NAGOYA にて
石嶋さん、藤田さんという素敵なおふたりと
「Girls’ Talk」というサブタイトルでお話しさせていただきました。

昨年の札幌に続いて
まさかまさか今度は名古屋に行くことができるなんて夢にも思わず、
お声かけ頂いて本当に嬉しかったです。

ありがとうございました!

事前準備でやり取りさせていただいていた
野村さん、金光さんをはじめとした実行委員会の皆さんとお会いすることができ、
みなさん本当にテキパキしていらっしゃって明るくて楽しかったです!

司会の勝又さん、西村さんの進行もすばらしくて

てんぱりまくっていた私はとっても助けられました!

松本さんの撮ってくださった写真も楽しみ^^

みなさま、本当にありがとうございました!!

懇親会でもみなさんとても明るくて
一瞬自分が今どこで飲んでいるのかわからなくなるぐらいで
それぐらい地元で親しい人たちと盛り上がっているかのような気分になれて、本当に楽しかったです!

みなさんすごく仲がいいんだなーと見ているこっちが楽しくなりました^^

名古屋ということで、a-blog CMSの合宿で北九州でお会いしたアップルップルの山本さんとも再びお会いすることができ、
福岡での勉強会に参加させていただいたパニックジャパンの長谷川さんともご挨拶することができました!

またお会いできて嬉しかったです!

今回はFireworksネタではなくて、
「得意なことを発信しよう!Webデザイナーの魅力をさらに高める、情報発信のすすめ」
ということでお話しさせていただきました。

これは約3年前にCSS Nite LP11でお話しさせていただいた
「Webデザイナーの魅力をさらに高める、サイト運営と分析のすすめ」
の新装版という感じの内容になっています。

CSS Nite LP11でいろいろアウトプットのよさとかメリットをお話しさせていただいたのですが、
これらのアウトプットが基点になって、その後もびっくりするぐらいいろんなことが起こったので
その後のこともいろいろと盛込んで、スライドもすべて一から作り直しました。

思い起こせばCSS Nite LP11は、
私の人生ではじめての福岡以外でのプレゼンだったのですが、
CSS Niteってホントにすごくって、主催の鷹野さんがスライドをすみからすみまでチェックしてくださるんです。

内容のチェックはもちろんのこと、
改行位置、文字のサイズ、文字のひらきにいたるまで。

3年前のあのころはもうそれはそれはテンパっていまして、
そんなに細かいとこまで!ぎゃー!もう無理ー!!!!って
お返事頂くたびに一人で大パニックだったのですが、
今思えばあのとききちんとダメ出ししていただいていなかったら
どんなひどい発表をしてしまっていただろうか…。

考えるだけでも恐ろしいです。

その後、何度かCSS Niteでお話しさせていただいているおかげで
スライドもだいぶ進歩できているかな…?と思います。

九州にきたことがない方がほとんどだろうなぁと思っていたら
福岡や熊本から来てくださっている方もいて
(野末さん、繫いでくださって本当にありがとうございました!)
CSS Nite LP9のときに全国から集まる登壇者さんに会いに
福岡から東京までひとりで出掛けて行ったときのことを思い出して
なんだか胸が熱くなりました。

私もあれからいろんな人との縁が今もつながっていたりするので
九州と名古屋の素敵な縁がこれからもつながっていくといいなぁと思います。

はじめにお話を頂いてから
ホントにわたしなんかでいいのだろうか…とずっとずっと思っていたのですが、
逆に私みたいなものでも自分の好きなことをアウトプットし続けていたら、こんなに楽しかった!!
というのがお伝えできればいいのかなと自分なりに頑張って組み立ててみました。

すこしでもアウトプットやってみようかな、と思っていただけたなら幸いです。

喋った私が一番テンションが上がっていてブログに書きたいネタが渋滞していますw

これからも楽しくアウトプットしていけたらいいなって思います!
お休みの中、耳を傾けてくださったみなさま、本当にありがとうございました!

名古屋に負けないように福岡ももっともっと盛り上げて行きたいと思いますので
ぜひ福岡に遊びにきてくださいね!

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

Webデザイナー8年目としての2012年を振り返る

毎年恒例の一年振り返りエントリー。
毎年実家で書いているのですが、今年は年が明けてからの帰省となったので自宅で書いています。

なんか年末な感じがしなくて変な感じですw

それでは今年を振り返ってみます。

しかしタイトルを書いていて気がつきましたが8年目ですって、8年目。
あっという間でびっくりします…。

毎年恒例の一年振り返りエントリー。
毎年実家で書いているのですが、今年は年が明けてからの帰省となったので自宅で書いています。

なんか年末な感じがしなくて変な感じですw

ちなみに、去年はこんな感じの一年でした。

2012年振り返り

それでは今年を振り返ってみます。

しかしタイトルを書いていて気がつきましたが8年目ですって、8年目。
あっという間でびっくりします…。

012年1月
CSS Nite ベストセッション2011に選出していただく

CSS Nite ベストセッション2011に選んでいただきました。

ライブデモがはじめてで超緊張してやった発表だったので、こんな風に選んでいただけて新年一発目に本当にうれしかったです;;

2012年1月
デジタルハリウッド福岡校さんでFireworks本出版記念セミナーをさせていただく

デジタルハリウッド福岡校さんにお声かけ頂いて、初めて福岡で、ひとりでセミナー的なものをやらせていただきました。初の福岡での長時間セミナーで、なんかいつもより余計に緊張しました…!w

2012年2月
東京でCS-Cartセミナー開催

弊社の製品であるCS-Cartのセミナーを開催させていただき、テンプレートカスタマイズについて1セッションお話しさせていただきました

参加してくださった方々がいつもとまた違った属性の方(制作メインじゃない方)もいらっしゃったのでこれまた緊張しました…!!!

このセミナー後、さらに新バージョンの3系が出て、使い勝手がさらに上がっているのでぜひ触ってみてくださいね☆(宣伝

2012年2月
CSS Nite back 2 basic #8 Fireworksに登壇

CSS Nite back 2 basicシリーズでFireworksの回を担当させていただきました。初の一人で2時間!これもめちゃくちゃ緊張しました…!

2012年3月
FC2第2回共有テンプレートコンテストで1位をいただく

FC2ブログで開催された共有テンプレートコンテストで1位になりました!!!!

このコンテストなんですが、私がWebデザイナーになったかなってないかぐらいの時期に第1回が開催されて、そのときも4位を頂いた思い出のコンテストだったんです。これですごく自信がついて、今があるというか。

だから今回もホントにうれしかったです;;

2012年3月 Fireworks interviewsにインタビューが掲載される

海外のサイト、Fireworks interviewsにFireworks使いとしてインタビューしていただき、それが掲載されました!!!

Fireworksで使える便利なテクスチャをたくさん配布していらっしゃる@indigonoteさんから繋いでいただき、素敵なご縁ができました。本当にありがとうございました!!

インタビューが全部英語だったので、google先生に助けてもらいながら英語を書いていたのですが、お友達のNedに相談したところ、私が日本語で書いた回答を全部キレイな英語にしてくれる!というので全力お願いしました。

なので完璧なインタビュー回答のはず!!

Ned、あの節は本当にありがとうございました☆

2012年5月
Fukuoka.phpでLT

福岡のPHPコミュニティーがまた新しく出来上がり、Fukuoka.phpができました!

主催が前職の先輩というご縁もあって、記念すべき一回目にちょこっとLTさせていただきました。以前ブログにも書いたPHPで画像処理あたりのネタを発表しました☆

2012年6月
SaCSS WordPress Specialで登壇

北海道の@h2hamさんにお声かけ頂いて、SaCSS WordPress Specialでお話させていただきました!

WordPress SpecialなのにFireworksの話をしちゃったりしたのですが、よい反応をいただけて本当に嬉しかったです^^

札幌はどこか福岡と同じ温かさ(気温じゃないよ)を感じる街で、本当に素敵な出会いがたくさんありました。
近いうちにプライベートでみなさんに会いに行きたいです♪

2012年6月
Fireworks CS6に自作のデータがプリインストールされる!!!

奥さん事件です!!!!!!!

今年一番の事件はやっぱりこれです。

上に書いたFireworks interviewsというサイトを運営している方が実はAdobeの本体側のFireworksチームに関わってらっしゃる方だったようで…!!

私があまりに流暢な英語でインタビューを返したので(Nedのおかげ)英語大丈夫だと思われたのでしょうか…!

後日、英語で「実はFireworksCS6の開発チームと関わりがあるんだけど、CS6でプリインしてもいいようなデータなんかない?(要約)」的なメッセージを頂き、「こんなのしかないけどよかったらー」と送っていたものが気付けばプリインされてました☆
この時の返信は私が片言で書いたので、「ん?様子がおかしい…!」と思われたかもしれませんw

しかし愛するFireworksに自分の作ったデータがプリインされるときがくるなんて思ってもみませんでした…。
人生本当に何が起こるかわからない!!!!><

2012年7月
デジタルハリウッドさんでFireworks講座開講

2月に開催させていただいた出版記念セミナーが縁で、基礎から応用までみっちり全5回、各2時間のFireworks講座をやらせていただきました!

平日夜の講座で、さらに毎週、しかも一回2時間ということで…準備やらなんやら時間を捻出するのが本当に大変でしたが、生徒さんたちからもよい反応をいただけて、本当に頑張ってよかったなと思いました;;

2012年9月
Automogic出演

→憧れのデザイナーである長谷川恭久さんがされているポッドキャスト、Automogicでヤスヒサさんと対談させていただきました…!
ヤスヒサさんのセッションやスライドは本当にため息がでるほど素敵なのでぜひ皆さん見てみてください!!!
こんな感じのスライド、素敵な語りができるようになりたいです…!

2012年9月
Adobe Developer ConnectionでFireworksの連載開始

→姉さん事件です!!!!!!!(2回目)
こちらはお世話になっている東京の大好きなお姉様である@izuizuさんがご縁を繫いでくださって、Adobeの公式サイトで連載をさせていただけることになりました;;

執筆は終わっていて、あとは年明けに最後の回が更新される予定です☆

本当にいい経験ができました。@izuizuさん、本当にありがとうございました!!!><

2012年9月
WordCamp Tokyo 登壇

WordCamp Tokyo行ってきました!そしてセッション1つ担当させていただきました!
書籍ブースなんかもあって、東京はスケールが違うな!!!!と思いました。

全国各地からWPerが集まっていたのでホントいろんな方に会えて、それも嬉しかったです!

2012年10月
デジタルハリウッドさんでFireworks講座 2回目

7月から1ヶ月半やらせていただいた講座が好評だったとのことで(これが一番嬉しい;;)
もう一度やらせていただくことができました。本当にありがとうございました!!!!

他にもこんな思い出達

九州を出た記録(仕事/プライベートまぜこぜ)

  • 2月 東京×2
  • 3月 東京
  • 6月 大阪
  • 6月 北海道
  • 9月 東京×2
  • 10月 東京
  • 11月 滋賀

結構出てました…。

なんと」6回も東京に行ってました。すさまじい。

さすがにこんなことはもう2度となさそうです…><

総括的な

去年は「本を書く」という経験をさせていただいたので、それはそれは濃い一年でした。

去年このエントリーを書いた時、これは…来年はこれに並ぶようなニュースは絶対ないだろうな…
もう書くの今年で最後にしようかな…

とかなんとか思っていたのですが、
年末に書くこと、なんとかなにか作らなきゃ!!っていう思いがあったので
2012年もいろいろと頑張れたような気がします!

そういう意味でも、振り返りエントリーって書く価値があるなぁって思いました☆

来年もしっかりかけるように1年間がんばります!!!!

過去の振り返りエントリーを見ていて思ったのですが、
最近、まわりのいろんな方からおもしろいお話を色々いただけたりして「誰かと何かをする」っていうこが増えてきていて、本当にありがたいなと思っています。

Webデザイナーになって最初の何年かは、とにかくひとりでできることをコツコツとやってアウトプットして…ということの連続だったのですが、それがきっかけで数年後にはいろんな人と繋がることができて、誰かと何かをやる機会をいただくことができて…と嬉しい形で繋がっていて本当にありがたい限りです。

こうやって繋がっていくんだなとしみじみ思いました。

ただ、いいことばっかりでもなくて今年は反省すべき点も多々あって、スケジュールが調整できずにお受けできなかった案件があったり、上手く時間を作れなくてプライベートで関 わっているプロジェクトのチームメンバーに迷惑をかけてしまったり、ブログも書く頻度ががくっと落ちてしまったり…と時間の使い方をもっとちゃんと管理し ないといけないなぁと思うことがありました。

時間に余裕のある時期もたくさんあったし、上手く時間を調整できれば問題なかったところなので、このへんはもっと上手く時間を使っていきたいなと思っています。

与えていただいた機会に実力が全く追いついていないので、しっかりと応えられるようにスキルをもっともっと身につけていくべく日々努力してこれからも頑張っていきたいと思います!

2013年の豊富

こんな感じで振り返って参りましたが…

2013年の目標は、

「人間力アップ」です!!w

仕事ももちろん頑張りますが年齢的にもだいぶ大人になりましたので…。

空いた時間はとりあえず

  • ペン字の練習
  • 料理の研究
  • 徹底的に掃除

とかやっていきたいなと。

あと、英語の勉強も

公だけでなく、私のほうもいろいろと頑張って人間力をあげたいと思います^^

2013年の予定

1月 東京、2月 名古屋が決まっています。

2月の名古屋は
こちらのイベントに参加させていただきます!

「Girls’ Talk!!」Talk Note with CSS Nite in NAGOYA

『得意なこと』を発信しよう!
Webデザイナーの魅力をさらに高める、情報発信のすすめ

というタイトルでお話しさせていただく予定です。

初の名古屋に今からドキドキです…!!

楽しんでいただけるようにがんばりますので、
名古屋のみなさまぜひぜひよろしくお願いします☆

ということで、2012年も本当にお世話になりました!!!

2013年もどうぞよろしくお願いします♪

Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!

Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!
発売してから早いもので10ヶ月ちょっと…。
みなさんのおかげで、このたび増刷していただけることになりました!!!

私の28〜29の楽しい時期を棒にして一生懸命書いた本なのでw めちゃくちゃうれしいです!!!!!!!!ありがとう20代の私!!!

Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!

Fireworks CS5/4/3 (速習デザイン)
山口 有由希
技術評論社
→Amazonで詳しく見る
→楽天で詳しく見る

発売してから早いもので10ヶ月ちょっと…。

執筆中はFirworksの本なんて本当に売れるのか?大丈夫なのか?と心配すぎて夜も眠れなかったこの本ですが、みなさんのおかげでこのたびなんと!!増刷していただけることになりました!!!

私の28〜29歳の楽しい時期を棒にして一生懸命書いた本なので、
めちゃくちゃうれしいです!!!!!!!!(本当にありがとう20代の私。)

増刷分が出来上がったらまた何冊か頂けるみたいなので、またプレゼント企画したいなって思っているのでその時はどうぞよろしくお願いします♪

ADCの連載、3回まで公開中です!

Fireworks関連ネタで、現在Adobe Developer Connectionで連載させていただいているFireworks記事ですが、第3回まで公開されてます。

こちらもよかったらチェックしてみていただけると嬉しいです♪

あとちょっと告知

そして、またこれについては改めて記事を書こうと思うのですが、以前一度やらせていただいたこの本を使ったFireworksの授業をまた10月下旬からやらせていただけることが正式に決まりました!

デジタルハリウッド福岡校で開催です。

まわりにもしご興味のある方がいらっしゃったらお知らせ頂けるとうれしいです♪

今後とも頑張りますので、どうぞよろしくお願いします^^

10月11日(木)デジタルハリウッド福岡校さんでFireworksの勉強会します!

10月11日(木)19:30からデジタルハリウッド福岡校さんでFireworksの勉強会します!

10月11日(木)19:30からデジタルハリウッド福岡校さんでFireworksの勉強会します!

はじめの1時間程度は、私の方でFireworksを使ったことないorよくまだ機能を知らない方向けにPhotoshopやIllustratorと併用してでも使ってほしい!魅力的なFireworksの便利機能を中心に、以下のような内容をご紹介しようと思っています☆

まだ考え中なのですが時間が1時間半とってあるので、残りの30分は、こういうときどうしたらいいの?こういうどうしてる?といったFireworksに限らずWebデザイン全般についてのお悩み相談会みたいな形にできたらいいなーと思ってます!

お時間ありましたらぜひ遊びにきてくださいね♪

紹介しようと思っている内容

デザインするのに便利

  • 見た目をそのままコピー!「属性のペースト」
  • CSSのように共通の見た目を管理して一括アップデートもできる「スタイル機能」
  • 質感の表現も楽々。豊富な「テクスチャ」「パターン」

コーディングするのに便利!

  • ここは何ピクセル?距離計測もラクチン「ものさしツール」
  • 適正サイズのスライスを一瞬で「スライスを挿入」機能
  • グラデーションや角丸など、Fireworks上で描画したオブジェクトをCSSに変換!「CSSプロパティパネル」

もっと効率アップ

  • 複数ページのデザインやスライスのときにも使える便利な「ページ機能」
  • 同じオブジェクトを使い回すときにはかかせない「シンボル機能」
  • もっと便利に!豊富な拡張機能の紹介

無料ですが、こちらからお申し込みが必要です。

https://www.dhw.co.jp/dhef/event_form.php?cid=sc&eid=701100000001gry

わいわいやれたらと思いますので、お気軽にご参加くださいね♪

Fireworks CS6の新機能、CSSプロパティパネルを便利に使ったWebデザインの流れまとめ

G3株式会社さまのコーポレートサイトを制作させていただきました。

今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。

G3株式会社さまのコーポレートサイトを制作させていただきました。

CSSプロパティパネルが便利すぎて…

今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。

すでにサイトがWordPressで動いていて、別のテーマで運用中だったので、
テキスト等もそのまま流用でき、私の作業としては純粋にWordPressテーマのデザインとコーディングの部分でしたので今回ご紹介するのはその部分の流れになります♪

まず、イメージを膨らませる

イメージ固めから入りました。
会社のコンセプトが「毎日をワクワクさせちゃえ!」だったので、私の中でのワクワクのイメージを考えてみます。

google画像検索でワクワクを検索してみたり。
なんとなーくブルーが多い印象。

wakuwaku
こういうものも参考にしながら
私の中でのワクワクのイメージというのも固めていきました。

私の中ではテンション上がりすぎて楽しみで仕方ない!という時の感情表現だなという結論に。

外で、天気は青空で…
みんなで手をつないでジャンプ!!!的なイメージです。

手をつないで ジャンプ で画像検索…

jump

そうそう、なんかこんな感じ!

ジャンプしている写真もいいなぁと思ったのですが、
どうせやるなら関わっている人たちの写真を使いたいところなので、
今回は見送り(いつかやりたい!)清々しい青空をテーマにしよう!と方向性を決めました。

ざっくりイメージを作ってみる

コピーの文章やロゴなどを配置していきます。
青空のイメージ。こんな感じで。

rough

サイトの見せ方を考える

ここで細かいデザインを作っていく前にサイトの見せ方で悩みました。

現状、コンテンツ的には載せられるものがまだあまりない状態なので
どちらかというとイメージ重視のサイトがいいかなと思いました。

ちょっとした遊び心があるような感じに。

そこで今回は1枚ものにしてパララックス効果かアニメーション的なものをつけて、ぱっと見たときに楽しい、それこそワクワクのイメージが伝わるようなサイトにしようと考えました。

この時点でコーディングをはじめる

上記の方向性にしようと決めたので、そうなってくるとこれ以上Fireworksで作業していても仕上がりイメージがわかないので(動きみながらやっていきたい)ここからもうブラウザベースで進めていくことにしました。

slice

Google Web Fontを使う

今回はメニュータイトル等は英語表記にしようと決めていたのですが、
今後の運用等も考えてできるだけテキストベースでやってみたく、Google Web Fontを使用しました。

webfont

使いたい書体を探してUseを押します。

webfont-2

今回はQuicksandのBold 700ウエイトのものを使用しました。
必要なものにだけチェック。

webfont-3

あとは手順に従って、HTMLとCSSにコードをぺたっとするだけです

webfont-4

webfont-5

各ページのタイトル文字も、はじめは画像化しようかと思っていたのですが、
今回は同じくGoogle Web Fontで対応しました。

背景のグラデーションをCSSプロパティパネルで書き出す

お二人の好きな色がグリーンとレッドだと伺っていたので
それらの色をどこかに取り入れたいなと思い、各コンテンツの背景にしよう!と思いました。

切り替えがトップ含めて6つあるので、6色が繋がるようなグラデーションを作ることに。

Fireworksで長方形を6つ作り、それぞれにグラデーションをかけていきます。
(キャプチャでは繋がってるように見えるかもしれませんが長方形が6個並んでいます)

color

こんな感じでグラデーションができたら、
ここで!Fireworks CS6の新機能、CSSプロパティパネルの出番です。

ウインドウメニューからCSSプロパティパネルを表示しておきます。

CSS化したいオブジェクトを選択して、パネルを見ると…
css

こんな感じで、このオブジェクトをCSSで描画する時どのように書いたらいいのかが表示されちゃうのです!
超便利!!!

今回はグラデーションのCSSが欲しかったので、グラデーションとなっている部分をクリックして、右下の【選択範囲】のボタンをクリックします。

Dreamweaverに移ってコードをぺたっと。

dw

あとは貼付けるだけ。

簡単なステップでこんな感じで複数ブラウザに対応したコードがGETできます。

その他のCSSで表現したい要素もFireworksで見た目を調整して、コードをコピペ。

css3

ページ内の他の要素でCSSで表現したいものもFireworksでこんな感じに作ってしまいます。

テキストシャドウだったりボックスの影だったりといった部分。

css3-2

これらもコードをコピペすれば、すぐにブラウザに反映されます!便利すぎる!

雲と飛行機をjQueryでアニメーション

パララックス効果で雲を動かそうと思っていたのですが、それだとスクロールしないとなにもはじまらず開いた瞬間はなにも動いていない状態になってしまったので、トップ部分の雲はjQueryで背景のpositionを動かしてアニメーションするようにしてみました。

飛行機もぴゅーっと飛んでいくように。

完成したものを見てもらって、文言等チェック

文章等を手直ししてもらって、スクロールの幅等細かい調整をして公開となりました。

デザインに関しては完全におまかせで作らせていただいたので今回、超短時間で作れました。

CSSプロパティパネル最高です!

みなさんもぜひ使ってみてくださいね!

このあたりのデモや解説を含めたFireworksのイベントをデジハリ福岡校さんで行います☆

10月11日(木)19:30~21:00からデジハリ福岡校さんでFireworksのイベントをさせていただくことになりました。

CSSプロパティパネルの登場によってさらに便利になったFireworksなんですが、他にもPhotoshopやIllustratorと平行してでも使ってほしい便利機能がいろいろあるので、導入を迷っている方や持ってるけど使ったことない!という方向けにどういうところが便利なのかをデモを中心に解説していきます。

10月11日(木)19:30~21:00(開場 19:15)

場所はデジハリ福岡校さんです。

http://blog.dhw.co.jp/fukuoka_event/2012/09/dsf-vol101011fi-ccd5.html

サイトの表記がオーバーすぎてすごく恥ずかしいんですが…私が書いたんじゃないので目をつぶってください;;

もちろんFireworks好きな方も歓迎です☆
無料なのでぜひ遊びにきてください☆

WordCamp Tokyo 2012 終了しました。セッションスライド公開中!

WordCamp東京、無事に終了しました!

取り急ぎ、本日の私のセッション資料を公開しました。

WordCamp東京、無事に終了しました!

PHPカンファレンスと合同ということもあり、圧倒的なスケール感で
東京ってホントにすごいな…と思いましたw

今までお会いする機会のなかった方ともいろいろご挨拶ができて本当にうれしかったです!
ありがとうございました!

取り急ぎ、本日の私のセッション資料を公開しました。

15分という短い時間だったのでかなり早口になってしまったので、
スライドの方で内容をご確認頂けると幸いです^^

Ust録画もあるみたいですが見つけきれませんでしたw

 

お聴きくださったみなさま、本当にありがとうございました!!^^

WordCamp Tokyo 参戦します!

9月15日に開催されるWordCamp Tokyoに参戦します♪

関東のWordCampに行くのははじめてです!どきどき。

今年は1000人規模らしいですよ。
全く想像つかない…。

9月15日に開催されるWordCamp Tokyoに参戦します♪

関東のWordCampに行くのははじめてです!どきどき。

今年は1000人規模らしいですよ。
全く想像つかない…。

私も15分のセッションを1つやらせていただく予定です☆
13時20分から画像のアップロード&アイキャッチ画像をしっかり理解しよう!
というタイトルで行うのでよかったら見に来てください!

(裏がマイティーさんなので、私のなんて誰もきてくれないんじゃないかと怯えています)

当日、書籍販売のブースというのがあるらしく、
そこに私の本もおいていただけるとのことで(ありがたすぎる。。。)
14時からはそこのブースにいたりする予定です♪

WordCamp Tokyo タイムテーブル
http://2012.tokyo.wordcamp.org/timetable/

その他の時間は大体アンカンファレンスにいると思いますので
誰か話し相手になってくださいお願いします…!!!!

同じ会場でPHPカンファレンスも行われるらしいですよ!
そっちも興味津々…!!!!!!!!!!

週末が楽しみです♪