ひさしぶりの紙デザイン。

久しぶりに紙ものデザイン☆
フライヤーデザインしましたよー♪

キラキラ、デコデコ
久しぶりで楽しかった♪♪

さーぁ!いよいよ明日に迫ったEnergy Informatic 1stですが、
1stの開催を待たずして、早くも2ndが決定したそうです!
パチパチパチ!

で今回、クラブなんてほとんど行ったことのない
万年引きこもりの私が、2ndのフライヤーを担当させていただきました♪

わたしがくらぶいべんとのふらいやーをつくるひがくるなんて………!!!

普段はもっぱらWebサイト作っているので数ヶ月ぶりの印刷ものでした♪
わくわく。

↓最初に出した案2つ

夜景の写真を加工したものと、お花の写真を加工したもの。

お花の方は、あんまりこういうフライヤー見ないし、
目立つんじゃないかなーーーと思って作ってみたのですが…………

やっぱりイベントの雰囲気と違いすぎるので、
結局夜景版でいくことにw

で、もっと目立つようにギラッギラにして
最終的に入稿したのがこちら↓

これが表面で、全部で2500枚できあがります。

ひえー!!

普段あんまり紙をやらないのでキレイに印刷されてくるかドッキドキです。。。。。

福岡にお住まいの皆様、
どこかで見かけたらぜひぜひお手に取ってくださいね。

久々のギラギラデザイン、たのしかったですー!
せっかく作ったので、夜景アレンジを壁紙カレンダーで壁紙としてダウンロード出来るようにしようかな、と思ってます☆

ちなみにお花柄の方ですが、そのままボツにするのも勿体なかったので
プライベート用名刺の背景にしてみました♪

会社の名刺にはtwitterアカウントとかブログのアドレスは入れていないので
会社の名刺と一緒に配りたいな、と。

印刷する時間があれば、LP11の時持っていきたいなぁ☆

会社の名刺のほうも、
かえるのエンボス加工がしてあってなかなかかわいいんですよー!!

ぜひあわせて受け取ってみてみてくださいね☆

どうでもいい話

私、本日皆様に愛されて28周年を迎えました!
ありがとうございます!

今日から28歳です。
今年も一年、全力で頑張りますー!!

jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪

このサイトで、画像を回転させられるjQueryプラグイン、
jQuery.rotate.jsを使ってみました!

今日はそのご紹介です♪

こんにちは☆最近すっかり涼しくなりましたね…!
みなさん、体調など崩していませんか??

さて、今日は画像を回転させられるjQueryのプラグイン、
jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪

このブログのメイン画像、
これまでは水中から撮った水の写真を使用していたのですが、
長かった夏も終わって涼しくなってきたので衣替えしてみました♪

追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。

Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア

お花で出来たWelcome文字です♪

この部分、ただの画像がぺたっと貼ってあるだけではなく、
画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けになっています。

ぜひ、ページ上部のWelcome!と書いてあるお花をさわってみてください♪
くるくると動きませんか??^^

簡単で楽しく、使いやすいプラグインだったのですが、
今回のレイアウトではIE対応で少しつまずいたところがあったので作業工程とともにメモしておきます。

使用したjQueryプラグインはこちら↓

jQuery.rotate.js
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

jqueryとこちらのプラグインを読み込み、ページのサンプルにあるようにコードを書いてあげると動きます。

今回は3番目のサンプル、マウスカーソルを当てると右に回転し、離すと左に回転する

という処理と同じことをしています。

このブログでは、すべてのお花にrotateFlowerというclassをあててあるので
rotateFlowerに対して以下のように処理をかけています。

$(document).ready(function() {
  $('.rotateFlower').rotate({maxAngle:30,minAngle:-30,
    bind:
    [
      {"mouseover":function(){$(this).rotateAnimation(30);}},
      {"mouseout":function(){$(this).rotateAnimation(0);}}
    ]
  });
});

お花の画像はひとつひとつ、画像の中心とお花の中心をあわせて書き出しました。
(上手く中央をあわせないと傾いて回転してしまうので)

↑こんな感じ

これでfirefoxでは完璧だったのです。
IEが…………………。

↑こんなことに。

イヤーーーーーーー!!!!

それぞれのお花の部分は
親要素(ヘッダーイメージ用ボックス)にposition:relative;
子要素(お花ひとつひとつ)にposition:absolute; top:XXpx; left:XXpx;という形で絶対位置で並べているのですが…

プラグインを有効にするとIEだとどーーーーーしても上手く並ばない……………。
プラグインを外すと上手く並ぶんです。

このプラグイン、img要素を
IEではrvmlを使って、それ以外はcanvasを使って
それぞれ書き換えてくれてて、それでアニメーションを実現しているみたいなので、
書き換えられたときに何か起こっている…

事件は現場で…

…。

ということで、調べてみたところ
img要素をvmlに変換する処理をする際、プラグイン側で
親要素にあたるボックスにposition:absolute;をかけるという処理が入ってました。

この並べ方をするには親要素はposition:relative;にしておかなければいけないので
CSSでposition:relative;していたのですが、
プラグイン側で要素のCSS設定が上書きされてしまっていたため、
子アイテムの絶対配置ができていなかったのが原因でした。

※ボックスの絶対位置、相対位置について??な方はは詳しくはこのページが詳しいですよー☆
http://www.css-lecture.com/log/css/037.html

なのでプラグインの該当の箇所を修正して完了。

今はIEでもきちんと動いていると思います♪

画像の要素をたくさん重なりあうように並べたいときは、この部分、要注意です。

上にも書きましたが、このプラグイン、

img要素を
・IEではrvmlを使って
・それ以外はcanvasを使って

それぞれ書き換えてくれてて、それでアニメーションを実現しているみたい。

HTML5のcanvas要素はIEなどでは使えないけれど、
こうやって切り分けることによって
同じ様に見せることができるのですね…!!

こういうのを思いつく人は本当にすごいなぁ><

サンプルにはない雰囲気のものが作れたので満足です♪

また、CREAMUさんのjQueryでアニメーションさせた静的なサイトという記事で紹介されていた

http://www.g2geogeske.com/

こちらのサイトのロゴ部分もjQuery.rotate.jsを使って
ポヨンと回転させているそうです。

かわいい♪♪

ほかにもアイディア次第でいろいろ使えそうなプラグインですね☆

Energy Informatic Vol.1 で VJさせていただきます♪

10月1日に開催されるEnergy Informatic Vol.1でVJさせていただきます!
お時間あればぜひ遊びにきてくださいー♪

↑作成&練習中ー!音声付きでの書き出し方がわからなかったので音無しです。。

10月1日に開催されるEnergy Informatic Vol.1で
VJさせていただくことになりました♪
以下イベント詳細です。

ITクリエイターが集結するパーティーが開催!

天神の親富孝通りにある「graf」にて10/1(金)、デザイナーやプログラマーなどの福岡で活躍するITクリエイターが集まるクラブパーティー「Energy Informatic 1st」が開催される。”アート”をテーマに、DJとVJが創りだす、音と映像と光の世界は必見。
デザイナーのイラストや絵画なども展示予定。
第一線で活躍する福岡のITクリエイターたちが勢ぞろいする、またとない機会!
新しい出会いと、コミュニケーション、そして、アートな秋を楽しんでみては?


Day 2010/10/01(金)
OPEN/19:30 START/20:00
Place @Graf
福岡県福岡市中央区天神3丁目4-19
Price ADV:2,000 Yen
DAY:2,500 Yen
Student:500 Yen Off
※参加申込サイトで参加表明した方は前売り料金で入場可
Site Energy Informatic
http://eneinfo.musicstyle.tv/
Atnd http://atnd.org/events/7345
twitter Twitter : @eneinfo
DJs afro(@4444t4444) / azmitter / ari(@rytich) / rehouse(@hsmt) / tantan(@tantan777) / LEICA(@orangefranc) / shishimaru / takayukistar / La Vier / eXoniCa(Live)
VJs Yaivj(@Yaive) / hbkr / yuki(@yuki930) / tobetchi

以下のサイトにも情報を掲載されています。

.
お時間あればぜひお越し下さいませ♪

WEBフォント使ってみました!&キュートなフォントのご紹介☆

少し前に話題になっていたWEBフォントサービス、デコもじを使ってみました♪
キュートな手書きのお試しフォントは無料で使えちゃいますよー!!とってもかわいい!!

CSS3で新たに導入された@font-face。
CSSでフォントを指定するだけで、誰でもそのフォントでページを見ることができるようになるという…!なんとも素敵な話です。

これを利用することによって
WEBデザインがまた進化するのでは!といった感じでわくわくしますね☆

ただこれ、フォントファイル自体をサーバに上げないといけなかったり、IEは別途対応が必要だったりするようで、個人が本格的に利用するにはまだちょっといろいろとハードルが高そう…。

そんな中で、googleがGoogle Font APIをはじめたり、
海外では同様のサービスがすでに出てきているようです。

がここで…

たちはだかる 日 本 語 の 壁 ! ! ! !

いつもなら、がんばって英語の壁を超えるのですが、

違う意味で 日 本 語 の 壁 ! !

つ、使えるフォントが…(涙)

いかんせん日本語は文字数が多いですからね。
そもそも日本語のフリーフォントって時点でかなりすくないですしね…。

そんな中、日本語でサービスしている日本のサービスがあります。
デコもじ

無料版では使えるサイトは1サイトまで&1書体までで、
さらに無料で使える書体は限られているのですが…

ですが!!

今日、無料で使えるフォントの中に、
とってもかわいい手書き風フォントがあることを発見しました!!

こちら↓

ゆる字

かわゆー!!!!!!

これは個人サイトや個人ブログにはぴーったりじゃないでしょうか♪

私も早速個人サイトのビビッドカラーズ-0円の素材屋さん-で使ってみました!

↑普通のテキストがこんなにかわいい書体に!!!
(画像クリックでサイトに飛びますのでぜひ実際に見てみてください☆)

おぉぉぉぉ!!!!
めっちゃかわいい…!!!!!!!!

サイトをかわいい文字で埋め尽くしたい私のようなアナタ!!
試してみる価値アリですよー♪

デコもじ
http://decomoji.jp/

それにしても…このフォントホントにかわいいです…………!

サイトのデザインにも使いたいので、書体の購入を検討中です☆

あぁ、作者様ステキすぎます!!!>▽<

キュートフォントのお部屋
http://cute-mall.net/index.htm

ちなみにこの記事のタイトルに使用しているのはまた別のフォントで
こちらはふい字というフリーフォントです!
これもかわいくて大好きです♪おすすめ☆

ふい字
http://hp.vector.co.jp/authors/VA039499/

あぁ、私もフォント作ってみたいなー!!!

CSS Nite LP11 Designer’s Highに登壇させていただく事になりました。

来月、2010年10月9日にベルサール九段で開催されるCSS Nite LP, Disk 11「Designer’s High」Part 1でスピーカーとして登壇させていただく事になりました。
というご報告です♪

来月、2010年10月9日にベルサール九段で開催されるCSS Nite LP, Disk 11「Designer’s High」Part 1でスピーカーとして登壇させていただく事になりました。

今回は、ビジュアルデザインにフォーカスしたセミナーという事で、
どんなことをお話させていただこうか悩んだのですが、
私らしいお話ができればと、現在以下のような内容を考えています。

Webデザイナーの魅力をさらに高める、サイト運営と分析のすすめ

スキルアップのために制作したさまざななプチWebサービス作りを通じて、考え方、さらに私の生活までもが劇的に変化しました。
プライベートワークは、スキル向上だけでなく、いろいろな人に自分を知ってもらうきっかけにもなるなど、たくさんのメリットがあります。

アイディア出し、デザイン、コーディング、運営までを経験することによって感じた、Webデザイナーがチームメンバーのために心がけたい、みんなが幸せになれる制作のポイントなどをご紹介します。
(サイトより抜粋)

ホントにこのプライベートワークがあったおかげで、この一年いろんなことがあって、WordCampでメインステージでスピーカーをさせていただいたり、
今回の登壇もこの個人のサイトの活動があったおかげで声をかけていただきました。

↓プライベートで制作したサイトたち

.

デザイナーさんも、(もちろんコーダーさんも、プログラマさんも!)
折角Webに関わる仕事をしているんだから、自分のサイトを作らないともったいない!

ということで、サイトをもってよかったこと、変わった事など、
思ってもみなかったメリットがたくさんあった、という実例をご紹介したあと、
一連の制作をひとりで体験してみる事によって改めてわかった、
チームでの制作での他のメンバーへの気遣いポイントや、
デザインを担当する上で心がけたいポイントなど、私が体験した事を具体的にお話しできればと思っています。

また、後半は
実際どのようにサイトをひとりで作っているか、
サイトのアイディアをひらめくところからはじまって
ラフスケッチを書き、デザイン、コーディング、プログラムも入れてサイトを形にするまで、
実際の作業もご紹介してみたいなぁと考えています。

「帰ったらすぐに自分のサイトを作りたくなるセッション」が目標です!
明るく、楽しく、がんばります☆

上記に加え、もしこんなことに興味がある、こんな話もしてはどう?といったご意見やアドバイス等ありましたら
ぜひ教えていただけるとうれしいです。とりいれてもっと面白くお話を組み立てられればと思っています。

私のセッション以外がとても豪華で…
いまから不安で一杯ですが、

私のセッションもみなさんになにかすこしでも楽しんで帰っていただけるよう
精一杯頑張りますので、どうか温かく見守っていただければ幸いです。

現在お申し込み受付中で、10日まで早割があるそうです。

CSS Nite LP11の詳細はこちらです。

福岡在住なので、東京のデザイナーの方々とお会いする機会があまりないので
たくさんの方にお会いできるのが今から本当に楽しみです!

精一杯頑張りますので、どうぞよろしくお願い致します!^^