バタバタしていて記事にするのがだいぶ遅くなってしまいましたが…。

1月18日(水)にデジタルハリウッド福岡校さんで、Fireworksの無料セミナーを開催させていただきました。
お忙しい方51名もの方にお集まり頂きました。

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

概ね好評だったようで、ホッと胸をなで下ろしております…！

Fireworksの便利な使い方を福岡で存分に語ることができて、
とっても楽しい2時間でした！

お越し下さった皆様、本当にありがとうございました！！！

ありがたいことに2011年も登壇の機会を頂いたCSS Niteでは、39回の関連イベントを通して170セッションが開催されたそうです。その中から選ばれたベスト10セッションの中に、私の［FireworksマニアLIVE!］のセッションを選んでいただきました…！

最近では「YUKIさんですね！」より「Fireworksマニアの人ですね！」と言われることが多くなってしまったぐらいのインパクトを残してくれたFireworksマニアなのですが、（サイトのネーミングはじっくり考えた方がいいと思った（笑））

実はこのFireworksマニアを作ったきっかけというのが、今回選んでいただいたセッションを行ったCSS Nite LP14 Photoshopper Meets Fireworksというイベントなのでした。

まだイベントの詳細は決まっていなかったものの、CSS NiteのmixiコミュニティーでFireworksのイベントがある！という発表があった2010年の11月ごろのことです。当時Fireworks仲間がほとんどいなかった私はこのイベントの開催にそれはそれは目を輝かせました。

絶対行きたい…！そしていろんな人とFireworks愛を語り尽くしたい…！と。

しかしもちろん開催は東京。参加費に加え交通費に宿泊費…。福岡在住の私には痛い出費です。

でもどうしてもこのイベントだけは参加したい！

そこでない頭を使って考えました。

………Fireworksの使いこなしだったらちょっとだけ自信がある…

『そうだ、スピーカー側で参加すれば……！！！！！』

め、迷案ですね。

そこで私は早速主催の鷹野さんに連絡…す　る　の　で　は　な　く　、猛スピードでFireworksマニアを立ち上げました。そう。超勝手で一方的な猛アピールですw

こんなきっかけではじめたFireworksマニアだったのですがサイト公開とともにあれよあれよとブクマは伸び…たくさんの人に見ていただくことができ、日本にもこんなにたくさんFireworks好きがいたのか…！とそれはそれは感激したのでした。

で、せっせとサイトを更新し続け数日後。

鷹野さんから連絡が！

『CSS NiteのFireworksの回にスピーカーとして参加しませんか？？』

キター！！！！！！！お誘いきたよーーーーーー！！！！！！！

ああもう私の思いを届けてくれたインターネットって素敵。

そんなこんなでこのイベントでお話しさせていただくことが決まり、イベントに参加することができたのでした。

このイベントがあったおかげでFireworksマニアをはじめることになり、Fireworksマニアがあったおかげで、出版社の方からお声かけいただき、本を書かせていただくことになり。

人生って本当に何が起こるかわからない…！！！！とあらためて感じた一年でした。

そんな思い出深いイベントでの今回のベストセッション賞…もう、ホントにホントにうれしいです！

今年もいろいろとお話しさせていただく機会を頂いており、

【福岡】1月18日（水）福岡発 「速習デザインFireworks CS5/4/3」出版記念セミナー「FireworksマニアのYUKI氏による厳選Tipsチュートリアル」
【東京】2月3日（金）CSS Nite back2basic #8「Fireworks」
【北九州】2月10日（金）a-blog cms Training Camp in KANMON 2012 Winter

でそれぞれお話をさせていただくことになりました。このような機会を頂き、本当にありがとうございます。

ご都合がつけばぜひ足を運んでいただけますと幸いです。

今年も残すところあと3日とちょっとになりました。

プライベートなWebにかかわるいろんなことをまとめて、今年１年を振り返ってみたいと思います。

今年は、Webデザイナーになって丸6年を迎え、7年目に入る年でした。
7年目とか…早い…。信じられない…。

去年

2009年から少しずつ、仕事以外でのアウトプットをはじめていたのですが、
それを見ていただいたことでいろいろと発表の機会をいただいたり、そういうことがさらにサイトを作る意欲になったりと、今年はさらにいっぱいがんばりました！！！！

こんなことを書いていました。

今年はこれらのアウトプットがさらにいろんな形になった一年でした。

一番大きかったのはやっぱり本を書かせていただいたことです。

それもあって、今年は去年に比べてあまり個人サイトを作ったりする時間がとれなかったのでプライベートではWebに関わることは特になにもしていなかったような気がしていましたが、振り返ってみるとけっこういろいろやっていました…！

• 2011.01　WordCamp Fukuokaのサイト作成
• 2011.02　WordCamp Fukuokaで登壇
• 2011.03　CSS Nite LP14で登壇
• 2011.05　VIVID COLORS DESIGN（アメブロ）をはじめる
• 2011.05　パブーでデジタル写真集をいろいろ作ってみる
• 2011.06　 iPad Sketch Galleryをはじめる（結局100枚描いてない件…！)
• 2011.06　ポートフォリオサイトをまたまたリニューアル
• 2011.08　StartUpWeekendに参加
• 2011.09　小倉でFireworks勉強会を開催
• 2011.09　Web Attendに参加
• 2011.09　WordCamp Kobeに参加
• 2011.09　楽天APIコンテスト銅賞受賞
• 2011.10　Androidアプリ「きせかえtwitbeam」内蔵壁紙デザイン
• 2011.11　FC2ブログのスマートフォン用公式テンプレートをデザイン
• 2011.12　Fireworks CS5/4/3 (速習デザイン)出版
• 2011.12　three.jsにハマる
• 2011.12　Fireworks Interviewsにインタビューしてもらう

今年の振り返りや反省をいくつか。

アメブロはじめてみた。

友達がピグにハマりまくっていたり、
まわりでアメブロでブログをやっているひとが多かったりと、
いろいろ気になったのではじめてみました。
何事も体験してみないとわからないですもんね。
なるほど、通知機能とかよくできてるなーと使ってみて改めて思いました。
この辺はまた改めてまとめたいと思います。

StartUpWeekendに参加した

その時の様子はこちらなど（StartUpWeekend3日目レポート！）に書いています。
ホントいろんな方と知り合うことができました。
すごく楽しかった！！これは来年もあったらぜひとも参加したいです。

MashupAwardに応募できなかった

去年に引き続き、絶対応募しよう！と思っていたのですが、
バタバタしていて結局何も作れず…応募できませんでした。
来年は計画的にサイトつくって応募したいなぁ。

iPadで絵を描く、100枚達成できなかった…

あれだけハマっていたiPadでのお絵描きですが、
最近全然できておらず…！
結局まだ100枚達成できていません…
た、達成できる気がしない…！w

めちゃくちゃ本読んだ

今年はめちゃくちゃ本を読みました。
いっぱいインプットしたので、来年はもっとしっかりアウトプットできるように頑張ります！

今年読んだものでもう一回読んでおきたいもの↓

• iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
• ブランドをデザインする!
• Webデザイナーのための jQuery入門　魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)
• 実例で学ぶ「伝わる」デザイン
• 欧文書体―その背景と使い方 (新デザインガイド)
• 文字の組み方―組版/見てわかる新常識

ブログってすごい

…というとなんか大げさな感じもしますが、
地方在住のへっぽこWebデザイナーの私が本を書かせていただくことができたのは、とにかくブログのおかげです。
Fireworksマニアがきっかけで書かせていただけることになったので、ブログの大事さを改めて感じた一年でした。

来年も更新頑張ります♪

Fireworks CS5/4/3 (速習デザイン)

「気になったことはとりあえずやってみる！」は来年も続ける

気になったらいてもたってもいられなくて
すぐに試してみたくなるタチなのですが今年も例外なくそんな一年でした。
パブーでデジタル写真集をいろいろ作ってみたり、友達とデザインフェスタに出展してみたり。

来年も気になったことにはなんでもやってみようと思います☆

来年も頑張ります！

ありがたいことに、来年Fireworks関連でいくつかお話しさせていただくことになっています。

【東京】2011.02.03(fri) CSS Nite back2basic #8「Fireworks」

【福岡】2011.01.17(thu) 「速習デザインFireworks CS5/4/3」出版記念「Fireworks厳選Tipsチュートリアル」

どちらも現在申し込み受付中なので、もしご都合がつけばお越し頂けるとうれしいです^^

来年も無理をしないように楽しく元気に過ごせるよう、頑張って行きたいと思います。

来年も、どうぞよろしくお願いします☆

仲良くさせていただいている@susipakuさんのご紹介で、
tasteのレンズ保護用のフィルターでフィルターデビューしました！！！！

susi-pakuさんはあの人気写真素材サイト、PAKUTASOも運営されています♪

そもそも保護用フィルタというものがあることをよくわかっていなかった私。

今回、保護用フィルターデビューを果たした私なのですが、

そもそもフィルタって、キラメキを与えるフィルタとか
なにかしら写りに変化を与えるためのものしかないと思っていました。

なので、つけてもなんの変化もないフィルターっていうもの存在を知った時
正直、「いるの？？？？」という感じで、使ったことはありませんでした…。

そしてレンズに傷をつけてからはじめて気付く、保護の大切さ（遠い目）

傷を付けて気付く、保護用フィルターの大切さ。

レンズフィルター、保護用フィルター…

うーん、あったほうがいいんだろうなと思いつつも
あまり必要性がわからず…そしてなかなかお高く…。

結局存在を知ったあとも、使うには至っていませんでした。

私はカメラを基本どこでもおかまいなしに持っていって、
どんな環境でもひたすらシャッターを押しまくる！

ホコリ？汚れ？んなもん入ってたらあとからPhotoshopで（ry
ぐらいの勢いでとにかくどこにでも持っていってシャッターを押して、
時には床に這いつくばり…

写真撮影上手くなることしか考えていなかったので
それはそれはもう…カメラの扱いは…褒められたものではありませんでした…。

そんな扱いをしていたために

事件は起こりました。

大事なレンズに思いっきり傷を…。

つけました。

最悪です。

今思えば、もしフィルターをつけていたら、
フィルターが傷ついた（もしくは割れた）だけで済んで
フィルター代、数千円の損失ですんだんでしょうけど、
レンズ本体に傷をつけてしまったらはそれではすまないんですよね…………（遠い目）

2度とこんな思いはするまいと
なんらか対策をせねば…！と思っていたところでした；；

そんなとき、この保護用フィルターを教えていただいて、
改めて保護フィルターの存在を思い出し、今回のデビューとなりました。

実物を見てみると…めっちゃ薄くて軽い。

届いたフィルターを見て見ると、本当にめちゃくちゃ薄くて軽い。

こんだけ薄いと歪んでしまったりするんじゃないか…なんて思っていましたが、全く問題ありませんでした。ためしにフィルターだけをいろんなものにかざしてみたのですが、レンズがあるとは思えないくらい何のゆがみもありませんでした。

もちろんつけて撮った写真も全く何の違和感も問題もありません。

日本の職人さんすごい…！

結構丈夫です。

外枠の素材もとてもしっかりしていて、付属品だったかのように何の違和感もなくレンズにフィットしています。 薄いのにホントにピッタリフィット。

しっかりとフィットするのですが、はずしにくいということは一切なく、外したいときにはさっと外せます。 装着も簡単ですし、ぐっとしっかりホールドされるので、落ちることもなく快適です。

ちょっとぶつけても大丈夫そうw
（いえ、ぶつけないように気をつけます＞＜）

写真撮ってみたよ

というわけで装着して写真撮ってみました！

…ってもうちょっと歪んでないことがわかりやすい被写体を撮ればよかった…。

また撮ったら更新します＞＜

とてもクリアに撮れました。

フィルタを外して撮ってみたりもしましたが、私の目では写りに違いは感じられませんでした。

使ったフィルターのサイトなど

今回フィルターデビューしたのはtasteというメーカーのレンズフィルターです。

私が使っているフィルターはこちら

taste ピラレットフィルター WP-S MC UV 62mm
	ティースト Amazonで詳しく見る

Amazonで買えますよー☆

このレンズにつけてます↓

シグマ 30mm F1.4 EX DC デジタル専用 HSM ニコン用
	シグマ Amazonで詳しく見る

これからはもっとレンズを大事にして（あたりまえ）
もっといい写真が撮れるようにがんばります！！

susi-pakuさん、この度は本当にありがとうございましたー！^^

http://fireworksinterviews.com/

という、世界各地のFireworksユーザーにインタビューをし、
それを掲載しているサイトからインタビューを受けました…！！

Fireworksユーザーにはおなじみの
今やFireworks界最強のテクスチャ配布ブログといっても過言ではない、
indigo note(http://indigonote.com/)さんにバトンを繋いでいただき、今回のインタビューとなりました☆

うれしい！

indigo noteさんのインタビューページはこちら（ていうかindigo noteさんかわいすぎてやばい。）

ということで私も載りました。

ででーん。

ピースとかしちゃってます。

浮いています。

いや、普段どこかに出掛けてもいつも私は写真を撮る側なので、
まともに正面から顔が写っている写真がほとんどないのですよ…。
なのでこういうときいつも困る…。

ちなみに、最初この写真を送っていたのですが、

顔が小さいよー！とあえなくボツになりました。

ねこ忍者に顔はめ。

いい感じに正面顔。

…。

これでこの一覧に並んだら大やけどするところでした。

やさしく止めてもらってよかった。

さて、肝心のインタビューなのですが、

海外のサイトなので、インタビューはもちろん英語でした。

全部。

google翻訳先生に手伝ってもらったりして、
質問の内容は理解できたのですが、

回答を上手く英訳できない…！！！！！！

……………………。
そこで困り果てた私は、

日本語が恐ろしくペラペラの

ロックロブスターのNed(@1080d)に頼み込んでみました。

「英訳してもらえませんか…！！！！」

本当に快く訳してくれました。
Ned、本当にありがとう！！；；

ということで、きれいな英語で無事に答えることができました！！！

画像はいろんなところから拾ってきてくれたみたいで
とてもいい感じにまとめていただいてます…！

Fireworks Lovers Jのこととか
明星和楽とかWordPressコミュニティーとか、
（Fireworksとは全然関係なくなっちゃってるけどw）
いろいろ思いつく限りどさくさにまぎれて宣伝しました！！！

よかったら見て見てくださいー！

http://fireworksinterviews.com/yuki-yamaguchi

P.S とりあえず、痩せたい。（もう何年いっているかわからないので多分無理）

この度、ご縁があってFireworksの本を書かせていただくことができました。

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

12月7日発売予定です^^

先日twitterなどで発売日が決まったことを告知させていただいたのですが、
何名か予約したよ！なんて声をかけていただいて本当にうれしい限りです；；

結構いい内容に仕上がっていると思うのですが、
また発売日前でなにも詳細が公開されていない状態なので

「予約して買ったけど求めていた内容と違ったーー」

ということがあっては、
予約までして買っていただくのに本っ当に申し訳ないので…。

今日は、ちょっとその本の中身を紹介させてください！

Fireworksによる画像パーツのデザイン

Part2です。

FIreworksの基本動作が一通りマスターできるように考えました。

基本の操作説明ってなんか退屈な説明になりがちなので、
いろいろ実際に作りながら覚えられるようになっています。

これらのレシピをこなしていくと、
終わる頃には「あー大体こんな感じでパーツ作るんだなー」と
わかってもらえるような作りにしています。

すでに基本はわかっているよーという方も、
レシピをひとつ増やすつもりでやってみていただけるように、
作るものはボタンやバナー類など、役立ちそうなものにしました。

実際に作っていくものはこんな感じです。

ボタンを作る

こんな感じのボタンを作ります。
自動シェイプの使い方、塗りの適用方法、フィルタの適用法方法、共有ライブラリの使い方などを学びます。

ナビゲーションを作る

ステートを使ったグローバルナビゲーションの作り方を解説しています。
のラインを使った立体感の出し方や、くぼみの表現方法、ロールオーバー状態をプレビューで簡単に確認しながら作る方法などを説明しています。

ポラロイド風写真を作る

このLessonは、基本的な画像のマスクの方法と、カラーモードの変更（焼き込みなど）のやり方を解説しています。

バナーを作る

パターンやテクスチャを使って作る、質感あるバナーの作り方を解説しています。

アニメーションGIFバナーを作る

ステートをつかったアニメーションGIFの作り方です。まだまだECサイト等で活躍の場があったりするので、しっかり解説しています。

ブログヘッダーを作る

ストローク（線）の質感を使って消印を表現します。
このLessonのねらいとしては、ストロークの設定次第でいろいろな質感が表現できることをしってもらうことを目的としています。

LET’S TRY!!

練習問題は自動シェイプを使って以下のようなボタンをいろいろ作るという課題です。
完成見本データがDVDに収録されていますので、そのまま色を変えて素材としても使えるかも。

アニメーションGIFアイコンもまとめていっぺんに作れます。
完成見本データがDVDに収録されています

この本の一番のポイント！1つのサイトをじっくりデザイン。

Part3です。

何パターンかトップページを作るようなLessonにしようかとも考えたのですが、1つのサイトをワイヤーフレームから下層ページまで、Fireworksの機能を使いこなして仕上げるまでの課程を解説した方がよいのではないかなーと、Part3はまるまる全部使って「1つのサイトをFireworksを使ってデザインする流れ」を解説しています。

まず以下のようなワイヤーフレームの作り方を解説しています。

次にこのワイヤーフレームをこのように装飾します。
（このトップページのデザイン手順は、全部解説してます）

そして下層ページ。
ページ機能を使って作っていきます。

マスターページ機能を使ってヘッダーを全ページで共有させたり、
共有レイヤー機能を使ってすべてのページでサイドバーを共有させたり。

トップページではサイドバーは不要なので、
そういう場合どうやって除外するのかも書いています。

あと、マスターページ機能では管理するのが難しいフッター
（ページによって表示位置が異なるので）を
うまく共有させる方法など、
けっこう実用的な内容になっているのではないかなー、と思います^^

完成データもDVDに入ってます。

ホットスポットツールでリンクを作って、
リンクが有効なPDFを書き出す方法等も解説。

スライスも、
オブジェクトの大きさに合わせて自動的にスライスオブジェクトを作成する方法から、
重なっているオブジェクトをスライスするときの方法までいろいろと解説しました。

他にもいろんなレシピ。

Part4です。

Fireworksマニアで紹介したものも、
手順をすべて書き直しているのでかなりわかりやすくなっていると思います。

もちろんすべて完成データ付きです。

ウッドプレートとプレス文字で作るタイトルロゴ

ワンオブジェクトで作れる立体的なボタン

画像のマスクを極める

テキストオブジェクトでマスクしたり、自動シェイプでマスクしたり、選択範囲でマスクしたり。パスのマスクだったりグラデーションマスクだったり。

頻繁に使うマスクの、あらゆるマスクの方法を解説しました。

コラージュ風パーツを作る

マスキングテープを作る

星ツールでさまざまな点対称の模様を手軽に作る

これはサイトでは星ツールを使って作るとしか紹介していなかったのですが、
自動シェイプのプロパティパネルからどれくらいの値を設定すればこの形になるか、
というのを全部載せているので、すぐ同じ形が作れるようになっています。

（ちなみに自動シェイプのプロパティパネルから自動シェイプの黄色のハンドルの数値が変更できるのはCS4以降です。）

切手のオブジェクトを作る

整列や切り抜きがマスターできますよ☆

LET’S TRY!!

こんな感じで組み合わせて作ってみましょう！という練習問題。
こちらはこんな感じの完成見本ファイルがDVDに入っています。

東京タワーのまわりのぽわぽわっとした模様は、パスにデフォルトのストロークを当ててるだけです。

簡単ですよー！

その他色々。

パターン、テクスチャ、ストロークの早見表をつけました。

パターンはパターンのサイズも並記したので、スライスのときにとっても便利だと思います！

フリー素材を入れました。

パターン、テクスチャ、写真の素材をDVDにおまけでいれました。

はじめてFireworksに触れて、ソフトに慣れよう、これからいろいろとデザインを作っていこう！というときに素材に使える写真がなくて作業がはかどらない…！ということがよくあったので、何にでも使える完全フリーな素材を入れました。

ダミー画像に使うもよし、
これでサンプルサイトを作るもよし、
商用サイトに使うもよし、

なんに使っていただいてもOKです。

たくさん練習していろいろ作ってもらえるとうれしいです^^

レシピ系は全部完成ファイルがDVDに入っています。

DVD付きで完成データが全部収録されているので、実際に出来上がったものをみていただくことができます。

小ネタもいっぱいいれました

長年使っていて、そうだのか！知らなかった！って発見がいろいろあったのですが、そういうのもコラムとして随所に織り交ぜました。

ちなみに本書はCS3/4/5対応となっていますが、新しくなって改善されたところやよくなったところを活用しまくった本になっているので、ぜひCS5（最低でもCS4）での実習をおすすめします。

付属のDVDに体験版が入っているので、それでぜひCS5でお試しください！

なんだかとりとめもなく書いてしまいましたが、こんな感じの本になっています。

私がもう何年も使ってきて「最初からこれ知ってたら全然効率違ってたのに…！！！」と思ったことは全部本の中に詰め込んだつもりなので、これからFireworksを使いこなしていくぞ！という方のお役に立てるんじゃ…ないかなと…た、たてたらいいな…。

手順についても、同僚のプログラマ女子に夜な夜な試してみてもらって（えりかっち本当にありがとう！！；；）、手順通りにやったら同じものが作れるか、戸惑うところはないかを全ー部見てもらって修正したので、Fireworksはじめて！って方でもきっと読みやすいと思います。

もしちょっとでも気になる内容がありましたら、
図書館や本屋さんで立ち読みでもかまいませんのでぜひチェックしていただいて
一緒にFireworksマニアになっていただけるとうれしいです！！^^

長文にお付き合い頂き、ありがとうございました♪

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

10月が公私ともに充実しすぎていたので（ものはいいよう※お察しください）
なんかもうなかったことになっているYUKIです。

こんばんは！

10月、このブログ一回も更新してない…ぐす；；

そんな10月の最終日に！
デザインさせていただいたFC2ブログさまのスマートフォン用公式テーマが公開されましたー！

わーい！

こんな感じのデザインになっております♪

今回久しぶりにWordPress以外のブログのテーマをデザインしたのですが、
レンタルブログのテーマ作りって実はものすごく思い入れがあるんです。

まだプログラマーやりながらWebデザイナーの勉強をしていた頃から
勉強のためにいろんなブログサービスのテンプレートを作っては配布してWebデザインの勉強をしていたのです。

↓こんな感じの作ってました。
こうして並べるとなんかもう懐かしくてほろ苦すぎるw

FC2ブログさんはそれがご縁で、PC用の公式テンプレートのデザインをさせていただいたこともあったり。

もう5年以上も前の話ですが…！

なので今回、ちゃんと（？）Webデザイナーとなった今、
こうしてあらためてご縁があって、とってもうれしかったです♪

こうして今Webデザインのお仕事ができるのも
ブログのテンプレートづくりという武者修行があったから！

レンタルブログテンプレのデザインは私の原点！w

なんかいろいろ思い出してまたやる気があがりました☆

今回デザインさせていただいたスマートフォン用公式テーマは「Sweet」という名前で配布中です！

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

FC2ブログ

ちなみにその当時からある私のFC2ブログはこちらw

お友達の@nobushinoちゃんが立ち上げた新会社、モアモストの創立記念パーティーに行ってきました！

各地からたくさんの人が集まっていました！のぶしのパワーすごいっ！！！！

モアモストは、ペット関連の大きなメディアを運営していくことが事業の柱。

「ペットの需要・供給のバランスをとり、幸せな動物達を増やし、最終的には殺処分0を目指していきたい、そのための大きなメディアをつくっていきたい」とのこと。

素敵です…！！

第一弾として「Pet Ribbon」という迷子ペットを探すための掲示板がまもなくオープンします。

ぜひチェックしてみてください！

その他に、写真をパラパラ漫画にして成長を「見る」ことで育児を楽しくしてくれる、育パパ・育ママ向けアプリ「Albub」の正式リリースを予定しているそうです。

先日、スタートアップウイークエンドというイベントでデザインをお手伝いさせていただいたアプリだけにこちらも楽しみです♪

パーティーは、場所は大名にあるGuildCafe Costa（ギルドカフェ　コスタ）で行われました。

福岡天神のど真ん中にできたCafe＆ワーキングスペースです。
すごくきれいなところでした！

概要をFacbookページから引用↓

Wi-Fi、電源完備、会員（月額1000円）になるとドリンクやフードが50%オフ、会議室、プロジェクター、カメラ、Ust環境などが借りれたりします。

今まで自宅や喫茶店などで個人ベースで仕事を請け負ってきたフリーランスの方々に、効率的に作業ができる環境の提供と、仕事の提供を図ります。

フリーランスで活動しているプログラマーやデザイナー等が1つの場所に集まり仕事ができるスペースの提供

企業からのシステム構築等の仕事をプロジェクトベースでCafeに集まった有志で作り上げるサポート

GuildCafe Costa（ギルドカフェ　コスタ）

〒810-0041 福岡県福岡市中央区大名1-10-14　MATCH２F

Aip Cafeをはじめ、福岡にもこういうスペースがどんどんできると
楽しくなりますね♪

まだFacebookページしかないみたいなのですが、
気になっちゃう感じの方はぜひチェックしてみてくださいね！

GuildCafe Costa（ギルドカフェ　コスタ） Facebook ページ

miel crishunantが九州初出店！とのことでオープニングにいってきましたよー！
モデルさんとかいっぱいきてました！

みんなきれいだったー！！＞＜

写真撮っていいよー！とのことだったのでバシバシ撮ってきちゃいました☆
ということでお洋服と店内をレポートしますよ☆

ショップは、天神コアの2Fにオープンしてます。

『自然体でかわいいパリジェンヌの気取らないスタイルをお手本に、上品なフレンチカジュアルを表現』というのがコンセプトとのこと。

コンセプト通りのアイテムがいろいろと揃っていましたー！

使えるアイテムがお手頃価格。

カーディガンとか、あると便利な使えるアイテムがお手頃価格でいろいろ揃っていました！

↑リボンの刺繍がかわいいカーディガン。

↑こっちは花がくっついてます☆

オープン記念のセット価格ものも

SPECIALフェアで2点セットで8,000円とかも。

上下セットでこのお値段で変えたらいいですよねー。

小物にときめく！

鞄や靴、ストール、アクセサリーといった小物類がかなり充実していました！

アクセサリー類はクラシカルな感じがかなりツボです…！！！

靴

靴。色もいい感じ♪

アクセサリー

アクセサリーもクラシカルでかわいかったです！

↑クラシカルな指輪。

ピアスもかわいいー！！！！
あけてないのが悔やまれます…。イヤリング…ないかな…＞＜

↑主張しすぎないネックレスっていいですよね！1995円とお手頃。

バッグ

バッグがかなり充実してました！色合いも秋らしく、上品なのが◎

ストールなど

レトロでかわいいストールやスカーフ！こういうレトロな雰囲気大好きです…！！

アウターとか

↑アウターなんかもシンプルなんだけどちょっとデザインが凝っててよかったです。

お店の雰囲気

↑お店の外観

↑お花いっぱいきてました！

頂いたカタログ

↑もらってきたカタログ。うーん、かわいい！

感想など

今回、コアのリニューアルにあわせての新規オープンだったみたいなのですが、
実はコアって10代の女の子限定！なイメージがあって、
最近あんまりいってなかったのです。

けど、いって見ると結構お店も増えてて、私が好きな感じのテイストのブランドとかも結構あって、しかも全体的にお手頃価格！！これはちょっとお買い物ルートに加えていかねば…！と思いました。

あー楽しかった！

公式サイトはこちら→miel crishunant
ショップブログはこちら→Blog

国内最大のWordCamp

9月11日に開催された
WordCamp Kobeに参加してきました！！

なんと600人弱の参加があったとか！！！

すごすぎる…！！！

国内No1記録を大幅に塗り替えちゃいました☆

会場は神戸芸術工科大学

神戸には同僚の@ask4416といっていたのですが
@ask4416は午後からの参加だったので、

午前中はWeb Attendで仲良くなった
@hibiki443さんが同じ三宮にお泊まりだったので
一緒にお出かけしました！

わーいわーい！！！

学校到着！

色々写真撮ったので貼っておきます♪

おっきなポスター！

かわいいです…♪

登ってゆきます。

学内の案内板がカラフルでかわいい！

きれいな学校です…！

なんかしてました。

キリン。蔦を絡ませるのかな？

この案内板もきれい。

ここを進んで右に曲がったところから会場に入りました。

パンフレットはセルフサービス

パンフレットなどはセルフサービスでした。

福岡では毎年、パンフレット類の袋詰めが恒例行事なんですが
福岡もこのスタイルでいいのかも？？

気になるパンフレットをいろいろもらってメイン会場へ！

アンカンファレンス

早速アンカンファレンスの説明があり、グループ分け！

私は@hibiki443さんと一緒に
@takayukisterさん＆ @horike37さん率いる
プラグインチームに混ぜてもらって
いろいろトークしてきました！

あると便利なプラグインのネタが出たので
これ全部誰か実現してくれないかなぁーーーと心から願っています…！w
（他力本願でごめんなさい＞＜）

楽しくランチへ

アンカンファレンス後は
同じグループだった@kana_f_h_pさん@pan__ichiさんと仲良くなって
4人でランチしてきました♪
楽しかったー！！！

こういう出会いがあるのがあるからWordCamp大好き^^

そして本編へ

そんな楽しいランチのあと、会場に戻ると…

ひとひとひとひとひと！！！！！！！w

おそるべし600人っ！

まずはNaoさんっ♪満員御礼でした！！

IIJさん

プライムストラテジーさん

他にもいろいろ見てきたのですがメインホール以外の写真撮るの忘れてました…＞＜

いくつか満員過ぎてみられなかったセッションがあったのですが
後日動画が公開されるみたいなので、それを楽しみにしています！

いろんなノベルティーゲット！！

マグカップやセンスやクリアファイルを頂いたりもしました♪

わーい☆

完全なお客さんとしてのWordCamp

福岡以外のWordCampに参加したのは
というかお客さんとしてWordCampに行くこと自体はじめてだったので、
ゆっくりのんびり、いつもと違う感覚でたのしめてよかったです！！！

WordCampを鹿児島でも。

いつもなんですが、LTはおもしろいもの＆参考になるものがいろいろでてきますね！
どれもすっごくよかったです！！

あの短い時間でぎゅっとまとまっているのがすごい！！

鹿児島でもWordCampやるぞ！というLTもあり、九州でもっとあるといいのに！！！！と思っていたのでとっても楽しみです！福井の蟹も気になりまくりでした…♪w

参加してみて、いいなぁと思ったところ

スタッフの方の数がすごく多い！

この規模を見事に運営してらっしゃいました！

関西圏以外からもたくさん&家族連れ、お子様連れでの参加も多数！

いろんな方が参加しやすいイベントってすばらしいですよね！
福岡からも新幹線でさっといけるし、
東京からも新幹線でも飛行機でもこれるし、
神戸は立地的にも全国的なイベントをするのに優れている土地なのかな、と思いました☆

スタッフTシャツいいな。そしてTシャツは色付きがいいな。

スタッフの方のピンクのお揃いのTシャツがすごくわかりやすかったです。

サイトにあった写真付きの道案内がとっても親切

微妙にわかりにくい場所だったので、サイトにあった写真付きの道案内地図が本当に役に立ちました！
こういう心遣いって大事ですよね…！
大学の中も広くてまよっちゃったりしがちですが、完璧な誘導がしてありました！すばらしい…！

スタッフの皆さんがみんな楽しそう！

これは福岡も同じなんですがみんな楽しそうでした♪

WordCampのスタッフってなんか楽しいんですよねー。なんだろうね、あれ。

いろんなプログラマもデザイナーもコーダーもディレクターもそんなのなにも関係なく
みんなでひとつのこと一緒にできるからかなぁ？

あんまり職種問わず！なイベントないですもんね^^

おまけ：名刺は派手な方がいい

そういえば名札はフォルダーのみ配布されて
中身は自由に名刺など入れるようになっていたので、
会社名刺ではなく、派手で目立つ方の個人名刺をいれていました。

するとすると…

「もしかしてYUKIさんですか？名刺がお花だったから…！」と
会いたかったフォロアーのさんに話しかけてもらえて
無事にお会いすることができました！！

名刺派手にしててよかった！！！！と思った出来事でした☆

新幹線の都合で懇親会に参加できなかったことは心残りですが；；
いろいろといいことづくしの神戸の旅でした☆

ホントにすてきなところだったので
今度は観光とグルメツアーでも神戸＆大阪に行きたいな♪(*´▽｀*)ノ

お世話になったみなさま、本当にありがとうございましたー！！！

大阪の梅田で行われた
Web Attend 2011に参加しました！！

100人以上が集まる大きな飲み会です！

主催の@yat8823jpさんにイベントのことを教えていただき、
翌日のWordCampKobeの懇親会は新幹線の都合で参加できないこともあって
よろこんで参加しました♪
場所はパーティスペース＆バー オープンドア。

以前一度梅田にきたことがあるのですが、
似たようなビルが多すぎて方向がさっぱりわからず
めちゃくちゃ迷った記憶しかなかったので、

これはひとりでは絶対たどり着けないだろうと
東京組のみなさんと梅田のヨドバシで合流させていただくことに。

…ちなみに貴和製作所にいきたくてヨドバシいってました（6Fにある）
ビーズいっぱいうはうはでした♪

福岡にもできたらいいのにー！！！＞＜

…話がそれました。

肝心のお店ですが…
案の定、一緒に連れて行ってもらわないとわからない感じの場所でした…！

拾っていただけてよかった；；

みなさんのおかげで無事に到着。

会場に集まったのは100人超のみなさま！！！！！！！
これはすごい…！！

しかも翌日にWordCampがあるからか、
全国各地からいろんな人が集まってました！

司会とか受付とかされていた方々がみんな明るくて元気ですごくよかったです！

そしてみんな若い！（笑）

楽しかったー♪

そういえば

イベント中、こんなことがありました。

私、化粧と髪型と服のテイストが安定していないせいか
一度しかあったことのない方にはよく顔を忘れられるのですが…！
（私はすごく覚えている方なので余計切ない）

ぼっちになりたくない一心で
一度あったことがある人になにがなんでも見つけてもらおうと（あぁなんて他力本願）
twitterで「こんな格好の人がいたら私です！」と
当日のきていた洋服のイラストを描いてUPしてみたりしていました。

それが違う意味で効果を発揮しまして、
「服の画像見たのでそうかなぁと思って！」と
twitterで相互フォローさせていただいているみなさまに声をかけていただくことができたのです…！；；

本当は自分からたくさんの人に話しかけたかったのですが
なにせ普段引きこもりで飲み会なんて滅多にいかないのでw
こういうときなかなか自分からいけない私…。

なので本当にうれしかったです…！！

ありがとう洋服！！！＞＜。

トラックパッドで必死に描いてよかった！！！w

関西に来ないと会えない方々にたくさんご挨拶できてうれしかったです！

そうそう、神戸で福岡仲間もできました！
やった！やったよー！！！！

主催の@yat8823jpさんはじめ、

みなさま、楽しい時間を本当にありがとうございました！！

9月3日(土)、小倉のフォルム三番街にて
Fireworks勉強会が開催されました！

福岡にはこういった勉強会用のスペースとして
AIP Cafeがありますが、北九州にもあったんですね！素敵！！
今回、アットウィルの田川さんが主催してくださり、
なにか話してみませんかと声をかけていただきました。

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

今回、私がお話しさせていただいたのは

• マスターページ機能、共通レイヤー機能など、ページ管理機能の便利さ
• 全ページ共通しているけれどページごとに位置の異なるフッターはシンボル化して配置で解決！
• 整列パネルのサイズ揃えボタンはすごく便利。
• スタイル機能と属性のコピーはかなり使える
• FireworksのパスデータをIllustratorに持ち込むなら［書き出し］メニューのFXG書き出しがおすすめ。

などなど。

こんな感じのことをサンプルを使ってご紹介させていただきました。
他にもいろいろと話が膨らんで

• Illustratorに比べてドット柄やストライプ柄などのパターンの適用が楽
• 複数ページを1ファイルで扱えて、共通部分を一発で更新できるのはとにかく便利

と、普段はIllustratorやPhotoshopをメインで使われている方ならではの着眼点でいろんな意見が出てきておもしろかったです！

あと、以下話に出た便利なエクステンション類です。
勉強会の時URLを出せなかったのでここで。

• CSS Sprite Extension(CSS Spriteの実装を手助けしてくれるエクステンション)
• 敷き詰め(オブジェクトを指定間隔で敷き詰めることができるエクステンション)
• Guide (ページ間でガイドラインコピーできたりするようになるエクステンション）
• Sunburst(インパクトのある放射状のマークが簡単にかけるエクステンション)

これを機にFireworksを使ってみていただけるとうれしいなぁと思います^^

参加していただいた皆さん、本当にありがとうございました！！^^

今度はAIP Cafeでもみんなであつまってやりたいなぁ☆

Fireworksだけでなく、デザイナー勉強会したい！

Startup Weekend Fukuoka 3日目終了しました！！！
１日目、2日目のレポートはこちら。

• Startup Weekend Fukuoka 1日目参加レポート！
• Startup Weekend Fukuoka 2日目参加レポート！

学びの多い、とても充実した3日間を過ごすことができました。

今日も朝の9時から作業開始で、
最終日の今日は17時から最終のプレゼンがあって
20時頃からアフターパーティーというスケジュールでした。

今日も朝からフル稼働。
デザインとコーディングを仕上げました。

あっという間に時は立ち、なんとか作り終えて、
17時からはいよいよ最終プレゼンです。

審査員は、
孫泰蔵さん、デジタルガレージの安田幹広さん、ロックオンの岩田進さん、
そしてMOVIDA JAPANの伊藤健吾さん、ECナビベンチャーズの永岡さん
という…名前をお聞きするだけでもビックリするようなみなさま。

ガクガクブルブル…

私が発表した訳ではないのですが、それでものすごーく緊張したので
発表したみなさまはよほどの緊張だったろうと思います。

このプレゼンなんですが、
これがとにかく難しくて、
サイトのコンセプト、ビジネスモデル、今後の展開等々
可能な限りの魅力的な情報を全部！5分に！詰め込まなければならないのです。

3日間の思いの詰まったサイトの説明を5分にするのはやっぱり難しくて
シルエッターチームも時間オーバーしてしまいました。

制作に時間をかけすぎて
プレゼンに向けての準備時間が足りなかったです＞＜

クオリティ高いものをつくりつつも、
この5分でそれを伝えきれなければ意味がないというのは
結構大変なことでした。

こういった3日間の時間配分も
かなり重要だなぁと思いました。

プレゼンの結果、
残念なことに私たちのチームは大賞をとることはできなかったのですが
とてもいいものができたと思うし、有意義な時間を過ごすことができました。

審査員の方々からもいろいろとためになるアドバイスをいただくことができました。
今後の仕事に生かしていきたいです！

今回、私はシルエッターというサービスのプロジェクトと、
かけもちでALBUBというサービスのプロジェクトのデザインを担当させていただきました。

ということで所属チームを紹介します♪

シルエッター

まず、メインで参加したシルエッターチームです！

チームメンバーは

@shikajiro / @shin73 / @haworuru / @mihoko62 / @yuki930

の5人。

（まだリリースしていないので詳細はまた後日）

私はサイトデザインを担当しました。

（リリース前なのでちっちゃ（ry

エンジニア×2 デザイナー×1 マーケッター×1の完璧なバランス！！！

ホントにチームメイトに恵まれて、
かなり楽しく進めることができました。

コンセプトや方向性は絶対面白いと思うので
このままがんばってみんなで作り上げたいです☆

ALBUB

次はデザイナーとして参加させてもらったALBUBチームです！
今回の参加のきっかけを作ってくれた@nobushinoのチームです！

チームメンバーは

@nobushino / @shunsuk / @niaeashes / @yuki930

の4人。

全体的にデザイナーさんが少なくて、nobushinoチームはオールエンジニア！なチームだったので、デザインをお手伝いさせていただきました！アプリデザイン、ロゴ、サイトデザインを担当しました。

ALBUBは写真をパラパラまんがにして成長を「見る」ことで、育児を楽しくしてくれる、育パパ・育ママ向けアプリです。

3日でアプリの実装ととランディングページまで仕上げるこのチームのスピード感…！凄まじかったです…！

ALBUB
写真をパラパラまんがにして成長を「見る」ことで、育児を楽しくしてくれる、育パパ・育ママ向けアプリ

デザインをさせていただいて

どちらのチームもスケジュール的にもデザイン作ったところから即コーディング！即実装！
という感じだったので、あとから直すのも簡単ではないので、一発でOKの出るデザインを作るのは気合いが入りました…！！

まぁ、気合い入れて作ったところで直したいところはガンガン出てくるんですが…
やっぱりデザインはせめて一日は寝かせたい＞＜

あと、素材が集まらなくて
仮で作っているまんまところとかもあったりするので
きれいにしたくてうずうずします…（笑）

また今回、コーディングをチームメンバーにお願いしました。

基本すべて自分でコーディングするので、
他人にデータを渡すことがない私…。

コーディングをしてくれた方がお二人ともデザインもコーディングもこなすタイプの方で、「Fireworks使わない」デザイナーさんだったため、慣れないFireworksデータをコーディングしてもらわなければいけない、というのが本当に申し訳なかったです＞＜

ただ、Fireworksでよかったところがあって、
それは「フォントをアウトライン化して渡す必要がない」ということでした。

Fireworksでは、たとえフォントがなくても
最終形状を覚えていてくれるので、文字の再編集さえしなければフォントを持っていなくても外観が保持されるのです。

これなら、たとえテキストに変更があっても、
スライスを切ったデータをデザイナーに戻して文字だけ直してそのままコーディングしてくださる方に返す、といったことも可能です。

スピード感が重要な今回のような状況では特にこれは便利！！！

あとは、スマホサイトは経験あるのですが
アプリ用のデザインははじめての経験でした。

自分のデザインがアプリとして動く…感動。じーん。

ALBUBのほうは、
すでにサイトもオープンしていて
現在はアプリのベータテスターを募集しています。
よかったらぜひ！

シルエッターのほうは、まだ公開にはいたっていないのですが
あと一息でベータテストができそうです！

完成したらまたお知らせしますのでぜひ見てみてくださいね！

さて。

個人的な感想はこんな感じで、
3日間過ごしてきたわけなのですが、
本当に楽しかったです！参加してよかった！
ただ、このイベント、
参加前にイメージしていたイベントとはかなり性質の異なるものでした。

昨日も書いたのですが、
途中一度チームが方向性を見失いかけた時がありました。

それはこのイベントの趣旨を私たちがしっかり理解できていなかったからだと思います。

趣旨を最初からしっかり理解できていれば
もっといいものが出せたかな、くやしいな、と思うところがあるので

StartupWeekendって結局なに？
自分も興味があるけどどんな人が参加してるの？

とかそういう情報を
今後参加してみたい方のために
私が学んだ範囲でわかりやすくまとめようと思います。

長くなりそうなのでそのあたりは次のエントリーわけたいと思います。

最後になりましたが、このような意義のあるイベントを主催し、
なにからなにまでサポートして下さったJonnyさん、李さん、
また開催にあたりご尽力いただいた橋本さん、荒川先生、
この場を借りて改めて御礼申し上げます。

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

Startup Weekend Fukuoka参加レポート2日目です。

今日は朝9時からのスタートでした。終わりは23時。
前日4時に寝たので、朝起きる時もうだめかと思いました…（笑）

今日の成果は

• ワイヤーフレーム一式
• サイトのデザイン一式×２
• アプリのデザイン一式

作りまくりました…！！！！！！

本日はこんな流れで作業していました。

ますは午前中。

チームのみんなで
残りの2日間どのような流れで作るのかスケジュールを立てました。

大体のスケジュールが決まったところでコンセプト決め。

アイデアどんどん出し合って広げていきました。

その広げたアイデアを整理して、今回の2日間でできること、今後実装したいこと、その後の展開などをまとめてスケッチブックに画面遷移のイメージを書いていきました。

ある程度サイトの形が見えたところで、
マーケ・開発・デザインチームに別れて
その後はひたすら作業…作業…作業…。

私たちデザインチームは
ロゴデザインとベースデザインをする2手に別れて作業開始。

私はベースデザインをせっせせっせと作りました。

同じチームのデザイナー仲間がものっすごく頼りになる人で
ベースのデザインが一段落ついたところで引き取ってもらい
コーディングなどなどお願いして
次はデザイナーが足りていない別チームのデザインのお手伝い。

またひたすら作業…作業…作業…。

気付いたらタイムアップでした。
ビックリ＞＜

…ひたすら作業していて写真を撮るのを忘れていたので家で撮ってみました。

なんかこんな感じでいろいろ作っていますよー☆

順調な一日だったようにみえる今日ですが、

実は途中、

「これは「Startup Weekend」なんだ」というご指摘から
アイデアの方向性を見失いかけるということもありました。

みんなでいっぱい話し合って乗り越えました。

これについては
［そもそも「Startup Weekend」というイベントはどういうものなのか］

ということに関する理解不足も原因だったので、この辺は今後参加する人のためにも最終日の記事にがっつり書こうかなと思っています。

今日は早く寝て、明日でしっかり形にしてチームメンバーと成果を発表してきます！！！！！！！！

あと一日頑張りますー！！

この週末はStartup Weekend Fukuokaに参加しています♪

Startup Weekend Fukuoka

http://fukuoka.startupweekend.org/

…簡単に言うと、エンジニアやデザイナーやマーケターなどなどいろんな人で集まって3日間でなんかおもしろいの作っちゃおうぜ！という感じのイベントです。（あってる？）

今日はその1日目。
今日のメインはアイデア出しとチーム決めです。

場所は九州大学箱崎キャンパスです。
初日の今日は19:00開始。

まずは集合して3日間の簡単な説明と
今日一日の流れの説明を受けました。

その後、ちょっとしたゲームを。

40人ほどの参加者をランダムに4人10チームに分けて行いました。
まず、みんなで単語を20個ほどあげます。
その中から各チーム早い者勝ちで2つ選び、それを組み合わせてサービス名とします。
そのサービス名から、勝手に架空のビジネスモデルを考え、発表するというものでした。

私たちのチームは「博多」と「CAT（猫）」を選択。

私が勢いで選んでしまったのですが、
このゲームは現実性よりもいかにおもしろく聞かせるかというのがポイントだったので
割と無難なものを選んでしまってちょっと後悔＞＜

「ネコ視点で博多の街を見ることができるサービス」
「博多発のネコ型ロボット！」
「ネコ型ロボットが相談に乗ってくれるカフェ」

とかいろいろ考えまして、
まとまったサービス案をリーダーに発表していただきました。

リーダーが会社の代表をされているかたで
お話もかなり流暢で私たちの案をホントにうまく説明してくださって感激でした…！

私もああいう場でさらっと原稿もなく話せるように特訓しなくては…。

そのゲームの後はいよいよ土日で作るサービスをきめるショートプレゼンです。

こんな流れで行われて、作るサービスが決定しました。

• 1回10人ずつ。
• 1案1分ずつ、順に発表
• 10人終了した時点で5分のPR時間
• 発表した10人がバラバラに立ち、観客は気になるアイデアの発表者の元に行き、詳しい話を聞く。
• これを3回繰り返し、計30案。
• その中から投票で8案に絞り込み
• 選ばれた8案で自分が参加したいプロジェクトに別れてグループを組む

私もひとつアイデアを持っていっていたので
1分間プレゼンするつもりだったのですが…

一番手のグループで先にプレゼンした
@shikajiroのアイデアになんとなく方向性が近いものを感じ、
私のアイデアもそちらに混ぜてもらえたら面白いものができそうな気がしたのでそっちに混ぜてもらうことに。

その案は無事に8案に残り、プロジェクトにも入れてもらえ、
5人チームになりました！

私が参加しているチームは

エンジニア×2　マーケ×１　デザイナー×2

の5人体制です☆

すごくバランスがいい…！！

初日はメンバー同士自己紹介して親睦を深めつつ、
いろいろサービスのアイデアを出し合って解散しました。

おもしろいものが作れそうです♪

明日は9時から！
頑張って作ってきまーす！！！！

＜明日につづく＞

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に​使い分けていますか？［2011年7月現在］のつづきです。

コメントやtwitterなどでいろいろ反応を頂きました。
ありがとうございました☆
結構同じ使い分け方の方もいらっしゃってほっとしています…！

今日はこのあいだのつづきで、
自分の中でもやーっとしていた使い分けの部分を実際に比べてみました！

今回は、

1. 透過を含まない大きな写真の書き出し
2. 透過を含まない小さな写真の書き出し
3. 透過を含み、且つCSS Spriteで使用するための画像の書き出し

の３つをチェックしてみました！

チェック1：透過を含まない写真の書き出し（大きいサイズ：1200px × 1600px）について最適な書き出し形式はどれ？

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGはPNG-24で書き出します。
(透過を含まないものなのでフルカラー使用可／透過不可のPNG-24を選択)

JPEGは80%の画質で書き出します。

チェック1-1

それらの画質とファイルサイズをくらべてみました。

チェック1-2

ImageOptimなどの画像最適化ツールを使い、圧縮してファイルサイズを小さくしたたものくらべてみました

書き出すにあたって

チェック１には以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。

PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで 書き出し

書き出し後ファイルサイズ：340 KB（338,376 バイト）

Fireworksで、PNG-24で 書き出し

書き出し後ファイルサイズ：3.4 MB（3,393,649 バイト）

Photoshopで、画質80%のJPEGで書き出し

書き出し後ファイルサイズ：971 KB（970,497 バイト）

Photoshopで、PNG-24 書き出し

書き出し後ファイルサイズ：3.4 MB（3,440,473 バイト）

チェック1-1　そのまま比べてみる

大きな画像なので、並べて比較しやすいよう、一部を切り出しました。
（画像をクリックすると実寸大の画像を表示します）

※正しく比較できるよう、これ以上の画像の劣化が発生しないように
切り出した画像はJPEGも含めてPNGで書き出しています。

fireworks JPEG(80%) 340 KB [338,376 バイト]	fireworks PNG-24 3.4 MB [3,393,649 バイト]	Photoshop JPEG(80%) 971 KB [970,497 バイト]	Photoshop PNG-24 3.4 MB [3,440,473 バイト]

くらべてみて

Fireworksのほうが圧縮率が高い

JPEGについて、Fireworks,Photoshop共に同じ80%で書き出しましたが、
fireworksのほうがかなりファイルが小さくなっています。
その分やや画質が荒くなっています。

fireworks JPEG(80%) 340 KB [338,376 バイト]	fireworks JPEG(92%) 995 KB [994,987 バイト]	Photoshop JPEG(80%) 971 KB [970,497 バイト]

今回の画像では、Fireworksで画質を92%として書き出しすると、
Photoshopに近しい画質・ファイルサイズになりました。

Photoshop JPEG(80%)＆Fireworks JPEG(92%)と
Firerworks PNG-24＆Photoshop PNG-24では、
ファイルサイズが3倍ほど違うが、
等倍で通常見る分には見た目の美しさに3倍もの差は感じないように感じられました。

チェック1-2　ImageOptimで最適化して比べる

ImageOptimとは、PNGやJPEGの様々なメタ情報を排除、圧縮することができるソフトです。
起動したら最適化したいファイルを画面にドラッグするだけ。
書き出し後のPNGファイルもちっちゃくなります。

CSS Nite LP14の松田さんのセッション「Fireworks PNGの特性を活かした、”書き出し”をしない効率的ワークフロ」で紹介されていたアレです☆

詳しくはこちらなどもどうぞ：JPEG/PNGのサイズをぎりぎりまで削減する「ImageOptim」

（ImageOptimはMac用ですので、Windowsな方はPNGGauntletをどうぞ♪）

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
（不要な部分を削るだけなので画質は変わりません。）

上の４つがチェック１のファイルです（下の４つはチェック２のファイル）

圧縮結果

fireworks JPEG(80%) 340 KB [338,376 バイト]	fireworks PNG-24 3.4 MB [3,393,649 バイト]	Photoshop JPEG(80%) 971 KB [970,497 バイト]	Photoshop PNG-24 3.4 MB [3,440,473 バイト]

くらべてみて

すべてにおいてファイルサイズの減少が見られたものの、
PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック1のまとめ

完璧な見た目を優先する必要があるならPNG。

ある程度きれいに見えれば問題ないレベルであれば
ファイルサイズが1/3以下のJPEGが優位。

チェック2：透過を含まない写真の書き出し（小さいサイズ：240px × 340px）について最適な書き出し形式はなにか

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGはPNG-24で書き出します。(透過を含まないものなのでフルカラー使用可／透過不可のPNG-24を選択)
JPEGは80%の画質で書き出します。

チェック2-1

それらをそのまま比べてみます。

チェック2-2

ImageOptimなどの画像最適化ツールを使い、さらに圧縮したものを比べてみます。

チェック2にもチェック1と同様、以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。
PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで書き出し

書き出し後ファイルサイズ：25 KB（24,357 バイト」

Fireworksで、PNG-24で書き出し

書き出し後ファイルサイズ：131 KB（126,996 バイト）

Photoshopで、画質80%のJPEGで書き出し

書き出し後ファイルサイズ：49 KB（45,591 バイト）

PhotoshopでPNG-24で書き出し

書き出し後ファイルサイズ：127 KB（126,689 バイト）

チェック2-1　そのまま比べる

fireworks JPEG(80%) 25 KB [24,357 バイト]	fireworks PNG 131 KB [126,996 バイト]	Photoshop JPEG 49 KB [45,591 バイト]	Photoshop PNG 127 KB [126,689 バイト]

fireworks JPEG(80%) 25 KB （24,357 バイト)	fireworks PNG 131 KB （126,996 バイト）
Photoshop JPEG 49 KB （45,591 バイト）	Photoshop PNG 127 KB （126,689 バイト）

くらべてみて

検証１−１同様、同じ80%の画質で書き出したが、ファイル容量はFireworksのほうが小さい。

4つの画像の見た目にファイルサイズほどのものを感じなかった。

チェック2-2　ImageOptimで最適化して比べる

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
（不要な部分を削るだけなので画質は変わりません。）

下の４つがチェック１のファイルです（上の４つはチェック１のファイル）

圧縮結果

fireworks JPEG(80%) 25 KB [24,357 バイト]	fireworks PNG 131 KB [126,996 バイト]	Photoshop JPEG 49 KB [45,591 バイト]	Photoshop PNG 127 KB [126,689 バイト]

fireworks JPEG(80%) 25 KB （24,357 バイト)	fireworks PNG 131 KB （126,996 バイト）
Photoshop JPEG 49 KB （45,591 バイト）	Photoshop PNG 127 KB （126,689 バイト）

くらべてみて

チェック１−２同様、すべてにおいてファイルサイズの減少が見られたものの、

PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック2のまとめ

チェック１と同じく、どうしても完璧な見た目を求めるならPNGだと思うのですが、
このような写真であれば見た目にほとんど差がない印象をうけました。

こちらも容量が1/5以下のJPEGが優位？

チェック3：透過を含む画材の書き出し

用途からPNG一択ではあるのですが、
PNG-8とPNG-32で見た目、容量にどれくらい違いが出るか
PHOTOSTOCKERで実際に使っているCSSSprite用画材で検証してみました。

こんな感じでいろんなパーツを１つのファイルにまとめています。

わかりやすいように背景を黒にしてみました。

（このファイルはちょっと作り方が悪くて無駄なスペースがあるのですが…そこは目をつぶってください＞＜）

チェック3-1　そのまま比較する

■Fireworks作業データ（パスとかフィルタの情報とか入った状態）

→1.9 MB（1,866,582 バイト）

■FireworksでPNG-32で書き出し

→82 KB（80,140 バイト）

■FireworksでPNG-8で書き出し

→41 KB（37,317 バイト）

PNG-8とPNG-32の見た目の差

似たような色のパーツが多いので256色で足りるかなーと思ったのですが、以外と色数使っていました＞＜
PNG-8ではよく見るとボタンのグラデーション部分がすこしだけ荒くなってしまいました。

（あとで拡大画像載せます＞＜）

くらべてみて

PNG-8とPNG-32でファイルサイズが2倍になっているので
できる限り256色の範囲で作った方がファイルサイズ的にはよさそう。

ただ、今回の場合はこれだけのパーツ数で82KBなのでPNG-32でも許容範囲内ではないかと思いました。

チェック3-2　ImageOptimで最適化して比べる

これまで同様、ImageOptimで最適化してさらにデータをスリムにしてみます。

注）作業用ファイルも最適化していますが、最適化した場合作業データはすべて失われます！かならずバックアップして行ってくださいね

■Fireworks生データの状態

→1.9 MB（1,866,582 バイト）→61 KB（59,578 バイト）

■FireworksでPNG-32で書き出し

→82 KB（80,140 バイト）→61 KB（59,581 バイト）

■FireworksでPNG-8で書き出し

→41 KB（37,317 バイト）→33 KB（31,546 バイト）

くらべてみて

PNG-24ではさほど効果が得られませんでしたが、
透過を含むPNG-8、PNG-32はかなり効果がありました。（全体からの％での判断）

書き出しをしていないFIreworksの作業データも
PNG-32で書き出したものと同じくらい（むしろ少し小さい）圧縮されました。

チェック3　まとめ

PNG-32でも写真等を含まない今回のようなデータであれば、
カンバスのサイズが大きくてもファイルサイズを押さえることができることがわかりました。

また、透過を含むファイルはImageOptimの効果も高いようです。（全体からの％での判断）

すべてを終えてのまとめ

ブロードバンドが普及してきて、
昔ほど1KBとの戦いをする機会はなくなってきたとはいえ
スマートフォンからの接続というのも増えつづけていますし、
できるかぎりファイルの転送量は減らしてあげたいところですよね。

ほかにもgoogleが検索結果の表示順位を決定するアルゴリズムに
サイトの応答速度を取り入れているといったこともあるようなので、SEO対策的にも重要。

その点をふまえながら今回の結果をあらためて見ると
まだまだJPEGが有効な場合もかなり多くて
使い分けが大事だなと改めて思いました。

やっぱりこれからも画質とファイルサイズとにらめっこしながら
用途に合わせて使い分けていく必要がありそうです＞＜

透過を含むPNGはImageOptimなどを使うとかなり恩恵が受けられるので絶対に使っていきたいところ。

今のところ、最近作ったサイトでは

Fireworksで画材作る→全部書き出す→書き出した画像のフォルダ内の画像をいっぺんにImageOptimにドラッグアンドドロップ→アップロード

という感じでやっています。

修正が入ったパーツは、時間があれば個別にImageOptimにかけてあげてアップロードしてます。

いろんな状況での向き不向きをきちんと頭に入れて書き出しをして
できるだけ手間をかけずにファイルサイズダイエットを身につけていきたいです☆

みなさん、Web用の画像の書き出しって最近どう使い分けしていますか？？

私がWebデザインをはじめたころはIE6が全盛期だったこともあり、
あまり透過PNGを使うという選択肢がなかったのですが、
jsなどでコーディング時に対応できる手法が出てきた頃から
透過PNGを多用するようになりました。
（ちなみにDD_belatedPNG.jsというのをよく使っています）

また、昔は一部のガラケーでGIFに対応していなかったり、
PNGに対応していなかったり…なんてこともありましたよね。

それで自動的に選択肢が決まっていたり…など。

いろいろと状況が変わった今、
改めて画像の書き出し形式について考えてみました。

自分の状況や知っていることなどをまとめてみたのですが、
間違っていることや古い認識もあったりするかもしれないので
これは間違ってるよ！などありましたらご指摘いただけますと幸いです＞＜

それぞれの画像形式の特徴など

PNGそれぞれの特徴と違い

※ご指摘いただいてPNG-24の部分を修正しました。
※間違いがあればご指摘いただけますと幸いです。

私の使い分けの現状

Fireworksでプレビューしながら
できるだけ一番容量が小さくてきれいになるものを選んで書き出しているので、
明確にきっちりこう！とわけている訳ではないのですが、
大きくわけると大体こんな傾向になっているような気がします。

みなさんはどのように使い分けていらっしゃいますか？？

こだわりなどありましたら良かったら教えてください！！

しかしこんな風に分類してみたものの、
こだわってPNGやJPEGのいろんな圧縮テクニックを使って
ひとつひとつこだわって調整すると、JPEGがいいと思っていたものが
PNGでもっと軽く書き出せたりとかいろいろあったりしますよね…。
（私は、現状そこまでできていません…；；）

うーん。書き出し、未だに奥深い＞＜

☆追記☆

いろんな方にご意見をいただきました。
ありがとうございます！
私と似たような状況の方や、PNG一択という方、まだPNGに抵抗があるという方、さまざまいらっしゃいました。

このあたりは答えがないのでホントに奥が深いですね。

自分でもまだ答えが出せていないので、
後日いろいろ書き出し比べてきちんと検証して新たに記事にしてみたいと思います。

Optimus brightのTouch&Tryイベントに参加させていただきました☆

↑私のガラケーとOptimus bright（笑

場所は国体道路沿いのCherry。
かわいいお店です☆

こういうイベントに参加するのははじめてなのでちょっとドキドキします…。

若い女の子向けのイベントだったようで、
会場に着くと、モデルさんのような女の子であふれていました…！！！

テレビに出ている子もいたり…！

明らかに5個以上下であろう女の子たちに囲まれてイベントスタート。

場違い感が漂っていましたが
強い心で気にしない…！！

イベントは
・Optimus brightの製品紹介
・INGNIのお洋服コーディネート対決
の２本立てで行われました。

なるほど、それでみんなこんなオシャレでかわいいのか…！！！
（ここでさらに場違い感を自覚するも耐えるw

Optimus brightの話

で、まずはOptimus brightの製品紹介だったのですが、
『明るい・軽い・最初からカバーが3つついてくる！』
というのがウリとのこと。

Optimus brightホームページ

いろいろと説明を受けながら
一人一台端末をお借りしていろいろいじり倒します。

ディスプレイの明るさ

外でディスプレイを見比べてみたり…。
「世界最高輝度のディスプレイ」らしいです。

確かに明るい。

CM通り炎天下でも見やすかったです。

これだけ明るくて視野角も広いので
みんなで動画とか見れたりしますよ！との説明だったのですが、

明るすぎて丸見えすぎると電車とかは逆にちょっと困るな…と思ってしまいました。

が、ホーム画面のメニューのショートカットから簡単に明るさ調整できました。

おぉ、ちゃんと考えられていた…！！！w

見せたいときと見せたくないときの調整が
簡単にできるかどうかは個人的にとても大事なポイントなのです。

薄さとか軽さ

持ちやすい大きさでした。
重さも軽くてやや小さめで、形もまるっこく、
片手で操作しやすかったです。

女の人向けで開発されたらしく、
女の人の手のサイズにはとても扱いやすい大きさかも。

デザインとかカバーとか

気分で選べるようにーと最初からカバーが3個ついてます。

カバーというか、リアカバーを取り替えられる感じ？？
カバーなしでは使えません。（外したら機械的なアレが丸見えなので）

最初から3個ついてるので、
1個は思い切りデコって、会社用と休日用とかで使い分けできそうだなーと思いました。

買うと以外と高いので最初からついてるのはうれしいかも。

そのほかいろいろ

裏返すと音が切れたりアラームとめたりできるとか、
ギャラリーで画像を見ている時本体の横を指でカツカツ叩くと画像が前後に動くとか、

爪が長いとフリックしにくかったりするので、
画面さわらないでいろいろできるところはホント女の子向けだなーと思いました。

んで、ガンガンアプリで遊ぶ

時間内、いろいろさわってみる時間があって、
写真を撮って、入っているアプリで加工して遊んでみました。

さわった中で面白かったのをいくつか。

PhotoFunia

びっくり！これ無料なのね…！
手軽にサクサク加工できました。
スマホ買ったら絶対入れよう。

PicsIn

これも無料だった…！
写真がいろいろ加工できて面白いのはもちろんのこと、
kaleidoscopeってメニューがあって、
画面をタッチしてドラッグするとおもしろい幾何学模様が簡単にかけるのが
なんかすごく楽しかったw

レトロカメラ

これは無料版と有料版があるみたい。
無料版は保存した画像にロゴが入るそうです。

こんな感じでガラケーもなんかかっこよく…w

ほかにも結構知らなかったアプリが入っていました。
このあたりのアプリ楽しそう…！

休憩を挟んで後半戦へ。

おやついただきました。もぐもぐ。

ファッションコーディネートの話

テーブルごとに好みの携帯のカバーの色を決めて、
いろいろと用意された服の中からそのカバーに合うコーディネートを作る、というものでした。

モデルになる子をテーブルごとにひとり決めて
その子がお洋服を着てくれます。

私たちのテーブルはとっても色白で細いかわいーーー女の子を
モデルさんにチョイス☆

とてもセンスのいい女の子たちがたくさんいて
ガンガンコーディネートしていってくれました。

お洋服はすごくいろいろ用意されていました！

INGNIのものみたいです。

INGNIのホームページ↓

PCサイト

モバイルサイト

テーブルごとに１つ、計4コーディネート完成。

どれもとーーーーってもかわいかったです！

てかみんなスタイルいい…！！！＞＜

セール期間中ということもあり、
洋服欲しい熱が高まるコーナーでしたw

そんな感じであっという間にイベントも終わって解散☆

一緒に行ってくれた友達と
その足でドコモショップ行ってスマホ見まくって帰ってきましたw

パソコンとiPadをいつも持ち歩いているので、
ふつうの携帯でも事足りていたのですが、
写真をその場でアプリで加工してtwitterとかにアップできるのはやっぱいいなーと思いました。

まわりのIT系じゃない友達も結構スマホに変えはじめたので
私もいい加減スマホにしようかなぁー…と思った土曜日の午後でした。

先週、ついに念願だったiPadを買いました！

早速いろんなアプリを使ってみているのですが、
中でもものすごく感動した1本があったのでご紹介♪

それがprocreateいうアプリです。

私は風景画チックなものを描きたかったのですが、
私の用途にはこれが一番シンプルで使いやすかったです！

昨日一日でいろいろ描いてみました☆

サンプルが私の絵で申し訳ないのですが…。

こんな感じのものが指であっという間に描けます！

ホントにものすごく簡単に描けるので、こんな感じの空をあっという間に描くステップをご紹介。

アプリですが、起動したらこんな感じ。
一番下のアイコンが新規作成ボタンです。
これを押してキャンバスを立ち上げます。

作業画面です。

かなり広い！

ブラシのサイズや濃さの調整が常に表示されているのがすごくいいです。
右手は描いてるポジションを保ちながら左手で調整できます！

ブラシも最初から12種類入っています。
これをベースにいろいろアレンジすることもできるますが、
この初期設定のやつだけでなんとなくいい感じに描けるのがポイント高い！

一番上のブラシを選びます。

空を描いてみようと思うのでブルーを選んでこんな感じでぐしゃーっと塗ります。
左側のブラシの大きさと濃さをMAXにして描きます。

上の方に濃い色、下の方に薄い色をぐしゃーっと。

こんな感じでかけたら、指のマークのツールに持ち替えます！

形状は最初のブラシと同じ形状でOKです！
これまたぐしゃぐしゃーっとこすっていきます。
基本横方向のみにこするのがポイント。

色の境目のところ等は図のように一回縦に伸ばして横に伸ばすと…

いい感じにムラになります！！

レイヤーを追加しても良いのですが、もうこのまま描いちゃいます。

白とグレー、ブルー等をまた適当に載せていきます。

ブラシの形状は先がぐしゃぐしゃしていないものを選びます。
細さを調整しつつ、ぐしゃぐしゃと。

再び指でこする！！！！こする！！！

ほら！なんか空っぽくなったと思いませんか？？

星をまき散らすのも簡単です！！！

ブラシを選んで細ーくした状態で、
画面上でピアノを弾くように指をぱたぱたすると…

こんな感じ♪

しっかりズームもできるので、細い線もかけちゃいます。

これもまたズームしてグリグリ描いただけです。

今なら115円で購入できますよー☆
SALE期間が終わっちゃったみたいです＞＜今は600円になっております。

簡単に楽しく遊べるお絵描きアプリをお探しの方は試してみる価値ありですよ♪

procreate
カテゴリ: エンターテインメント
価格: ￥600

一番古くからやっているビビッドカラーズ -0円の素材屋さん-なのですが、
気がつけば約1年一切更新していませんでした…。

なんということでしょう。

というわけで、久しぶりに更新しました！
今回は質感のあるチェックの素材です。

結構かわいく作れたのでよかったら使ってみてくださいね♪

チェックのフリー素材はこちらからどうぞ！

このビビッドカラーズ -0円の素材屋さん-ですが、
去年リニューアルをして、
背景画像をクリックすると実際にサイトの背景として表示されたり、
Web Font使っていたりといろいろ工夫を凝らしてるのですが、

管理側もかなり更新しやすく工夫して
WordPressで構築していたのですが…

一切活用されないまま…！

今年はもうちょっとマメに更新できるように頑張ります…！

たまに素材作りするといいですね。

効率のよい作り方をしようとするので、Fireworksの使い方であたらしい発見があったり。
今回のチェックの作り方もびっくりするぐらい簡単なので今度Fireworksマニアのほうでもご紹介しようと思います。

さて、いろいろ更新したいと思っているのですが、
どんな素材が需要があるでしょうか…。

あるとうれしい素材なんかあったらぜひ教えてくださいね！