サンプルがダウンロードできない方へ

このブログで紹介しているサンプルは、ADriveという無料オンラインストレージにアップしてあるんですが、ダウンロードしようとすると、「This file is currently unavailable due to maintenance. Please try again later.」というメッセージが出て、先週からダウンロードできなくなっています。
…なので、最近紹介したサンプルやアクセスの多いエントリーのサンプルは、MediaFireの方に移動していますが、ファイル数が多いため全部移動するには時間がかかります。

もし、まだADriveの方にアップしてあるサンプルでダウンロードできない場合は、該当するエントリーの方にコメントを付けてください。優先的にMediaFireの方に移動いたします。
しばらくご迷惑をおかけすると思いますが、よろしくお願いいたします。

続きを読む "サンプルがダウンロードできない方へ"

透過PNGを使ってテキストにグラデーション

画像を使わなくてもグラデーションくらいなら…｜web creators 2008年10月

今回もweb creators 10月号の「使えるCSS デザインの技152」から、ちょっとした小技です。

「SEOに配慮して、h1などの見出しに画像を使わずテキストのまま組んで欲しい」といった要望が最近までちょこちょことありました。（※ほとんど最近は、画像を背景にして、テキストをtext-indent: -9999px; として表示エリア外にとばしていますが）
そんな時、テキストの上に透過PNGを重ねてしまえば、画像を使わなくてもグラデーション効果が得られるというのが今回の小技です。

実際、画像を作った方がキレイですし、テキストに透過PNGを重ねるだけでは凝った効果を加えるコトもできないので、使う機会は限られると思いますが、とりあえずサンプルです。

続きを読む "透過PNGを使ってテキストにグラデーション"

サイトの画像を簡単に保存させたくない場合

cssで透明のカバーをかぶせましょう｜web creators 2008年10月

web creators 10月号には「使えるCSS デザインの技152」という特集が組まれています。結構使えるモノや定番のテクニックが載っていますので、手元に置いておくと便利かも知れません。

そんな中で今回紹介するのは、サイト上の画像を簡単に保存させないようにする小技です。
以前、建築デザイン事務所のサイトをコーディングした時に、施工実績である建築物の画像をダウンロードできなくするか、印刷できないようにして欲しいと言われたコトがありました。
画像をダウンロードできなくするには、背景にすればある程度は対応できますが、何百とある画像を背景にするのは到底現実的とは思えません。仕方なく、cssで印刷時には該当する画像を消すようにしました。

このような特殊な事情の時に使えるのが、今回の小技です。
実際、ソースから画像のURLを辿るコトもできますし、もっと簡単にスクリーンショットを撮ってしまえば、画像は手に入れられる訳ですが…。

まあ、とりあえずサンプルです。

続きを読む "サイトの画像を簡単に保存させたくない場合"

Tweenerで動きの制御

モーショントゥイーンはActionScriptで制御せよ

Flashと言えば動き。
…で、昔はタイムライン上でモーショントゥイーン機能を使って拡大縮小やら移動やら、アルファ値などを変えていました。Flash8からはフィルタ機能も加わり、ブラーでぼかすのも定番になりました。
しかし、モーショントゥイーンをActionScriptで制御するような流れになり、プログラムの知識のない人達は、かなり試行錯誤してFlashを作らなければならない時代に突入しています。
そんな中、１つの救いになろうとしているのが、このブログでも幾度となく紹介している「Tweener」ライブラリです。

（前置きが長くなりましたが…）ちょっとしたFlashの仕事があり、本格的にTweenerを使って、動きの制御を試みてみました。Tweenerの良いトコロは、モーショントゥイーンに限らず、様々なプロパティをトゥイーンでき、何より記述の仕方が非常にシンプルになるというトコロ！
今までだったら、プログラムの知識がなくて力業でやっていた作業が、たった数行でできてしまう。やはりコレは、使わない訳にはいかないです。

サンプルはこちら。
（スタートするには画面をクリックして下さい）

続きを読む "Tweenerで動きの制御"

手軽にラフイメージを作る無料ソフト

Firefoxの拡張機能「Pencil Project」｜web creators 2008年10月

今回もweb creators 10月号の「webデザイン スタイルアップ Tips」というコーナーで紹介されていますが、PowerPointなど既成のソフトウエアを使わず、Webサイトなどのラフデザインを作成できるFirefoxの拡張機能「Pencil Project」をこのブログでも紹介してみます。

まずサイトにアクセスして、ページ上部の「Downloads」をクリック。ダウンロード後、Firefoxを再起動して、ツールメニューから「Pencil Sketching」を選択します。
すると、作成画面が表示されるので、左側の「shape collection」の中からパーツを選び、右側のキャンバスにドラッグ＆ドロップで配置していきます。
なかなか既成のソフトウエアのように痒いトコロまで手が届いていませんが、何より無料だし、画像取込もでき、スクロールバーやチェックボックスなど、Web独自のデザインパーツを取り揃えてあるので、使い方によっては手軽に素早く小綺麗にラフを作れると思います。

操作画面はこんな感じです。

もちろんデータは保存できますし、PNGで書き出すコトもできます。
興味がある方は、試してみると良いかもしれません。

写真から手軽にイラスト作成

Funky Ways to Express Yourself｜web creators 2008年10月

web creators 10月号の「webデザイン スタイルアップ Tips」というコーナーで紹介されていますが、写真を簡単にイラスト風に加工してくれる「Funky Ways to Express Yourself (www.befunky.com)」というサイトをこのブログでも紹介してみます。
作り方は簡単です。
まずサイトにアクセスして、CARTOONIZERというコーナーの「GET STARTED」をクリック。３つの方法で加工したい写真を訊いて来ますが、とりあえず一番手軽な「FROM YOUR DESKTOP」を選んで、任意の画像ファイルを指定して下さい。
「CONTINUE CARTOONIZING」を選択、「SKETCH」タブをクリックすると、２つのスライダーとAPPLYボタンが表示されるので、スライダーを適当に動かし、APPLYボタンで適用させると線画のようになります。
同じように「COLOR」タブのスライダーを適当に動かし、APPLYボタンで適用させると写真とブレンドされてイラスト風な加工を施した画像が出来上がります。
あと２つのタブもいろいろと楽しいので、試してみて下さい。

サンプルはこんな感じです。（左は元画像、右が加工後）

いい感じに仕上がったら、「SAVE」ボタンで保存できます。思いがけない名作（迷作）に仕上がるかも知れないですよ。

まあ、お堅いサイトでの利用は無理かも知れませんが、個人的なブログとか、ちょっとルーズな感じでページを仕上げたい時など使えそうです。（画像によっては絵画のようになりますし…）
あと、イラストレータに頼むとお金がかかるし、絵は描けないし…、といった場合の苦肉の策などには利用できるかもしれないですね。

Google製ブラウザ Google Chrome

Yahoo!ニュースにGoogle製ブラウザ「Google Chrome」の話題が載っていたので、早速ダウンロードして使ってみました。
記事にも書いてありますが、とにかく表示が早いですね。シンプルなユーザーインターフェイスも好感が持てます。さすが、Googleですね！
Firefox（Mac版）も3になってから何だか使いにくいし、早くMacでも使えるようになって欲しいです。

ダウンロードは、http://www.google.com/chrome/から。
※まだBETA版ですので、インストールは自己責任でお願いします。