Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

すっごい動くよ!テキストをアニメーションさせるjQueryプラグイン集めてみた

どうもこんばんは、僕です。
関東では雪が降った所もあったようですが、こちらはよく晴れたいい天気です。
降ったら降ったで大変ですが、全く降らないというのも何か物足りない…なんて気もしますね。

さて今日は、「テキストをアニメーションさせるjQueryプラグイン」を紹介していきたいと思います。
以前はFlashを使用したアニメーションが主流でしたが、最近はFlashに代わってjQueryを使ったアニメーションがが多く用いられています。
jQueryってすごいなぁ(小学生並みの感想)

…おっと、話が脱線してしまいました。



1.Textualizer
http://kiro.me/projects/textualizer.html

f:id:webarekore:20130128202150p:plain



2.dynamo.js
http://jordanscales.com/dynamo/

f:id:webarekore:20130128202414p:plain


3.TextBlur
https://github.com/ottonascarella/TextBlur
デモ:http://webrecipe.net/textblur/

f:id:webarekore:20130128202422p:plain



4.jWise.js
http://havalite.com/?p=55
デモ:http://havalite.com/experiment/jwise/example.html

f:id:webarekore:20130128202442p:plain



5.Lettering Animate
http://www.giuliandrimba.com/labs/lettering-animate/

f:id:webarekore:20130128202451p:plain

 

というわけで、数あるプラグインから幾つか紹介してみましたが、いかがでしたでしょうか。
いつもの記事にならってサムネを付けてみましたが、あんまり意味が…^^;

実際にサイトへ行ってデモを見てみるのが一番です、ハイ。

無料ソフトだけ集めました。「Windowsでのこのソフト、Macではどれ使えばいいの?」の疑問に答えます。

 

こんにちは。

WinからMacへ乗り換えました!!

 

使い慣れない逆方向のスクロールはもちろんのこと、

今までWindowsで使っていたソフトが使えなくて困り中><

 

そこで、

自分がWindowsでよく使っていたソフト、

Macではコレ使えばいい!って気づいたソフトをまとめてみようと思います。

(完全に個人的な好みですが、ご了承ください)

 

 

圧縮・解答フリーソフト

Windows :  Lhaz    +Lhaca 

 

Mac :    

        ALZip     The Unarchiver    CleanArchiver

・使ってみて良かった順:CleanArchiver > The Unarchiver > ALZip

 CleanArchiverはDS_StoreなどMac用の管理ファイルが圧縮の際、入らないので、

 Winユーザとのやり取りの時にはこっちが良いかと。

 The Unarchiverは大体解凍できて、できなかったのはALZipで的な感じです。

 

 

開発関係フリーソフト

 

テキストエディターフリーソフト

Windows : TeraPad  cresent EVE

 

Mac :CotEdito    mi

 

Dreamweaverのような専門的なソフトがなくても、

こちらのアプリをインストールすることで、簡単に作業ができます。

特にmiは自分好みや案件によってカスタマイズして使えるとより便利かと!

  

 

開発環境の構築関連フリーソフト

 

Windows : XAMPP

Mac:  

         XAMPP         MAMP

 Macでサーバーを動かしたい時に使うやつで有名なのは、

この二つらしいですね。個人的にはMAMPのほうをよく使っています。

 

 

FTP関係フリーソフト

 

Windows : FFFTP  WinSCP

Mac :  Cyberduck

日本語も見えるし、普段はこれで問題ないかと!

FTPとSCPクライアントが利用できます。

  

 

isoシミュレータ

  

Windows :  Electric Plum

Mac :   isoシミュレータ (XCode) 

スマートフォンサイト開発環境はMacのほうが結構やりやすい感じです!

(iPhoneのOSがメインの時は)

ローカル上でサイトの動きやリンクが確認できるのは嬉しいですね!

作業チェック時間もかなり短縮できました!

   

 

ブラウザチェックツール

Windows :IETester

Mac:  PlayOnMac

IEでの表示チェックも結構手間かかりますよね。。

IETesterのようなMac版を探したら出てきたのが、PlayOnMac!

Windowsの仮想環境を作って開く(おそらく)ようで

時間が少しかかりますが、再起動するよりいいかなと

(もっといいソフトあったら教えてください) 

 

テキスト差分比較フリーソフト

 

Windows :  DF   WinMerge

 

Mac :  DiffMarge   FileMerge

 

HTMLファイルなど比較でよく使っているのがDFですが、

Macでもいいソフトが結構あるんですね!

FileMergeは先ほどのisoシミュレータでも出てきたXCodeを設置すると、

自動的にインストールされるソフトです。

アプリケーションは以下の場所に

/Developer/Applications/Utilities/FileMerge.app

 

 

画像データーを軽量化するフリーソフト

Windows :  Caesium  PNGGauntlet

        http://www.jpegmini.com/  http://punypng.com/

 

Mac :JPEGmini Lite   ImageOptim

 

画質を落とさず、ファイルの容量を小さくしてくれる便利ソフト!

JPEGとPNGでソフトも分かれています。

JPEGminiはサイトでもよく使っていましたが、アプリもあるのでさらに便利に!

しかしLite版なので、一日何枚かに枚数が決まっています。

(でも有料は買いたくないので、、、)

 

 

動画再生フリーソフト

Windows : Windows MediaPlayer       RealPlayer

              

 

Mac : GOM Player 【ゴムプレーヤー】

       

多数のコーデックを内蔵している無料のメディアプレーヤーです。(Windows版もあります)

DVD-VIDEO, FLV, MP4, MPG, TS, AVI, DIVX, ASX, WMV, IFO, VOB, MOV,  M4V, DATなど対応)

「キャプチャー機能」やDVD再生機能があってこれだけあれば動画見るには困らないかと!

  

 

ドキュメント系フリーソフト

Windows :  Microsoft Office   OpenOffice

Mac :  OpenOffice  iBooks Author

 

Windowsだと言うこともなく、Microsoft Officeが定番かと思います!

Macだと、Excelやパワポのデータを確認する際はOpenOffice

(データによって少しズレ発生)

パワポを作る時にはiBooks Authorをお勧めします。

普通はKeynoteが浮かぶと思いますが、有料なので。。。

iBooks AuthorはほとんどKeynoteと同じで、PDFファイルを作る時や

スライド(動きのアニメーションはできませんが、動画やHTMLの埋め込みができる)を

作る時にはぜひ使ってみてください。

  

 

Youtubeやニコ動の動画がダウンロードできるフリーソフト

Windows :  Craving Explorer

Mac :   Getter1

 

Youtubeニコニコ動画のダウンロードって結構やりますよね。

WindowsだとCraving ExplorerでiPhoneに入れることまでスムーズですが、

Macだと使った限りGetter1が一番良かったです。

しかしニコ動だと、メアドやパスワードなど設定が必要です。

 

 

こんな感じでざっとまとめてみました!!!!

WinとMacとどっちがいいとかは、難しい質問ですが、

MacではWinでは感じれなかった魅力もたくさんあります!!!

少し不慣れなところもありますが、乗り換える方はぜひ参考にしてみてください!

 

大人気ゲームアプリ、「拡散性ミリオンアーサー」から学ぶ画面デザイン

通勤・通学途中であったり、カフェや道端などでも、今や多くの人がスマートフォンでさまざまなアプリを楽しんでいますよね。

結局どんなゲームが一番人気なんだろう、と思い調べてみました。

ソーシャルメディア調査報告書2011』によると、実に45.9%の人が育成ゲームで遊んでいるそうです。

ちなみに、「シミュレーションゲーム」が23.3%、「パズル」が14.0%、「学習・クイズ」が11.6%とのこと。

育成ゲーム、ダントツで人気なのですね…。

確かに最近は、綺麗なカードを育ててバトルする!というのが流行りなようです。

私なんかは綺麗なイラストを見ているだけで幸せなので、ついついダウンロードしてしまいます。

 

さてさて、そんな中でも、去年から私もやっているのが「拡散性ミリオンアーサー」というゲーム。

 

f:id:webarekore:20130124162207p:plain

▲ Webサイトでは本格的なアニメーションのトレーラーも公開

 

スマートフォン向けながら、RPGとサイトでも言っているとおりかなり濃いストーリーを楽しむことができるのが魅力です。

最近ではダウンロード数が100万人を突破したとの事で、今後のストーリー配信も楽しみです。

 

 

このゲームのなにがすごいって、まずダウンロードの時点でユーザーを飽きさせない工夫がしてあるんですよね。

f:id:webarekore:20130124162239p:plain

 

キャラクターをタップすると、しゃべる…だと……

しかも入ってるボイスが1個や2個じゃないのです。

ちなみに、主人公にも声優さんがついています。

また、右側には、ゲーム内に登場するキャラクターの説明が。

これなら多少重たくても飽きずに待てますよね。

 まずはゲームをダウンロードしてもらわないとお話になりませんから、よく考えられているなぁと思います。

 

ダウンロードが終わったら、いよいよ主人公を選んでゲームスタートです。

 

f:id:webarekore:20130124162253p:plain

 

▲ マイページ。横画面な事もあり、美麗イラストの迫力大。

  ちなみに背景の画像は動いたり、時間帯によっても変化が。

 

 

私がこのゲームにはまったきっかけは、右!

右端の、このナビゲーションです。

 

スマホのゲームアプリでも、デザインやUIをガラケーの時とほとんど変えずに対応しているゲームばかりだったので、このUIは新鮮でとても驚きました。

使いまわしのデザインのゲームって、とにかく使いづらいんですよね。

ガラケーの時のデザインそのままなので、ボタンが小さかったりして。

そういった小さなストレスが積み重なって結局ゲームから離れてしまいます。

 

その点、これはフリックすると上下に動いてメニューが出てくる仕組みなので、無理やりボタンを詰め込んでない為とても押しやすいのです。

また、このゲームはレベルによってキャラクターが動いてしゃべるストーリーがあるところも魅力的でした。

 シナリオカードの設定などは、「とある魔術の禁書目録」の鎌池和馬さんが担当しているそうです。

また、ゲームのBGMや主題歌の作詞、作曲、編曲は前山田健一ヒャダイン)氏が担当なさっているそう。

 

興味のある方はダウンロードしてみて、UI等の研究をしてみてはどうでしょうか。

 

 

 

 

 

タイトル:拡散性ミリオンアーサー 

ジャンル:カードバトルRPG 

プラットフォーム:iPhone / iPod touch / iPad / Android 

発売日:2012年4月9日(月)

発売価格:無料 アイテム課金あり  

プロデューサー:岩野弘明 シナリオ:鎌池和馬 音楽:前山田健一ヒャダイン

アニメーション制作:J.C.STAFF"

 

 

今話題の第二回全国統一HTML5実力テストを受けてみた!

皆さんこんにちは

今日はjsdo.itさんが主催する

第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS

http://jsdo.it/event/html5cat/2012/autumn/

f:id:webarekore:20130123224419p:plain

テストを受けてみました。

f:id:webarekore:20130123224520p:plain

最初の問題はWEBサイト作ったことのある人なら簡単だと思います。

しかし・・・・・・・・・・・・

問題が進んでいくたびに

難易度が上がっていく。。。(TwT。)

そして採点へ!

f:id:webarekore:20130123224505p:plain

81点でした。意外に結構あっていたんですね。

なんと神コーダーという称号をGETしました。

ほかにもJavaScriptとiSOのテストが受けることができます。

私の結果は散々だったので公開は控えますね。。。。。。。

このテストは学生や、WEB屋の方も勉強になると思います。

結果はツイートできるのでフォロワーと競い合うのも

面白いかもしれません。

最近寒い日が続いていますが風邪に気をつけて下さいね。

それでは!



素材に困った時はこれでOK!無料で使えるフリー素材サイトまとめ

皆さんこんにちは!今日はWeb上のフリー素材サイトを集めてみました。

 

f:id:webarekore:20130122084154j:plain

ソザイング

http://sozaing.com/

こちらのサイトにお世話になっている方は多いと思います。

私もこのサイトをすごく利用させていただいてます。

カテゴリー別なので見やすく、種類も多いのでとてもおすすめです。

 

 

f:id:webarekore:20130122084249j:plain

イラストがすべて無料 「イラストAC」

http://www.ac-illust.com/

こちらのサイトはイラスト素材が魅力です。

私は絵を描くのが苦手なのでイラスト素材を使いたい時は迷わず

ここを利用しています。

会員登録(無料)する事でダウンロードできます。

 

 

f:id:webarekore:20130122084313j:plain

和柄・和風デザイン用AI・EPSファイル無料ダウンロード-粋屋 日本の伝統文様と伝統色-

http://www.ikiya.jp/crest/download.html

 和の素材といえばこのサイト

非常にクオリティの高い和の素材が沢山あります。

 

 

f:id:webarekore:20130122084425j:plain

商用利用可 フリー写真素材 somephoto

http://somephoto.net/

 写真、テクスチャが豊富なサイトです。

こちらのサイトでクッキーの画像を使用しましたが

とても美しく撮れていてGood!

 

 

f:id:webarekore:20130122084333j:plain

商用フリーで使える影絵素材サイト シルエットデザイン

 http://kage-design.com/

 このサイトはシルエット素材専門サイトです。

シルエットを使うと独特な雰囲気がでるので

使っている人はチェックしてみて下さい。

 

 

f:id:webarekore:20130122084349j:plain

フリー写真素材 Futta.NET - 無料の風景フリー画像

http://www.futta.net/

 こちらはフリー写真素材専門のサイトです。

どれも美しく撮れているので

背景や、動物の写真を使いたいときはこのサイトがオススメです。

 

 

f:id:webarekore:20130122084625j:plain

写真素材 足成【フリーフォト、無料写真素材サイト】

http://www.ashinari.com/

こちらのサイトもフリー写真素材専門のサイトです。

更新頻度が高いので毎日チェックしてみることで

「これだっ」という写真に出会うかも知れません。

 

 

皆さんはどの素材サイトを利用していますか?

「ここがオススメだよ」ってサイトがある方は

コメントにて教えていただけるとありがたいです。

 

それでは!