2009年8月アーカイブ

最近発見した、ちょっと便利なカラーパレットをご紹介します。

「Color Scheme Designer 」

一見普通のジェネレーターですが、使ってみるとこれが意外と便利。



最初に画面左でパレットのキーカラーとなる色を選びます。
選んだキーカラーを元に、6つのモードでカラーパレットを作成できます。
モードは左から「mono＝同系色」「complement＝補色」「triad＝三色組」「tetrad＝四色組」「analogic＝類似色」「accented analogic＝補色＋類似色」。

やっていただくと分かるのですが、いろんなバリエーションのカラーパレットがプレビューしながらわりと簡単に作成できてしまいます。
白・黒・グレーでテキストを乗せた状態のプレビュー...といった技もあり。

さらに、そのパレットでWEBサイトを作った場合のサンプルページを見ることなんかも可能。
ライト（明るめ）バージョンとダーク（暗め）バージョン、ポイントカラーを変更した場合など、4パターンくらい見れます。

気に入ったカラーパレットは、Photoshopのカラーパレットとして保存もＯＫ。
「HTML+CSS」や「XML」でも書き出すこともできます。

フリーにしては結構便利なツールだと思います。
気になる方はぜひどうぞ。

adobeからクロスブラウザー対策のツールが出たのでご紹介。

その名も『adobe browser lab』

Dream weaverのCS4装備の場合はエクステンションとして、ローカルに落とせる模様。

持ってなくても、adobe IDさえ取得していれば、オンライン上での確認が出来ます。

↑こちらは、プレビュー画面。
左がwindowsのFireFox3で右がWindowsのIE7。
それ以外でもWinとMac、各ブラウザーでのプレビューが可能です。

↑こちらはオニオンスキンモード。Flashのオニオンスキンと一緒です。（重ね合わせ。）
どれぐらいずれが発生しているか？などに便利です。

Adobe lab。

実際の制作で覗く機会はあまりありませんが、さすがに最先端のlab。

いろいろ面白そうなものが、開発されています。

Myoats

なんとなくそれっぽい幾何学模様がつくれるオンラインジェネレータです。
専門用語でトロコイド曲線というらしいのですが
ただグリグリとドラッグしているだけでなんとなくそれっぽいものが出来上がります。


一度やりだすとしばらくとまらなくなってしまいます。
お手軽な分こういうツール好きです。

昔定規に歯車がついたような玩具が売ってたのを思い出しました。

何も考えずにやると意外ときれいなものができたりします。

Photoshopの起動をボタン一発で高速化するフリーソフト「Photoshop SpeedUp」をご紹介。

最近、オンラインストレージのfilebankが新しくなりました。

今までは100GBまでだったのが、なんと無制限に。

遠方のクライアントさんとのデータのやり取りにとても便利です。

以前はbigmailというサービスもありましたが、確か今月（8月いっぱい）でサービスが終了。

以前もfilebankは使っていましたが、インターフェイスも変更し、使い易くなりました。

しかし。

なぜか、firefoxだと動かない。　昔もそう。　今もそう。
そんな苦情は行ってないのだろうか？それともIEユーザーのみのターゲットなのか？

しかも、要クライアントインストール。

今のタイミングなら、AjaxなりAIRなり、そこら辺を期待してみたんだけど。

それとも、自社で借りてるサーバーにJqueryとかのアップローダーくっつけて、そこで、データは
やり取りする方がいいのかな？

クライアントさん的に楽なのはアップローダーだと思うし、であればセキュリティが課題には
なってくるし。

今後の課題にしようと思う。

Adbe関係のソフトを使うときに、意外と使用するのがショートカットキー。

たくさん覚えていると、作業効率が上がりますよね。

しかし、たまに「なんだっけ？」とショートカットキーを忘れてしまうのも事実。

今日ご紹介するアプリはそんなときの「カンペ」的なアプリです。

Adobe AIRのフリーアプリ「Adobe Shortcut App」




これは非常にシンプルなアプリで、IllustratorやPhotoshop、FireworksなどAdobe系ソフトのショートカット集が一覧で見られるものです。

もちろん検索なんかもできますし、よく使うショートカットは「favorites list（お気に入りリスト）」に入れておけば見つけやすくなります。

WindowsとMacの切り替えもOK。

チートシート（カンペのようなもの）の形式でPDF出力することもできますよ。

気になる方はインストールしてみてはいかがでしょう。

フォトショップを高速化する手法を教えてくれるサイトのご紹介。

Make Photoshop Faster

といっても紹介している手法は2だけ。

でも仮に「フォトショップ高速化100の方法！」
とかだと多分全部試す気になれないと思います。

2つぐらいだったら・・・と直ぐ試してみる気になれる感がいいとおもいました。

ザックリいってしまうとキャッシュと画像プレビューの設定を変えれば速くなるよ、とのことです。

また、壁紙で配布されているのでネタとしてもよいかと。

Googleにおける検索トレンドを解析できるWebマーケティングツール『Google Insights for Search』が日本語に対応しました。最新アップデートでは、予測機能/ アニメーションマップ/ Webサイトへの埋め込み/ iGoogleへのガジェット追加などが盛り込まれました。

Google Insights for Search

Google Insights for Searchでは、任意の検索クエリ/ 地域(国や都道府県)/ 期間/ カテゴリなどを指定し、検索の傾向を分析・比較できるサービスです。

結果はグラフなどでわかりやすく表示され、競合サイトを調べたり地域別の動向を調べたり出来るので、ネットマーケティングに活用することができます。今回、各メニューが日本語表示に対応し、日本のユーザも使いやすくなったほか、新機能も追加。
予測機能では、周期性のある検索クエリについて推移予測ができるようになっている。
今後更にアップデートが続いていくと思うので期待です。

定期的にお届けしていますブックマークレットシリーズですが、今日はちょっとした便利ブックマークレットをご紹介です。

≪Google被リンク≫

このブックマークレットを使うと、現在閲覧しているページにリンクしているページを表示させることができます。



SEO的な要素を調査したい場合などに使えるかもしれません。

ブックマークレットなので、このような形で検索結果がボタン1つで出せるのが便利ですね。


今日はもう1つオマケつきです。

こちらもGooglel関連ですが、

≪Google Cache≫です。

これを使用すると、現在開いているサイトのGoogleキャッシュを開くことができます。

検索結果からたどり着いたサイトが消滅していた...といった場合にも使えますね。

もちろんSEO的に、「いつキャッシュされたのか」などをボタン1つでお手軽に調べることも可能です。

ぜひ活用してみてください。

よくチュートリアルなどで目にする画面を操作している様子の動画。スクリーンキャストといいます。

こういったスクリーンキャストを作成できるツール「screenr」をご紹介。

screenrの一番の特徴はうまいことTwitterと連動している点です。

screenr

まずログインはTwitterのアカウントを使って行うことができるし、作ったスクリーンキャストの動画はすぐにTwitterに流すことができます。もちろんブログに貼り付けるといったことも可能なのです。

またTwitterのアカウントを使っているので、ここで作られた動画の作者にTwitter経由でメッセージを送ることができる点も利点。

2009年に発表されたWordpressのテーマ。
それを何と総勢100テーマを集めたエントリーサイトです。

「100 Amazing Free Wordpress Themes for 2009」

■City Dreams
全画面写真のテーマ。文章中心だけど、ブログは印象的に見せたい方に。

■Colourise
ネオンのような光のラインと背景のコントラストが印象的です。
2.0に代表されるデザインです。

■WP CODA
jQueryやBetter Coda Sliderで実現されたスライダーを実装したテーマ。
そこらへんの拡張狙ってる方は、実装する手間なし。

■Fholio
ポートフォーリオ用に作られたWordpressテーマ。スライダー付です。
写真の好きな方や、自分の作品を発表したい方はこちら。

これだけあるとさすがに迷いますね。

数点、インストール中してみましたが、インストール中にエラーを吐いたり、ちゃんと反映されない物もあったり。

使用目的がブログではなく、CMSを使ったサイトなものもあるので注意。

7 Clever Google Tricks Worth Knowing | Marc and Angel

上のリンクでいくつかのGoogleの検索技が紹介されています。

普通のイメージ検索で「Google」と検索するとこんな感じで「Google」という文字列に関連のある画像が検索結果としてでますが、パラメーターに"imgtype=face"と付けると、こんな風に人物に限定した結果となります。


もう1つは、このように、"allinanchor:"というオプションをつけると、ただの「検索」という文字列ではなく、アンカーの貼ってある「検索」だけにヒットします。

皆さんこんにちは。

今日は、ちょっとした遊び心で使えるかもしれないジェネレーターをご紹介。

The Newspaper Clipping Generator

これは、入力したテキストを新聞の切抜きのようにデザインして画像かできる面白ツールです。

サイト内のフォームにテキストを打ち込んで、「Generate!」を押せば完了。



いたって簡単です。

ちょっとしたバナーやパーツ制作時に使えるかもしれません。

ただし、日本語には未対応なのでご注意。

WEB上で調べ物をする場合、まずは検索エンジンなどで目的のキーワードを入力し、
自分が必要としているページを探すのが一番早いと思います。

ただ、見つけたページ内に大量のテキストがあり、目的の情報が中々見つからないときがあると思います。

そんなとき、FireFoxで便利な機能があります。

「Ctrl + f」キーで標準の検索バーが開き、ページ内のテキストを対象にした検索ができる機能がありますが、もっとシンプルですばやい検索動作が可能になる別の検索方法があります。

「Quick find」というこの検索は「/」（スラッシュ）をタイプすることで、全テキストを対象にした検索バーが開き、同様に「'」（アポストロフィー）をタイプすればリンクだけを対象にした検索バーが開きます。

検索中は標準の検索と同様「F3」で次を検索、「Shift + F3」で前を検索という動作が行えますが、標準と違う点はフォーカスが移ったり、一定時間になると勝手に消えるところです。

（これらはもちろんフォーカスがテキストフィールドにあるときなどには働きません。）

また、オプションの設定にて「キー入力時に検索を開始する」にチェックをすれば、「Shift + 検索ワード」で直ちに検索を始めることができます。

（「Win + 検索ワード」でも可）

標準の検索バーのそれよりも起動力を求めるパワーユーザーにお勧めのテクニックです。

たった20KBでショッピングカート機能を実装できるJavaScriptがでました。

SimpleCart.js
http://www.simplecartjs.com/


デモを使用してみた感じ、違和感も物足りなさも感じませんでした。
それなのに20KBですんでしまうとは中々の高性能だと思います。


商品の陳列や注文内容の変更・削除・数量変更などとても簡単にできます。
実際の決済にはPayPalかGoogle Checkoutを利用することになります。
まだ日本で使用するには言語の問題や決済方法などハードルは高いですが、ショッピングカート自体やっかいな機能だと思うのでこういったものはとても助かります。

新しいものをどんどん取り込んで利用できれば今よりもっと
効率的で魅力的なものがつくれそうです。

最近、MTをWindows環境のレンタルサーバーで構築する機会がありました。

しかし、何やらオカシイ・・・

再構築の際、かなりのいい確率でエラーを吐き出す。

なんだか、MT.cgiがoutputエラーうんぬんで、な様子。
再読み込みをすれば、問題ないんだけど、タイムアウトじゃないし・・・？

おまけにしばらくして見てみると、なぜか初期に戻ったりしまして。（再構築でクリア）

原因は現在調査中なので、分かったら報告します。

ちなみに稼働させているサーバー環境はこんなかんじです。

OS：Windows 2003 SP1
ウェブサーバー：IIS 6.0
SSI, Perl, PHP, ASP, ASP.NETは ISAPI拡張で動作可能
PHP：PHP-5.0.3
Perl：Perl-5.8.7
ASP.NET：1.1/2.0（相互排他で選択可）
ASP：6.0
.NET Framework：2.5まで
SQL：MSSQL 2000 SP4
MySQL：4.1.21

ログ解析：Urchin 5.7
AWStats 6.5
SharePoint: SharePoint Services 2.0 SP2
メールサーバー：Exchange 2003
ウイルス対策ソフト：Trend Micro ScanMail for Microsoft Exchange 7.0

ボタンジェネレータは沢山ありますが、めずらしく日本語に対応しているものを見つけたのでご紹介。

As Button Generator↓

web制作中に、「Loading」のイメージが欲しくなるとき、ありますよね。

そんなときに役立つサービスを見つけました。



ajaxload.info

このサービスでは、イメージのタイプ、Background（背景）とForeground（前景）を指定するだけで、お手軽にLoadingのイメージが作れます。

定番のものから流行りのものまで、割といろんなタイプがあって使いやすいです。





スピードを要求されるときやLoadingのイメージに困った際に使ってみてはいかがでしょう。

Chrome、Safari、Opera、Thunderbird、iPhone、Wii、PS3など広範囲に渡ってブラウザ、OS、デバイスに共通の問題があり、ブラウザの終了、OSの再起動、ハードウェアのハングアップなどの不具合が発生することが発見されました。同問題の影響を受けるプロダクトは次のとおり。これ以外にもJavascriptをサポートしているプロダクトで同様の問題が発生する可能性があります。

• IE 5、6、7、8 (すべてのバージョン)
• Chrome
• Opera
• Seamonkey
• Midbrowser
• Netscape 6、8
• Konqueror (すべてのバージョン)
• Apple iPhone、iPod
• Apple Safari
• Thunderbird
• Nokia N95 (Symbian OS v.9.2)、Nokia N82、Nokia N810 Internet Tablet
• Aigo P8860 (
• Siemens phones
• Google T-Mobile G1 TC4-RC30
• Ubuntu

この問題はJavaScriptのselect()メソッドによるもので、かなり大きな整数を指定してselect()をコールするとx+nバイトの メモリを確保し続け、最終的にメモリを使い尽くすことが明かに。

発生する不具合はブラウザやOSごとに異なるという。報告されている現象は次のとお り。

• Konqueror / Ubuntu: ブラウザがクラッシュするかOSが再起動する
• Chrome: タブがクラッシュ
• Firefox: ブラウザがクラッシュ
• IE 5-8: ブラウザがクラッシュ
• Opera: 他のアプリが不安定になる
• Wii: コンソールがハングし、ハードウェアリセットが必要になる
• PS3: コンソールがハングし、ハードウェアリセットが必要になる
• iPhone: iPhoneがハングし、ハードウェアリセットが必要になる

対応状況はプロダクトごとに異なっており、次の状況が記載されていました。

• Mozilla: Firefox 3.0.5および2.0.0.19で対応済み
• Apple: iPhoneおよびiPodはすでに対応済み
• IE: 対応なし
• Webkit: r41741で対応済み
• Chrome: 対応済み
• Opera: 9.64以降で対応済み
• Thunderbird: 不明
• Konqueror: 不明
• Nokia: 不明
• Aigo P8860: 不明
• Siemens: 不明

これはselect()で扱えるHTML要素の数に上限がなかったことが原因になっています。今回ブラウザベンダ間で協議をおこない、上限を10,000に設定するのが妥当ではないかという結論に至ったといいます。

最近までDream Weaver上でホットスポットの設定が出来ることを知りませんでした・・・

今まではホットスポットはFireWorksのみなせる技かと思っていましたが。

実はかなり以前のDream Weaverから出来たらしいんです。

しかも実に簡単。

ホットスポットウィンドウを開いて、あとはイメージの上に領域を作るだけ。

領域はいつものごとく、長方形や楕円、多角形ツールを使って書くだけです。

いままでは、使いたくてもFireWorks上でJavaを自動生成させてHTML書き出しをして、

そんな具合でしたが、こんな簡単に出来たんですね。

ちなみにコードで書くとこんな感じです。

<img src="XXXXXX.jpg" width="299" height="190" border="0" usemap="#XXXXX" />
<map name="xxxxx" id="xxxxx">

インライン要素の記述方法
<area shape="エリアの形" coords="座標" href="リンク先">
※SHAPE rect=四角形　circle=円形　poly=多角形

関係図はこんな感じです。
<area shape="rect" coords="左上x, 左上y, 右下x, 右下y" href="リンク先">
<area shape="circle" coords="中心x, 中心y, 半径" href="リンク先">
<area shape="poly" coords="Ax, Ay, Bx, By, Cx, Cy..." href="リンク先">

これで見ると、Java、発生してないんですね。

こちらの「TYPE C4」は、現在のデジタル時代に対応した横組設計思想や視認性・可読性が高いことなどが特徴のフォントブランド。今回発売されるC4 ミンニアムは、このコンセプトを基本に"限りなくゴシック体に近い"新しいスタイルの明朝体という位置づけとなるものです。ユニバーサルデザイン思想で、ディ スプレイでの表示にも適しているといいます。


このなかで、C4 スクエアは欧文書体における"スクウェアセリフ"(ローマン体の細い線を太くしたデザイン)のイメージを日本語の書体に取り入れたもので、明朝体とゴシック体の中間に位置するような書体です。

いずれもTrueTypeフォーマットで、価格は1書体1万2,600円、C4 ミンニアム6書体パックが4万7,250円、C4 スクエア2書体パックが1万9,950円となっています。
また、同フォントシリーズの「C4 ゴシック・ドゥ」12書体および「C4 ニューズ」4書体が発売されました。

今風のロゴを簡単に作れるロゴジェネレーターをご紹介。

web制作で必ず必要になる作業、色合わせ。

キーカラーから周りの配色を選んだり...。

そんな時、カラーチャートや配色見本を参考にすることも多いと思います。

先日、もっと手軽に参考配色を割り出せないかと思っていたところ、発見しました。



Color Palette Generator

このwebサービスは、サーバーにアップロードしてあるイメージのURLを張り付けるだけで、そのイメージに合う配色を選び出してくれる、というものです。

どの程度使えるかは別として、ラフデザイン起こしなどスピードを要求される場合には役立ちそうです。

デザイナー、コーダーを含めて制作環境の人にはかなり便利ツールです。

『IE tester』

先日最新の0.3.5がリリースされていました。

これさえあれば、IE5から最新のIE8まで、実際にどう表示されるかがわかります。

未だに、各ブラウザー、バージョンでの表示が問題になりますが、これさえあれば
納品後に表示が崩れてるといった問題も発生しません。

制作会社によっては、表示確認用でバージョン違いのIEを複数台のマシンで確認
している所もあるようですが、これさえあればもうWin1台で確認できるようになります。
この先IE8へ移行する中で、未だにIE6が現役なところもあり、さらにはHTMLのバージョンアップも世間では騒がれています。

こそ先しばらく表示問題からは離れられなそうですね。

DWの基本機能のクローク。

今まではあんまり使ってなかったのですが、最近ちゃんと設定をするようになって、
使ってみると、結構便利だったのでちょっと紹介。

要はクロークを設定した拡張子・フォルダはDWのアップロード対象外となります。

↑これが設定画面。

なので、アップロードしたくない拡張子を設定。

あわせて、フォルダ単位でもクローク。

↑実際のローカルの階層。

Trashフォルダ（ゴミ箱）を作ってクローク。
これをすることにより、危険なアップロードをする時、いちいちバックアップを取らずに済みます。
例えば更新の場合、まずはファイルを複製。
DWのデフォルトで『Copy_of_xxxxxx.html』が作られる。
これをドラッグ＆ドロップでTrashフォルダへ。
こうすれば、アップロード対象外のすぐに戻せるバックアップファイルの出来上がり。

かなり便利です。

今はクライアントごとの実際のWEBフォルダと制作につかう素材フォルダに分けて
使われてる方が多いと思いますが、上手にクロークすれば、クライアントフォルダは
1つですみますね。

ＷＥＢページに画像を添付する際、JPEG・GIF・PNGどの画像フォーマットがどのような場面に向いているのかまとめてみました。

• GIF - 基本的に256色のインデックス画像フォーマット。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるのも大きな特徴です。

• JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている。同じ場所に何度も上書きを続けていくと序所に画像が劣化していくので注意が必要です。

• PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現でき、24ビットイメージも表現できる。但し、一部ブラウザではPNGの背景透過を表現できない。

WEBページに効果的にフォーマットを適用していくことによって、若干の表示速度向上にもつながります。
最近ではYahoo!ニュースで使用されている画像をPNG8にし、最適化を図ったりもしているようです。

全てのユーザーが同じ回線速度の環境で見るわけではないので、そういった部分も考えなければいけなくなってきました。

4回目を迎えましたこのコーナーですが、今日は「調整レイヤー」を使ったお手軽な画像加工についてご説明します。

毎回ですが、わりと初級な内容＋CS3（Win版）でのご説明になっております。

加工の方法等も公式に紹介されているものではありませんのでご注意ください。


さて、まず「調整レイヤー」とはどんなものかといいますと、「効果だけを乗せられる1つのレイヤー」と説明すると簡単かも知れません。

つまり、元の画像に直接手を加えることなく、その上のレイヤー上でいろいろな効果を加えられるという便利な機能です。

Photoshop画面上ではレイヤーパレットの「塗りつぶしまたは調整レイヤーを新規作成」で作成できます。





今日はかなり定番な例ですが、通常の森の画像を雪が降った後のように加工してみたいと思います。

元画像はこの画像を用意しました。





手順1

「塗りつぶしまたは調整レイヤーを新規作成」ボタンを押して、メニューの中から「チャンネルミキサー」を選択します。




次にチャンネルミキサーのダイアログで、左下の「モノクロ」にチェックを入れます。

各チャンネルのスライダを少しずつ上げて、好みの白が出るように調整します。




ＯＫを押すと調整レイヤーが作成され、白黒の画像が出来上がります。







手順2

出来上がった調整レイヤーを選択して、消しゴムツールを使って、雪を残したい以外の部分を消していきます。

この時はボケ足の長いブラシを使って消すと、良い感じになります。



うまく雪を残して、出来上がりです。

意外と簡単ですね。

Ｂｌog型CMSとして同じようで、対極にいる２者。

色々言われていますが、じゃーどちがいいの？てこと。

個人的には先に耳にしたのはWP。

先に触ってみたのもWP。

両社とも実際あまり触ってませんが、回りにあるのはMT。

文献によると世界シェアは圧倒的にWP。
でも日本のシェアはMTだそうで。

SEO的にWordPressよりMovable Typeの方が優れているような記事がある。
でも、SEOの観点では、ほとんど変わらないという記事も。

日本で使う分には拡張がいっぱいある（ほとんど有料？）のがMTで、デザインなどのテンプレートにはWPに分がある様な。

WPは動。、MTは静。

動、静による差別は以前みたくないんじゃないかな？
実際Yahoo!でもGoogleでも.phpとかは普通にキャッシュされてるし、1ページとして扱われてるし。
実際は動であれ、静であれ、コンテンツを見られてる様なする気もするし。

逆にMTは静が生成されるって事は、再構築しないと生成されないって事で、
再構築の度にめんどくさい度が上がり、サーバー負担も増える一方。

これから先、CMSはどんな感じになって、どこへいくのだろう？

みなさんこんにちは。

これまでブックマークレットについては少しご紹介してきましたが、今日は改めて説明してみたいと思います。


一般にブックマークレット(Bookmarklet)とは、JavaScriptで記述された小さなプログラムのことをいいます。

たいていの場合、ウェブブラウザのブックマークに登録して利用することから、この名前がついたそうです。

使い方は簡単で、その機能を使いたい対象のページをブラウザで表示させ、登録したブックマークをクリックして使用します。


ブックマークレットいろいろな機能をもったのものが存在しています。

フォーム内のパスワードを表示させたり、スクリーンをキャプチャするもの、フォントやフォントファミリーを解析するもの...などなど、多種多様なものがあります。

ブラウザに組み込むアドオンやプラグインなどとは違って、気軽に使えるのが利点です。


個人的には便利に思う機能なのですが、意外と普及していないのも事実。

供給量も少ないのですが、先日ブックマークレットを専門に集めたサイトを発見しました。



marklets.com


今後こんなサイトがぞくぞく増えてくれると嬉しいですね。

皆さんこんにちは。

不定期に開催していますこのコーナーですが、今日は3回目。

今日のテーマはレイヤーの描画モード「乗算」についてです。

↓レイヤーパレットのこの部分や、


「レイヤー」メニューから「レイヤースタイル」→「レイヤー効果」→「描画モード」で指定ができます。


この「描画モード」は、重ねあったレイヤーに対し、そのレイヤーをどういう風に表現するのか、といったことが調整できます。


はい、今日のテーマは「乗算」ですので、乗算の効果についてご説明します。


画像の上に直接文字や絵を描いたようなイメージを作りたいとき、ありますよね。

そういった場合、下のレイヤー画像の上に、そのままテキストやイメージのレイヤーを置きますと、まさにそのまま「重ねただけ」という状態になります。

↓重ねただけの画像。


しかしこのままですと、「描いた」ような感じが薄いです。

で、ここで「乗算」が登場するわけです。

上のレイヤーの描画モードを「乗算」に指定してみましょう。

すると、重ねただけでは出せない質感が出るはずです。

↓乗算後。



状況により、期待通りの効果が出ないこともありますが、何度か慣れてくると成功するパターンが見えてきますよ。

「ぼかし」などのフィルターでひと手間かけると、よりクオリティーの高いものも出来ます。





自然な感じでテキストやイメージを乗せたいときに、ぜひ活用してみてください。

前回に引き続きもう少しユーザビリティについて。

実際にそのページのユーザビリティをチェックする方法について考えて見ます。

■一般ユーザーに直接チェックしてもらう方法
ユーザビリティをチェックするに当たって一番直線的なアプローチで、実際のユーザーに被験者を務めてもらうユーザーテストという方法が存在し、その実験結果をもとに改善を施すことがあります。

ユーザーテストでは、ターゲットとなるユーザーに、実際に Web サイトを利用してもらい、その動きなどから一般のユーザーの動向を検証し

この手法は、ターゲットの選定や被験者の確保、テストの設計、結果の解析など、実施に際し、一定のノウハウが必要となります。

また、場合によっては、アイトラッキングという視線の動きを計測する高価な機器を用いたりすることから、一般的には敷居が高いイメージがあります。

そのため、ユーザビリティを向上させたいサイト運営者が全てそのようなユーザーテストを実施するのは、コストや効率性の面からも難しいといった実情もあります。

■ヒューリスティック評価によるチェック方法
ヒューリスティックとは、経験則という意味で、ユーザビリティの専門家がユーザーインターフェイスを評価し、ユーザビリティ上の問題を検証する手法をヒューリスティック評価と呼びます。

この手法では、評価に必要なガイドラインをあらかじめ用意して、それに基づいて専門家がひとつひとつ検証するという手順を踏みます。

ユーザーテストに比べ、短期間で効率よく、つまりコストも抑えながら実施できるのがメリットと言われています。

メインとなる大まかな項目は以下

【ナビゲーション】
・サイト全体と閲覧中のページとの関係がわかるようになっているか
・いつでも閲覧中のページの上位階層に移動できるようになっているか

【リンク】
・リンク先が HTML でない場合は事前にわかるようになっているか
・同一サイト内へのリンクは同じウインドウに表示しているか

【フォーム】
・各入力項目には入力する内容や条件などが明確に示されているか
・エラー画面が用意され、わかりやすい状況説明と建設的な指示が提示されているか

【構造及び表示スタイル】
・ページタイトルは、＜TITLE＞タグにより、各ページ固有のものがつけられているか
・見出しに＜H＞タグを使っているか

【非テキスト情報】
・画像ファイルに Alt タグが設定されているか
・Flash、PDF が使用できない場合、代替情報により内容を把握できるか

等があげられます。

制作をしていく上で参考にしてみてはいかがでしょうか。

最近の制作案件で地図を白地図を触る機会があったのでご紹介。

昔から素材で地図ってあまりいいのがないといつも思ってた時にコレ。

『地図を活用する人の総合サイト』

今回使ってみて、非常に便利でした。

各都道府県はもちろん、主要都市もあって、連携技で県章なんかもある。

なかでも一番使えたのが『地図ぬりぬり』という機能である。

好きな色で地図が塗れて、文字もかけて、おまけにBIGサイズでのダウンロード。

あとは、PhotoshopでもIllustlatorでも、煮るなり焼くなり。

今までも白地図を扱っているサイトは沢山あったけど、このサイトだけで十分です。

一度、使ってみてください。

日常で様々なWEBページをご覧になる方は沢山いるとおもいます。
その中で、ページの内容が読みにくいページやほしい情報に中々たどり着けないことはありませんか？

最近のWEBページは動的な要素が増えてきましたが、今でも情報の中心となるものは文章です。
WEBページを見やすくするためには文章を見やすく、効果的に使用することが必要になってきます。

■最適な文字サイズを考える
Web ページにおける文章の読みやすさを考える上で、文字の大きさは最も基本的なポイントでありながらも悩ましい問題です。

WEB制作会社ならクライアント側と文字のサイズで論争になることも多々あるかと思います。

一般的に、モニタ上で文字を読むのが苦手な高齢な方ほど、視認性が高い大きな文字サイズを好む傾向にあります。実際、老若男女、様々なユーザが利用する自治体のサイトなどは、文字サイズが大きいサイトが多いです。

一方、文字サイズが大きいと、一画面に表示できる情報量は少なくなりますから、使い勝手が悪いと反対する方もいるわけです。

ユーザビリティの考え方に基づくと、どちらの要望も理にかなっており、そえゆえ悩ましい、まさに究極の選択ともなりえる問題なのです。

■文字サイズの不満を解消する
もともと Web ブラウザには、文字サイズを拡大・縮小する機能が備わっています。インターネット・エクスプローラーなどは、文字だけではなく画像も含めたページ自体を拡 大する機能も備わっており、本来、その解決はユーザーの操作に委ねられるべきものなのかもしれません。

しかしながら、必ずしもパソコンの操作に長けた人ばかりがサイトに訪れるわけではないため、ブラウザの機能を知らないユーザーにとっても、わかりやすく、簡単な方法で文字サイズを好みに設定できる必要性があります。

解決の手段として、最近、多くのサイトで Web サイト自体に文字サイズの拡大・縮小機能を付与するという機能が導入されています。

実際、Web サイトを巡回していると、ページの右上に「文字サイズ：小・中・大」といったボタンが並んでいることがよくあり、ユーザビリティの施策としての認知度も高いものです。

文字サイズの拡大・縮小機能は、JavaScript とスタイルシートを組み合わせることで、比較的簡単に導入できる機能ですので、一度導入を検討してみてはいかがでしょうか。

いくら凝ったデザインや魅力的なコンテンツを用意したところで、読ませたい文章に目がいかないようでは、命取りとなります。まずは、文字サイズという身近な例からユーザビリティを考えていただければと思います。