FC2ブログのスマートフォン用公式テーマをデザインさせていただきました♪

FC2ブログさまのスマートフォン用公式テーマをデザインさせていただきました♪
「Sweet」という名前で配布中です!

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

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

こんばんは!

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

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

わーい!

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

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

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

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

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

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

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

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

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

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

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

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

FC2ブログ

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

Webデザイナーな私の勉強方法まとめ

私の勉強方法まとめてみました。

といっても「いい情報をとりこんで、実践して、その結果をアウトプット」をひたすらしているだけなのですが、
実際にどのようなサイトや本を見てインプットしているか、どんなサイトをアウトプットしているかなどまとめてみました。

私の勉強方法まとめてみました。

といっても

「いい情報をとりこんで、実践して、その結果をアウトプット」

をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。

インプット

情報が美しくまとまっているサイトのフィードをチェック

国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。

そういうブログのフィードをチェックしています。

デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。

全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。

そうしておくことで、いざ●●しないといけない!というときに、そういえばどこかでみたことある!これは出来るはず!とすばやく判断することができ、スムーズにその情報を引き出すことができています。

おすすめ情報系サイト

などなど。

Fireworksに興味のある方はぜひ

もよろしくお願いしますw

身近なデザイナーさんやプログラマーさんのブログをチェック

まとめブログや情報ブログももちろん情報の宝庫ですが、身近プログラマさんやデザイナーさんのブログはより今の自分に必要な良質な情報の宝庫です。

・最近こんなの試してみた

・こんな仕事があった

・こんなコミュニティーができた

・勉強会をした

・こんなところで苦労したからメモ

など

こういった情報はまとめブログにはあまりありません。

勉強会などに参加して、その他の参加者の方々のtwitterだけでなく、ブログをちゃんとフィードに登録しておく。

まだ知り合いが少なければ、愛読している本の著者の方や、あこがれのサイトを作っている方のブログなどをフィードに入れてチェック。

そこから得られた勉強会の情報などをチェックして積極的に参加、いろんな人に会う。

困ったときに助けてくれるのは『身近な人』です。たくさんの方と知り合って、情報交換して、協力していくのはとっても大事です…!普段少人数でお仕事されている方なんかはとくに!!!!

そして

いい印刷会社さん見つけた!こんなイベントがあるよー!Macのこのソフトおすすめ!こんなショートカット知ってる?Gitって知ってますか?Subversionは?クラウドってなに?

などなどそんなもの存在すら知らなかった!というものの存在を教えてもらうことが出来ます。

時には生活に役立つ知恵を教えてもらうことも出来ます。

こういうものがあるんだ、というヒントをインプットすることが出来れば、それを自分で調べる→知識としてストックということができるようになります。

知らなかったことをたくさん知れるのは本当に楽しいです。

そんなにたくさんフィードチェックするのは大変!という方は

Web Designing (ウェブデザイニング) 2010年 12月号 [雑誌]

 

Web Designingのような雑誌でツキイチでどかっと情報収集するのもおすすめです。

クリエイターさんのインタビューとかも面白いですよ☆

ツイッターでチェック

役立つ情報をつぶやいているtwitterアカウントをフォローするのもおすすめです。

私も@FwManiaというアカウントで特に私が気になった日本のサイトの情報をつぶやいています。よかったらどうぞ♪

本を読む

ネットでたくさん情報が得られる時代ですが、ひとつのテーマを掘り下げて書かれている書籍から得られるものは大きいと思っています。

最近読んだ本とこれから読もうと思っている本をまとめてみます。

デザイン系

Fireworks CS3/CS4/CS5 (速習デザイン)私の本です。ごめんなさい…!
Fireworksの本を書きました。

FireworksはillustratorやPhotoshopより機能がシンプルでわかりやすいと思うので、「PCでデザインをする」こと自体 がはじめてな方でもすぐに何かしら形になるものが作れるので、これでPCでデザインをすることになれてから用途にあわせてPhotoshopや illustratorを使いこなしていくというのもおすすめです。

【送料無料】Illustratorデザインメソッド

 

Illustratorデザインメソッドそれなりにillustratorは使っているけれど、こんな使い方でいいのかしら…もっと効率よく作れる方法がないかな…というillustratorをひととおりさわれる人にたくさんのひらめきを与えてくれる本です。

ハートの書き方ひとつとっても、いろんなアプローチを紹介してくれているのでとても参考になりますよ!

【送料無料】Photoshopデザインメソッド

 

Photoshopデザインメソッド上記のPhotoshop版です。

サンプルデザインがどれも美しくて、眺めているだけでも勉強になります。

CSS・jQuery・コーディングなどなど

【送料無料】効率的なサイト制作のためのDreamweaverの教科書

 

効率的なサイト制作のためのDreamweaverの教科書Dreamweaverの本ですが、Webデザイナーになりたい!ホームページを作ってみようかな、でもどうしたら?という人に読んでほしい一冊です。

よくあるソフトのツール紹介本ではなく、サイト制作の流れにそって丁寧に書かれています。

【送料無料】Web制作の現場で使うjQueryデザイン入門

 

Web制作の現場で使うjQueryデザイン入門いろんなプラグインをそのまま使うことしか出来なかったのですが、この本を読んでカンタンなカスタマイズや自分でちょっとした処理を書くことが出来るようになりました。

これがなかったら多分、私のサイトでお花がくるくる回っていたことはなかったんじゃないかと…!おすすめです。

【送料無料】jQuery逆引きマニュアル

 

jQuery逆引きマニュアル出たばかりの一冊です。届くの待ち!(読んだら更新します!)

【送料無料】魅せるiPhoneサイト

 

魅せるiPhoneサイト評価が高い一冊。iPhone対応、実はまだしたことないのでこれを読んで勉強します!(読んだら更新します!)

PHP

【送料無料】よくわかるPHPの教科書

 

よくわかるPHPの教科書実際にレンタルサーバで使う方法から書かれているので入門書にはぴったりです!

本自体もきれいで読みやすいです。

これからPHP勉強してみようかな、というデザーナーさんには特におすすめ。

WordPress

【送料無料】WordPress 3サイト構築スタイルブック

 

WordPress 3サイト構築スタイルブックWordPress3.0系対応の本です。

WordPress3.0系の機能を生かして、これからテーマを自作してみようかな、というかたにおすすめ。

【送料無料】PHPによるWordPressカスタマイズブック

 

PHPによるWordPressカスタマイズブックWordPress3.0系対応の本です。

ある程度わかっているけど、もっと3.0系の機能を使いこなしてガンガンカスタマイズしたい!という方におすすめです。

実践する

自分のサイトを持つ

やってみたいことを全部業務でトライできればいいのですが、予算の問題、時間の問題、その他色々、なかなかそうはいかなかったりします。

また、やったことのないことをいきなり本番で行うのは大丈夫かな…できるかな…間に合うかな…という不安もつきまとい、あまり精神的にもよくないような気がします…。

そこで私は、やってみたい技術やデザインをバンバン試すために個人でひたすら新しいサイトを作っています。

今やっているのは

こんな感じです。

この他にこのブログとポートフォリオサイトをやっています。

デザインもプログラムもひとりでこつこつ作っています。

仕事をしながら、プライベートの時間でこれらのサイトを管理しているのですこしでも効率よくするためにPHPで管理用のプログラムを作ったり、うち5つはWordpressで作っているので、Wordpressについての理解が深まり、

デザインもたくさん作っているので、ツールの使い方にもなれ、こういう表現ってどうしたらよかったんだっけ…?といった

ツールの使い方で手が止まる、ということが少なくなり、そうしたことを繰り返すうちに自分でもびっくりするぐらいトータルの作業スピードがあがりました。

個人サイトなんてどう頑張っても一年に一つ作れればいい方だったのですが、この3ステップを本格的にはじめてからサイト制作のスピードが劇的にアップしたので、今年はたくさんのサイトを作ることが出来ました。

上記のうちの半分ぐらいサイトはこの一年で作ったりリニューアルしたりしています。

個人サイトで経験しておくことで、

実際に業務でデザインやプログラムが必要になった時、

経験があるので早く、的確な判断が出来るようになったと思います。

アウトプットする

人に見える形で記録する

上記の「実践する」もアウトプットなのですが、ここでいうアウトプットは得た知識を実践した結果をブログなどで発表するアウトプットです。

私はこのブログと、Fireworksマニアで自分の持っている情報をアウトプットしています。

自分だけのメモにまとめてもよいのですが、人に伝えようと書くことで、あやふやにやっていた部分もきちんと調べて伝わるように書こうとするので、自分自身の知識の整理にもなっています。

さらに、実際にこういうことをした、こんなことが困った、という情報は他の方の役に立つこともありますし、誰かの役に立つかも!という作業はモチベーションアップにも繋がります♪

また「この人はこんなことをしている人なんだ」と知ってもらえるきっかけにもなります。

さらに、得た情報と自分の考えもまとめて他人に理解してもらえるように何度も見直して書いていくのでちょっとずつ文章力もUPします!

こうしたアウトプットがきっかけで今年はいろんな機会をいただけて、発表したり。たくさんの人と出会えたり、ブログ読んでますよ、と言ってもらえて会話のきっかけにもなったりと、良いことがたくさんありました!

昔は、これ私だけの秘密にしておこう…とか出し惜しみしていたこともあったのですが、どんどん新しい技術やアイディアが出てくる時代に、私が思いついた程度のアイディアを秘密にしておいたところで何の意味もないことに気がつきました…

逆にアウトプットすることで『一番最初に思いついて発表した人』になれるかもしれない…!!

あとから、「私も知ってたもん!」って言ったって遅いんですよね。

さぁ早速知っていることを記録に残そう!

…ということで、日々こんなことを繰り返しています。

残念なくらい凡人デザイナーなので、人の2倍は努力するように心がけています。

なんかもう溢れ出てくる才能!!!みたいなのがあればよかったんですけど…!

10年後も生き残れるようにがんばれ私><

おしまい。

ぜぇぜぇ。書き終わった…息切れしました…

毎日読み物系のブログを更新している方って本当にすごい…!

私はこんな風に勉強してるよー!といった情報がありましたぜひ教えてください♪

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を使って
ポヨンと回転させているそうです。

かわいい♪♪

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