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

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

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

さーぁ!いよいよ明日に迫った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を使って
ポヨンと回転させているそうです。

かわいい♪♪

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

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/

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

PHOTO STOCKERに似た色が使われている画像が簡単に検索できる機能を実装してみました!

フリー写真素材配布サイトのPHOTO STOCERに、似た色が使われている画像が簡単に検索できる機能を実装してみました。
画像からキーカラーを自動的に取得し、さらにそのキーカラー同士で画像データを結びつけて似た色の画像を検索する、というものです♪

最近、PHPで画像をいじることを勉強中のYUKIです。

壁紙カレンダーを作るときにimage関数をいろいろ使って処理を作ったので最近よくドキュメントをよく見ていたのです。
画像の色を自動的に取得するってなにか特殊なものがいるのかと思っていたのですが、よく考えたらimage関数を使って指定のpixelの色を取得することが出来るんですよね…!!

それを集計とかしたら…ごにょごにょ。

いろいろ出来るんじゃなかろうか…!!!

…ということで、早速実験。

これで似た色画像検索機能が作れるんじゃないか?と思い立ち
PHOTO STOCKERのサイトで さっそく実装してみました♪

で。

こんなかんじになりました!

画像の下に出ている色のところをクリックすると、絞り込み検索します。

処理の流れは以下。

  1. 記事1つにつき、1枚添付画像をもっているので、その添付画像のURLを取得。
  2. その画像をimage関数を使ってそれぞれキーカラーを抽出。
  3. よく使われている色、上位10色を選定、それをWordPressのカスタムフィールドにセット。
  4. WordPressの検索範囲をカスタムフィールドにまで広げる。
  5. 検索ワードにカラーコードをセット(画像の下の色をクリックすると、そのカラーコードを検索ワードとしてURLに渡している)
  6. 同じ色を含む写真を検索して一覧表示

以上です。

1-3の手順は、簡易なプラグイン化してみました。
4は既存のプラグインSearch Everythingを利用してカスタムフィールドの値までを検索対象としました。
5-6はテーマ側で対応。

すんなりできるかと思いきや、画像から10色を選び出す処理のところが、いい感じに色を選ぶっていうのが以外と難しくて…いろいろと詰まったところがあったのでメモ。

※私もまだ勉強中なので、認識まちがっているところがいろいろあるかもしれません。
ここは違うよ!というところがあればご指摘いただけるとうれしいです!

さて、プラグインを作るにあたってまずはテストです。

いい感じに10色をチョイスする実験をしていきます。

今回実験に使ったのはこの画像↓

この画像からいい感じに10色、色をとりたい。

理想は

大体こんな感じでしょうか。

このようなパレットが自動で抽出できるプログラムを作りたいの…!

はじめは普通に全ピクセル順番に抽出して配列に入れて使用頻度の高い色の順に並べ替え、と書いてみました。

が、近似値をまとめていなかったので上位に同じような色ばかりが出てしまい…。

あぅ…水色だらけ。

失敗。

次に思いついたのは画像を分割してブロック分けし
そのブロックごとにPHPで色を取得して集計、ブロック内で一番使用頻度の高い色1色を抽出、
それをさらに配列に入れて、すべてのブロック分繰り返し、
それまた多い順に並べ替えて使用頻度の高い色上位10色を抽出してみました。

えっと…説明下手ですみません。

図で書いてみました。

モザイクパターンみたいにして色を集計しようという作戦。

これで再度集計。。。。

おぉ!俄然いい感じになりました!!!

これで抽出した上位10色のカラーパレットをカスタムフィールドにセットする、という簡易なプラグインを作って、サイトに組み込んでみました!

…が。

またしても問題発生。

近似値をまとめていないので、色の種類が
R 256* G 256* B 256 = 16777216

こんなにあっては、「青っぽい色」だけでも何百種類…!
ほとんど同じように見える色でも色コードが異なってしまうので、
なかなか同じ色を利用した画像がでてきません…!><

今回の機能の目的としては、色味の近い画像を紐づけることなので
検索の際に近似値検索をして、近いカラーコードのデータがあればそれも表示させるように作ろうかとも考えたのですが、
近似値の計算がやや複雑なので、毎回の検索に時間がかかってしまう…。

なので、データ格納時に似た色はある程度まとめ、
減色した状態でデータを格納して、同じ色が出やすくなるようにすることにしました。

RGBそれぞれの段階を以下のように落とすと

256段階→32段階=32768色
256段階→16段階=4096色
256段階→8段階=512色

こんな感じで減色できそうです。

さてどのあたりまで減らすか…

ということで実験した一覧がこちら↓

(クリックで拡大します)

他にもいろんな画像を試して、
今回は、309000ドット程度の画像を縦横60分割して3600ブロックに、4096色に 減色が一番ベストそうだったので、こちらを採用しています。

ということで、まとめます。

  • 判別する色数が多過ぎると、トップ10が近似値だらけになってしまう。ほどよくいろんな色を拾わせる工夫が必要。(今回は画像を分割してモザイクパターンのようにして色を取得してみた)
  • 色数が多いと、類似色の判定が大変。だけど、減色しすぎると元の色からかけ離れたパレットセットが出来てしまう。個人的には4090色ぐらいがベストかな。
  • 元の画像が小さ過ぎるとリサイズするときに色が落ちているのでチョイスする色がくすみがちになったり、撮れなかったりする。画面のスクリーンショットなら等倍がいいかも?ただ、写真の場合だと、大き過ぎるとノイズ?の色を拾ってしまうので大き過ぎてもダメ。こちらの場合は、ほどほどに縮小したもので判定するのがよいかも。

これは上手く使えばいろいろ楽しく便利に使えそうです…!!
減色の方法も、もうちょっと研究せねば…

RBGよりHSVで考えた方がいいのかな?

PHOTO STOCKERのひそかな新機能
似た色検索、ぜひお試しくださいね♪

PHOTO STOCKER -高解像度のロイヤリティーフリー写真素材-

この画像、チョイスしてる色が変だよーとか、ありましたら、改修の参考にしたいと思いますので
twitterやらコメント欄やらでいろいろご指摘いただけるとうれしいです^^

ポートフォリオサイトのデザインを新しくしてみました♪

jQueryをゴリゴリ使って
まるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
勉強もかねて、週末ポートフォリオサイトのテーマを作り替えてみました♪

ここ最近、サイトの使いやすさを高めるため、
jQueryを便利に使っております。

が。
ある日突然、jQueryを多用したまるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
いえ、普通に普通にFLASHでやればいいんですけど、あえてjQueryでやってみたくなっちゃったんです…!!!

ということで思い立ったら吉日。
ポートフォリオサイトで実験してみましたー!

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

ちなみにこのサイトもベースはWordPressですよー☆
いろいろぐりんぐりんと動く仕掛けになっております。

IEでも一通り(6、7、8)確認したので
すこしおかしな部分があるかもですが、大体大丈夫なはず!です。

試してみたかったjQueryでできるデザイン表現を
使えるだけガンガン使ってみました♪

制作にあたっては、
それぞれ、以下のサイトなどを参考に、
プラグインを使用・カスタマイズなどさせていただきました♪

背景のスクロール部分

http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery/

トップのメニューのアニメーション部分

http://jqueryglobe.com/article/animated-menu

各ページのメニューのアニメーション・アイコンのアニメーション部分

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Portfolioページの、異なる高さの要素の可変並べ替えの処理

Portfolioページでブラウザのサイズを変えてみてください)
http://desandro.com/resources/jquery-masonry/

スムーズスクロール

(フッターのPAGE TOPをクリックしてみてください)
http://hisasann.com/housetect/2009/03/jquerysmoothscroll.html

その他に、画像にマウスカーソルをあわせたときの
パチンとウインクする動きなんかもjQueryです。

業務でやることはないだろうけど、楽しかったです♪

よろしければぜひ見てみてくださいー♪

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

どうでしょうか、ちょっと重いでしょうか…いかがですか??
あまり多用しすぎると重くなりますよね…。
みなさんの環境ではいかがですか?

こんなに一度に1つのサイトに多用する事はないにしても
ナビゲーション部分などにはこれからもjQueryを
上手くデザインのポイントとしても使っていきたいです。

ちょっとした動きでも、
あればサイトのいいアクセントになりますよね☆

ほかにもいろいろ実際に試して使い勝手がよく、
よさげなアニメーション等があるので後日またご紹介しますね♪

個人サイト4つをValidなHTML化しました。

タイトルの通りなのですが、

いまごろ。ようやく。
運営している4つのサイトをValidなHTML化しました!

個人サイト4つをValidなHTML化しました

タイトルの通りなのですが、

いまごろ。ようやく。

の4つのサイトをValidなHTML化しました!

気になってはいたものの…ずっと放置していました…。

この4つの中でも、PHOTO STOCKER のコードは特にひどくて
縦横中央揃えやhover時の効果、loading時のくるくるなど
いろいろ実現したいがために
aタグにtableタグを入れ込むという苦肉過ぎる作を講じていました。。。

これまでのコードはこちら。

※wpのテーマのコードまるっと貼りました。
見にくかったらごめんなさい><

この部分をざっくりと解説しますと、
写真のカテゴリーの中からランダムに12件取得
fanctions.phpに書いているオリジナル関数(get_the_post_image_src)を使って、それぞれのエントリーに関連付けされている画像ファイルの1枚目のサムネイルのURLを取得、それを表示しています。

WPがらみのこのへんは、需要がありそうだったら別エントリーで書いてみようかと思います。

<div class=”photoList photoListRandom clearFix”>
<?php query_posts(‘cat=5&orderby=rand&posts_per_page=12’); ?>
<?php while (have_posts()) : the_post(); ?><div class=”photoItem”>
<div class=”photoImg”>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<span class=”photoThumbnail”>
<img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/photobox2/images/imgLink.gif” class=”listImgLink” />
<table>
<tr><td><img src=”<?php print get_the_post_image_src(get_the_ID(),”thumbnail”); ?>” class=”listImg” alt=”<?php the_title(); ?>の無料写真” /></td></tr>
</table>

</span>

</a>
</div>
</div>
<?php endwhile; ?>
</div>

aタグの中にtableタグが入っちゃってますね…
これはひどい><

改修した新しいコードがこちら↓

<div class=”photoList photoListRandom clearFix”>
<?php query_posts(‘cat=5&orderby=rand&posts_per_page=18’); ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”photoItem”>
<div class=”photoImg”>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0’)); ?>”>
<span class=”photoThumbnail”>
<img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/photobox2/images/imgLink.gif” class=”listImgLink” alt=”” />
<img src=”<?php print get_the_post_image_src(get_the_ID(),”thumbnail”); ?>” class=”listImg” alt=”<?php the_title(); ?>の無料写真” /></td></tr>
</span>
</a>

</div>
</div>
<?php endwhile; ?>
</div>

tableがなくなってすっきりしました。

一番悩んだのが縦横中央揃えの部分なのですが、
テーブルをやめてjQueryで実現しました。

こちらのページを参考にさせていただきました♪

jQueryでボックスの中の画像の縦位置を中央に揃える

今まで通り
縦横中央揃えやhover時の効果、loading時のくるくるなど
きちんと再現しています。

PHOTO STOCKER 改善後

満足満足☆

そして今日、ついにPHOTO STOCKERのはてブ数が200を超えました!!!><

実は密かに目標にしていたのですごくうれしいです;;
ソースもきれいになったし、4つともこれからも更新がんばります☆

シンプルパターン研究所はじめました。

すべて無料で商用でも使えるシンプルパターンテクスチャ配布サイトをはじめました。
今回もWordpress製のサイトです♪I

LOVE Wordpress☆

シンプルパターン研究所
http://labo.v-colors.com/

sinple

シンプルパターン研究所という、パターン素材やテクスチャ素材を配布するサイトをオープンしました。(1ヶ月ほど前に)

ぼんやりしていたら書くのがだいぶ遅くなりました・・・

このサイトは、せっせと作りためたパターンやテクスチャを無料で公開しよう!というサイトです。

photoshopやfireworksでパターンやテクスチャとして使ったり、そのまま背景や壁紙素材にもご利用下さい!

商用利用もOKです。
使えるものがあればどうぞご自由に・・・♪

シンプルパターン研究所 | すべて無料で商用でも使えるシンプルパターンテクスチャ配布サイト
http://labo.v-colors.com/