2008-10-16 14:19:03 posted by sugimott

デザインにはかかせない色についてのあれこれ

テーマ:ツール
まずは、自分の色彩感覚をチェックするゲーム。

huetest

Munsell Hue Test

遊び方
カラフルなパネルが4段並んでいます。
各段の両端には色の違うパネルが固定されていて、その間のパネルはドラッグ&ドロップで
動かせるようになっています。
一番左端から一番右端にいくに従って、綺麗なグラデーションになるように、間のパネルを並べ替えて下さい。
4段全て並べ替え終わったら、「Score Test」を押して下さい。
点数が出ます。

ちなみに僕は、こんな感じ。

perfect


まぁ、これと色のセンスは別物ってわけで、やっぱりデザインを起こす時の色の選定は難しいものです。
そんな時に役に立つのが、下記のツール。

色をひとつ指定すると、それに合った色を自動で選んでくれたり、いろんなユーザーのお気に入りの配色パターンが
見れたり、サイトの色を決める際に非常に役に立ちます。

ColorToy 2.0 [オススメ]
Color schemes generator 2
colorjack
COLOURlovers
kuler [オススメ]


これで頭を悩ませる色の選定もばっちりです。
2008-10-08 12:41:35 posted by sjun

デザインブログ発足!デザインコンセプト

テーマ:ウェブデザイン
Adtechnica Design blogということで自分の番が回ってきました。
はじめまして、アドテクニカ制作部の下っ端の鈴木です。
為になるかどうか、わかりませんがいろいろご紹介させて頂きたいと思います。

今回ご紹介するはご存知ユニクロのWEBサイト
何を隠そうユニクラー(ユニクロをよく着ている人)の私ですが、毎回コンテンツが変わって
安くてシンプルなのに、それを感じさせないブランドマーケティングには毎回脱帽してます。
(帽子かぶってませんが)

そのもの商品を売る為に、お客様がどう思って、企業はどう提案していくか。
そいういう概念はどの企業にも通じるところがあると思いますが、ユニクロに見習い、
頑張ってお客様が満足できる商品を生み出していきたいです。

ユニクロ
2008-10-03 20:35:20 posted by ychiemi

ユニーク(?)な発想

テーマ:etc
ユニーク、というよりシュールです。

こちらのテーブル。

好き嫌い、良い悪いは置いといて、こういった発想は面白いですね。
個人的には嫌いでは、ないかな…実際に見てみたいとは思います。欲しいかは別ですが。


2008-09-30 17:38:58 posted by adde

透過するデザインを作成するために

テーマ:ウェブデザイン
ホームページをデザインする上で、ここを透けさせたい!きれいな影を付けたい!と言う事は、よくあることです。
その場合、透過GIFを使用する方法とPNGを使用します。

透過GIFの利点は、ほぼ全てのブラウザで対応していて、ごく普通に<img>タグで貼付けるだけで使用できます。
しかし、透過GIFはあまりきれいではなく、あまりイメージ通りのものができません。

もう一つの方法、PNGを使用する方法ですが、最新のブラウザは対応してますが、全世界的にシェアを持っているIE6が対応していません。
そこで今回紹介するJavascriptを利用すれば、CSSを少し書き足すだけで、IE6でも対応することができます。

利用方法は、下記となります。
Javascriptの読み込みとCSSに1行入れておしまい!とても簡単です。
まずは、JavaScriptのダウンロード

Javascriptを使用するための一行
<script type='text/javascript' src='_js/iepngfix.js'></script>

iepngfixを利用するためのCSS
* html #クラス名 { behavior: expression(IEPNGFIX.fix(this)); }
2008-09-24 09:43:19 posted by adde

ホームページを一発で綺麗に印刷する方法

テーマ:ツール
ホームページ制作会社や、企業のホームページ担当の方は、打合せ用にページを印刷することが日常的にあると思いますが、普通に印刷しようとすると表示が崩れてしまったり、紙からはみ出て印刷されてしまったりってことがよくありますよね。

そんな時にはコレ!

Firefoxのアドオン 「Pearl Crescent Page Saver」です!

どんなに長~~いページでもボタン一発でスクリーンショットを撮り、画像として書き出してくれます。あとは一枚になった画像を開き、用紙サイズに合わせて印刷すれば、ばっちり綺麗に印刷できます。

インストール方法は、Pearl Crescent Page SaverにFirefoxでアクセスして、下記の画像のようなリンクがあるので、クリックするとアドオンのインストールが行われます。




上記のPearl Crescent Page Saver + 注釈が付けれてしまうアドオンもあります。

その名も「Fireshot

こちらは Crescent Page Saverのようにページ全体のスクリーンショットも撮れますが、それだけじゃなくそのスクリーンショットに注釈が書き加えられます。

つまり外注先のウェブ制作会社への指示書作成が、Fireshotさえ入れれば1回で済ませられます。ただしメニュー関係が英語です。ちょっと敷居高いですが、勘で色々触ればなんとかなります。


Firefoxはウェブ制作者にはほんと、助かるアドオンばっかりですね。
また何か便利なものがあれば紹介したいと思います。

[ Sugi ]

Amebaおすすめキーワード

    アメーバに会員登録して、ブログをつくろう! powered by Ameba (アメーバ)|ブログを中心とした登録無料サイト