配色の面積比

配色によって伝えることのできるイメージは、面積によって大きく変わってしまいます。

特に、配色サンプルなどを無意識に利用していると、
目指すイメージとまったく違う印象になる可能性があるので注意が必要です。



一般的にインテリアなどでは、

・ベースカラー(基本となる色)70%
・サブカラー(ベースカラーを補う色)25%
・アクセントカラー(変化をつけるための色)5%

といった比率で配色を行うとよいとされています。


Webサイトの配色も同様に、ひとつの色をベースカラーとして設定し、
最大面積でつかうようにすれば、イメージのずれを減らすことが可能です。

言い換えれば、もっとも大きな面積で用いられる色によって、
配色のイメージは左右されるのです。


最大面積の色を変更してしまうと、
それ以外の部分を変更した色に合わせる必要が生じてしまいます。

そのようなことにならないように、ベースカラーは慎重に設定して
容易に変更しないようにするべきでしょう。


配色の基本は「統一と変化」と言われています。


具体的な方法としては、まず同一・類似色でベースカラーをつくり
トーンや色相などが類似した色をサブカラーとして追加することで、
統一感を演出することがきます。

そのうえで、変化としてのアクセントカラーを追加するようにすると
配色を行いやすいでしょう。

伝えたいイメージをずれないように伝えるために、
配色サンプルを見るだけでなく、面積も考慮していきましょう

ラベル: , ,

カラーイメージと配色について

Webサイトには、そのサイトの目的が必要です。
その目的を果たすための手段としてデザインや配色を行いますので
まずは目的を明確にし、検討してから配色に生かすようにしましょう。

例えば、
「Webサイトの認知度を高める」→「ロゴや企業名に重点を置いた配色」

「ブランドイメージを高める」→「コーポレートカラーを前面に押し出した配色」

「商品を売りたい」→「商品写真を目立たせ、説明文に注目させる配色」

「特に注目させたいサービスがある」→「その部分を目立たせ、クリクックを誘導する配色」

といった具合です。

このように、Webサイトの目的から配色を明確にすることによって、
デザインの中でどの部分に重点的な色を使用すれば良いかが決まります。
重要な部分に優先順位を定めておくのも効果的な方法です。

また、色には情報の内容を知る前にどのような内容かを伝達する働きがあります。

【赤】
暖色系の中でも中心的な存在の色です。
女性的なイメージや派手さなどのイメージ表現に効果的で、
面積が小さくても人の注意を引き付ける効果のある色です

アクセントカラーとしても効果があります。

【青】
寒色系の中でも中心的な存在の色です。
水や空などを連想し、冷たさ、涼しさなどの温度感を伴う表現や
男性的なイメージを表現するときに使うと効果的です。
静的なイメージ表現に適しています。

【緑】
自然を連想させる色で、青と同様に沈静感などの静的なイメージを表現するとき
効果的な色です。
青よりも黄みの強い色なので青のイメージに近似し、
暖かみのある印象を伝えたいときに使うと良いでしょう。

【オレンジ】
赤よりも黄みの強い色で、夕日や炎を連想させるので、
暖かさを表現するときに効果的な色です。
彩度を高く、面積を大きくすると安っぽい印象になるので注意しましょう。

【茶】
ナチュラルなイメージ表現に適した色です。
茶色は赤、オレンジ、黄色系統の彩度の低い濁色系の色なので、
落ち着いた雰囲気といった静的なイメージ表現にも最適です。

【紫】
紫は特殊な色です。
希少価値の高い色とされているので、高貴な人物の衣服や装飾具の色として
使用されていた経緯があり、高貴なイメージを表現する代表的な色です。


他にも、色の組み合わせによりたくさんの表現方法があります。
サイトを制作するときに配色を考慮するとによって、
効果的なサイト制作をすることが出来るでしょう。

ラベル: , ,

ファイル名は大文字と小文字どちらがいいか。

インターネットに公開するファイル名には半角文字を使用しますが、
半角文字でも、大文字と小文字どちらの方がいいかと訊かれると「小文字かな?」
というなんとなく漠然とした返答になってしまう方は多いかもしれません。

インターネットに公開をしたファイル名はURLの一部となります。

例えば、「http://aaa.jp/index.html」このアドレスではindex.htmlがファイル名です。
このアドレスにアクセスする場合ドメイン部分「aaa.jp」を「http://AAA.JP/index.html」
というように大文字にしても問題なくアクセスすることが出来ます。
これは、Webサーバー用OS(オペレーティングシステム)として最も普及している
OSの特性によるものです。


WindowsやMacなどのローカルディスク上では、「index.html」と「INDEX.HTML」は
同じファイル名として認識されます。
ところが、これはローカルディスク上での話で、
Webサーバー上に「index.html」と「INDEX.HTML」をアップロードすると、
まったく別のファイルとして扱われます。

このため、上書き目的で同じHTMLをアップロードしたのに、
いつまでたってもHTMLファイルが更新されないというようなトラブルが
生じる場合があります。

そのようなトラブルを未然に防ぐために、ファイル名は小文字で統一していた方が
いいでしょう。

ラベル: , ,

JPEG・GIF・PNGの長所と短所

画像ファイルの保存形式は色々ありますがみなさまがよく目にする、
もしくは使用されるファイル形式の違いはご存知でしょうか?
ここで、一度整理して長所・短所を知ってみれば
画像ファイルを保存するときに役立つかもしれません。

■JPEG■

長所
写真の見栄えが変わらないようにデータ容量を減らし、
フルカラーを使用しているかのような画像を可能にします。
しかも、そんな画像でもファイルを驚くほど小さなサイズに抑えられます。

短所
JPGE形式では、保存するたびに画像が劣化してしまいます。
リサイズやトリミング、色調整などすべての作業を終えた後に
データを書き出すほうが良いでしょう。

■GIF■

長所
イラストのような単一の色で広範囲を塗りつぶす画像に向いています。
また、透過指定を出来るほか、複数の画像データを一つのファイル内に収め、
フレームアニメーション表示をさせる機能も備えています。

短所
最大で256色しか使用することが出来ないため、
グラデーションのある画像には向いていないといえるでしょう。

■PNG■

長所
JPGEと同じフルカラーを扱える上、GIFと同様の透過やアニメーション昨日を
併せ持った多機能な画像形式です。

短所
新しい形式のため、Webブラウザの対応が完全ではありません。
PNGアニメーションにいたっては、一部のマイナーブラウザを除いて
対応しているブラウザは存在していないのが現状です。


以上、簡単なJPGE・GIF・PNGの長所と短所でした。
みなさまに活用していただければ嬉しいです。

ラベル: ,

大容量の画像やデータの共有・送信方法

皆さんはデジカメで撮った写真をどうしてますか?
カメラ屋さんに持っていって、現像に出して、それをお友達に渡したりしますか?

しかし、せっかくのデジカメです。
お友達がパソコンを持っているなら、インターネット経由で写真を送ってみましょう。

写真を画像データとして送れば現像に出す手間もありませんし、焼き回しをする必要もありません。
なかなか会う機会のない方にも、すぐに写真のデータを渡すことができます。

お友達にとってもこんなにメリットがあります。

1.すぐに受け取ることができる
2.自由に加工できる
3.必要なものだけプリントアウトができる ・・・etc


ただし、1通のメールに添付して送ることができるデータ容量には限界があります。
そんなときに便利なのが、無料で使える大容量データの送信サイトや共有ツールです。
どのツールもメリット、デメリットがありますのでご自分にあったツールを発見してください。


■Windows Live SkyDrive(共有フォルダ)
http://get.live.com/skydrive/overview

インターネットに接続していれば、どのコンピュータからでも5GBの無料保存スペースにアクセスできます。アップロードツールを使って、お使いのコンピュータからSkyDriveへファイルをドラッグ アンド ドロップしてアップロードすることも可能です。
また、ご友人と共有したい場合は共有フォルダにてアップロードをし、招待することで共有が可能となります。


■Free File Hosting Made Simple - MediaFire(データ送信サイト)
http://www.mediafire.com/

ファイルサイズ上限は100MBで、ディスクサイズ上限はありません。
アカウントの作成をすることによって、過去にアップした履歴をファイルごと残しておけるので、とても便利です。
海外サイトになります。

■宅ふぁいる便(データ送信サイト)
http://www.filesend.to/

プレミアム会員登録(無料)をすると、1回の送信要領が最大100MGまで可能です。
メールアドレスも30件まで登録可能になります。
圧縮ファイルでの送信となります。


上記以外にも色々な便利ツールがございますので活用してみてください!

ラベル: , , ,