KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~

【こちらの記事は、約7分程でお読みいただけます。】

Webブログをご覧のみなさま、こんにちは！

サイト制作や作品制作の際、皆さんお悩みになるのは、
やはり「色作り」「色の組み合わせ」ではないでしょうか？

「ピンクを使って、可愛くしてみよう！」とか、
「ブルーでカッコよくしよう！」と思っても、いざ制作してみたら、
「こんなイメージじゃなかったんだけどなぁ...。」
なんてこともあるのではないのでしょうか。

今回は、「自然から色を学ぼう！」ということで、
花や草など、自然にあるものから色作りを、学びたいと思います。

例えば、バラの花を観察してみましょう。

この写真のバラの色を、一言で言ってしまえば「ピンク」なのですが、
花びらには「ビビットなピンク色」から「淡い白のようなピンク色」まで、
いろんなピンクがあることがわかります。

色の観察が終わったところで、
今度は、このバラの写真から、色を取ってきてみましょう。

Photoshopで、写真の画像を開きます。
そして、カラーピッカーを開きましょう。

そしてカラーピッカーで、花びら部分の色と取ってみましょう。

そのまま「スウォッチに追加」ボタンを押します。

まず、「ビビットなピンク」色を取りました。
同じ要領で、他の花びらの部分からも色を取ります。

今回は、５か所から色を取ってみました。
さて、スウォッチを見てみると...

先ほど、カラーピッカーで取ってきた色が、
スウォッチに追加されています。

あとはこの色を使って、作品制作に活かしてみましょう！

例えば、この色の組み合わせからグラデーションを作ってみると...

このような感じになります。
さらに、このグラデーションを使って、ボタンを作ってみます。

上が、今回作ったグラデーションを使用して作成したボタン、
下が、ビビットピンクと白の２色で作成したボタンです。

同じビビットピンクを使ったグラデーションでも、
上のボタンの方が、質感がぐっと上がって
素人っぽさが抜けたと思います。

初めて「色の組み合わせ」を経験する時は、
スウォッチに最初からある色を選びがちですが、
今回ご紹介したように、「自然の中にある色」を取ってきて、
作品に活用する方法もありますので、是非試してみてくださいね！

私のオススメは、お花のブーケから色の組み合わせを勉強する方法です。
フラワーショップの店頭に並んでいるブーケは、
色の組み合わせを考えて作られているものなので、
元々、色に一定のまとまりがあります。

ですので、今回の方法で色を取っても、まとまりがでるので、
色の組み合わせを勉強するには、非常に良い題材だと思います！

お花を買ったら、まずデジカメなどで撮影して写真を残し、
それから、お部屋に飾って楽しめる...一石二鳥のお勉強方法でした！

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」グラフィックPro講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 前田

【こちらの記事は、約5分程でお読みいただけます。】

Adobe Creative Suite 5.5が発売されてから約8ヶ月が経ちました。

スマートフォンやタブレット端末向けコンテンツへの制作機能が強化され、
現在のWeb業界のニーズを満たしたアプリケーションへ近づいています。

しかし今までCreative Suite 2,3,4,5と順を追ったナンバリングになっているのに
何故今回は5.5と中途半端なナンバーになっているのでしょうか？

Adobe社は今まで18ヶ月ごとのアップデートを繰り返していましたが
「最新版の販売が早すぎる」「最新機能を使いたい」という意見が多かったため
今後は最新版の販売間隔を24ヶ月間隔にし、市場の動向を見て
今回の5.5のような中間となるアップデート版の販売を行なう方針に変更したそうです。

しかし結果的に「最新版の販売間隔が早すぎる」という意見には
答えられていないのかもしれません。

無論、今回の5.5は無償のアップデートではなく
比較的高額な部類に入るアプリケーション自体を購入しなければならないわけですから、
機能が多少増えたCreative Suite 6を販売しているようなものでしょう。

5から5.5へのアップグレードは10万円弱と従来よりも多少低めな値段設定ではありますが、
今回の内容ぐらいは無料で機能拡張をしてくれる
Adobeの懐の深さを見せてもらいたかったものです。

また、今回の5.5からは月額料金制での利用形態を発表しました。

これは恒久的にアプリケーションを利用するのではなく、
「短期間でのプロジェクト時のみ利用したい」 という
Web制作の現場を考えた利用形態です。

以下にその料金をまとめます。

年間プランは一年通して利用、
月々プランはニーズに応じて利用or停止を行なえる利用形態です。

主に法人が対象になりますが
選択肢が増える事は良い事ですね。
詳しくはAdobe公式サイトをご覧ください

KEN Schoolでは、最新版のAdobeアプリケーションを
お安い価格でお求めいただけます。
詳しくは各校舎のインストラクターへお声かけください！

--------------------------------------------------------------------------------

Adobeアプリケーションを使用して、Webサイトを一から作成するスキルを、
KENスクールで学習してみませんか？

⇒【Web実践コース】
Webデザインにおいて、Illustrator、Photoshopといった
プロには欠かせないグラフィックソフトの習得から、
Web制作に携わるプロとして必須のHTMLによるレイアウト方法、
業界標準ソフトであるDreamweaverを使用し、
Webサイトをデザイン・制作する技術を身につけます。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 野村

【こちらの記事は、約4分程でお読みいただけます。】

ヨハネス・フェルメール（Johannes Vermeer, 1632年 - 1675年）

フェルメールの絵に見られる鮮やかな青は、
フェルメール・ブルーとも呼ばれています。

そのとても魅力的なフェルメールの【青】には、
きわめて高価なラピスラズリという貴石から作られた顔料で、
ウルトラ・マリンブルー（群青色）が使われています。
当時ラピズラズリは、金よりも高価な鉱石だったのですが、
フェルメールは常識としては、
考えられない贅沢な使い方をしていました。
彼の死後多額の借金が残されたといいます。

その代表的な作品が『真珠の耳飾りの少女』
別名「青いターバンの少女」とも呼ばれています。
しかし彼は才能には恵まれながら若くして亡くなったため、
実際に描いた作品は少なく、
全世界でも現在30数点しか残されていません。

先日、京都市美術館「フェルメールからのラブレター展」に行ってきました。
「手紙を読む青衣の女」、「手紙を書く女」、「手紙を書く女と召使」
の3点を観ることができました。

「手紙を読む青衣の女」は、年月経過による変色などで、
フェルメール本来の色彩が失われていました。
しかし、最新技術で修復が行われ、今回が修復後世界初公開となります！
フェルメールブルーの復活です。

皆さんも是非、美術館に足を運んではいかがでしょうか？

京都展（京都市美術館）2011年6月25日(土)－10月16日（日）
東京展（Bunkamura ザ・ミュージアム）2011年12月23日（金・祝）－2012年3月14日（水）

オランダのマウリッツハイス美術館には、【フェルメールルーム】があり、
そこには「真珠の耳飾りの少女」の他にも「ディアナとニンフたち」「デルフトの眺望」
といったフェルメールの貴重な作品が展示されています。

来年2012年に、
オランダのマウリッツハイス美術館が大規模に改修工事を行うのに伴い、
フェルメールの代表作「真珠の耳飾りの少女」などを含めた、
約50点が一挙に来日する予定です。
東京都美術館と神戸市立博物館で開催予定だそうです。
本来ならオランダに足を運ばないと、
一度に観れないのにとても贅沢ですね。

あ～来年が楽しみです。

色彩に興味のある方は、
KENスクールの「色彩基礎講座」に是非参加ください。

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極めていけるように指導していきます！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 安達

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、いつもWebブログをご覧いただき、ありがとうございます！

前回に引き続き、今回も色特集です！
「ストロングトーン」についてお話したいと思います＾＾

下図をご参照ください。

先日ご紹介した、「ブライトトーン」に少し灰味を足した色になりますね。

ストロングは英語でstrong。
『強い』『強烈な』『はっきりした』といった意味です。

そんな名前がついたストロングトーンのイメージは、

• 強い
• くどい
• 情熱的な
• 動的な

と、言ったものになります。

『強い』と言う意味から利用された例として、
アスリートのユニフォームがあります。よく使われていますね。

サッカー日本代表のユニフォームで、
いわゆる「ジャパンブルー」と言う藍色も、
このストロングトーンに分類されます。

先のなでしこジャパンも、
ストロングトーンのイメージ通り、
「強い」サッカーで、世界一になりました！！

男子は、ワールドカップ予選。
女子は、五輪予選と、
大きい大会の予選が男女ともに続き、良い結果に結びつきましたが、
このストロングトーンの色のお陰も、あるかもしれませんね＾＾

また強いサッカーをまた見せていただければと思います。

がんばれ！日本代表！！

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの制作物を作ることで、経験を養います！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、いつもWebブログを見ていただき、ありがとうございます！

今回は「ブライトトーン」についてお話したいと思います。

下図をご参照ください。

純色に少し白を混ぜた明るくキュートでさわやかな配色になります。

ブライトは英語で「bright」。
『輝く』や『明るい』という意味があり、
そんな名前がついたブライトトーンのイメージは、

・明るい
・健康的な
・陽気な
・賑やかな
・華やかな

などの印象になります。

ブライトトーンは、洋菓子などによく使われたりします。

春日井製菓　ゼリービーンズ
http://www.kasugai.co.jp/products/others/index.html

色々な色があって、華やかで目を惹（ひ）く色ばかりですね。

また、下図を見てください。

このように、クリアな青や赤、空色、麦わら色、 ブライトトーンは
クリアな空など夏のイメージにぴったりなトーンになります。

まだまだ残暑が厳しい今の時期、このブライトトーンの色を用いれば、
夏の暑さをすっきりさせつつ、鮮やかで好印象を与えることができますよ
ぜひ、使ってみてくださいね！＾＾

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの制作物を作ることで、経験を養います！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約4分程でお読みいただけます。】

Webブログを見てくださっている皆さん、こんばんは！
本日は、グラデーションの表現方法について、解説していきますね＾＾

グラデーションとはそもそも、
色彩やその色の濃さ・明るさ（輝度）の連続的な変化を映像化したものです。
隣り合う色を、規則的に変化させていくこと、と捉えると良いでしょう。

グラフィックデザインの大事な手法のひとつです。

異なる2つの色や濃淡が、滑らかに変化していく中で、
色相・明度・彩度・トーンが規則正しく調整され、
美しいグラデーションが生まれるのです。

虹や夕焼けの空の変化も、グラデーションの仲間になるんですよ！
段階的に色が変化している＝滑らかに変化することで、
見る人に安心感を与えます。

故に色相環で隣り合う色は、色相やトーンが類似した関係になっていますし、
両端の色同士は、どちらかというと反対の要素を持つ状態になります。

皆さんは、グラデーション配色に、
下記のような表現方法があるのを知っていますか？

● トーンのグラデーション
明度と彩度の両方が段階的に変化するグラデーション。

● 彩度のグラデーション
鮮やかな色から徐々に濁っている色へ、
低彩度の色から徐々に鮮やかな色へと変化するグラデーション。

● 明度のグラデーション
明るい方から暗い方へ、
暗い方から明るい方へというように明暗が少しずつ変化するグラデーション。

● 色相のグラデーション
明度と彩度が同じで色相だけが変わっていくグラデーション。

このように、グラデーション配色は、
似ている要素も反対の要素も含まれているので、調和しやすいといえるんですね。

グラデーションの表現を理解した上で、
作品作りに入られると、質の良いものが作成できますよ。

色彩に興味のある方は、
KENスクールの「色彩基礎講座」に是非参加ください♪＾＾

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの制作物を作ることで、経験を養います。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 安達

【こちらの記事は、約4分程でお読みいただけます。】

皆さん、こんにちは！
本日は、文字の大きさについて解説していきます。

私達が住む日本では、文章を書く際に
様々な言葉が入り乱れますよね。

漢字、カタカナ、ひらがな、英語の大文字、小文字、数字など・・・です。

実際には、もっとたくさんの文字が存在しますが、
このよう事実を汲み取りながら、文章作成を行わなくてはなりません。

さらに厄介なのは、日本語には「縦書き」や「横書き」が存在すること。

今回、文字のレイアウトで、
日本語と英語の混ざった文章を考えるとしましょう。

例えば、私達のパソコンスクール名「KENスクール」という言葉を見てみます。

上記の文章は、同一の文字種・文字サイズで作成していますが、
基準線を設けると、文字の形状にバラつきがあることがわかります。

このように、文字には同一の書式でありながら、
全く異なる大きさになる特性があることがわかります。

このような状況を踏まえ、実際に作成するレイアウトでは、
文字のサイズなどを下図のように調整しバランスを保つことで、
文字を一つの「塊」のように表現することができます。

「文字を配置したときに、特に気にしないでそのまま進むのが素人」、

「文字を配置したときに、全体的なバランスを考慮するのがプロ」　です。

このような視点で文字を見ることができるようにトレーニングすれば、
例えば、シンプルな文字だけの名刺を作成するときでも、
「ただ文字がそこにあればいい」とは思わなくなります＾＾

細かなズレに着目し、
些細（ささい）なことでも見逃さない鋭い観点で、文字を観察しましょう！

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
レイアウトや色彩・文字などの基礎知識はもちろん、
PhotoshopとIllustratorを自在に扱い、
多くの制作物を作ることにより、
グラフィックソフトを極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、こんにちは！

前回の「ダルトーン」「ソフトトーン」に引き続き、
今回は「ダークトーン」についてお話したいと思います。

下図をご参照ください。

「ダーク」は「暗い」という意味で、
ライトトーンに黒味が多く加わった色です。
渋い重厚な印象を受けます。

またマニッシュで知的な雰囲気が持ち味で、
格好良くて、強そうな色が特徴です。

上記のことから、
歴史的な建物とかを表現するときに、
ダーク系の色を強めに出すと良い訳です。

下の写真をご覧ください。

こちらの写真はただ、小さく加工しただけです。
では、こちらの写真に明るく調整してみたいと思います。

いかがでしょうか？
明るくきれいになりましたが、
歴史的な概観が少し、なんとなく軽く感じてしまいます。

では、少し暗い色を強調して、表現してみたいと思います。

いかがですか？
古い町並みにより歴史的な雰囲気の、
重厚感のある表現をすることが出来ます。

写真加工をする際には、
どのように表現したいかを、
考えて加工することが大事になります。

皆様も、ぜひ参考にしてくださいね＾＾

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの制作物を作ることで、経験を養います！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約4分程でお読みいただけます。】

いつもWebブログをご覧いただきありがとうございます！

本日は、クリムトの絵画から見る、色彩表現です。

グスタフ・クリムト（Gustav Klimt, 1862年7月14日 - 1918年2月6日）

クリムトの絵を初めて見たとき、斬新な色使いに驚きました。
特に「黄金期」と呼ばれる頃の作品は、感動すら覚えた記憶があります。

学生の時に、友人の部屋にクリムトの「接吻／1907-08」のレプリカがあったのです。

その空間がとても素敵に見えて、私も早速レプリカ購入しました。
画集も何点か購入し、いわゆる一目ぼれですね。
ちなみに私の部屋には、今でもその頃に購入した「ダナエ／1907-08」があります。

作品自体は、愛とエロスと死をイメージしているものが多いですが、
でもその絵の中に金を違和感なく溶かし込むのは、
クリムトならではなのではないでしょうか。

日本文化を愛したクリムトの色使いは、少し和テイストが含まれています。
だからなのでしょうか、クリムトの金は不思議と違和感はなく、
金色独特のいやらしさは感じません。
逆に神々しささえ感じますね。

金色は、間違えば品格を失い、失敗しやすい難しい色です。
私も基本的に金色は扱いが難しいと思っています。

身につけるアクセサリーもゴールドは特に慎重に選びます。
できれば避けたいし、気がつけばプラチナやシルバーを選んでしまいます。

ゴールドを使いこなすのは本当に難しいですね。

ここで、補足です。
CMYKでは金色は再現できないのは、知っていますか？
印刷をする際には、「箔押し」といって金箔のようなものを圧着する方法が一般的です。
しかし、かなり高額になるのでご注意を！

CMYKで金を表現するなら、イエローベースにグラデーション等を
使用してそれっぽい質感を出すしかありません。

色彩に興味のある方は、
KENスクールの「色彩基礎講座」に是非参加くださいね！

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 安達

【こちらの記事は、約5分程でお読みいただけます。】

いつもWebブログを見ていただき、ありがとうございます！
今回は、DTPの基本を最も重要な5つの項目について、お話します＾＾

皆さんは、WebでもDTPでも、制作をする際にどんなことに注意していますか？
レイアウト、バランス、余白、配色、コントラスト、フォントなど、
様々な事を意識しながら制作しますよね。

基本的なことですので、当然の事かも知れませんが、
最低限下記の5項目に関して、
しっかり意識して制作に取り組まないといけません。

●5つのポイント

・トンボ
・解像度
・色
・フォント
・オーバープリント（オーバープリントブラック・スミノセ）

この内容を全4回に分けて、
・1回目は「トンボ」
・2回目は「解像度」と「色」
・3回目は「フォント」
・4回目は「オーバープリントブラック（スミノセ）」
という順番で、ご説明していきます！

さて、今回は、第1回目の「トンボ」のご紹介です。

トンボとは、以前こちらのブログでも紹介していますので、
まずはこちらから、ご覧ください。
http://web.kenblog.net/dtp/dragonfly.html

トンボは「見当標」と言い、作成した印刷物に対し断裁する位置
の目印を付けることを指します。

CMYKそれぞれの色でそれぞれ印刷し、配置場所の見当合わせにも
使用されたりします。

そもそも、トンボを設定する際、CS2以降のIllustratorでは、
「トンボ」という項目を探してもそのようなツールは存在しません。

実は、「トンボ」での表記はCSというバージョンまでで、CS2以降は
「トリムエリア」という名前で表記されています。


CS3での設定方法は、

・ツールパネルの「トリムエリアツール」
・「オブジェクト」メニュー→「トリムエリア」→「作成」
・「フィルタ」→「クリエイト」→「トリムマーク」

といったように、トンボを作るにも様々な方法があります。


「トリムエリア」と「トリムマーク」は、似ているようで違うものなのです。

トリムエリアツールでトンボを作った場合も、
オブジェクトメニューから作った場合も、
どちらも1つのアートボード上に1つのトンボしか作ることはできず、
トンボを選択したり動かしたりすることはできません。

通常、1つのアートボードに対し、トンボの設定も1つなのですが、
複数トンボ（目当）を作って制作したい時もあります。
その時に使うのが、トリムマークです。

トンボというより、トンボと同じような線の目当標を、
オブジェクトに設定できるといった感じでしょうか。

上記の事から、複数指定することもできますし、トンボを選択したり、
移動したりすることも可能です。

CS5では、新規ドキュメントを作る際に断ち落としの設定ができ、
「アートボードツール」というツールをクリックするだけで
アートボードにトンボの設定ができます。

オブジェクトメニューの「トリムマークを作成」と、
効果メニューの「トリムマーク」の仕上がりがCS3とは逆になってます。

少しでも知識として、記憶の片隅に置いておきましょう！


さて、次回はDTP基本重要5項目第2回目の「解像度」と「色」
についてご紹介します。お楽しみに！＾＾

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」の基礎から応用までを、学習してみませんか？？
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの作品を作ることにより、
実務に通ずる操作感覚を身につけられます！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 間部

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、こんにちは！

Webサイト・ポスターなど（紙媒体）をデザインをするにあたり、
切っても切り離せないのが、『文字』です。

文字の大きさを表す単位には、様々な表記があります。

文字幅の異なる欧文書体にも、
全角や半角に相当する単位が容易されています。

まずは、全角を示す単位ですが、これは「em(エム)」といいます。
金属活字の「M」がほぼ正方形だったことから、
全角を表すものとして使用されるようになったことが、
この名前の由来だそうです。

半角を表す単位としては「en(エヌ)」というものが存在します。

「em」は、ホームページで使用されるCSSに用意されており、
どのようなものなんだろうと、気になった方もいるかと思います。

単位としては、その他に、『Word』などで使われている「pt」や、
『インデザイン』などで使用されている「級(q)」などもあります。

実際に制作物を作る時には、文字の大きさを示す単位は非常に重要で、
印刷で仕上がってくる文字の大きさが
どの程度なのかをしっかりと把握する必要があります。

文字の大きさは、
ディスプレイ上での見た目で判断してしまうことが最初は多いかもしれませんが、
実際に印刷されたときの文字の大きさなどを
しっかりと頭に入れてレイアウトができるようにしてみましょう。

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
レイアウトや色彩・文字などの基礎知識はもちろん、
PhotoshopとIllustratorを自在に扱い、
多くの制作物を作ることにより、
グラフィックソフトを極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、こんにちは！
何回かのシリーズに渉り、トーンの解説をしてきました。

その延長で、今回は「ソフトトーン」についてお話したいと思います＾＾

まず、下図をご参照ください。

「ソフトトーン」とは、
明度が比較的高く、
「ライトグレイッシュトーン」よりも、彩度の高い色になります。

色の雰囲気として、
穏やかで優しいイメージになります。
ファッションやインテリアなどに、
比較的良く使われる色で、
柔らかい女性的なイメージの色だと言えます。

さて、今回も伝統色を見てみましょう。
 

↑こちらの色は、浅緋（あさきあけ）といいます。
茜草の根で浅く染めた茜色になります。
昔は自分の位階を服色で見せる制度あり、 それを表す色にも使われていました。

こうやって時代を見ると、江戸時代のものもあれば、
鎌倉、奈良ともっと古い時代から親しまれてきた色があり、
人間の生活にとって、色とは切り離せないものなんだなぁと感じてしまいます。

皆さんも色に興味を持たれたら、ぜひ色々と調べてみてくださいね！
KENスクールでも、とっておきの講座をご用意して、お待ちしています！＾＾

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、多くの制作物を作ることで、経験を養います！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

【こちらの記事は、約3分程でお読みいただけます。】

------------------------------------------------------------------
シュルレアリスム＝超現実主義ともいう。
超現実とは「現実を超越した非現実」という意味に誤解されがちであるが、
実際は「過剰なまでに現実」というような意味である。　　～Wikipediaより～
------------------------------------------------------------------

私の好きな画家の一人、サルバドール・ダリは、
シュルレアリスムの代表的な作家として有名です。

皆さんは「だまし絵」と聞いて、何を思い浮かべられますか？
ほとんどの方がトリッキーな技法で描かれたものを思い浮かべてしまうでしょう。

しかし、よくよく考えてみれば、平面なのに奥行きがあるように描いてみたり（俗に言う遠近法）、
影をつけて立体に描いてみたり、「絵」そのものが、すでに"だまし"てるものなんですよね。
そういう意味ではダリは究極のだまし絵師かもしれません。

奇抜な作品も実は計算されているのです。
一流と呼ばれるアーティストはそれらの力が長けているといえますね。

商業的な作品においても、画像を極端に明るくしたり鮮やかに見せたり、
無かったものをあるように見せたり、逆に存在していたものを無かったように見せたりと、
それらもまた「だまし絵」の一貫かと。

KENスクールでは「極」グラフィック講座で、商業的な「だまし絵」の手法が学べますよ。
http://www.kenschool.jp/Webdtp/sub/k_graphic.html
興味がある方は是非受講してみてください。

補足ですが、スペインのフィゲラスという街にあるダリ美術館（ダリ・ミュージアム）では、
なんと！写真撮影OK（フラッシュは×）なんですよ。
ヨーロッパの美術館は写真撮影OKの所が多いです。
日本では考えられませんよね。私もここぞとばかりにたくさん撮影しました。（笑）

※写真はダリ・ミュージアムの広間にある天井絵。
青がダリ 赤がガラ（ダリ婦人）のようです。
足の裏からの構成、逆向きの発想はすごいとしか言えません。

--------------------------------------------------------------------------------

KENスクールで、「だまし絵」を創る技法、学べます！＾＾

⇒【「極」Professionalグラフィック講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 安達

皆さん、こんにちは。

今年の3月は寒かったり、暖かかったりと気温の変化が激しいですね、
体調にはくれぐれもご注意ください。

また、東日本大震災（東北地方太平洋沖地震）によって、
多くの方が避難所生活を余儀なくされていらっしゃいます。
食糧・水不足も深刻なことかと思われます。

被害にあわれた方やそのご家族・ご親戚の方、ご関係者の方に
お見舞い申し上げますとともに、一人でも多くの方の救助を心よりお祈りいたします。


今回は、今一番求められている支援物資でもある「水」をテーマに取り上げ、
もはやペットボトルのスタンダードともいえる商品の、
ロゴの話をしたいと思います。

ご紹介する商品は、 「い・ろ・は・す」です。 http://i-lohas.jp/

　　　　　　　（※Copyright 2011 Coca-Cola(Japan)Company,Limited）

この「い・ろ・は・す」は、 「いろはにほへと」の「いろは」、
そして、健康や環境問題に関心の高い人々のライフスタイルを
営利活動に結びつけるために生み出された言葉である 「LOHAS」、
二つの言葉を組み合わせた言葉になっております。

「い・ろ・は・す」には、
『それだけで世界を変える水』というキャッチコピーがあり、
「１・２・３でできる簡単なECO」がテーマとなっております。

つまり、日本古来より始まりという意味で使われる、
「いろは」と「１・２・３」を掛け合わせているのです。

よって、「い・ろ・は・す」のロゴには、
この「・」は必要不可欠な言葉になるわけですね。

ロゴに限らず、こうして何かを制作する場合、
キャッチコピーやテーマを考えていただくことが大事ということが伺えます。
また、何気なくみえる「・」ですが、そこにも意味があります。

就職活動において、沢山の制作物を作っていただくことになると思いますが、
「なぜ、その形になったのか」
「どうして、その言葉になったのか」
ということを考え、その理由を説明できる方が望ましいということですね。

--------------------------------------------------------------------------------

ロゴデザインを作成してみたい皆さんへ、KENスクールで学習をしてみませんか？？

⇒【イラストレーター講座】
Illustratorは、単純な図形や文字を組み合わせるだけで、
見栄えの良いグラフィックが制作できる、万人に向けた
デザインツールです。必要となる技術を余すことなく学習できます。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 清水

皆さん、こんにちは。

前回の「ソフトトーン」に引き続き、

今回は「ダルトーン」についてお話したいと思います。

下図をご参照下さい。

「ダルトーン」は明るい色に少しだけ黒を加えた色になります。
 

渋みのある落ち着いたイメージが持ち味です。
 

とても地味な色ですが色が主張しないので、

素材の良さを引き立ててくれる色になります。

いつもは、ここで伝統色をご案内しておりますが、

今回は、サンプルサイトをご紹介したいと思います。

帝国ホテル　･･･　http://www.imperialhotel.co.jp/
 

IHG・ANAホテルズ(旧全日空ホテル)　･･･　http://www.anaihghotels.co.jp/

これらホテルのサイトを見ていくと、

トーナル配色を多く取り入れているサイトが多く見受けられます。

トーナル配色とは、

ダルトーンなど濁色系のトーンを中心とした配色になります。
 

薄くも濃くもない色を使用していきますので、

落ち着きを表現することができます。
 

ホテルは、「ゆっくりとくつろげる、落ち着いた空間」を表したいので、

まさにこの配色はうってつけの配色になると思います。

さらにアクセントで少し濃い色を使用することにより、

落ち着きだけでなく、高級感を出しているのではないかと思います。

トーンの意味を知ることは、

サイトの雰囲気を決めるのに大変役に立ちます。

サイトをお作りの際にはトーンの意味を考えていただくと、

色の方向性を決められるのではないでしょうか？

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html 

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

最近は割りと暖かくなって、春が近づいてきた感じがしますね。
 

春といえば、やっぱり「桜」！！
 

お酒やお弁当を持って、お花見もいいですが、

ゆっくり桜を眺めてみるのも良いですね♪

桜の写真やポストカードを見た後で、

本物の桜を見て、こう思った事はないですか？

「本物の桜ってそんなにピンクじゃない。」と。
 

桜の色は意外に鮮明なピンクではなくくすんだピンクなんですよね。

そこで、「記憶色」という言葉を聞いたことはありますか？

「記憶色」とは多くの人が、イメージとして記憶している色の事を言います。

例えば、桜（ソメイヨシノ）の花の色。

多くの人が淡いピンクだと思っていますが、

実物の花の色は白いです。しかし、これだと桜のイメージがしないので、

印刷物に載せるときは意図的にピンクを強くすることが多いです。
 

なので、ポストカードなどの写真はピンクが濃く出ているのです。

あとは、晴天の青い空。
 

日本では、スッキリとした秋晴れでも水色に近い薄めの青です。
 

しかし、やはり印刷するときは真っ青にすることが多いです。

どちらも実際の色ではなく、多く人がイメージとして記憶していて、

しかも好ましいと思っている色に調整します。
 

人間の脳では実際の色よりも、強調されて、

より鮮やかに記憶されているそうです。

色の補正をする時は、実際の色に近づける補正もありますが、

記憶にある色に合わせての補正も必要になってきます。
 

その画像に合わせた補正が必要ということですね。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

イニシャルキャップとは、

文章の最初の文字を大きくするレイアウト手法です。

文章の最初を大きくする手法と聞いて、それは「ドロップキャップ」じゃないか

と疑問に思う方もいるかもしれませんが、ドロップキャップは

イニシャルキャップというレイアウト手法の一部の考え方にすぎません。

イニシャルキャップは欧米の雑誌や新聞などに多用されていますが、

日本の雑誌でも見かけます。

イニシャルキャップには以下の3種類があります。

• レンズドキャップ
• ドロップキャップ
• ハンギングキャップ

言葉では分かりにくいので、実際のレイアウトを下記に用意しました。

1.レンズドキャップ

レンズドキャップは大きくする文字を1行目のベースラインに揃え、

上に飛び出させる手法です。

2.ドロップキャップ

ドロップキャップは、大きくした文字を段落内に収める手法です。

3.ハンギングキャップ

ハンギングキャップは、大きくした文字を行組みから

はみ出させる手法です。

イニシャルキャップは非常にインパクトのあるレイアウト手法ですが、

実際に、ところ構わずイニシャルキャップにしてしまうと、

全体的にくどくなるため、使用するときは

細心の注意を払いレイアウトに取り入れてみましょう！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

文字を配置する時、様々な方法が考えられます。

一般的に最も安定して見えるのは

「文字の大きさを揃える」といった手法になります。

文字の大きさを揃えることで一体感が出てきます。

「文字の大きさを揃える」とは対照的に、

文字の大きさを意図的に不揃いにすることで、

特定の文字を強調することができたり、

全体的にメリハリを与えることもできたりします。

文字の大きさを変える方法には以下の２つの方法が考えられます。

• 強調したい文字を大きくする
• 重要ではない文字を小さくする

日本語は漢字だけを拾読みすれば、ある程度の意味を把握できる

という特徴があるため、その点に着目して大きさを変える方法も有効です。

また、主となる文字を他の文字が邪魔しないように、

特定の文字を小さくする方法もあります。
 

例えば日付で使用する「月」や「日」、金額で使用する「円」などです。

これらの文字は実際に、日付の数値や金額の数値が重要なため、

あえて小さくするとよりレイアウトがキレイになります。

このような考え方は広く文字レイアウトに使用されています。

文字の大きさを変える方法は様々な場面で使われていますので、

電車などに多く乗る機会がある方や、街の中にあふれる

様々な広告を注意深く観察してみましょう！

今まで自分が興味を持たなかったものを、デザイナーとしての目線で捕らえて、

さらに考えることで飛躍的にデザインスキルを向上させることができます！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールで広告デザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

高速道路の標識、「ヒラギノ」書体に　iPadと同じ

http://www.asahi.com/national/update/1214/OSK201012140052.html

というニュースをご存知ですか？
 

フォントがお好きな方・フォントに興味のある方は見た事があるかもしれません。

今までの高速道路の標識は視認性を重視し、日本道路公団が開発した

独自の書体の道路公団標準文字（公団文字・公団ゴシック）と呼ばれるものが

使用されていました。

このフォントは時速100Kmで走っても、数百メートル離れていても

6秒以内で文字認識できる書体になっています。

そのため、字の印象を決める部分を強調したり、

画数が多い漢字は省略して作られています。

ただ、非常に独特のフォントのため、画数を省略した漢字に関しては

「漢字が間違っている」と指摘を受けたり、

新しい文字が必要になるたびに一からデザインをするため、

当初の文字開発者が亡くなったあとは「統一性に欠ける」

という問題もあったようです。

例えば、次の標識を見てください。

 

たしかに「越」「狭」の字が普通の文字に比べると

画数が省略されているのがわかりますが

すっきりした印象なので、遠くからでも数秒で文字が確認できます。
 

よく見れば漢字が間違っている、とも気づきますが･･･。
（危ないから運転中はじっくり見ないで下さい）

このフォントの代わりに今度使われるようになるのが

iPadやテレビのテロップなどにも使用されている

「ヒラギノ角ゴシック体 W5」です。
 

ヒラギノフォントはMacにも標準搭載されています。

http://www.screen.co.jp/press/MP_NL101214.pdf

このpdfの中で「これまで必要に応じて一字一字制作されてきた

従来の書体に代わり、デジタルフォントによる精度の均一化、

制作工程・管理の合理化も可能になるなどの利点に加え、

ヒラギノフォントの「美しく、読みやすく、つぶれにくい」という

特徴が高速道路標識の視認性向上に効果を発揮する」とあります。

たしかに一字一字作成するのはとても時間がかかる作業です。
 

それがヒラギノになることで様々な利点があるのは良いことですが、

若干味わい？が薄れてしまうのは寂しい感じがするのは私だけでしょうか。
 

もちろんヒラギノフォントも好きですよ？

ちなみにフリーフォントで「公団フォント」が

ダウンロードできるものがあるみたいですよ！

http://www.forest.impress.co.jp/article/2008/12/01/gdhighway.html

もし興味を持ったら、古い看板と新しい看板を

助手席からぜひ見つけてみてくださいね。

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

みなさん、次のようなご経験はありませんか？

例えば、「このサイトいいな～」って思っても、

どうやってレイアウトしているのか分からないとか・・・。

そんなときにFirefoxの拡張機能であるWebデベロッパーをインストールすると

WEB制作に役に立つ色々な機能を使うことができます。

まず、インストール方法です。

前提としてFirefox自体がインストールされていないといけませんので

注意してください。（この機会にぜひ使ってみてください）


Firefoxを起動して、Yahoo!で「firefox　WEBデベロッパー」と検索し

一番上に表示されるリンクをクリックします。


すると以下のようなボタンがあるのでクリックして下さい。

これだけでインストールできますので、後はFirefoxを再起動すればOK！！


簡単ですね。


するとブラウザの画面の上の方に



上図のようなメニューバーが追加されます。


後はメニューの中から使いたい機能をクリックするだけです。

 

例えば、次のような機能があります。


サイトがどの様なレイアウト構造になっているかを調べたい時は・・・

メニューバーの【情報】→【ブロック要素のサイズを表示する】




ブロック要素が枠線で囲まれ、IDセレクタの名前も併せて表示されます。


このサイトの真似したいと思った時にレイアウトの参考になりますね。


他にもサイトで使われている画像のファイルサイズを確認したい時は・・・

メニューバーの【画像】→【画像のファイルサイズを表示する】



上図のように表示してくれます。

 

他にもCSSのコードを表示させてり、javascriptを表示する機能もあります。


サイト制作の時や、競合他社を調べたりする時にも使えますので

ぜひFirefoxと併せてインストールしてみてください。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さんこんにちは。

特にＷＥＢデザインを始めたばかりの方に多いのですが、

ＷＥＢの素材を作成してもどうしてもチープになってしまう、

素人が作ったみたいになってしまう・・・と悩んでいませんか？

前々回から「脱・素人デザイン」として、三つのポイントを挙げています。

今回は、その三「ボタンデザイン」となります。

ボタンのデザインも、慣れない内はどういう風に作成して良いか迷うポイントです。

オレンジ色のボタンを作りたいので、取りあえずオレンジで四角を作った。

しかし・・・何も装飾しないと、シンプルすぎる。

よくやってしまいがちなのが・・・

「べベルとエンボス」で立体感をつける、という方法です。

確かに、この方法だと平面だったボタンに陰影が付き、

盛り上がったような効果が付いてボタンの様に見えます。

しかし陰影のキツさと盛り上がりが大きい為、チープに見えてしまいます。

今はブログやSNSの影響から個人で作成するホームページが減りましたが、

一昔前の個人ページではこのようなボタンを使用している個人ページが

たくさんありました。

なので特に「素人ぽさ」を感じるのかもしれません。

では、どうすればキレイなボタンを作成できるのでしょうか？

まず、オレンジ色でベタ塗り、というのが重たく見えるので

ボタンの色は白に指定、そして周りに「1px」の枠線をつけます。

この「1px」は非常にウェブデザインに重要な要素で、

素材にソリッドな要素が付随されシャープな印象を与えることが出来ます。

オレンジの塗りをなくした代わりに、下にオレンジの線を加えます。

さらに、グラデーションで質感を付け・・・

文字を入れます。

ベベルエンボスと同じようなお手軽効果を入れましたが、

こちらはシャープな印象がすると思います。

3回にわたって「脱・素人デザイン」について書いてきましたが

どうだったでしょうか？

はじめは誰でも素人です。

しかし、ちょっとした「コツ」をつかめばきれいなデザインは可能です。

--------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

今回はiPhoneを持っている方に是非お勧めしたいアプリがあります。

それはデジタルフォントを開発・販売しているモリサワがリリースした

「文字の手帖」です。

デザインに興味にある方には必須のアプリです。

見て、調べて、遊べるコンテンツで書体の知識の幅を広げましょう。

コンテンツは

• 「書体見本帳」は、400を超える「モリサワ書体見本」をiPhoneで確認できます。
• 「Morisawa Font Dictionary」は、フォントに関する用語をまとめた辞書です。
• 「文字あわせ」は、書体を使った神経衰弱です。遊び感覚で学べるのでとても勉強になります。

http://www.morisawa.co.jp/font/support/guide/qa/mojinotecho01_app.html

文字には意味も形もあります。
 

使う文字によってデザインのイメージも変わるので

是非いろいろな文字・書体を知り、デザインに活かしましょう。

今回のリリースが「文字の手帳01」ということなので

「02」が早くリリースされることを首を長くして待ってます。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん、こんにちは。

12月に入り、街はクリスマス一色になりましたね。

年々一年が短く感じる様になってきたのは、

私が歳を重ねてきたせいでしょうか？

さて今回は「ライトトーン」についてお話したいと思います。

下図をご参照下さい。

「ライトトーン」は明度が高く、

「ペールトーン」よりも、彩度の高い色になります。

色の雰囲気として、上品でさわやかな感じのする色です。

丁度、梅雨時に咲く紫陽花の花のような色を思い出していただければ

と、思います。

暖色系のライトトーンは、親しみやすく、かわいいイメージがあるので、

生活雑貨や子供向けの商品などでよく見かける色になります。

さて、最後に恒例になりました、

日本の伝統色をご案内したいと思います。

今回は、「ときいろ」です。
 

カラーコードですと、「#f4b3c2」になり、色はこちらになります。

「ときいろ」はピンクにも似ていますが、

鴇の羽の色のようにかすかに灰色がかっているのが特徴です。

江戸時代から使われている色で、着物の小袖に良く用いられる色です。
 

鳥の色がそのまま使われるようになるということは、

それだけ鴇がなじみの鳥だったのが想像できます。

ちなみに、鴇の見た目は白ですが、こちらの「ときいろ」は、

飛んでいるときに見え隠れする色のようです。

今年もあと1ヶ月を切りました。

1年間KenWebブログにお付き合いいただき、誠にありがとうございます。

来年も、KenWebブログを宜しくお願いいたします。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Officeインストラクター
http://www.kenschool.jp/school/omiya/index.html 

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

みなさん、こんにちは。

11月に入り、急激に寒くなってきました。 

私は、この寒い時期に、

外の喫煙所で飲む「つぶ入りコーンスープ」が大好きです。
 

あれを飲むと一瞬ですが、芯から温まる気がします。
(本当に一瞬ですが・・・。)

本日は、「ダークグレイッシュトーン｣ についてお話したいと思います。

早速、下図をご覧ください。

「ダークグレイッシュトーン」は彩度が低く明度も低い色のことを言い、

「グレイッシュトーン」より重厚感のある印象の配色になります。

イメージとして、とても暗く、深い色なので、

重厚で、格調高く、男性的な雰囲気を持っています。

 

今回も日本の伝統色をご紹介したいと思います。
 

こちらは、鉄紺（てつこん）と言う色になります。
 

カラーコードだと「#17184b」になります。
 

この色の起源は江戸時代のようです。
 

暖簾などに良く使われているのを見かけます。

さて冒頭で出てきた「つぶ入りコーンスープ」について、

飲み終わった後に缶の底にコーンがたくさん残っていると思うのですが、

これをきれいにスープと同時に飲み干す方法はないのでしょうか？

知り合いに話したら、コップに移して飲んだら？

と、言われてしまいました。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでグラフィックデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

印刷物・WEBに限らず、文字を見せる時の基本は

白地に黒の文字が一般的だと思います。
 

明度の違い(白と黒の)がハッキリしていて、見やすいのは見やすいのです…が、

白と黒ではコントラスト(明度)の幅が大きいので、目が受ける刺激が強くなり

疲れてしまいます。
 

そこで背景色に少し落ち着いた色を入れて、

目が受ける刺激を軽減させてあげる事で、

ユーザーに負荷を与えずテキスト(文字)を読ませる(見せる)事ができるでしょう。

この様な些細なことでもデザイン・レイアウトでは重要ですので気にしていきましょう。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

みなさん、こんにちは。

ここ数日で関東は急激に冷え込み始め、風邪も流行っています。

ブログをご覧のみなさんも、体調を崩さないようにお気をつけ下さい。
 

さて、 今回は「グレイッシュ」というものについてお話させていただきます。
 

早速、下図をご覧ください。

「グレイッシュトーン」は彩度が低く明度が低めの色のことを言います。


「灰色がかった」という意味になります。

トーンのイメージとして、穏やかで落ち着いた雰囲気が持ち味です。
 

パッと見は地味なのですが、その中に「渋み」を感じることが出来ます。

家具など「グレイッシュトーン」で空間をまとめると、

シックで洗練された雰囲気になります。

今回も日本の伝統色をご紹介したいと思います。
こちらは、紫苑（しおん）と言う色になります。
紫苑の花の色からきているそうです。
やはり、明度の低い渋めな感じの色になります。

自分はこの落ち着いた感じの「グレイッシュトーン」が好きです。
 

トーンと心理の関係を見ていくと、

このトーンを好む人は派手に振る舞ったり、

派手に生きることを避ける傾向があると言われています。

非常に冒険心が低く、現状を維持する心理が強いようです。

派手なことが苦手と言う所など、合っているかもしれません。

ただ落ち着いた色ゆえ、活発さと好奇心といった動的なイメージが無くなります。
 

つまり、活動性が低くなるほど

無彩色に近い色を自然に選び取ってしまう傾向がある。
 

ということみたいです。

う～ん。活動性が低いということは、もっと自分に合っているかもしれません。

そして、 お年寄りに好まれるトーンだそうです。

・・・。

こういうところから、

自分が実年齢以上に見られてしまうのかなと思ってしまいました。
 

それではまた。

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

それでは前回の続きです。

前回はアップ画像まで完成しました。

今回はオーバー画像を作成して、実際にロールオーバーをさせてみます。

前回のファイルを開きます。

一番上に新規レイヤーを作成し、角丸長方形ツールで図形を描画をします。

（色は文字と同じ赤#be3019、角丸の丸みは2px程度）

そこにかなり太めのストライプをつけます。これはStripe Generator 2.0 betaを

利用するまでもないのである程度手描きで大丈夫です。

ラインツールなどを利用しましょう。

文字のレイヤーをコピーして一番上に移動し色を白に変更します。

任意で小さな四角形も白で描き直しましょう。

これでオーバー用画像の完成です。

「Webおよびデバイス用に保存」で保存します。

それでは実際に画像を使ってみます。

まずは下記のHTMLを書き任意の名前で保存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ロールオーバーの練習</title>
</head>
<body>
<p><a href="http://www.kenschool.jp/Webdtp/index.html" id="webdtp">Web・DTPコース</a></p>
</body>
</html>

CSSファイルを作成し、下記の記入をします。
※アップ用画像（btn_up.jpg）、オーバー用画像（btn_over.jpg）
※両方ともにimagesフォルダ内に保存しています。

#webdtp {
background: url(images/btn_up.jpg);
text-indent: -9999px;
display: block;
height: 32px;
width: 159px;
}
#webdtp:hover {
background: url(images/btn_over.jpg);
}

ブラウザで確認してください。

下記の完成例のようにロールオーバーするボタンが作成できます。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

もしもサイトを作ったことがある方ならば、

「配色に迷う」ということがある（もしくはあった）のではないでしょうか。

このブログでも色々と色の話が出てきましたが（シャレではありません）、

• 誰でも簡単に色が作れる！
• 色に興味が持てるのでは？

というサイトをご紹介いたします。

「Adobe Kuler」

http://kuler.adobe.com/

Adobeのサイトにも紹介（http://www.adobe.com/jp/products/kuler/）

されているのでご存知の方も多いかもしれませんが、

Kulerのページに行ったら、左側のナビゲーションの一番上にある「Create」

というメニューをクリックしてください。

◎（二重丸）のマークがベースカラーとなり、

動かすと他の色とのバランスを自動的にとって配色してくれます。
 

○（丸）のマークも動かせます。

そのほか、「Select a Rule」というところを選べば配色ルールも変更が可能です。

是非、試してみてください！

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでデザインの基礎知識を学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

みなさん、こんにちは。

暑くて寝付けず、睡眠不足の今日この頃です。
 

その中で商品名は忘れましたが、「安眠ジェルマット」的な商品を見つけました。
 

布団に敷く大きい「ヒエピタ」のような物です。

これを使ってから、かなり寝つきは良くなりました。
 

さて、今回は「ライトグレイッシュ」というものについて、お話させていただきます。

早速、下図をご覧ください。

「ライトグレイッシュトーン」は少しくすんだ色になります。

トーンのイメージとして、「落ち着いた」とか「渋い」とか「おとなしい」と、

いうようなイメージを与える色になります。

例えば、淡いアジサイの花びらのような抑えた色調は、

繊細で上品なイメージが感じられます。

また日本の伝統色で言うと、灰桜（はいざくら）が挙げられます。
桜色の灰みがかった色になります。
やはり、明度の高いソフトな感じの色になります。

伝統色のような歴史の中から生まれた色を見るという事は、

色を使いこなすための一つの練習になります。

是非いろいろな色を見てください。

まだまだ、暑い日が続きますが、

安眠対策をして体調を崩さないようにしてくださいね。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

皆さんは普段、インターネットで何か調べ物をする際に、

どの検索エンジンを使用しておりますでしょうか？

Yahoo!、Google、MSNなどなど。

そして・・・

その検索結果に満足を得られておりますでしょうか？

先日、非常に興味が沸く記事を見付けました。

国内の30歳代～40歳代の約500名のインターネットユーザーを対象に、

6月にマイクロソフトが調査行なったそうです。

その結果、インターネットユーザーの約6割もの方が、

検索エンジンを使用した検索結果に満足していないとのことです。

※参考資料　http://journal.mycom.co.jp/news/2010/07/05/028/index.html

この調査結果を見て、皆さんはどのようにお感じになられましたでしょうか？

勿論、検索キーワードによって、検索結果は異なりますので、

一概には言えないと思いますが。。。

検索キーワードって、上手にキーワードを入れられる人とそうでない人とでは

作業効率に明確な差が生じますよね。。。

私自身に置き換えて考えてみても、

欲しい情報の検索結果が1ページ目に無ければ、

2ページ目以降を閲覧せず、新たに検索キーワードを変えるか、

堀下がり検索を行います。

皆さんはいかがでしょうか？

そのまま2ページ目・3ページ目と閲覧されますか？

それとも私同様に、検索キーワード変えたり、

検索エンジンそのものを変えたりしてますでしょうか？

マイクロソフトは、「閲覧される検索結果は3ページ程度」と

推測してるようですが、やはり、1ページ目に欲しい情報が無いと、

閲覧してもらえるユーザー数が著しく減少してしまいます。

Webサイトとは、通信（インターネット）を使った「広告」なのです。

広告ですので、多くのユーザーに見てもらうことができなければ、

いくら見栄えの良いものを制作しても無意味なものになってしまいますよね。

ですので、SEO（検索エンジン最適化）をしっかり考慮しないといけません。

そして、調査結果から、

「検索結果内容の説明の分かりやすさ＋画面の見易さ」をユーザーは望んでいる

のが分かります。

当然ながら、こういった事を考慮していかないと、

ユーザーにせっかくサイトに訪れていただいても意味が無くなってしまいます。

複雑であればあるほど、

• どこに何があるのか分かり難い
• 欲しい情報を見つけ出し難い

という感じで、ユーザーは不満を感じてしまいます。

SEOだけではなく、ユーザビリティも

きちんと考慮していかなければいけません。

サイトは「居住空間」に例えられます。

ユーザーに居心地の良いサイト・また訪問したいと思って頂けるような

サイトを心がけて制作していきましょう！

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでサイトデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

サイトを作る上で必要不可欠なこと。

それは、良いサイトを参考にすることです。

みなさんは普段どんなサイトを見ていますか？

普段から見た目の良いサイトをたくさん見ておくと、

いざサイトを作らなければいけない時に

イメージに合うサイトを参考にする事が出来ます。

では、どんなサイトが良いサイトと言えるのか？

1. 見た目の良いサイト（かっこいい、かわいいなど）
2. 分かりやすいサイト（すぐに見たいページに行けるなど）

見た目の良い又は分かりやすいサイトのリンク集を普段から作成しておくことで

自分のサイトデザインの幅を広げておくことができます。

参考サイト

• http://www.ikesai.com/
• http://www.kenschool.tv/

普段から意識して、自分の主観を持っておきましょう。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール京都校　Webインストラクター
http://www.kenschool.jp/school/kyoto/index.html

KENスクールでサイトデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

「クリックしたくなるリンク」

クリエイターとして、この一文を見て興味を抱かない人はいないですよね？

インターネットコムとgoo リサーチから

定期的にネット広告に関するインターネットユーザーの意識変化を追っていく

「ネット広告に関する定期調査」と言うものが報告されており、

今回で11回目にも上るようです。

その気になる調査結果の結論を先に申し上げますと、

「クリックしたくなる」のはテキストよりもディスプレイ広告ということです。

調査の対象は、全国10代～50代以上の1078人のインターネットユーザーで、

男女比は男性52.4％、女性47.6％とのこと。

「広告リンクをクリックしたことがある」と回答した方は69.5％（749人）で、

約7割の人に認知・浸透しているとの数字が出ております。

また、検索した際にそのような広告リンクを「必ず見る」「よく見る」と答えた人は

58.5％と、リンクの遭遇率は6割近いとのことです。
 

反面、「めったに見ない」と答えた人は6.5％（49人）だけだそうです。

ユーザーの興味を示すような広告リンクをユーザーに分りやすく配置すれば、

効果的にクリックしてもらえるということですね。

ではその中で、「クリックしたくなるリンクは？」

やはりここが一番気になるところですよね！

それは、、、

「バナーや画像、Flash など」

が最も回答を集めたようで、約半数の48.5％（523人）を占めていたようです。

やはり、「バナーや画像、Flash など」のような

視覚的効果のある広告は伝わりやすいということですね。
 

自分自身に置き換えて考えてみても、同様の回答をするかと思いました。

ということは、、、

そのようなサイト製作を心がけていかないといけない。

ということです。

バナーというのは最小限のスペースで載せる事ができ、

なおかつ有益な広告なので、サイト内に含めない手段はないですよね。

Flashにおいても、ただムービーを流すだけでなく、ActionScriptを取り入れて、

Flash上で様々な制御ができるようなサイトを考慮していかないといけませんね。

要するにユーザビリティをしっかり考えて制作しないといけないということですね。

皆さんも、ポートフォリオに取り入れてみてはいかがでしょうか？

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでサイト製作の極意を学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

初心者、未経験者がデザインスキルを上げるにはどうすれば良いか、

色々と考えてみました。
 

今までの１０年間近くのネタをまとめ、

どのように考えて、どのように行動すればデザインスキルが上がるのか

改めて見つめ直してみました。
 

そうしたら、なんとたった２ページで収まりました。
 

そんなもんで良いのです・・・デザインは。

でも、この２ページものすごく濃いです。
 

まだ、ラフなのでこんなのしか見せられませんが・・・

 


ここに書いてあることを実行すれば、ある程度のデザイナーになれます。

なんらかのカタチで世に出していきたいと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん、こんにちは。

4月は暖かかったり、寒かったりの繰り返しで、
なかなか過ごしにくい気候でしたが、体調を崩すことはなかったでしょうか？
 

5月に入り、例年のような過ごしやすい気候になって欲しいものです。


さて、今回は「コンプリメンタリー」についてです。

「コンプリメンタリー」とは、「補う」と言う意味になります。
 

下図の色相環をご参照ください。

色相差でいうと、11～12の間になります。
 

色相の角度でいうと、165～180度です。
 

多くは180度の位置の色を使うことが多いです。

この色相環で180度反対の位置の色のことを「補色」と言います。

派手な印象を与えますが、力強い中にもバランスのとれた配色となり、
どちらかと言えばオポーネントよりも、個性的にしたい場合に有効です。
 

下の絵をご参照下さい。



色相環で反対方向に位置する色同士の配色になります。
 

黄色-青色の組み合わせと、赤色-緑色の組み合わせでは、
純色の明度差が異なるため、配色の方法も変わってきます。

例えば、赤色と緑色の配色については、
ややトーンに変化を持たせて、明暗に差をつけると言う感じにします。

そうすることにより、安心感のある配色となります。

この配色は色相の対照性と、
どのように表現するかを、意識する必要があります。

さて、色相差による配色については、
これで全てになり、今回で終了となります。

次回からは、どういった内容でいこうか、もっと深く突っ込んだ色のお話をしようか、
全く違う内容にしようか、思案中でございます。

皆様に少しでも役立つ情報をお届けしたいと思います。

次回のブログもご期待いただければと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

皆さん、こんにちは。

最近、家のベッドが壊れました。
 

10年以上よくもってくれたし、 さすがに壊れたベッドでは寝にくいので、
早速、新しいものをカタログを見て頼みました。

で、実際に届いたのですが･･･。
 

カタログを見たときは、
「この色いいなぁ～。自分の部屋と合うなぁ～。」
と、思っていたのですが、
 

実際届いてみると、なんか微妙に合いません。

皆さんもこのようなご経験はありませんか？
 

と言うことで、今回は「色の面積効果について(色の錯覚編。最終回)」です。

色を小さな面積で決めてしまうと、
大きな面積になったとき、明るさや色味に差が生じます。

これを「色の面積効果」といいます。

下の絵を見てください。


明るい色は小さな面積で見た場合に比べ、
大きな面積になると、いっそう明るい色に見えます。
 

赤などの有彩色では色味もやや増したように感じます。
 

逆に、暗い色は小さな面積で見た場合に比べ、
面積が大きくなるにしたがって、いっそう暗い色に見えてきます。
 

赤などの有彩色では彩度もやや低くなったように見えます。

このように明るさや色味に差がでるだけでなく、
イメージも変化して見える現象を色の面積効果と呼んでいます。

このことを知っていた時点で、本当は最初から、
少し色味が変わってくるということは、分かっていたことなのですが･･･。

次回からは、色の分類について書いていきたいと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

WEBサイトを作成するとき、誰しも
デザイン性を重視したWEBサイトを作成したい
と思うはずです。
 

クライアントと話をし、これぞというデザインができあがり無事に公開を果たす…。

さて、みなさんはこれから就職活動などをするために自分のサイトを作成したり、
会社にお勤めの方であれば会社のWEBサイトを作るということもあるかもしれません。
 

そうした時に忘れてはならないのが「アクセシビリティ」と「ユーザビリティ」です。
 

アクセシビリティは「ユーザーがサイトを使えることを保障」することを言い、
ユーザビリティは「ユーザーにとって使いやすく分かりやすく」することを言います。

WEB創成者のティム・バーナーズ・リー氏は

「WEBのパワーはユニバーサル性にある。
障害の有無に関係なくだれもが利用できることこそがWEBの本質である」

と延べています。

こういった考えから、すべてのユーザーが平等にWEBサイトを閲覧できるような
仕組みを考えることは非常に重要なことであり、WEBサイトとしての願いでもあります。

今回は数多くあるアクセシビリティの考えから
「配色」について簡単にチェックするツールがあります。
 

「ColorSelector」というツールですが、
文字色と背景色のコントラストの差などを分析して、
一般の人や白内障の人などに最適な配色設定かどうかを
簡易的に見ることができるツールです。
 

自分で見ている世界が当たり前と考えず、
状況によっては自分の作ったWEBサイトが皆と
同じように見れない方もいるということを常に考えながらWEBサイトを作ってみましょう。
 

富士通のサイト
http://jp.fujitsu.com/about/design/ud/assistance/colorselector/

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん。こんにちは。

4月に入り、私にとって大敵のあるモノが飛び回っております。
そう！花粉です。
 

アレルギー性の鼻炎と、花粉症を併発する私にとって、
この季節は寒すぎず、暑過ぎず好きな季節なのですが、
これだけはどうしても勘弁できません。


早く収まって欲しいものです。


さて、今回は「オポーネント」についてです。
 

下図の色相環をご参照ください。

色相環で言うと90度あたりにある色同士を組み合わせる配色になります。

色相差でいうと、8～10の間になります。
 

色相の角度でいうと、120～150度です。

派手すぎず、
コンプリメンタリー(こちらに関しては次回詳しくお話します)よりもおとなしく、
調和しやすい配色になります。
 

前々回、ご紹介したアナロジーと違って、
コントラストが効いていて、クッキリした印象にしたいときに有効です。
 

下の絵をご参照下さい。


色覚的に均等関係にある色とされます。
 

ほぼ、補色の関係になりますので、
お互いの性質を強調する色の組み合わせとなり、
かなり強い印象を与える配色となります。

色みの違いが大きいことから、彩度が高い色同士の組み合わせだと、
色の違いがはっきりしすぎるので、
トーンで差をつけ調和する場合が多いです。

さて、次回は、
途中にも出てきたコンプリメンタリーについてお話したいと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん、こんにちは。

先日の雪の日は、とても寒く足元も大変悪かったのですが、
受講生の方々はキャンセルする事もなく、皆様には来校いただきました。

ありがとうございます。


さて、今回は「インターミディエート」についてです。
 

下図の色相環をご参照ください。

色相環で言うと、90度あたりにある色同士を組み合わせる配色になります。

色相差でいうと、4～7の間になります。
 

色相の角度でいうと、60～105度です。

中国や日本の和装でよく見かける組み合わせで、
オリエンタルな配色と良く言われます。
 

下の絵をご参照下さい。


しかし、その調和の取りにくい形式なので、
類似性も対照性も 感じることができません。

デザイン意図のハッキリしない配色になってしまいます。

色同士対立しながらも、共通性を残している印象になります。

用途として、中程度のコントラストをつけたいときに使います。

ただし、あいまいな雰囲気になるため、スッキリ見せようとする場合には、
あまり向いていません。

また、相反する2色同士が並びますので、強い対比を起こしてしまい、
グレアー効果という、チラツキを起こしてしまう欠点もありますので、
使用には注意が必要です。

雪の話しに戻りますが、次の日にはすっかり解けてしまいましたね。

個人的にはもう少し積もって欲しかったので、ちょっと残念です。
 

次に雪が降るときには、もっと積もって欲しいです。

でも、寒いのはとても苦手なんですけどね。 

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

インターネット上に面白いサイトがあります。
 

30秒ドローイングというサイトなのですが、
画面上に表示されるポージングを30秒以内に描写し、
時間が経過すると次のポージングが表示されます。

延々とこの作業を繰り返すだけなのですが、
やりだした当初は、かなり難しく細かな線を正確に描写しようとしてしまうのですが、
段々とやり進めていく内に、おおざっぱにポージングを描写できるように
なってきます。

一種のトレーニングとして紹介されているのですが、
短時間でモノの特徴を把握する力と、
最小限の情報量で情報を伝達する力が養えるとのことです。

仕事をしていく上で、重要な情報収集作業と情報を整理する力を
形は違えど、こうしたトレーニングでつけることも面白いのではないかと思います。

例えば、打ち合わせの最中に
自分の情報を言葉として伝えるのではなく、簡単なイラストなどを添えることで、
相手を視覚的にイメージしやすい状態にすることも可能で、
受け取る相手は思いのほか感動します。

現在はデジタル社会ですが、アナログの面白みやデザインすることの面白みを
違った方面からチャレンジするということも大切なことです。

30秒ドローイング

http://www.posemaniacs.com/pose/thirtysecond.html

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html
 

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

DTPを勉強していく上でデザインは欠かせないもの。
 

デザインの中でも「ユニバーサルデザイン（Universal Design）」
というのがあります。

ノースカロライナ州立大学のユニバーサルデザインセンター所長であった
ロナルド・メイス氏が提唱し、文化・国籍・性別などを超え、
できるだけ多くの人が利用可能であるようなデザインにすることを言います。

ユニバーサルデザインには「7原則」があります。

• 原則1.　誰でも公平に使えるものであること
• 原則2.　使う上での自由度が高いこと
• 原則3.　使い方がわかりやすく、理解しやすいものであること
• 原則4.　必要な情報が、どんな人にでもきちんと伝わること
• 原則5.　安全であり、万一の事故に対する対策を持つこと
• 原則6.　自由、快適に使えること
• 原則7.　使いやすい大きさと広がりが確保できること

すべてにこれを満たしていくのは難しいけど、
「誰にでもやさしいデザインをする」のは大事ですよね。

• 「事実」や「伝えたいこと」を明確にする
• 「最低これだけは伝えたい」ことを、はっきりさせる
• 行間・文字間に注意する
• 太字や大きな文字などを効果的に用いて、メリハリをつける
• 目を引いて、読む気を起こさせる
• 言葉での説明より、図や写真を用いた方が、わかりやすいものもある

など制作の中で考えてデザインしましょう。

ユニバーサルデザインについて、この本もオススメです。

読んでみてください。

「+DESIGNING」

http://www.plus-designing.jp/

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

インターネットに少し変わった面白いサービスがあります。

googleのような文字を作成してくれるサイトが紹介されています。

http://googlefont.com/

使い方はいたって簡単で、
テキストボックスに任意の文字を入力して「Create logo!」というボタンを押すと、
画面上にgoogle風のテキストが表示されます。

色合いが気に入らない時は、
再度「Create logo!」を押すと色違いパターンが作成できます。

「download logo」というボタンもありますが、
ロゴの上で右クリックすることでも画像として保存することが可能です。

機能は違いますがAIRを使用したアプリケーションで、
任意の文字を入力するとアイコンが作成できるというものも存在しております。
 

このように、任意の文字を入力するだけで
自由にデザインしてくれる機能を使用することで、
デザインの幅が広がったり、配色をする上での参考になったりします。

残念ながら半角英数記号にしか対応はしていないので、
日本語でのロゴは作成できませんが、
様々なサービスや機能を使用することで作業効率を上げたり
デザインパターンを参考にしたりすることができるようになります。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

先日、10数年ぶりに友人と会いました。

久々の再会だったのですが、その友人は幼少の頃からから
「赤が緑に見える」等、違う色に見えると言っていたのを思い出しました。

当時、私は友人が違う色を言っている時「何言ってるんだよー」
なんて思っていたのですが、小学生の時に分かるはずもなく、
大人になって改めて実感させられました。

色覚障害の持ち主ということです。

調べてみると、
「日本人の男性20人に1人、女性500人に1人、色覚障害の人がいる」
と記載がありました。
 

正直、そんなに多いとは考えておりませんでした。

私は、Webサイトや広告、ポスター等を制作する際、
配色のバランスは当然意識しております。
 

しかし、『違う色に見える』というのは深く考慮しておりませんでした。
 

反省しております。

何が言いたいのか？と言いますと、
『正常な視力の人のみがWebサイトを閲覧しているのではない』
ということです。

勿論、img要素にはalt属性を付けておりますが、画像だけではなく、
文書や背景色等も意識しなければならないということです。

読みやすい文字にするために、明暗の差を出す
というのは皆さんご存知かと思います。
 

コントラストも同様で、その差が大きいほど文字は読みやすくなります。
 

ですので、明暗の差とコントラストの差を意識しなければいけないということです。

東京大学の教授や、日本塗料工業会など共同で、
色覚障害や白内障の人にも見やすい色見本を昨年5月に作成したそうです。
 

色覚障害の人が見分けにくい色は分かっていたそうですが、
色覚障害の人達に考慮した色見本の作成は今回が初めてだったようです。

どのような色見本なのかといいますと、
「色覚障害を持っている人と持たない人を、延べ40人程度集め、
2000種以上の色の紙を見てもらい、全員が認識できる20色を選び出した。」
ということらしいです。

2000種類以上もの中から、20色ってすごいですよね。
 

これらの色を使って、今後は様々な用途で
色覚障害者に考慮したものを作ることができると思いますし、
WebやDTP等のデザイン業界でも徐々に浸透していくかと思います。

富士通のサイトでは、色覚障害の人の見え方をシミュレーションする
ColorDoctorというフリーソフトが配布されております。

http://jp.fujitsu.com/about/design/ud/assistance/colordoctor/download.html

また、色覚障害の人や白内障の人に配慮した
文字色と背景色の組み合わせをチェックできる
ColorSelectorというフリーソフトも富士通のサイトで配布されております。


見やすさを○と×で表記してくれるソフトです。

http://jp.fujitsu.com/about/design/ud/assistance/colorselector/download.html

皆さんも、配色の際には是非活用してみてください。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html

KENには「極グラフィック」という授業カリキュラムがあります。
 

PhotoshopやIllustratorのソフトは使えるけど、
「デザイン」ができない…という方や、「いつもなんとなく作ってます」という方に、
キチンと商用デザインのルールを意識して作っていただく
（「デザイン」する）という内容です。

そして、その講座の中に「名刺のデザイン」があります。

名刺という小さな紙の中に、どんな情報を入れなくてはいけないか、
どんな風に、どんな人が使うのか、などなど考えて文字などを配置します。

偶然見つけたインターネットの記事の中に、
アートディレクター/クリエイティブディレクターの佐藤可士和さんの
「名刺について」の記事が掲載されていました。

その中で「名刺はシステムのデザインだ」というような
名言があったのでご紹介します。

うーん、たしかに！

実際に作ってみるとわかると思いますが、
なんでもかんでも載せたらいい名刺にはなりませんし、
文字間隔や大きさも、ほんの少し変更を加えるだけで「収まった感」が変わります。

興味のある方は読んでみてください。

http://xbrand.yahoo.co.jp/category/product/3804/1.html

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

皆さん。こんにちは。

ここ数日、大変寒くなっていますね。


皆さんも病気にはお気をつけください。

さて今回は、アジェイセントについてお話したいと思います。

アジェイセントとは、
隣接色相配色（りんせつしきそうはいしょく） とも言い、
色相環で隣り合った色同士の配色のことを指します。

下図の色相環をご参照ください。

色相環の中に書いてある数字を色相差といいます。
 

アジェイセントはこの色相差が+1～-1の色を使用します。
 

角度で表すと基準の色から15度の色を使用することになります。

例えば、黄色を選択した場合、
黄色は上図で言うと0にあたりますので、
色相差が1である、
黄色みがかった黄緑か、黄色みがかったオレンジになります。

こちらの配色方法も
同一色相配色と同じく、組み合わせやすい配色になりますが、
注意が必要です。
 

下図をご参照ください。

赤と青、上下ともに、
左の色に色相を15度ずらした色を、右側に置いています。

こうすると明度と彩度が同じため、色の変化がわかりにくいです。
 

そのため、変化に乏しくなることが多く、不調和になりやすいです。

そこで明度や彩度に大きく変化をもたせると良いかと思います。
 

このような感じです。

アジェイセントは上手に使えば、アイデンティティーよりも色の変化もありますので、
自然な配色になるといえるのではないでしょうか？

ちょっと、長くなってしまいましたが、
次回は、トーン・イン・トーンについて、
お話したいと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

みなさん、こんにちは。
 

今更ではありますが、今年は冷夏ということで、
そんなに暑くもなく、過しやすかったようですね。

ただ暑いのがこの上なく苦手な私には、
やっぱり例年通りの、暑い夏でした。

そんな、夏の終わりに急激に寒くなってきて、
風邪を引いてしまいました。

皆様も、インフルエンザなどのこともありますし、
体調には十分注意をしていただければと思います。

閑話休題。

前回、お話させていただいたように、
今回から「色の調和」についてお話させていただきたいと思います。

まず一つ目は、「アイデンティティー」です。
 

普段だとアイデンティティーというと、
個性であるとか、同一とかという言葉で表現されることが多々あるかと思います。

この場合ですと、同一という言葉で表すのが、近いかなと思います。

つまり、配色において、「アイデンティティー」とは
同じ色相内で配色をすることとなります。

こちらがサンプルになります。

全体の色合いをキレイに統一することができ、
まとまり間の表現しやすい配色になります。
 

用いる色によって印象が変わります。
 

上記のことから、
統一感があり、シンプルで上品な感じがします。
 

また色相が絞られるので、配色のテーマが分かりやすい
という特徴もあります。
 

しかし静かでおとなしく、溶け込んでしまいやすいので、
表現が目立ちにくくなってしまいます。

これをトーン・オン・トーン配色と言います。

次回は、二つ目として、
アジェイセントについてお話したいと思います。

それではまた・・・。

--------------------------------------------------------------------------------
ブログ更新管理者より

年内の記事更新は本日で最後です。
本年もご愛読ありがとうございました。

来年は1月4日から更新再開の予定です。
よろしくお願いいたします。
--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

WEB雑誌を読んでいて発見したのがこのColorSelectorです。

http://jp.fujitsu.com/about/design/ud/assistance/colorselector/

みなさん制作をしていて悩むものの一つに
”配色”があるんじゃないかと思います。
 

色は、さまざまなイメージをユーザーに与えることができます。
 

しかし間違えると、何を伝えているのか分かりづらい媒体に
なってしまう可能性もあります。

難しいですよね。色を決めるのって・・・
 

さらに頑張って配色を決定したのに
実はとても見づらい色の組み合わせだったら・・・

そんなことにならないために、このColorSelector！

ColorSelectorについて--------------------------------------------------------------
 

誰もが読みやすい色ですか？
 

ColorSelectorは、背景色と文字色の見やすさを判定するソフトウェアです。
 

指定した背景色と文字色の組み合わせを
「一般」、「白内障」、「第一色覚（赤）」、「第二色覚（緑）」、「第三色覚（青）」で判定し、
結果を表示します。

ColorSelectorは、スポイト機能により、
診断したい色の組み合わせを簡単に指定できます。
 

これにより、ウェブサイトだけでなく、
プレゼンテーション資料の作成もアシストします。
 

色のRGB値を直接入力したり明度を調節することで、迅速な色調整も可能です。

※http://www.apple.com/jp/downloads/macosx/internet/colorselector.html
から文章引用

配色が苦手な方、アクセシビリティを考慮したWEBサイトを目指している方
こんな便利なソフト、使ってみてはいかがですか？

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

先日、ちょっと気になることがあり名古屋に行ってきました。
 

気になるモノそれは何か？

「ラーメンフォーク」です。

これがものすごく気になってしまいまして、実物を見てみたい・・
そして、使ってみたいなと思い、名古屋まで足を運んだのです。

ラーメン通とかではないのですが、常々感じていたことがありました。
 

それは、ラーメンを食べる時につゆと麺を一緒に食べられたら、
きっと美味しいのだろうと。

そう思っていたところ、たまたま、表参道を散歩中に出会ってしまいました。
 

「ラーメンフォーク」に!

情報収集していたら・・

名古屋に実際に使っているラーメン屋があるんです…というか
このラーメン屋のために作られたものだったのです。

ということで「ラーメンフォーク」を求めて名古屋に行ってきました。
 

実物を実際に使ってみました。
 

良いデザインです。

で後日・・たまたま新聞を見ていたら、「ラーメンフォーク」の記事があり、
記事の中でデザイナーの子供（４歳）が「スープ飲めるし、ツルツルも食べられる
おかーちゃん、これいいね！」って言ったそうなんですが、もちろん
この子供はこの「ラーメンフォーク」を作ったのが自分の母親であることを
知りません。

デザイナーである母親はものすごく嬉しかったそうです。

そう、デザインの本質である「何も言わないで自分の意図が素直に伝わる」
という事が嬉しかったと書いてありました。

たぶん、デザインをしていて一番嬉しいときでしょう。
 

デザインワークは恐怖との戦いであり、精神力を相当そがれます。
 

「伝わる」…そんな瞬間のためにデザインをしている。

そんな自分がいます。

そんな気がしました。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクターhttp://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

一般的に「カラー印刷」と呼ばれている印刷物は、プロセスインキである
シアン（C）、マゼンタ（M）、イエロー（Y）、ブラック（K）の4色で印刷されています。
 

カラーモードのＣＭＹＫですね。
 

拡大して見てみると、
この4色の点が重なりあって色を表現しているのが見えてきます。
 

点の割合を変えることによって色が変わります。
 

点が小さくなれば薄く見えるし、大きければ色が濃く見えます。
 

例えば、緑を作りたいのであれば、
シアン（C）を100％、イエロー（Y）を100％で出来上がります。
 

黄緑色なら、イエローの割合を多めに
シアン（C）を40％、イエロー（Y）100％で指定すればいいですし、

青が強めのエメラルドグリーンならに
シアン（C）を100％、イエロー（Y）40％で表現します。
 

DTPデザイナーやグラフィックデザイナーは
この数値の割合を全部把握して色を作り出しています。

そんなの、無理！っていう方にはお勧めのカラーチャートをご紹介します。

印刷色見本　ＤＩＣプロセスカラーチャート

http://www.gande.co.jp/DIC/DIC-SEL.html

どの色を何％ずつ混ぜれば、どんな色になるか一目でわかります。
 

それに、モニターで見る色はＲＧＢなので
紙に印刷するとなんか違ってしまった！なんて経験はありませんか？
 

そういった問題も解決できます。
 

印刷関係に興味がある方はぜひ参考にしてみてくださいね。

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

教育関連の出版社は
よくその会社独自のフォントを作成するそうです。

なぜだか分かりますか？

その理由はひらがなの「さ」にあります。

ひらがなの「さ」には

２画の「さ」と、
 
 

３画の「さ」の

 

２通りがあります。

一般的にフォントで多いのは２画の「さ」なのですが、
現在、小学校で習うひらがなは３画の「さ」なのだそうです。

よって教育上、参考書などには
２画の「さ」ではなく３画の「さ」を使用するため
また、正しいカタチの文字で表現するため、
フォントを作成してしまうそうです。

ちなみに数学などの場合には
いかに「x」と「y」を見やすくするかというための
工夫も施されるんだとか。

--------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん、こんにちは。

さて、今回はすぐに本題に入りたいと思います。

前回、コントラストについて、お話をさせていただきました。

今回は、調和についてです。

もともと配色とは、色を組み合わせて、新たな効果を生み出すことです。

そのため対象物の用途や機能等をしっかりと表現できないといけません。
 

また機能的なだけでなく、美的に調和している事が重要です。

つまり機能的かつ美的である事が重要なのではないでしょうか？

では、例えば新幹線の車両を思い出してください。

新幹線のイメージとして、

• スマートに速く走る
• 大人数を運ぶので、冷静で安全な感じ

になると思います。

東海道・山陽新幹線は白と青のツートンカラーです。
 

スマートで速い感じの白と、
冷静な感じの青がとても良い配色で使われております。

さて配色を考える際の基本形式について、フランスの科学者シュブルールは、

• 近い色だと調和する
• 対立する色だと調和する

と述べています。

下の絵をご覧ください。

つまり左側が近い色で表現をして「統一」を図っています。
 

右側が対照の色で表現して「変化」を表しております。
 

この 「統一」か「変化」のどちらかを使用すると間違いは少ないと言うことです。

今後は、この調和について少しお話したいと思います。
 

また、この後に出てくる配色のほとんどは、この考え方に基づいています。

それではまた・・・。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

普段、何か欲しいものがあるときや初めて行く場所など、
分からないことがあった時には、
インターネットを利用して調べることがあると思います。

Webデザイナーを目指すのであれば、分からないことを調べるだけでなく、
デザインの勉強と思って、たくさんのWebサイトを見ることをお勧めします。

最近、受講生の方にお勧めしているのが・・・
同じジャンルのサイトを複数調べて
「似ているところ」、「違うところ」を分析してみること。

すごく細かな違いでも、それを分析することが
とても制作者にとっての勉強となります。

まずは大手の企業からでも構いません。

調べて比べてみてください。

トヨタ
http://toyota.jp/index.html
 

ニッサン
http://www.nissan.co.jp/
 

ホンダ
http://www.honda.co.jp/auto/

セブンイレブン
http://www.sej.co.jp/index.html
 

ローソン
http://www.lawson.co.jp/index.html
 

ファミリーマート
http://www.family.co.jp/index.html

ドコモ
http://www.nttdocomo.co.jp/
 

au
http://www.au.kddi.com/
 

ソフトバンク
http://mb.softbank.jp/mb/

いろいろ調べていると、

職種によりレイアウトが似ていること。

それでも会社の特色で微妙な違いがあること。

など、いろいろ勉強になります。
 

ぜひネットサーフィン（死語）してみましょう^^V

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

皆さん、こんにちは。

暑くなったり、雨が降って涼しかったりと、気温の差が激しい今日この頃ですが、
皆さんはいかがでしょうか？

唐突ですが、人は急激な環境の変化についていくことは出来ないそうです。
 

そのため、夏が近づき暑くなってくると、その暑さに対応できるように、
２～３日程度の慣らしの日にちが必要だそうです。

この季節、体調を崩しやすい原因でもあるそうです。

今まで色々な色に関するイメージや 感情など、色の基本についてお話してきました。
今回は、少し応用にはいり、配色のコツについてお話したいと思います。

さて、1回目の今回は「コントラスト」についてです。

まず、「コントラスト」とは何でしょうか？
 

コントラストというのは、
画像などにおける明るい部分と暗い部分との明度の"差"のことです。
 

コントラストを強くすれば、明るい部分はより一層明るく、
暗い部分はより一層暗くなります。
 

つまり、コントラスト比を強くすると、シャープで鮮やかな印象が増しますが、
中間色の滑らかさがおろそかにり、行き過ぎると粗雑な画像になってしまう
危険もあります。

また、逆に弱くすると、全体的に滑らかで落ち着いた印象が増しますが、
行き過ぎるとぼやけた不鮮明な画像になってしまいます。

それでは、分かりやすい例で、文字と背景色の関係で考えて見ましょう。
 

下の絵を見てください。

文字の色は黒で、背景の色のみ違っています。
 

右側に行くほど、文字と背景の明度が近づいていくので
文字が少しずつ見にくくなっていきます。

では、次にこちらはどうでしょう。

文字と背景を似たような色で整えると、やはり文字が読みづらいですね。

つまり、対比することで出来る"差"をつけないと、見にくくなってしまいます。

制作において、このコントラストを考えないといけないということですね。

でも、生活するうえで気温の"差"が激しいのは、
体調に良くないので、勘弁してほしいです・・・。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

さてさて、いつもは、どうでも良い自虐ネタから入っておりますが、
今回は、いきなり本題です。

前回、色の錯覚の種類について簡単に述べましたが、
今回は少し深く掘り下げて行きたいと思います。

ズバリ!!
色の錯覚　対比現象編　です。

さて、前回対比現象とは、
"ある色がその色の周りにあるほかの色の影響を受けて、
本来の色と違って見える現象こと"
と、ご紹介いたしました。
 

しかし、この対比だけでも数種類ありますので、
その一部をご紹介いたします。

明度対比

その色の周りにあるほかの色の影響を受けて、
本来の明るさよりも明るく・
暗く見えたりする現象のことを言います。


 

上記のイメージを見ていただくと白い背景と黒い背景の中心に
それぞれ灰色のイメージがあります。
 

背景が白いと白いほうが明度が高いので、
中の灰色の明度が実際より少し低く見えてしまいます。
 

逆もまたしかりで、背景が黒いほうが、明度が低いので、
実際より明度の高い灰色に見えてしまいます。 
 

しかし、この灰色ですが、
両方とも同じ色を使用しております。
 

このように、周りの色に影響され、
明度が高くなったり、低くなったりする見え方を明度対比と言います。

彩度対比

その色の周りにあるほかの色の影響を受けて、
本来の彩度よりも高くもしくは、
低く見えたりする現象のことを言います。



中心の緑より、彩度の低い色を背景に置くと、
中心の緑はより彩度が高く見えます。
 

逆に、中心の緑より、彩度の高い色を背景に置くと、
中心の緑はより彩度が低く見えてしまいます。
 

このように周りの色に影響され、
彩度が高くなったり、低くなったりする見え方を彩度対比と言います。

他には、色相対比や補色対比、緑辺対比などがあります。
 

ぜひ、これらの対比についても調べて見てください。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

最近受講生が作成したサイトを見ていると
「サイトID」にindex.htmlへのリンクが抜けているものが目立ちます。

サイトIDってなに？　という方、ココです。

どのページから見てもこのサイトIDをクリックすれば
トップページに戻ることができるサイトってすごく多いですよね。
 

むしろ業界標準といっても過言ではないと思います。

小さな事と思われるかもしれませんが、
サイトIDからのリンクは必須！
みなさん忘れないでくださいね～！

--------------------------------------------------------------------------------

パソコンスクール KENスクール立川校　Webインストラクター
http://www.kenschool.jp/school/tachikawa/index.html

KENスクールでサイトデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

ずいぶん前の話になります。

節分がありましたが、その時に受講生の方から
豆まきセットをいただきました☆

その中に入っていた鬼のお面が…社長の顔に似ているんです！

思わず飾っちゃいました。
注）社長が鬼に似ているわけではありません

どこが似てるのか、似てると感じるのかを論じたところ
「おでことまゆ」。ということになりました。

でも社長と言えばヒゲ、ということになり書き足したら、ますますそっくりに…

これっていわゆる「デザイン」ってことですよね！
特徴を調べて（情報収集）、それを可視化してみたら…なんとなく社長に見える！

そういえば前にデザインの本で「萌え」の定義を読みました。
 

たとえば萌え顔ですが、もともとは赤ちゃんから来てるみたいです。
たしかに赤ちゃんはだれでもかわいいと感じます。

（少なくとも怖いとは思わない）

• おでこが広い
• 目が大きい
• 丸みを帯びている　など

…もしかして
社長の顔もおでこがもう少し広かったら萌え顔
だったかも！？（笑）
 

そんな社長が書いてるブログもどうぞよろしくお願いしますm(_ _)m

ぜひみなさんも「萌え」と呼ばれる人の顔、造形を見つめてみてください。

そんな風に観察するところからデザイン力が生まれます！

 --------------------------------------------------------------------------------

パソコンスクール KENスクール立川校　Webインストラクター
http://www.kenschool.jp/school/tachikawa/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

みなさん、こんにちは。
 

最近、やっと暖かくなってきて、スプリングコートも脱ぎ捨て、
半袖でもいいのではないかなぁ～と思う日もある今日この頃です。

しかし、暖かくなってくると、それ以上に花粉に悩まされる私であります。
プラス鼻炎というおまけつきで･･･。

また、春用の衣服になり、明るい、暖色系の色が多くなります。
 

これも私にとってひとつの悩み事でもあります。

なぜかというと、色には膨張する色と収縮する色と2つあるからです。
と、いうことで今回は膨張色と収縮色についてです。

まず、 赤や黄色などの暖色系は、こちらに向かってくるように、進出して見えます。
これを、膨張色(もしくは進出色)と言います。
 

逆に、青や緑などの寒色系の色は遠ざかっていくように後退して見えます。
これを、収縮色(もしくは後退色)と言います。
 

下図を見ていただくと、中の黄色と青の部分の大きさは同じですが、
青い方が少し小さく見えるのではないでしょうか？

では次に、下の絵を見てください。

いかがですか？
 

Photoshopの範囲選択をずらして書いただけの、
左右両方とも全て同じ大きさのイメージなのに、
白いほうが大きく見えてしまいます。

つまり、明るい、暖色系の衣服は、通常より人を大きく見せてしまいます。
 

また、白い方が明度対比を起こしてしまい、
肌の色がよりくすんで見えてしまいます。

そう、最近メタボリックが気になる私にとって、
膨張色の衣服は、私をより丸く太って見せてしまうのです!!

と、いうことで、普段は無駄な抵抗かなと思いつつも、
意図的に暗めの紺のスーツと、寒色系のYシャツを着ています。

本当は、●ルシアでものんで、
しっかりと運動すればいいことなんでしょうけど･･･。

--------------------------------------------------------------------------------

パソコンスクール KENスクール大宮校　Webインストラクター
http://www.kenschool.jp/school/omiya/index.html

KENスクールでデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん。こんにちは。

早速本題ですが、今まで、色の感情として寒暖、興奮・沈静のお話をしてきました。
 

今回は、柔硬感に関してご紹介したいと思います。

色が柔らかく見えたり硬く見えたりするのは、主として明度に関係があります。

明るい色は柔らかく、暗い色は硬く見えます。

明るい色とは明清色（純色に白を加えた色）と明るく鈍い色調の色（パステルカラー）です。
 

硬い色とは暗清色（純色に黒を加えた色）です。

無彩色では明るいグレイは柔らかく、暗いグレイや黒は硬く感じる色になります。
 

色の中で最も明るい色は白になりますが、白は、柔らかく感じません。

それは、白い色は印象がハッキリとしているため、柔らかい感情は湧かないのです。

下の図を見てください。

上段の色はパステルカラーを使用しているので柔らかく見えます。

逆に、下段は暗清色で表現しているので、それぞれ硬く感じます。

では、ここで一例を挙げて見たいと思います。
 

赤ちゃんの産着などのベビー用品は柔らかい色を使用しております。
 

デパートなどでベビー用品売り場を見ると、
この柔らかい色の商品で溢れていますよね。
 

生まれたばかりの赤ちゃんって、なんか、抱きしめたら壊れてしまいそうで、
(そんな強く抱きしめることはないでしょうけど･･･)

頬とか手とかは柔らかくて、そんな赤ちゃんには、
柔らかい色ってピッタリですよね。
(私には子供はいませんが･･･。)
 

逆に、硬い色はSL機関車のような重厚感のあるものに相応しい色です。
特に黒は硬く感じるとともに重くどっしりとした印象を与える色といえます。

こちらの重くどっしりという印象については、
軽重感ということで次回で詳しく説明しようかと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

皆さん、こんにちは。

今年の春も桜の写メールなど撮ったりして春満喫しましたが、
あっという間でさみしい今日この頃です。

薄いピンクの桜の花を見ると「春だなぁ～」と思いますね。

ある物の色を見る事により、人は季節を感じます。

実は色には、感情があり、人に様々な感情を誘発します。

と、言う事で今回は色の感情についてお話したいと思います。

まず、色の感情としては以下の種類があります。

• 暖かい・冷たい
• 興奮・冷静
• やわらかい・硬い
• 軽い・重い
• 派手・地味
• 色の連想

です。

今回は、その中から「暖かい・冷たい」について、お話したいと思います。

では、下の絵を見てください。

こちらを色相環といって色を順序に立てて円環にして並べたものです。

赤・橙あたりから黄にかけての色は、暖かみを感じる色が並んでいます。
コレを、暖色と言います。
 

また、 緑あたりから青紫あたりまでを寒さを感じる色が並んでいて、
コレを、 寒色と言います。
 

そして、 暖かい・冷たいなどの感情のわからない一連の色がありますが、
この色を中性色といいます。

暖色系の色は、彩度が高いと積極的な感じ受け、
逆に寒色系の色では沈静的な感じがします。

少し季節はずれですが、次の写真を見てください。

寒色系を使ったイルミネーションです。
 

どこか冬の寒さを表現しながらも、
より、どこか淋しい幻想的な風景に見えてきませんか？

また、暖房にはオレンジ系の暖色が使われていたり、
冷房には、ブルー系の寒色が使われていたりします。

このように、色には暖かさや冷たさを表す効果があります。

春になって、冬とは違う色々な色が街に出てきました。
 

是非、皆さんも春の色にはどのような色が多いのか？

立ち止まってみてはいかがでしょうか？

次回は、興奮・冷静についてお話したいと思います。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

ここ最近、寒い日が続きますね。

輪廻転生が事実だとしたら私の前世は確実に冬眠をする動物だったに違いないと思います。
冬には毎日がねむいねむいねむいねむい。

そんな寝ぼけまなこで電車に乗っていたところ、興味深い広告を発見しました。

これです。
(クリックで拡大します)

フリスクのケースの外側にもフリスクサイズの白い丸が見えませんか？
※寝ぼけまなこの人にだけに見えるわけじゃありません。

これは“エーレンシュタイン効果”という錯視のひとつで
線分の端点により、主観的な円が見え、
その主観的図形の色は背景と同じであるが、明るく見えるという現象です。

この効果自体は以前から知っていたのですが、
それをうまく利用したこの広告には感心。

でもこのような錯視を利用したデザインというのは意外と身の周りにあるものです。

明日の通勤時、寝ぼけまなこをどんぐりまなこにして周りを見てみてください。
面白い発見があるかもしれません。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールで広告デザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

最近、いろいろサイトを見ていたらものすごい大きなボタンがあり
つい押してしまいそうになりました。
 

それで思い出したのですが、どこかで
サイトのボタンって重要なんだと聞いたことがあったので、
ちょっと調べてみました。
 

そしたらこんなことが書いてあったのでご紹介します。

1.色
ボタンの色はページの他のものよりも目立たせて、明るく、コントラストを
効かせると良い

2.場所
ユーザーがすぐに見つけることができる場所にボタンを配置する

3.説明
機能が分かりやすい単語を付ける。
見てる人にそのボタンをクリックする理由を示すのも効果的
例えば「無料！」とか・・・英語表記も多いですね

4.大きさ
ほかのどのボタンよりも大きく、広い面積を取る

5.余白
ボタンの周囲には十分な余白を取る。
ボタンらしく見えるように、立体的に見せる

みなさんもサイト制作する際にはぜひボタンに力入れてみてください。

あなただったらどのボタンを押したくなりますか？
http://www.dragnet.se/webbdesign/button_collection.html

--------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでサイトのデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

ここ最近、一段と健やかに育っている今日この頃です。

適度な運動と、規則正しい食生活を心がけたいものです。
･･･一向に直りそうもありませんが･･･。

さて、今回は次回のおしまいに綴った通り、
「色の同化」についてお話したいと思います。

まず、下の絵を見てください。

少し確認しづらいですが、
背景色は共に同じ紫を使用しております。

しかし、左側の方には青い縞模様がのっているので、
背景の紫が少し青みがかってしまいます。
 

同様に、右側の方は赤い縞模様がのっているので、
背景の紫が少し赤みがかります。

この様に、背景色が、
柄などの影響を受けて、柄の色の色相に偏って見えることがあります。
これを、「色の同化」と言います。

では、実生活の中で使われている例を一つあげたいと思います。
それは、「赤い網に入ったみかん」です。

もともと、みかんはオレンジ色ですが、
そこに、赤い色の網をかぶせます。

赤い色のネットをかぶせることで、オレンジが色の同化を起こし、
より赤みがかったオレンジになります。
 

そうする事により、より甘く、美味しそうに見える。
と言う訳です。
 

この様に、普段の生活の中でも、
色々な場所で、色の同化を確認することが出来ます。
 

是非、お買い物などをした際には、
探してみるのも面白いかもしれませんね。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

さて、以前熱烈な虎吉であることをお話した、私ですが、
昨年はなんとも、面白くない結果になってしまいました。
 

阪神が負けた時点で、どこが優勝しようが関係ないわけで･･･。
もうすでに、ストーブリーグの補強を楽しみにし、
心はすでに今年のペナントレースの開幕を楽しみにしています。

そんな私は普段から、野球、サッカーなど色々なスポーツを見ますが、
それらのチームには、チームの特色を現すチームカラーが存在します。

阪神なら黄色と黒、浦和レッズなら赤と言う様に･･･。

今回は、色のイメージについてです。

さて、赤い色を見たとき、何を思い浮かべますか？
太陽やイチゴなどは多くの人がイメージすると思います。
 

それでは青といえば？
たいてい空や海を思い浮かべるではないでしょうか。
 

このように私たちは色から関連のあるものを連想することができます。
これを「色の連想作用」といい、私たちの頭にインプットされている色･･･
記憶色というものから成り立ちます。
 

このように色は心理的な作用を持っています。

色の連想作用は、具体的にモノをイメージする場合と
情熱、冷たいなどといった抽象的なイメージを連想する場合の
２パターンがあります。
 

このほとんどの人々が共通に持つ色の連想語を利用して、
商品のパッケージなどの色彩計画に使用している例が数多くあります。

例えば、暖かい火や炎を連想させた暖房器具には赤や橙を使い、
冷蔵庫や扇風機などには、涼しいイメージの青を使うなどです。

特に食品でこのイメージ色が活用されており、
例えば「激辛」を表すために鮮やかな橙が使われる場合が多いですし、
高級感を出すために黒やゴールドは有効な色と言えます。

消費者にその商品のイメージをスムーズに伝え、
買いたいと思わせるパッケージの鍵を握るのがこの記憶色を含めたイメージ色なのです。
それでは、それぞれの色の意味やイメージする言葉を見てみましょう。

赤　→　外へと向かうパワーの色で何かを発散したい時に欲する色です。
　　　　　赤ちゃんが生まれて初めて見分ける色も赤です。

橙　→　食欲の色とも言われています。エネルギッシュで前向きになれる色です。

黄　→　何かを訴えたい欲求を秘めた色です。また甘えをストレートに表現する色でもあります。

緑　→　疲労した目や体を癒してくれる色です。緑を欲しているときは休息が必要な時です。

青　→　誠実、忠実なども意味し、日本人に好まれてきた色です。気分を沈める色でもあります。

いかがでしたか？
他にも、沢山色がありますから、
興味が出てみたら色のイメージを調べてみると面白いのではないでしょうか？

次回は、もう少し踏み込んだお話をしてみようかと思います。
 

三越の紙袋に書いてある「Mitsukoshi」という筆記体が
アンパンマンの作者・やなせたかし氏のものであることは結構有名？ですが、
たまたま包装紙のデザインについてもこんな秘密が隠されていたみたいなんです。

三越の包装紙（白地に赤い模様）を思い出してください。
まず、あの赤。

もとはクリスマス限定の包装紙として作られていたのですが、
好評だったため、翌年から通常の包装紙として使用されるようになり、
50年以上デザインは変わらないまま。

あの赤はクリスマスの色、という意味で使用されたらしいのですが、
この赤色は現在では「三越ローズ」という名前の特色インキ(※）として
印刷会社で管理されているそうです。

そしてもうひとつ。あの赤い模様。
なんだと思います？　なんであの模様なんでしょう？
デザイナーの洋画家・熊谷弦一郎氏が千葉県の犬吠崎で集めた石がモチーフ
なんだそうです。
石！！

何か強いもの、というのが原点だったそうですが、自然の造形の美しさに惹
かれたという理由だということで…やっぱり自然の力はすごい！

※特色インキとは
　通常印刷時のインクはCMYK（シアン・マゼンタ・イエロー・黒の4色）を
　使用します。これを「プロセスカラー」と呼びます。
　しかし、蛍光色やパステルカラーなど特別な色（プロセスカラーでは表現
　できない色）は「特色」といってあらかじめ作られた色を使います。
　通常の印刷代よりも多少値上がりすることが多い。

 Illustratorでは「スウォッチオプション」から選択可能。

みなさん、青いバラって知っていますか？

バラといえばやっぱり赤。ですよね。
でも青いバラってあるんです。
以前ニュースでもやっていました。
 

日本のサントリーフラワーズと、オーストラリアの植物工学企業である
カルジーンパシフィック社(現：フロリジン社)との共同研究開発により誕生した、
世界で始めての青色色素を持ったバラなんです。

遺伝子組換え技術により誕生し、2004年6月30日に発表されました。
2004年に日本産業デザイン振興会　グッドデザイン賞「金賞」も受賞しているすごい花なんです！
サントリーってウーロン茶のイメージが強いですが、植物の研究もしてたんですね。。。

それにもビックリですが、自然界のデザイン・色彩って人工的に造ったどんなものよりも
すぐれていると思いませんか？
 

海の中の珊瑚とか、熱帯の鳥や魚の鮮やかな色。
ため息がでるような美しい色彩にあふれています。

話は戻りますが、バラにはそもそも青の色素がないそうです。
自然の色彩を遺伝子技術で変えてしまうなんて。。。
 

ちなみにこの成功により、同様に不可能とされていた厳密な意味での「黒いバラ」を作ることも
可能になったわけですが色の三原色の赤、黄、青の色素が揃わないと、
黒色を配合することはできないので、現在、「黒バラ」と呼ばれているものは非常に濃い赤色の
バラなのだそうです。残念ながら、こちらはまだ実現していません。

そんなすごいことができるようになった世の中ですが、個人的にはやっぱり自然の色彩の美しさには
かなわないと思う今日この頃でした。

たまには技術的なことも書いてみましょう^^

先日「キャッチコピー」について書きましたが、ではその文字は
どんなデザインになっているんでしょう？
よく受講生の方にも文字のデザインについてお話させていただく機会があります。

では今回は初級編ということでPhotoshopで文字のデザインをしてみます。

まずは適当なサイズの新規カンバスを作り、そこに任意の文字を書いてください。
今回の場合、書体は太めのものがよいかと思います。（例はImpactにしています）

この文字に「縁取り」を付けたいので文字レイヤーの下に新規レイヤーを作成します。

文字と同じ形の選択範囲を作ります。Ctrlキーを押しながらレイヤーのサムネイルをクリックします。
必ずサムネイルです！「T」って書いてあるところです！
文字と同じ形に選択範囲が点滅しますよね？

次に縁取りをするため一回り選択範囲を拡張します。
選択範囲メニューから選択範囲を変更、拡張と選び、数ピクセル拡張してください。
選択範囲が一回り大きくなりました。

レイヤーパレットで先ほど新規作成したレイヤーが選ばれてることを確認（レイヤー１）し、
白で塗りつぶしをしましょう。操作は描画色に白を設定し、Altキー+Deleteキーです。

背景が白いとわかりにくいですが^^;
白い縁取りができました。
（※ここでは分かりやすいように背景を黒にしたものを載せておきます）

さらに先ほどと同じ操作でもうひとまわり選択範囲を拡張し、もう１枚レイヤーを
レイヤー１の下に作成します。
そこに最初に書いた文字と同じ色で塗りつぶしをします。
２重に縁取りを作ることができますね！

すると野球の背番号のようなロゴデザインができます。
（※背景は白に戻してあります）

さらにひと工夫！
レイヤースタイルを使い、最初に書いた文字レイヤーにグラデーションオーバーレイを
使いグラデーションをかけてみましょう。

仕上げにもうひとつ一番下のレイヤー（レイヤー２）にも
レイヤースタイルのドロップシャドウをかけて完成です。
（最後のレイヤーの状態も載せておきますね）

すごく簡単ですが、意外に通勤電車や駅の広告、Webサイトでもよく見かける手法です。

また同じようなことを書いてしまいますが、通勤電車って本当にデザインの勉強になります。
「あっ！このロゴ格好いい！！」って思ったらぜひPhotoshop、Illustratorでチャレンジしてください。
どんどん腕があがること間違いなしです！

10年振りに一人暮らしを始めて、半年が経過しました。

先日、健康診断があり、もちろん体重も量ったのですが、
一人暮らしの成果が問われましたね。

結果はやっぱり育ってましたね…5kgくらい？

時として「人と違う」という事は、賞賛を浴びる対象になりますが、
健康に関しては、基準値を守った方が良いですね。

というわけで、今回はオリジナルのお話です。
今回は良い掴みだぞ、我ながら。

「ロゴを作ろう！」という記事からロゴについて調べていますが、
今回は、そもそも「オリジナルとは？」について考えてみましょう。

デザインに限らず、業務上オリジナル性を求められる場面は
結構あるのではないかと思います。

例えば営業職の方のプレゼンで、通り一変の話し方や資料の作りでは
興味や注目を集められない…という事もあるでしょう。

ただ、ここで間違いなのは「人と違う事をしよう」と考える事です。
いきなりそのように考えても、斬新なアイデアが出ることはありません。
何故なら「他の人のアイデアを知らなければ、自分の考えが
オリジナルなのかどうか判断できない」からです。

つまりオリジナルとは、あらゆる既存のアイデアの上に立つ物だと思うのです。
本来は「独自の」「元々の」といった意味ですが、言い方を変えて
「既成の物や考え方とは違う」といった方がしっくり来ますね。

デザインやパソコンの世界に限らず、見聞を広めるということは
やはり大事ですし、新たな経験をする度に「オリジナル」に
近づいて行くのでしょう。

らしくもなく語ってしまいましたが、
最後にロゴデザインのフリーソフトをご紹介しますね。

Logo Makerというサイトです。
左側にあるリンクを選択し、ロゴにしたい文字を入力すると、
それっぽい感じのロゴに仕上げてくれます。
試しに、任○堂風のKEN Schoolを作成してみました。

これをそのまま使うのは、さすがにアウトですね…(汗
ここまでの記事はなんだったんだという。


気を取り直して、次回もデザインから少し離れて、
web上の広告戦略について調べてみようかと思います。

社会人になると、多くの方が運動不足に悩まされると思います。
「休日は外出せずにノンビリしたい！」なんて思っていると、
やっぱり育ってしまいますね…特にお腹周りが。

軽く散歩する時間を作るだけでも違うと思うのですが
「明日も頑張る為に体力を充電しないと！」とか意味不明な理由をつけて、
ついつい昼寝の時間を設けてしまいます。
そんなにゴロゴロゴロゴロしてどうするんだ？とも思いますが…。

というわけで、今回はロゴのお話です。
掴みが強引とか気にしません。

早速ですが、次のロゴをイメージしてみてください。

• マクドナルド
• クロネコヤマト
• バットマン
• ユニクロ

職種はバラバラで、バットマンに至っては会社ですらありませんが、
大きく２つの特徴に分かれているのが分かりますでしょうか？


マクドナルドとユニクロは、その社名の「文字」が、
クロネコヤマトとバットマンは、黒猫や蝙蝠の「マーク」が、
それぞれ思い浮かんだと思います。

以前の記事、「ホリデーロゴ」で触れた「google」のロゴは前者、
「TAGIRI」で触れた「TAGIRIツール」のロゴは後者に当たりますね。

一口に「ロゴ」と言っても、以下のように分類されているようです。

ロゴ作成のコツを調べようとしたのですが、思った以上に奥が深く、
何から手をつけて良いのかも分かりませんね。
そんな時はツールを使いながらイメージを固めていきましょう。

今回ご紹介するのは　　という、フリーのロゴ作成ソフトです。
バナーをクリックするとリンクします。


リンクに飛んだら「ダウンロード（プログラムと説明書）」のページから、
ソフトの入ったファイルをダウンロードして、解凍をします。
特にインストール等の作業は不要です。

「LogoShader」フォルダの中の「Program」フォルダの中にある、
「LShader.exe」をダブルクリックしてソフトを起動します。

詳しい操作方法は「LogoShader」フォルダの中の「Document」フォルダの中にある、
「manual.html」を見てください。

マニュアルを見ずに一分で作ったロゴが

です。


「クール」と「スクール」で韻を踏んだつもりです…合掌。社長！使い方合ってますか!?

さあ！これからも一緒にロゴについて勉強していきましょう！！
 

急に寒くなってきましたね。
夕方にもなると、空もどんよりくら～くなってきます。
夜になれば空は黒くなってきます。
寒くなるにつれ、暗めの色の服を着る機会も増えますね。

今回は、『黒色』についてのお話です。

黒と一言で言っても、赤を暗くした『黒に近い赤』や
青を暗くした『黒に近い青』などがあります。

『黒に近い赤』を使えば、
「温かみのある強い黒」になります。
人間は感覚的に黒の奥にある赤のニュアンスを
なんとなーく感じ取って、モノトーンの黒と比べた時に
熱のある黒に関心が引かれやすくなります。

『黒に近い青』を使えば、
「夜空を見ているような安心感」を与えられます。
黒と比べた時になぜか惹きつけられる・・・
という印象を与えることができます。

自然界には色味のない完全なモノトーンは存在しません。
なので、わずかに何かの色味を加えて「自然さ」を演出することで
見る人にとって人工的とは感じさせないようにできます。

冬の夜空なんてまさに！自然の青い黒ですね。
見ていて心安らぐ、黒い青です ('-'*)

さて、前回から引っ張ってきているネタですが・・
女性の皆様お待たせしました。

って言ってもたぶん、
ごく普通に女性の皆様はやられているかと思いますが・・
 

はい、それは、お化粧です。

そう、小顔に見えるテクニック！
チークをうまく使うってやつです。

チークは小顔に見せる効果があります。
おすすめの色は ブラウン ！！

頬骨の上から下へ、ブラシを動かすように入れると、
輪郭がキュッとひきしまって見えます。

Ｔゾーンや頬骨の高い位置にハイライトカラー
（ハイライト効果のある白っぽい色）を入れると、
よりはっきりします。

さて、なんでこんな話をしていたかというと、
実はこのような補正をPhotoshopを使って仕事としてやっていました。

でも・・Photoshopだけでこれらのテクニックを磨こうと思っても、
仮想（データ）処理なのでそこにリアルがなく、
なかなか上達できません。

やっぱし実践し、目でみて、実際に感じること。
これが実は一番最短で自分磨きができます。

それを拒んでアプリケーションの使い方だけ覚えても、
名だけのデザイナーとなってしまいます。
それは、アプリケーションが使えるオペレーターです。

あなたはどちらを目指しますか？

アプリケーションのエキスパートか？
自分でデザインしたモノを世に出すか？

ちなみに、仮想で思い出したんですが、

昔、むか～し、自分、サッカー部だったんですが・・

その合宿で紅白試合とPKをやって、
一番最下位の人が×ゲーム・・
その×ゲームがなんと女装だったんです。

そして・・・見事に負けました
（しかも自分のオウンゴールで負けたので
自動的に最下位ってのは内緒で・・・）

しかも、マネージャーがいろいろ用意していた・・
お化粧道具一式はもちろんのこと
カツラからハイヒール、ブラまで・・・

ちなみに男顔なのでできあがりは相当・・・ヤバかったです。
まー、そーなると楽しみモード全快で悪のりしてました。

で、そのとき思いましたけど。。
お化粧ってほんと大変だし、暑い。。
ハイヒール、気分はなんだかピーンって感じになるけど・・疲れる。。

さて、次回は・・・
アナログ感覚とデジタル感覚についてにしようかなと思います。

これはみなさんが知っている、
アナログとデジタルの比較とは少し違います。
っていうかひねくれています。

この、ひねくれ度があたらしい何かを生み出すきっかけになります。

と、自分で逃げ道を造っていることは内緒でっ！！

私が普段、心がけていることのひとつに
 「電車で中吊広告を見ること」があります。

たまに受講生の方に
「今日は何の広告が印象に残ってますか？」って
聞いてみたりします。

本当に広告って見てもらえないもので、
心がけているにもかかわらず、
私も見たものを3日も経つと忘れてしまうんですよね・・・。

「どうやったら見てもらえて、覚えていてもらえるのか？」
そんなことを考えながら今日も広告を眺めていました。

デザインよりもキャッチコピーが心に残るのでは？と思い
観察していると色々なコピーがありすごく面白いです。

「日本最大級！」（一番ではないんだなぁ・・・）

「からだにやさしい天然水」（え？）

私が印象に残っているキャッチって何だろう？

やっぱりキャッチコピーと言えば「糸井重里さん」ですよね^^

くうねるあそぶ（食う・寝る・遊ぶ）
これは日産自動車「セフィーロ」のコピーです。

このキャッチコピーだけでも印象的でしたが、テレビCMで
 歌手の井上陽水さんが車の窓を開け、笑顔で
 「みなさ～ん、お元気ですか？」
って問いかけます。
これがまた印象的でした。

さて、糸井重里さんは
他にどんなコピーを作っているのか調べたところ
『印象に残る「糸井重里」作のキャッチコピーランキング』
というのがありました。

http://ranking.goo.ne.jp/ranking/022id/catchcopy_itoi/

これを見て初めて知ったのですが
「愛は地球を救う」も糸井さん だったんですね！

今回は通勤しているときに思ったことを書いてみました。
通勤電車の中でも、色々な発見がありますね。
みなさんも通勤電車を楽しんでみてください。

とてもWebデザイン・DTPデザインの役に立ちます！！

今回は色と形と記憶について、お話しします！

 
秋は紅葉の季節。
季節の変化は色の変化でもあります。

気温が下がってくると、
葉をつけている茎に「離層」という細胞ができて
葉が落ちます。

このとき葉に栄養がいかなくなるので、
葉に含まれていた葉緑素が分解されて、
赤や黄色に変化するそうです。

そして、人の記憶ですが、
人間は見たモノをそのまま記憶するのではなく、
抽象化して記憶します。

なので、色や形などが大事になってくるんです。

昔の壁画なんかをみると、
シンプルな線と色彩で描かれた動物たちがいます。

これは、調べたわけではなく自分の感覚からの考えですが、
古代の人は絵を描くことにより、
狩りの仕方などを次の世代へ伝承していったのでしょう。

生きることに必要な情報を簡略化して描いたのではなく、
あえて特徴しか描かなかったのではないでしょうか？
 

人間の記憶、認知の”輪郭”のようなものが、見えてきますね。
 

画像の保存形式が複数存在することを、
みなさんご存知ですか？

よく見かける拡張子「.jpg」や「.gif」。
これらは生データ（Rawデータ）と言われる
何の処理もしていない画像データを
圧縮した保存形式を表します。

なぜ、生データではいけないのでしょうか？
それは単純明快！サイズがデカイからです！

では、保存形式を変換することで
それぞれの特徴を見てみましょう。

実験!!

JPEG → 変換 → GIF           ： 色数が少ないため粗くなった
JPEG → 変換 → ビットマップ ： 画質はほぼ等しいがサイズが大きくなった

 

■種別	：JPEG	■種別	：GIF	■種別	：ビットマップ
■サイズ	：8KB	■サイズ	：13KB	■サイズ	：97KB

まとめ!!

 

Googleのロゴは今日も新しい。

本日は「敬老の日」です。
もう、ここまでくると、Googleとはまったく関係ないようなデザインの気もしますが、
そこはロゴデザイナーの力量。

ちゃんとGoogleに置き換えて表現しているところが、
素晴らしいですね。

しっかりクリックをすると、
敬老の日の詳細な検索結果が表示されます。

初めてこういった「ロゴ遊び」をご覧になった方へ、
これは「ホリデーロゴ」と言って、Googleが私達に提供する
ひとつのアイデンティティなんです。


そもそも、Googleは世界中で最も利用されている
検索エンジンの一つですよね。

インターネットを活用、又はビジネスで利用する方々にとって、
Googleを使わない人は、まずいないでしょう。
検索することを「ググる」なんて表現された時期もあったほど、
慣れ親しまれている検索エンジンになりました。

皆さんが常に良く見ている、
TOPページに表示されるあのGoogleのロゴは、
1998年にサーゲイ・プリン氏（創業メンバーの一人）によって
デザインされたものでした。

今よりも丸っこい、やわらかいデザインではありますが、
当時のこのロゴと、今でも配色は全く変わっていません。
色々と時代が流れる中で試行錯誤で検討しつつも、

やっぱりこの色がGoogleであるという結論になったそうです。

そのサーゲイ氏が、ホリデーロゴも初めてデザインされているんです。
記念すべき第一号は、「バーニングマンフェスティバル」。

バーニングマン？？
ご存知の方はいますか？？

僕も昨年まで、このフェスの存在すら知りませんでした。
アメリカはネバダ州北部の砂漠で、
一週間かけて行われる壮大なフェスティバルなんですが。
http://burningman.com/

そこで、イベントの大トリとして、
最後 15mを超す木製の人形を、一夜掛けて燃やすセレモニーがあるんです。
砂漠ならではの、ダイナミックなイベントですね。

その夜通しのセレモニーを終えたあと、
朝日が昇ってくる様を憂う人々の写真が、
昨年の「MAC FAN」という雑誌に載っていて、

感動しすぎて、そのためだけに本を購入した覚えがあります。

話はそれましたが、
そんなイベントをロゴに取り入れてみたところ、
ユーザーの反響がもの凄くあったそうで、
それからというもの、イベントをロゴにする風習が生まれたのです。

年間約50種類ものデザインを、デニス・ホワン氏という方を中心に
作成されていますが、
この方は韓国系アメリカ人。
世界中で親しまれるイベントのデザインはよしとして、


日本ならではのイベントも、この方が風情を理解されて
デザインしているんでしょうか？

今回の敬老の日もしかり。
こどもの日、七五三、アトム生誕50周年など・・・
この日本のデザインは、川嶋優志氏が手がけています。

川嶋氏は、アメリカ人以外で唯一のホリデーロゴデザインを
手掛ける方で、子供用のイベントが多い点について、
「グーグルには『子供心を忘れない』という文化がある」と
以前、インタビューに答えていました。

テクノロジーを讃えるロゴも多いですが、
これも理由があります。
「グーグルは新しいテクノロジーを生み出し、様々なサービスを提供している。
分野は違えど、共通するものに敬意を表して、
テクノロジーが生まれた記念日にホリデーロゴを採用している」

ロゴを見て、それに興味が沸けば、
誰でも検索して調べることができます。
今回の「敬老の日」もロゴをクリックしてみると、
知識豊富な検索結果ページへと繋がります。

検索すること自体を楽しくさせ、
それぞれのモチーフに対して感謝と祝いをこめて作成する。
素晴らしいお仕事だなぁと感じます。

そして、お堅いはずの企業ロゴを自由に加工させ、
社員にデザインで遊ばせているGoogleの風土にも、
好感がもてますよね。

著作権などビジネス的な面においても、
過去に一切問題にはなっていないそうです。
Googleの純粋な遊び心に、
皆が賛同したという証拠ですね。

最後に一つコレクションをお見せして、
本日は終わりです！

北京オリンピックの開催中、毎日Googleは違うロゴを
私達に提供してくれました。
著作権うんぬんではなく、僕もGoogleの考えに共感して、
こちらを載せてみたいと思います。
ではでは！

http://www.google.co.jp/holidaylogos99.html
ホリデーロゴが一覧できます。ぜひご覧になってみてください。
 

バナナにはまっています。
バナナしか食べるものがありません。

別に果物が好きなわけではないんです。
バナナは単に食べやすいから…
あとはビタミンCとか取れそうだからという、それだけの理由なのですが、 純粋においしいです。

先日初めて知りましたが、あのバナナの黒いアイツ、
「シュガースポット」という らしいですね。
甘くておいしい証拠☆
そんなバナナをじっと見つめつつ、思ったのです。

「この美しいバナナはもしかして黄金比でできているかもしれない…」

黄金比とはおよそ1：1.618の縦横比のことですが、
よく優れた美術品や建築物に使われている、人間が美しい～と感じるサイズのこと。
そういえばタバコのパッケージとか名刺もそうなんですよね。

で、計ってみました。

バナナを三日月になるように配置し、
湾曲になっている一番出っ張ってるところからハンド（バナナの房がついてるヘタみたいなところ）の部分：ヘタの部分からつま先（？）の部分まで・・・

だいたい1：1.56という結果になりました！ほぼ黄金比ッッ

ついでに身長と横幅（一番湾曲してるところから先端の部分）までも計ってみましたが
これはおよそ1：1.37
大きさによっても変わってきますが、
また機会があればカンペキなバナナを探してみたいと思います。

次回は何をはかろうかなー

先日、『オーラソーマ』を体験してきました。

 ―*― オーラソーマとは？ ―*―
 107本の2層に分かれた色のボトルから、好きな色のボトルを4本選ぶ。
 選んだボトルの色から
 1本目・・・『その人の本質、人生の使命、目的、自分らしさ。』
 2本目・・・『その人の課題となる問題、あるいは自分らしくいられない原因。』
 3本目・・・『今ここ。今自分は問題に対してどうするべきかのヒント。』
 4本目・・・『２，３本目のプロセスを経て自分の未来がどのようになってゆくのか。』
 という、自分の今の状態を理解する手助けをしてくれるカラーセラピー。

『えー、怪しい。なんかうさんくさい気が・・・』
と思う方もいるかもしれません。
私もそう思ってました。ボトルを選んで説明を聞くまでは・・・

まずはカウンセリングの前にオーラソーマってこういうものだよー、という説明を聞いて、
今思っていることや悩み事などなんにも言わずにボトルを選ぶ。
私が選んだボトルの色から今の心理状況の説明が始まる。

1本目・・・『あ、確かにそういうところはあるかも。』
2本目・・・『えぇ？・・・なんでわかるんですかね？なんにも言ってないのに。』
3本目・・・『普段から考えていることですね。いやいや、ホント、なんでわかるの？』

なんだか不思議なくらい、今考えてること。思ってることがドンピシャでした。
どんな内容だったかはここでは言えませんが(/ω＼*)
人間の心理ってこんなにも色に表れるんだなー、と思った時間でした。

こういした『色の心理』ってWebやDTPの世界でも使えますね。
もちろん、日常生活でも。

「温かみ」「やさしさ」を感じさせる色や、「信頼感」「安心感」を与える色、
「情熱」を与える色、「可愛さ」を感じさせる色、「強さ」を感じさせる色・・・
たくさんの色がある。

それをどう使うか？どう組み合わせるか？で作ったものの印象は違ってくる。
色自体の数も多いし、組み合わせたらかなりのパターン数・・・
ですが、「人に与える色の心理」を知るとさらに色選びや色の使い方が楽しくなると思います。

ちなみに余談ですが、今回伺ったオーラソーマの先生は
前職はWebディレクターとしてご活躍されていたそうです。
今もWeb制作が大好きで色の勉強をしながらWeb制作にも携わっているという素敵な方でした。

こんなところでWebに携わる方と出会えるとは！！
これも何かの縁かも？またまた通ってしまいそうです(*´▽｀)♪