• 色って？
• カラーモードRGBとCMYKとは？
• 色の三属性について
• 「色相」
• 「明度」
• 「彩度」
• 具体的な例と配色方法
• 面積比率
• 可読性
• 最後に

1.色って？

まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。

物体色

ノートやペン、果物、印刷物など物体として存在している物の色を物体色といって、こちらは物そのものが色を放っている訳ではなく、吸収される光と吸収できない光の反射によって脳が感じる感覚なんですね。

よって光の反射が無い真っ暗部屋なんかだと(当たり前ですが)物体の色も真っ黒に見えますよね。
感覚なのであなた見えている赤が、他の人には違う赤色に見えていたり…てこれ言い出したらきりないですねw

光源色

一方テレビやパソコンのモニターなどは光源色と言ってガラス面の蛍光塗料に光が当たり、発色している蛍光色のことです。

こちらは部屋を暗くしても電球みたいに自身が発色している為、色の判別が可能ですね。

これは光独特の色であり、インクなどの塗料では表現できない色もあります。
(なので印刷物を作る時はカラーモードの変更が必要なんですね)

カラーモードRGBとCMYKとは？

RGB？

光源色には光の3原色と言われる赤（Red）、緑（Green）、青（Blue）の3色があり、これらは頭文字をとってRGBカラーと呼ばれ、組み合わせ次第で様々な色を再現することが出来ます。このよな光の色の作り方を加法混色と呼び、色を重ねるごとに明るくなり、3つを等量で混ぜ合わせると白色になるという特徴があります。

ちょっとややこしいですが…スポットライトのように沢山の光が集まると白になる！みたいなイメージをすると解りやすいかもしれませんね。
webサイトやディスプレイに写るものは全てRGBカラーで制作されていますXD

CMYK

一方、印刷物など物体色のものを作る場合CMYKというカラーモードに変更しなければなりません。CMYKとはC(シアン/cyan)、M(マゼンタ/Magenta)、Y(イエロー/Yellow)の3色を同量ずつ重ねていくと明るさが下がり、やがて黒になるという減法混色が使われています。こちらは絵の具をイメージすると解りやすいですね。

色の3原色は混ぜると、理論上は黒になるはずなのですが…現実にはにごった茶色になってしまうんですX(   えー！なんで？？とツッコミたくなりますが…
確かに絵の具を混ぜると黒に近づきますが、純粋な真っ黒は難しかった気がします。

その為キレイな黒を作る為にK(黒)が用意されているのです。

先ほどチラッと書きましたが塗料（インク）では光のような明るさは表現出来ない為、印刷する場合はCMYK形式への変換作業が必要になるんですね。
学生の頃は何でCMYKに変換するのか解らなくてRGBのがキレイなのになんでダメなのよーとか思っていましたw

そして色には3つの属性があります。

2.色の三属性について

色には「色相」「明度」「彩度」といったの3つの属性があります。これを色の三属性といって、多くの色の中から同じ色を見つけたり、明るさや鮮やかさの違いを見分けたりできるのです。

1.「色相」

色相とは赤、黄、緑、青、紫など色合いの違いのことを示します。
クレヨンとか色鉛筆とかの基本セットは色相で分かれていますねXD

色から連想される”赤＝情熱＆愛情”など一般的にいだく感覚を意識することで、ターゲットに伝わりやすい配色の参考になります。もちろん全ての人がそう感じるとは言えませんが、より多くの方が共感しやすい配色を選びたいですね;D
では具体的に参考サイトで見てみましょう。

■ 赤(暖色)

赤は、非常に目立ち、視覚誘導する時も認識しやすい色と言われています。
血、バラなどから情熱や愛情・活動的というイメージを連想させます。
またパッと見ても強く認識しやすいことから、怒り・危険・など警告色ともされています。(てんとう虫は敵に危険だと警告する為に赤いんですね;D)

■ 橙(暖色)

橙は夕焼け・柿・炎・オレンジなどを連想させ、陽気・元気・楽しさ・暖かさ・派手・夏・昼のイメージを与えます。赤より主張しすぎず、黄色より主張する、赤と黄色の性質の真ん中に当たるのが橙です。薄めの橙だと人の肌を連想させるので温かみがでますね;D

■ 黄色(暖色)

黄色はオレンジと共に、光を表す色とされ、快活・躍動・希望・幸福・明るさ・あでやか・ほのぼの・まぶしさなど明るいイメージが強いです。また他の色と合わせても認識しやすい色なので目立たせたい時の補色として多様されています。

■ 緑(寒色)

黄色と青の中間色の緑は、感情を抑制する理性的な要素をもっていると言われています。健康・自然・若さ・新鮮・有望・平静・平和・やすらぎ、などをイメージさせるため、エコや教育関連のサイトでよく使われています。

■ 青(寒色)

青は知性的で爽やかなイメージがあるので、冷たさ・爽やか・誠実・静けさ・寂しさ・透明感・清潔などをイメージさせます。海や空など自然の色で青く見られるものも多い為、神秘的な印象もありますね;D

■ 紫(寒色)

昔は紫色の稀少価値が高く、位の高い方しか手にすることが出来なかった為、高貴・不安・不健康・優雅・嫉妬・神秘・ミステリアスなど権力を象徴するようなイメージが強い色です。このことからセクシーな女性を連想する色でもありますね。

■ 黒(無彩色)

黒は他の色を吸収する性質があるので他の色と合わせやすく、高級感、上品、男性的、モダン、クール、不安、などイメージされます。男性ならかっこ良さ、女性ならセクシーさを感じます。webデザインではミニマルな印象を与えたり、かっこ良さを表現する時に多く使われていますね;D

■ 白(無彩色)

純粋・善・平和・敬意・無機質・明るい・無限など汚れていないイメージなので神聖なものという印象もありますね。白は空間を広く感じさせてくれる為、シンプルなサイトやミニマルなサイトでより効果を発揮してくれます。

2.「明度」

その色の明暗の度合いのことで、明度が高いほど白くなり、明度が低いほど黒に近づきます。明度を上げることで写真の色をまろやかにしたり、透明感を出したり…。
“明るさ”と”明度”は別物です。表記がややこしいかなーと思っていたけど…私だけかな。笑

3.「彩度」

彩度とは鮮やかさ・色みの強さの事です。彩度を上げるとよりビビットな色になり、彩度を下げると色あせたような色調になりやがて無彩色(モノクロ)になります。

色調が鮮やかになるので食べ物は彩度が高い方が新鮮で美味しそうに見えますね;D

では今までは色の基本的なことを書いてきたので具体的に配色してみましょう♪
ポップなサイトにしたいから〜、黄色に、赤に、ピンクに、
えーと、彩度は高めにして…背景はビビットな水色に！って…あれ？なんか目がチカチカするX(

どうやらポップにしたいからと言ってポップな色を詰め込むと良いっていう訳ではないようです…。

3.具体的な例と配色方法

面積比率

配色をする時は比率に気をつけるだけでぐっと見栄えが良くなります。

ベースカラー 70%
サブカラー 25%
アクセントカラー 5%

このようにその面積の比率を考えて配色を行うという手法です。
(※厳密に％計算の必要はないです。あくまで目安です。)

このように比率を変え、3色に分類すると色の組み合わせは同じでもその面積によって受ける印象は全く変わってくるのです。
では実際にどのようなものに使われているのか見てみましょう。

どのデザインもおおよそ面積比率が定まっているため、まとまって見えますよね。
このように色をコントロールする為には面積比を考慮して使用面積を決めていけば、漠然としたカラーのチョイスを悩むことも少なくなるんじゃないかと思います。
そしてこの手法はウェブサイトの配色でも非常に有効です。

白×黒×青

黒×黄×白

どうでしょう。シンプルでありながらサイトのカラーははっきりと伝わってくるんじゃないでしょうか。
この3色にはそれぞれ意味があり、全体のイメージを作るベースカラー、それを補うサブカラー、サイトのアクセントにアクセントカラーの3つに分類されます。

でもこれだけじゃ色が足りない…って時もありますよね。
そうゆうときはそれぞれのカラーを分割し、色を増やしちゃいましょう。
必ず3色でなければいけないということでは無いんです。

ここで注意することは色を分割し過ぎてベースカラーの1色がサブカラーより少なくなってしまわないようにしましょう。
あと色を増やせば増やすほどまとめるのが難しくなるので、配色に自身が無い人は無理に多様しなくても良いんじゃないかな〜と思いますX(

下記のサイトはアクセントカラーを黄緑×オレンジ×黄色の3つに分けています。ベースとサブカラーが淡い色なのでよりビビットに感じますね。

この辺の詳しいことはこちらスライドが解りやすくまとめてくれていますので参考にどうぞ〜:D
色彩センスのいらない配色講座～色は理論的に説明できる～

可読性

可読性とは色によって文字が読みやすいかどうかを表す性質です。
基本的には白×黒のように背景と文字の明度の差が大きいと可読性が高いと言われています。

このように白×黄色はほとんど見えませんX(逆に黒と黄色ははっきりと文字が見え、認識しやすいです。
最も読みやすい組み合わせは白×黒といわれていて、その他の色は可読性は高くとも、読みやすさでは少し劣ってしまします。
ブログなどユーザーが文字を読み進めたり長い間webサイトと関わるのなら可読性にも注意しなければなりませんねX(

最後に

webデザインを行う上でデザイン、システム、設計…etcやることはいっぱいありますよね。その優先順位が配色1番にやりますとか、カラーからデザイン起こしますって人は少ないかと思います。あくまで色はデザインを補うためのだと思いますX(
しかし、最初に目に飛び込んできた瞬間に人のイメージはできあがります。それがたとえほんの一瞬だとしてもぼんやりこんなイメージだったなぁと思い出せるのはカラーが一番先なんじゃないかなと思います。このことからカラーはブランドイメージを左右する重要な役割をもっているんじゃないでしょうか。
また、色は心理的に影響を大きく与えるので、こんな印象をもってもらいたいと思った時にカラーの選択でイメージを操作をできるんですね。

そして色の基本について書いてみましたが、あくまで基本ということで必ずしもこの通りが正しいという意味ではありません。基本を知って、理論的に理解することも大事だと思いますが、基本を理解しつつ自分の感覚やセンスで応用していきたいと思いますXD
偉そうなこといってますが私もまだまだ配色の勉強しなくちゃ…。

今回も長くなってしましましたが…最後まで呼んで頂きありがとうございました！

トップへ

• はじめに
• 自分で素材を書いてみる
• Illustrator
• Photoshop
• ペンタブレット
• イメージスキャナ
• イラストを使ったレイアウトパターン
• 1.ビジュアルを分離する
• 2.全面ビジュアル
• 3.ビジュアル要素と情報を融合
• 手書き風な素材
• フォント(フリー)
• イラスト素材(フリー)
• 手書きアイコン(フリー)

はじめに

ソフトはillustlaterとPhotohopで解説していますがもっていない方はフリーソフトでも感覚を掴むことは出来ると思います。
ベクター系なら→INKSCAPE、ビットマップ系ならこちらが参考になるかもしれません:)
ベクター？ビットマップ？って方は後ほど記載してますのでとりあえず見て見て下さい:D

自分で素材を書いてみる

デジタルイラストを制作するには下記のいずれかが必要になります。

• Illustrator(ベクター系ソフト)
• photoshop(ビットマップ系ソフト)
• ペンタブレット
• イメージスキャナ

Illustratorやphotoshopはちょっとお値段びっくりしちゃうかもしれません…
先ほども記載しましたが、がっつり使わない方はフリーソフトを探してみるのも手だと思います。

Illustrator

Illustratorとはベクター系グラフィック制作ソフトです。イラストを書いたり、ロゴを作ったり、ポスターを作ったりすることができます。ベクター系は点や線の座標や距離等を数式的に保持しているため、拡大、縮小など形を変形しても画像が荒れません。データ量も小さいので、動きの多いFlashサイトではベクターデータがよく使用されていますね。下部画像のように均等に配色されたイラストを得意とします。

イラストレータは主にペンツールを使って書いていきます。点と点を結んで線を書いていくという感覚なのですが、初めてだとこの感覚を掴むのが難しいみたいです。
これは本当に慣れだと思うので慣れるまでトレース(写し絵みたいなもの)するしかないんじゃないかな。
下記サイトは動画で解説してくれているので解りやすいと思います。
動画マニュアル.com

そしてイラストレータには鉛筆ツールというものもあります。
こちらは先ほどのペンツールとは違い、マウスのドラッグ軌跡がパスとして生成されます。なので割とマウスで感覚的に簡単なイラストがかけてしまいます。
マウスで書くとガタガタになるんじゃ…と思うかもしれませんがイラストレーターはガタガタしてても自動でなめらかな曲線にしてくれますXD

簡単なイラストなら鉛筆ツールで書いてしまうのも良いですね。
複雑なことは出来ませんがこれはこれでかわいいかなぁと思っています(笑)

さらにイラストレータについて詳しく知りたい方は下記サイトが参考になるかと思いますXD
webデザインレシピ：これからIllustratorを始めてみようという人のための基本操作とかいろいろ

photoshop

photoshopはビットマップ形式の画像を主に扱うソフトウェアです。ビットマップ形式とは画像を色のついたドットと呼ばれる点の羅列・集合として表現するデータ再現方式のことです。
拡大するとドットの集合であることが解りやすいですね。

このドットはピクセルと呼ばれ、白黒(2値)の画像からフルカラー(１６７７万７２１６色)までの色数を指定することが出来ます。
１６７７万７２１６色ってなんでこんな中途半端な…て思うかもしれませんがＲＧＢの各色を２５６階調（黒から各ＲＧＢまで）を３色（ＲＧＢ）掛けあわせて（２５６×２５６×２５６）１６７７７２１６色ということみたいです。
平均的に人が識別できる色は１７００万色と言われているのでこれ以上は必要無いのかと思います。

メリット：写真の加工やグラデーションの作成、複雑な色合いが出せる。

デメリット：拡大すると画像が荒れ、一度縮小してしまうと元の大きさに戻りません。

ペンタブレット

ペンタブレットはWACOMが有名ですねXD
ちょっと慣れが必要ですが慣れると紙に書いてるような感覚で繊細なイラストがかけます。使い方によって色々な表現が出来るのでイラストを本格的に始めたい方におすすめですXDお値段ピンきりですが、私はサイドバーに置いてある一番安いものを使っています。
エヴァンゲリオンのキャラクターデザインをやられた貞本義行さんもペンタブらしいですねXD

ここまで書けたら相当楽しそう…

イメージスキャナ

イメージスキャナはコンピュータに画像情報をビット単位に読み取る機械装置のことです。例えば300dpiなら1インチを300の点の集まりとして読み取るので、この値が高ければ高いほど原画に近い精細な画像ってことになります。
イラストを書かれる方は下書きをスキャナで読み込んでIllustratorやphotoshopで仕上げていく方が多いみたいです。

イメージスキャナはイラスト以外にも、写真だったり、文字だったり、色々使い道がありますね。

以上4つ紹介しましたが、自分で素材を書くと愛着も沸きますし、自由度とか表現力も上がります。何よりサイトに個性を持たせる時に有効ですね。

イラストを使ったレイアウトパターン

どんなwebサイトにするってイメージがわかなければいくら絵が描けてもデザインに落としこむのは難しいですよね。どこまで画像で作ろうかなーとか、ここにイラスト入れたら見にくくなってしまうんじゃないかなーとか色々悩みます。
そうゆう時は沢山のサイトを見て、こうゆう見せ方もありだなーとかインスピレーションを刺激してみると良いかもしれません XD

1.ビジュアルを分離する

イラスト部分とテキスト部分を分離させると、見やすく、イラストのイメージも損なわ無いビジュアル表現が可能です。このタイプは企業サイト、個人、EC、などジャンルを問わず多くみられますね。方法は情報を右にまとめる、ボタンやバナーはイラストで統一、など色々あります。

【参考サイト】

• レ・メルヴェイユーズ ラデュレ：http://www.lm-laduree.com/
• ハンコでアソブ　http://hankodeasobu.com/
• minne（ミンネ）：http://minne.com/

2.全面ビジュアル

イラストの世界観をダイレクトに伝える為には全面ビジュアルで表現する方法も有効です。

【参考サイト】

• 絵本作家：谷口智則http://tomonori-taniguchi.com

3.ビジュアル要素と情報を融合

ビジュアル要素の中に情報を入れる方法もあります。表現の自由度はぐんと上がり、ビジュアルのアイテム(本、ビル、紙 etc…)を使って情報を伝えたり、媒体と絡めつつ面白い表現ができるのではないでしょうか。

【参考サイト】

• コスモホーム株式会社：http://www.cosmohome-co.com/
• 森本千絵「goen゜」：http://www.goen-goen.co.jp/index.html#goen
• OPENING CEREMONY JAPAN：http://www.openingceremonyjapan.com/

この他にも表現方法は沢山あるので手書き系のまとめサイトを見てみて自分にあったものを探してみて下さい。

• ズロック：http://www.zzrock.net/
• DesignWalker：http://www.designwalker.com/2008/11/sketchy.html

手書き風な素材

ここからは手書き風な素材を紹介していきます。
※ライセンス確認はご自身でお願い致しますね。

フォント

メニューに使ったり、ポイントで使ったり、個性的だったり、優しい印象だったり…そんな素敵な手書きフォントを紹介しますXD

日本語(フリー)

ふい字

たぬき油性マジック

あんず文字

英語(フリー)

Sketch Rockwell

Two Turtle Doves

Sketchbook

この他にも沢山の方がまとめてくれているので、こちらもチェックしてみてくださいね！

• フリーで使えるいい感じの手書き風フォント特集（日本語も）
• フリーハンドなフリーフォントを集めた「45+ Most Wanted Beautiful Free Hand Drawn Fonts」
• 漢字も使える手書き風の日本語フォントのまとめ

イラスト素材(フリー)

イラストAC

手書きアイコン

Free Hand Drawn Doodle Icon Set for Bloggers

Natsu Icon Set

Ramshackle – Drawn Icons

↑こちらは私がいつも使っている自作アイコンです。
商用個人問わずフリーで使用OKなのでよかったらどうぞ〜(無断配布はダメです)→ダウンロード

この他のアイコンまとめです↓

• 手作り感がステキな手書き風無料アイコンまとめ
• 19のスケッチ風手書きアイコンセット | AUTHORITY SITE

以上ざっくりとまとめさせて頂きました。
手書き系のサイトに挑戦する方の参考になれば嬉しいです。
最後まで見ていただいてありがとうございました〜:D

トップへ

• はじめに
• 良いデザインって？
• 最良の方法？
• 1.コンテンツの目的
• 2.ターゲット
• 3.これらを組み合わせた例
• デザインの基本
• 1.書体について
• 2.ジャンプ率
• 3.ホワイトスペースを生かす
• >ホワイトスペースで情報を分割する
• >ホワイトスペースで囲む
• >ホワイトスペースにあえてはみ出す
• 最後に

はじめに

デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか。視覚から受ける印象が多いのでつい制作する時も感覚でデザインしたくなってしまうんですが、実際はもっと戦略的なものです。

※注意※
文章上断定的な表現が多いかと思いますが、必ずこの行程が正しいという意味ではありません。全ての方がそう感じるとはいいきれないですしね…X( あくまで参考として見て頂けたら嬉しいです。

良いデザインって？

何かを配置、装飾する行為はそれだけで何らかの意味を持たせることになります。
なぜこのレイアウトなのか、なぜこの配色なのか、それぞれの「目的」に合わせた装飾やレイアウトが必要になります。
つまり「良いデザイン」とは必要な要素を「目的」に合わせて最良な方法で配置、装飾することといえます。

最良な方法？

そしてその最良な方法を導きだす為には「誰に」向けて「どのような」ものを「どんな手法で」デザインするのか、そのための「設計」が必要になります。

なのでデザインとは単にビジュアルを装飾するだけでは無く「設計」も含めた行程そのものということになります。

そうは分かってても…漠然としすぎててどうやって詰めていったらいいかわからないですよねX(
では今からその詰め方を説明していきます。

１.コンテンツの目的

まず、webサイトを立ち上げる時に目的が無く作る人はいないと思います。
「ブログを始めたい」「ブランドサイトを作りたい」「プロモーションサイトにしたい」「web小説を書きたい」….etc こういった目的があるはずです。
そして誰もがユーザーにその目的をわかりやすく伝えたいと考えています。
その為に、もっともユーザーに情報が伝わりやすいレイアウトにしなければなりません。
でも伝わりやすいレイアウトって？

まずはコンテンツの量とユーザーが関わる時間をみてみましょう。

どうでしょう？
情報量が多いものは上に、少ないものは下に。
ユーザーがそのコンテンツと関わる時間が長いものは右に、短いものは左にグラフでまとめてみました。
情報量が多いものがユーザーの滞在時間が長いに決まってるじゃん！と思うかもしれませんが、実はそうではないんですね。
リファレンスや辞書のようなものは情報量は多いですが、ユーザーが1つ1つじっくり見ていく訳ではなく、目的の情報を検索すると離脱していってしまいます。なので「情報量」は多い「ユーザーとの関わりは少なめ」の左上に配置しました。
つまりこの場合(目的の情報にたどり着きやすくする)アクセス性と(たどり着いた情報を読みやすくする)可読性の高いレイアウトが求められるのです。

電子書籍(小説)

電子書籍(小説)のように読み物を主体とした内容のものは、ユーザーは長時間そのコンテンツと関わる事になります。そして小説のようにストーリーのあるものは、パラパラと飛ばしたりせず、最初のページから順番に読み進めていきますよね。
その為1ページ1ページレイアウトを変えたりする必要が無く、文章を読む際に気が散らない可読性がもっとも重要とされたレイアウトが求められます。

ブログ

ブログはユーザーが必要に応じて一部の情報を読むだけなので持っている情報量に対してユーザーが関わる時間は短いです。ブログに求められるレイアウトは項目へのアクセスのしやすさ、多くの情報の中から必要な情報にたどり着けるナビ、どこからどこまでが一つの記事なのか、わかりやすい見出しが求められます。
よって新着記事と過去記事を分割し、検索しやすくした2カラム(もしくは3カラム)のレイアウトが多く見られるんですんね。

ブランドサイト

新製品の発売など、ビジュアルをメインにした情報を告知するためのブランドサイトは、コンテンツの総量は多くなく、ユーザーが関わる時間も短い。そのため、必要なイメージがすぐに伝わるレイアウトとイメージが求められます。

このようにコンテンツのとユーザーの関わりによってレイアウトは変化します。まずは自分のやろうとしているものが、ユーザーとどのように関わるのか考えてみることで何を優先したレイアウトにするべきなのかが見えてきます。

2.ターゲット

上記の方法でどのようなレイアウトにするべきか。
そこで「誰に」「何を」「どのように」「どんな手法」で伝えるのか考える必要があります。そしてこれらの要素を適切に組み合わせられたものが良いレイアウトということになります。

誰に

まずはその情報を主に誰に伝えたいのか明確にしなければなりません。年齢層は高いのか、低いのか、男性なのか女性なのか、ターゲットを絞りましょう。

何を

次にそのターゲットに「何を」伝えたいのか考えます。技術系の情報なのか、長編の物語なのか、写真なのか、商品なのか　etc…

どのように

どのようにとは方法または様子についての表現です。知識を提供したり、見ることから楽しみを与えたり、情報通じ共感してもったり、にぎやかさ、高級感…などが挙げられます。

どんな手法で

そして最後にどんな手法(物事のやり方や技法など)で表現するのか決めます。先ほどやったコンテンツの目的を考える方法を使うと答えが導きやすいですね。

ではではこれらを組み合あせてどのようなデザインになるのか見てみましょう。

3.これらを組み合わせた例

ワコールのプロモーションサイト

http://www.wacoal.jp/fitformylife/concept.html

女性下着のブランドなのですが、女性がもっとも幸せな時間を表現することで下着の心地良さや精神的な気持よさも伝わってきます。誰に→女性、何を→物語、どのように→(女性からの心地良さ、幸せ、リラックス等)共感、どんな手法で→わかりやすく明快に。ブラウザ全体のデザインですがあえて中央に小さくまとめ余白を使うことでゆったりとした雰囲気が伝わってきますね。

「Web Design Recipes」ブログサイト

…http://webdesignrecipes.com/

こちらは人気ブログ「Web Design Recipes」です。誰に→webデザインに興味のある男女、何を→webデザイン情報、どのように→知識と楽しみ(親しみやすさとか、小難しい印象を感じさせない雰囲気)、どんな手法で→可読性(見出しが解りやすく、コンテンツの境界がはっきりしている etc…) 情報サイト＝小難しいとかとっつきにくいっていう雰囲気を感じさせない優しいデザインだからこそビギナーさんでも入り込みやすいのですね。(内容もビギナーさんに優しい解説になってます。)

このような感じでターゲットに狙いをしぼったデザインを行うことで、ユーザーに目的を明確に伝えることができます。
ターゲットの求めるデザインがぴったりくるから内容も伝わりやすいのですね。
もちろんユーザーはこの”デザインはこんな意味があって…”とかそこまで意識してないかもしれません。
しかしデザイナーはその無意識を意識的にデザインするというか…(上手く言えてないですねw)見やすいって思ってもらうために1ピクセルの修正を行ったり、楽しいって感じてもらうために色設定に時間をかけたり…そういった細かい気遣いを積み重ねていくしかないんじゃないかと思いますXD

デザインの基本

では、今まではデザインの考え方について書いていましたがここからは制作する時の最低限知っておくと良いんじゃないかなーってことをまとめてみます:D

1.書体について

書体の与える印象はフォントによって大きく異なります。
明朝体は横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山（ウロコ）がある書体です。ゴシック体は横線と縦線の太さがほぼ同じで、ウロコが（ほどんど）ありません。(英字だとセリフって呼ばれる部分ですね)

明朝体は「ウロコ」によってメリハリが付き、「画数の多い文字」あるいは「形が似た文字」であっても認知しやすくなるため、読みやすさに優れています。

一方ゴシック体はパッと見たときに認識しやすい為に目立ちやすいといわれています。

書体の太さや細さ(ウエイト)によっても印象は大きく変わります。
ウエイトが太いと目立ちやすく力強いイメージになります。

ウエイトが細いと静かで女性的なイメージが強くなります。

この他にも文字のサイズによって強調したりすることができますよね。

2.ジャンプ率

「ジャンプ率」とは、本文のサイズに対するタイトルや見出しサイズの比率のことです。本文に比べてタイトルの比率が大きければ大きいほどジャンプ率が高いと言い、比率が少なければ少ないほどジャンプ率が低いといいます。

ジャンプ率が高いと勢いとか躍動感がでて文字に目がいきやすくないります。
この例だと作品より文字が目立っていますね><

ジャンプ率が低いと視線が分散されるため、ゆったりとした雰囲気になります。
この例だと文字より作品に目がいきやすくなりますね。

このようにジャンプ率をコントロールすることで、どこを最初に見て欲しいのか視線の誘導を行うことが出来ます。

そして、文字の大小だけじゃなくスペースを生かすことで強調することも出来ます。

3.ホワイトスペースを生かす

ホワイトスペースとは文字や画像などが何も記されていない余白部分のことで、この余白を生かすことで文字サイズを変えることなく目的の箇所を目立たせることが出来ます。

・ホワイトスペースで情報を分割する

例えばタイトルと文字が同じ大きさの場合…どれがタイトルか分かりづらいですよねX(
雰囲気は今の感じで、タイトルだけ差別化できないかな〜って場合はホワイトスペースを使ってみましょう！

どうでしょう？タイトルの周りにホワイトスペースを作ってみました。
文字の太さも大きさも変えて無いのにタイトルに目がいきますよね。
実は左のレイアウトだと脳は画像(下左)のように①と②にブロック分けしてしまっているために判別しずらいのです。
しかしタイトルと本文の間に余白があることでタイトルと本文が分割してブロック化され、識別しやすくなります。

では次に上下左右、均等にホワイトスペースを入れてみます。

・ホワイトスペースで囲む

情報が中央にまとまるため(当然なんですが)視線も中央に集中されます。
右下画像のようにボックスができるので脳はひとまとまりの情報と認識しやすく、より印象づけることができました。
ホワイトスペースは上品さを残しつつ、画面に締まりをつけることが出来ますね

さらに①タイトルと②本文、③写真に余白を与えているため3つにブロック化されてそれぞれの要素が別の意味合いだと認識しやすいです。

なるほど〜！じゃぁ、ホワイトスペースを使う時はその空間にはみ出したりせずにきれいに整列させればいいのね！って思うかもしれませんが、そうゆう訳でもありません><

・ホワイトスペースにあえてはみ出す

下記画像の例をみて下さい。

先ほどの例にイメージ要素を使いたいなーって場合、上記の考えだとこのようになりますよね。

均等のホワイトスペースで、文章もきちんと整列されてまとまってはいるんですがなんか面白みが無いです…。ここはあえてポイントにする為にホワイトスペースにはみ出してみましょう。

どうでしょうか？まとまりからあえてはみ出ることで視線が自然とはみ出た部分に注目してしまいます。上手くアイキャッチ出来たのではないでしょうか！画面も前より面白みが出ましたね。
このようにキレイに整列させるだけではなく、目を惹きつける要素をもつこともデザインでは大切なのではないかと思いますX(

最後に

今回は触れませんでしたがデザインするにあたって、この他にもカラーや図版率(こちらは次回やりたいです！)…センスとか美的感覚も必須になってきます。感覚的な部分はこれ！っていう正解が無いので学ぶのはなかなか難しかったり…この部分がデザインって難しいとか、才能が無いから無理って懸念されやすいのかなーと思いますが…X(
でも沢山サイトを見たり、作ったりしていけばデザインセンスは磨くことができると思います！>< 下記のような参考サイトには沢山の素晴らしいデザインが載っています。

• Web Design Clip  http://www.webdesignclip.com/
• straightline bookmark  http://bm.straightline.jp/
• WEBデザインの見本帳  http://www.web-mihon.com/

そして、デザインは基本原則を全て守っているから良いデザインだ、という訳ではないと思います。目的に応じて時には枠を飛び越えたり、遊びを入れてみたり、 あえてルールを打ち壊すというか…そういったエッセンスの部分も必要だなーと思いますX( ただ、基本を知ってないとそういった応用も出来ないと思いますので、やはり基本は大切ですね＾＾
デザインをする時に考えなければならないことは最低限あると思いますが、そのプロセスやエッセンスが違うからこそ色々なデザインが生まれ面白いものが誕生していくんだと思います＾＾じゃなきゃみんな同じになってしまいますもんね！

私は基本原則を知ることは大切ですがその枠にとらわれすぎず、応用していけるようになりたいなーと思っておりますXD
最後まで見てくれてありがとうございます＾ω＾

トップへ

by：fweez

• まずはじめに
• とりあえず用意するもの2つ
• HTMLの基本
• HTMLとは？
• 1.DOCTYPEの宣言
• 2.基本的なタグ
• 3.<body>の文書構造
• CSSの基本
• CSSとは？
• 1.CSSの読み込み方法
• 2.指定パターン
• 3.marginとpaddingの違い
• 4.ブロック要素とインライン要素
• 応用してwebページを作ってみる

まずはじめに

一口にwebデザインといっても色々なことがあると思うのですが大きく分けて”ビジュアルデザイン(見た目)”と”技術的なこと”の二つに別れるかと思います。
今回は”技術的なこと”を紹介しています。

最後にこんな感じの↓サンプル用意しました：) とりあえずこれを知っておけばこのくらいは出来るんだなーとイメージもってもらえたら嬉しいです♪

とりあえず用意するもの２つ

Dreamweaverが無くても大丈夫！まずはこの２つを用意してください。用意するっていっても無料で今すぐ用意できます。

1. テキストエディタ(メモ帳)
   windowsは「スタート」→「プログラム」→「アクセサリ」→「メモ帳」
   macは”CotEditor”をダウンロードしてください(もちろん自分の使いやすいエディタでもOK)
2. ブラウザ
   ブラウザとはインターネットをするソフトです。今まさに開いているこのソフトがブラウザです。種類はInternet Explorer(IE)、Safari、firefox、etc…。

※拡張子が非表示の設定をしている方は表示する設定にしてください
では早速HTMLを書いていきます。でもその前にHTMLって何？

HTMLの基本

HTMLとは？

HTML

HTML(HyperText Markup Language)は、webページを構成する言語の一つです。コンピュータがその文書の構造を理解することで、検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。

XHTML

XHTML(Extensible HyperText Markup Language)はHTMLを、XMLに適合するように定義し直した言語です。HTMLと違い、タグの省略が許されない、空白は&nbsp;と記述しなくてはいけない、などとより細かな規定ができました。XHTMLは文書構造の指定に特化しており、スタイルやレイアウトの指定はすべてCSSによって行います。

HTML5

HTML5はHTMLの5 回目に当たる大幅な改定版です。HTMLやXHTMLでは複雑だった処理(例えば動画や音声、グラフィックの描画など)がより簡単に出来るようになりました。(正式な勧告がまだなので今回はXHTMLで解説していきます。HTML5については私もまだ勉強中です><)

1.DOCTYPE宣言

DOCTYPEの宣言とは文書がHTMLであり次にはじまるHTML文書（HTMLソース）がどのバージョンを利用して、どのDTD（文書型定義）に従って記述されているかをブラウザに伝えるためのものです。記載場所は文頭になります。

HTMLのDOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTMLのDOCTYPE宣言

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5のDOCTYPE宣言

 <!DOCTYPE html>

さらに細かいバージョンの宣言はGIFアニメ工房さんがまとめてくれています。

2.基本的なタグ

HTML文章（HTMLソース）は “<” と” >” で囲まれたタグを使って書いていきます。”<タグ名>”を“開始タグ”、”</タグ名>”を“終了タグ”と呼び、開始タグと終了タグの間に内容を入れます。

使用例：<タグ名>内容がここに入ります</タグ名>

基本的開始タグと終了タグはセットなのですが中には下記のように終了タグが無いものもあります。

<br /> , <img src="sample.gif" alt="画像URL" />

基本的なタグ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
表示される部分です。内容が入ります＾ω＾
</body>
</html>

まず上記をメモ帳にコピーして貼りつけてみて下さい。(細い意味は後ほどやります)
「index.html」という名前で保存してブラウザで開きます。

こんな感じで開ければ成功です。一瞬でwebサイトが出来てしまいました＾＾
沢山英語(XHTML)を書いたのに表示されてるのはたった一行？と思うかもしれませんが
ブラウザはbody〜/bodyの中に書かれていることを内容として表示します。

じゃぁ他はいらなんじゃないの？><
そういう訳にもいきません。

例えば…4行目の<meta http…. は文字コードの指定になります。
文字コードを指定することでコンピュータに何の文字で書いているか伝えることが出来るため、文字化けを防ぐことが出来ます。
ブラウザで見えない部分もコンピュータはちゃんと正確な情報を理解しているんですね。

※文字コードの記述は<head>内に記載しなければならないもので、<title>より上に記載して下さ い。(<title>タグの後などに文字コードを指定すると、タイトルがどの文字コードで書かれているかをブラウザが判別することができないみたいです。)

3.<body>の文章構造

では続いて<body>に文章を入れてみましょう。

<body>
<h1>webデザインはじめました＾ω＾</h1>

<h2>HTMLとは？</h2>

<p>HTML(HyperText Markup Language)は、
webページを構成する言語の一つです。<br />
コンピュータがその文書の構造を理解することで、
検索エンジンがウェブページの構造を把握して解析したり、
ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように
表示することなどが可能になります。</p>
</body>

h1は大見出しという意味なのでタイトルをいれています。h2はh1の中の見出しなのでサブタイトルみたいなものを入れてます。
見出しはh1〜h6まであるので階層的に使いましょう。
最も重要な見出しがh1であり、最も重要でないのがh6とされています。

先ほど同様保存し、ブラウザで見てみます。

どうでしょう？h1が一番大きく表示されていて、h2が次に大きく表示されていますね。今回”webデザインはじめましたこ”が一番重要なのでh1に入れ、コンピュータもh1が一番重要だと理解してくれています。
このように、タグと内容の意味が一致していることを正しい文書構造で書かれているというんですね。

改行について
ついリターンキーなどで改行したくなりますが必ずbr /で改行を記述するようにしましょう。改行はbr /で行います。

でもh1やh2は特に改行のタグを入れてないけど勝手に改行されてますよね。
h1やh2などの見出しはブロック要素と呼ばれ、ボックスがブラウザいっぱいに広がり、改行されるのです。(こちらは後ほど詳しく説明します)

もちろんこの他にもタグは沢山あります。
やりたいことによって必要なタグを調べ、実践していくと色々なタグが覚えられます。
HTMLタグボートさんのようなタグ辞典を見てみるのも良いと思います。

このようにXHTMLは主に文章構造を形成していくのですが、それだけじゃ見た目がこざっぱりしすぎてて見づらいですよね。そこでデザインやレイアウトはCSSで指定することが出来ます。

CSSの基本

CSSとは

CSSとはCascading Style Sheet(カスケーディングスタイルシート)の略で、スタイルシート言語の１つです。スタイルシートはWebページのデザインやレイアウトを定義するもの。CSSを使うと様々なものに色を付けたり、枠を付けたりデザインすることができます。

CSSを使うメリット

• 自由度の高いデザインができる
• 読み込みが早い
• 軽い
• 更新しやすい…etc

CSSはボックスをパズルみたいに組み立ててレイアウトしていくと考えるとわかりやすいかもしれないですね。

1.CSSの読み込み方法

直接htmlファイルに読み込む…

<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
ここにCSSを指定
-->
</style>
</head>

外部cssから読み込む…

<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>

2.指定パターン

<p>に入る文章の文字サイズを指定します。
(pのフォントサイズは10ポイント)

p {
font-size : 10pt;
}

pと書いている部分を セレクタ font-sizeの部分を プロパティ そして、10ptの部分を 値 と言います。

文字カラーを変える

p {
color : red;
}

背景に画像を入れる

p {
background-image:url("画像URL");
}

マージン(間隔)を入れる

p {
margin:10pt;
}

横幅を100pxにする

p {
width:100px;
}

同じセレクタに複数指定したい場合は下に追加して増やしていくことが可能です。

p {
font-size : 10pt;
color : red;
}

複数のセレクタに同じプロパティと値の指定をしたい場合は”,”で区切り、追加する事が出来ます。

body , p {
font-size : 10pt;
color : red;
}

3.marginとpaddingの違い

CSSにはmarginとpaddingというものがあります。どちらも間隔を示すのですが、marginはボックスの外側の間隔を指定し、paddingはボックスの内側を示します。

4.ブロック要素とインライン要素

ブロック要素とは

ブロック要素とは、文書の骨組みになる要素です。(見出し、段落など)これらは、特にスタイルを指定しない場合、幅を画面いっぱいに取り、前後が改行されブロックを作り出します。ブロック要素の中にはブロック要素や、インライン要素を含む事が出来ます。
※一部のブロック要素（<h1>〜<h6>、<p>、<address>）は含むことが出来ないものもあります。

p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset
hr pre

インライン要素とは

インライン要素は行の中の文字に論理的な意味を持たせたりします。(リンクや文字の強調など)行の一部として扱われるので、要素の前後には改行は入りません。インライン要素の中にインライン要素を含むことはありますが、インライン要素の中にブロック要素を含むことは殆どありません。

b bdo big cite code dfn em i kbd label q samp small span
strong sub sup tt var

先ほどHTMLの基礎でh1が改行されていたのはブロック要素だったからなんですね。

あれー。こうインライン要素って結構出来ないこと多いなぁ〜困るな。って場合はインライン要素をブロック要素に変えることが出来ます。

• display: inline;でインライン要素に変更
• display: block;でブロック要素に変更

※ただし、あくまで見た目が変更出来るだけでHTMLの仕様によって定義されているのは変わらない。

8.idとclass

特定のHTML要素全てにCSSを適用させるのではなく、特定の要素に指定したい場合は「id」と「class」を使います。

記述方法

id使用例

<p id="sample">idを使った例</p>

p# sample { color: red; }

class使用例

 <p class="class名">クラスを使った例</p>

p. sample { color: red; }

ルール

「id」は、ページ中で一つに特定できる場所を示すために使われます。 なので、1ページ中に1度しか使えません。
「class」は、場所を一つに特定する役割はないので、ページ中に何度でも登場できます。

• id ページ中に1度しか登場しない
• class ページ中に何度でも登場する

応用してwebページを作ってみる

ではでは今までのHTMLとCSSの基礎を使って実際にwebページを作ってみましょう。
簡単なサンプルを用意したのでダウンロードして参考にしてみて下さい＾＾

HTMLとCSSの重要どころをざーっとまとめてみましたが
自分自身結構曖昧だったので勉強なりました。長くなってしまったけどここまで読んでくれた方ありがとうございます。＞＜

トップへ

by：dancing+bambi

• 補正とは？
• 画像劣化について
• 人物補正3つのテクニック
• step1.明るさ・コントラスト
• step2.トーンカーブ
• step3.部分補正
• -応用編-色黒美人を色白美人に

補正とは？

意味としては”足りないところを補って、誤っている部分を正す”みたいな感じです。
せっかくとった写真、もうちょっとこうだったらなぁ〜っていうのを直していきます。
そしてまず初めに画像劣化についてかるく知っておきましょう。

画像劣化について

JPEGデータは補正をすればするほど劣化していってしまいます。
つまり今からやろうとしていることは画像を劣化させてしまう行為なんです。
といっても補正したいので、できるだけ劣化しない方法をご紹介します。

画質の劣化の確認は「ウインドウ」→「ヒストグラム」で確認出来ます。

初めはこんな感じで真っ黒なのですが加工をすると右のように白く線が入ります。これをトーンジャンプといって画像が荒れている状態を示します。できるだけトーンジャンプは避けたいので下記のことを頭に入れておくといいです。

• 加工をするとき→「イメージ」「モード」から8bit/チャンネルから16bit/チャンネルに変換して、最後に8bit/に戻すと劣化が少なくなる。
• 保存時→最高画質で保存すると劣化しない。(その他の画質だと劣化します。)
• 再加工→出来れば避ける。どうしてもな場合は初めにTIFFやPNGなどの劣化のない形式で別途保存してから加工し、最後にJPEG形式で保存すると良い。

web上で使用する画像だと解像度が72なのであまり気にしなくても良いですが
紙媒体は解像度350以上必要なので画像劣化に気をつけたいです。
どっちにしろ必要以上に加工するのは避けた方がいいですね。

人物補正3つのテクニック

これが元のサンプルです。
できるだけ美女を例にセレクトしてみました＾＾w

Step1.明るさ・コントラスト

おそらくもっとも簡単な補正方法です。一瞬でできます。
サンプルの写真だと少し暗いので明るくしてみます。
「イメージ」→「色調補正」→「明るさ・コントラスト」を選択。

明るさ→20
コントラスト→30
と入力します。

【Befor】

【After】

【比較】

全体的に明るくなり、人物が引き締まって見えます。Afterの女の子は明るい笑顔に見えますよね！持っているハートのクッションも、前より目立ってガツンと目に飛び込んできます。

たったこれだけで、簡単に補正ができちゃいました＾＾

しかし簡単故に細かい調整が出来ません…。
白トビ、黒つぶれになりやすいく、画像の劣化も激しいのです…。
ではどうしたら？そこでトーンカーブを使ってみましょう。

Step２.トーンカーブ

トーンカーブは画像の階調を補正するためのツールです。
階調とは色の濃淡の変化のことで、濃淡変化の滑らかさを意味します。階調が多ければ多いほど、色彩は滑らかに表現できるということですね＾＾
(よく2階調と耳にしますがこれは白と黒の2段階しか濃淡がなく、モノクロっていうことですね。)

こちらが今回のサンプルです！

とってもかわいいんですが、やはり少し暗い…。そのため肌が生々しく見えてしまい透明感があまり感じられません。(この写真をけなしている訳ではないですよ！)

なので先ほど同様明るく元気なイメージに変えようと思います。
今回は「イメージ」→「色調補正」→「トーンカーブ」を選択して下さい。

このようにトーンカーブは縦軸と横軸からなるグラフのような形になっています。
横軸（入力値）が元の明るさで縦軸（出力値）が変更後の明るさで、変更前は入力と出力が同一のため４５度に傾いた直線になります。

この線をカーブ状に変形させることで画像の階調を調節します。
トーンカーブは明るさ、コントラストの調整、さらにＲ、Ｇ、Ｂを別々に調整出来るので、ホワイトバランス、色調の調整が出来ます。その他には「ポスタリゼーション」「ソラリゼーション」など特殊効果を出す事も出来ます。(今は必要ないので触れません)

トーンカーブは細かい調整ができる万能なツールといっていいでしょう。

うっ、難しそう…て思った方今回やることは全然難しくないのでないのでご安心ください＾＾では早速使ってみたいと思います。

明るいところは明るくし、コントラストを少し強めたいと思います。
先ほどやったことと同じですね＾＾
まずは真ん中をクリックします。するとポインタ(黒い丸)と出力値が入力できるようになります。
出力値を145、入力値を115と入力して下さい。

ポインタを左上に近づければ近づける程写真が明るくなります。
そしてコントラストを少し強めたいので画像のようにポインタを2点置き、
左側のポインタを少し下に、右側のポインタを少し上に動かして下さい。

左側のポインタを下に近づけると暗い部分をより暗く、右側のポインタを右に近づけると明るい部分をより明るくすることが出来ます。
コントラストが強くなり、服の赤が鮮やかになりました。
このように先ほどやった明るさ、コントラストの調節が簡単に出来てしまします。

【Befor】

【After】

【比較】

どうでしょう？肌に透明感が出てより奇麗に見えます＾＾赤い服も鮮やかになりましたよね。
その他にもトーンカーブでは色んな調節ができます。

明るくする

暗くする

コントラストを上げる

コントラストを下げる

明度を上げる

明度を下げる

などなど、沢山の方法があります。
今回は触れませんがR、G、Bを変更するとさらに色んな補正が出来ます。
詳しくは現像ドットコムさんがまとめてくれてますのでこちらもどうぞ。

では次は全体の補正ではなく部分補正の仕方を紹介します。

3.部分補正

全体じゃなくて部分的に明るくしたいって場合結構あると思います。
例えば歯だけ白くしたい！とか。
そうゆう場合はその部分だけ選択して変更しちゃいましょう。
まず「ツール」→「クイックマスクモードで編集」をクリック。

※クイックマスクモードとは、一時的にマスクを作成するモードです。ペイントツールで塗るのと同じ感覚で詳細な選択範囲を作成出来る為、人物や犬等、切り抜くのが大変なオブジェクトを選択する場合に有効です。

「ツール」→「ブラシツール」で好きなサイズにし、変えたい部分を塗りつぶしていきます。(この時点では、はみ出してもOKです)

塗りつぶし終わったらクイックマスクモードを解除します。
「ツール」→「クイックマスクモードで編集」をもう一度押す。すると点線でその部分だけ選択されています。
「command」+「I」で選択範囲の反転→「command」+「C」でコピー→「新規レイヤー」→「command」+「V」でペースト。

ペーストした新規レイヤーを選択→「イメージ」→「色調補正」→「トーンカーブ」を選択。
あとは先ほどやったトーンカーブで明るくしていきます。

画像のように調整すると自然な色で白くなります。
はみ出した部分は消しゴムで丁寧に消していきましょう。

どうでしょうか？
最後に消しゴムで影の部分を上手く出してあげれば完成です。

【比較】

それではいままでの技法を応用して黒っぽいセクシーな女性を色白でかわいい女性に変えてみましょう！

色黒美人を色白美人に

by：morbuto

まず、目を青くしたいのでクイックマスクモードで塗っていきます。

クイックマスクモードを解除すると選択範囲が指定されているので新規レイヤーにコピー＆ペースト。

新規で作成したレイヤーを選択した状態でメニューバーから「イメージ」→「色調補正」→「カラーバランス」
今回はブルーにしたいのでバーをブルーの方向に引っ張ります。
色が変わるのでここは不自然にならないように調整します。

同じく唇もピンクにしたいので1〜4の手順でカラーバランスをピンクに調整。(はみ出た部分は消しゴムの透明度を上げて消しながらなじませる)
全体のレイヤーを選択する。
「イメージ」→「色調補正」→「トーンカーブ」で明るいところはもう少し明るく、コントラストを少し強くする。

「イメージ」→「色調補正」→「カラーバランス」で少し青みを出す。
(肌の透明感が出ます)以上で完成＾＾！

記事長くなっちゃったけど、読んでくれた方ありがとうございますー！

↑トップへ

追記：2月1日までにコメント下さった12名への方
コメント欄の設置が上手く出来ておりませんでした。現在は問題なく動いているのですがそれまでに頂いた方のコメントが消えてしまいました。せっかく頂いたのですが…本当に申し訳ありません><
これからもよろしくお願い致します。

WordCamp開始当初100人程の小さなイベントだったのですが、その参加者は年々増えていき、去年行われたWordCamp tokyo2011では1000人を超える参加者が集まりました。そんな今注目のWordCampとは一体なのでしょう？

WordCampとは？

WordPressをまだ使った事ないけど興味あるっていうビギナーさんから
もっとレベルを上げたいマスターさんまで参加できるWordPressのイベントです＾＾
去年の参加者は1000人を超え、まさに今大注目のイベントと言ってもよいでしょう。
自分の聞きたい講義(トラック)に参加し、自分のレベルに合わせて学ぶことが出来るのでビギナーさんでも十分楽しめます：)
公式HPには”デザイナー、エンジニア、ブロガー、ユー ザー向けのセッション、初めて WordPress を使う方がインストールから学べるハンズオン、来場者が参加して意見交換するアンカンファレンスなど”とあります。

会場の様子はこのような感じでした。

WordPressの現在とこれから

WordPressの日本語版制作チームのマクラケン直子@naokomcさんのお話です：)

WordPressの歴史

2003年にマイク・リトルとマット・マレンウェッグによってオープンソースのプロジェクトとしてv0.71が開発されました。このときから基本的な項目は変わっていませんがモノクロでメニュー項目は上部にあったそうです。プラグインもありませんでした。

それから2004年、2005年…と開発が進み2008年のv2.7に大幅な変更があり今のWordPressとほぼ変わらない形になりました。

集中執筆モード

2011年v2.7から”集中執筆モード”というものが加わり、より記事に集中して書くことが出来るようになりました。
右から二番目のボタンを押す事で記事のみのフルスクリーン表示に切り替えられます。

余計なものがちらつかないので集中力があがりそうですね。

WordPressの今

世界トップの100万サイト中
WordPressを使っているサイトは15.5%

そのうちCMSを使っているサイトは全体の3割程あってWordPressの割合は54.1%

米国で新規ドメイン中のWordPressの利用率は22%
100個ドメインをとったとしたらその中の22ドメインにWordPressがインストールされているそうです。

さらにWordPressをCMSとして使っているユーザーが全体の92%
↑こちら3年前の統計は5%程しかいなかったみたいです。
凄い勢いですね；)

では何故WordPressを使う人が増えたんでしょう？

 WordPressの良いとこ

大きく分けてこの3つがあげられると思います。

1. 豊富なプラグインがあり、そこまで知識が無くても大抵のことは出来てしまう。
2. オープンソースなので導入に費用がかからない。
3. このようにイベントなどが沢山開催されていて、作り手側が愛着を持てる。

1.プラグインの多さ

とにかくプラグインの数が多いので、html、cssが分かれば大抵のことはできてしまうんじゃないでしょうか。こちらはそんな膨大なプラグインを分かりやすくまとめてくれています。

• 2011年版！絶対にインストールしたいWordPressプラグイン45
• 稼働中の激選27個のWordPressプラグイン
• 使用中のおすすめWordPressプラグイン15個

2.導入に費用がかからない

WordPressはオープンソースのブログソフトウェアなので導入費用はかかりません。
オープンソースとはソフトウェアのソースコードを無償（Free）で公開し、世界中のプログラマの誰もが自由（Free）にそのソフトウェアを改良して再配布することを許すソフトウェア開発方式です。

無料で最新開発したものが利用出来るので、こちらとしては大変嬉しい(デメリットもありますが><)です。
でも開発側はなぜオープンソースで開発するんでしょう？製作費だってかかっているはずなのにその費用はどうなっているんだろう…？><
OS(オープンソース)にすることで、技術力の高いハッカーが付き、拡散しながら質の高いものが低コストで出来る…みたいな感じなのでしょうか。
どの道とってもありがたいですね＾＾

3.イベントを通して愛着がわく

WordCampもそうですし、WordPressでは沢山のイベントが行われています。
色々な人が集う勉強会に参加することで、新たな発見や、人との繋がりが生まれるのでWordPressに愛着が出てくるんじゃないでしょうか：)
普段は引き篭っているwebデザイナーですが情報交換し合えばお互いに刺激になりますよね；D
WordPressのイベント情報はこちらから確認することが出来ます。
↓
「WordBench」http://wordbench.org/category/event/

私もまた参加したいな〜><(この時お世話になった方々のことは後ほど紹介します)

また、WordPressには「ワプー」というキャラクターがいてその子がとってもかわいいです。
かわいいものって無条件に好感が持てますよね＾＾WordCampではワプーのマグカップを貰ってテンションが上がりました。

遊び心というか、堅苦しくないというか、ちょっとゆるい、こうゆうアプローチとっても大事ですよね＾＾

その他再構築が無い、デフォルトのまま使用してもデザインがカッコイイ、拡張性にすぐれ、カスタマイズの自由度が高いなど、沢山の理由があります。

もちろん良い部分もあれば反対に デメリットもあります。

WordPressのデメリット

1. ページの表示が遅い
2. 複数のブログを運営することができない
3. デフォルトの状態ではSEOに強くない

etc…
ですがこういった問題を解決するためのプラグインもあります。

何を使うのもそうですが、何がなんでもWordPressが良いって訳じゃなく“目的、優先させたいこと”をしっかり考えその時の目的に合ったものを選べば良いんじゃないかなと思います。

なんとなくWordPressのことわかったでしょうか。
ではちょっと話がずれていましたのでWordCampに戻りたいと思います。
沢山のトラックがあったのですが中でも印象に残ったものを少し紹介します。

中でも印象に残ったトラック

未来を見据えたレスポンシブ・パブリッシング

こもりまさあきさんの「未来を見据えたレスポンシブ・パブリッシング」

スマートフォンにタブレット端末、ふと気づけばwebサイトを観覧するデバイスはPCだけでは無くなっていました。画面サイズだってまちまちです…
このサイズに1つ1つ対応していたら時間もタイムコストもとんでもないことに…
じゃぁもうお手上げだから対応やめましょう、そうもいきませんよね。
そこでレスポンシブの登場です。

レスポンシブとは？直訳で”すぐ応答[反応]する，敏感な.”とかの意味で、要するにマルチデバイスにレスポンシブ(敏感に反応し)対応させましょうということみたいです。(あれ？なんか上手く言えない！笑)

プラグインで対応する

• WPtouch…簡単にスマートフォン対応できるので人気のプラグイン
• HandHeld…スマートフォン対応用プラグインでデザインがオシャレ
• Onswipe…タブレット端末対応用のプラグイン
• Ktai Style…携帯電話対応プラグイン

 レスポンシブなテーマを採用する

• TwentyEleven…オフィシャルテーマ
• Yoko…http://wordpress.org/extend/themes/yoko
• PressWork…http://presswork.me/
• Foundation…https://github.com/drewsymo/Foundation
• skeleton…http://demos.simplethemes.com/skeleton/

※ただこれらの既存のものを使うとデザインを細かく変更することが困難だったりします。
デザインをそのまま生かすのであればメディアクエリという方法もあります(最適化とは言えませんが)そのことは長くなりそうなのでまた次回…

やり方は特にこれがいいっていうのは決まって無いので色々やってみて、目的にあったものを選ぶといいと思います＾＾

さて次はお待ちかね。懇親会です。むしろこっちがメインって方も多かったそうな…？

400人で懇親会！お寿司にビールに名刺交換?

お寿司や生春巻き、ビールにチューハイ飲み物も食べ物も沢山用意されていました♪
参加者は400人程居て、会場の人口密度が濃かったです。

トラックの合間に知り合った(色々ほんとにありがとう＞＜！)kenji @samuraibeat21氏が仲間を紹介してくれたりして

• シンジ @SDLaboさん
• zin @ente686さん
• Yuu @regret_raymさん
• 大阪のmiho @dk45blogさん

• 清水 健太郎さん

• プラグインを作っているwokamoto @wokamotoさん
• 横浜のコワーキングスペースを経営しているうえつはら まさゆきさん(遊びにいきたいな〜＞＜)

• WordPress日本語版制作チームのマクラケン 直子さん

etc…沢山の方とお友達になりました。

ワプーのケーキおいしそう〜！私は食べそこねちゃった…orz

タイトルはそのまんまwebでlog(記録)するのでweblogでって決めました：)
デザインの仕事をしていますが私はまだまだ半人前ですし、物覚えも良くないです…。なので自分の勉強用にと思い、ブログを始める事にしました。
“webデザイン”"グラフィックデザイン”に関する役立つことや技術的なこと自分が体験した事なんかをまとめていこうかなと思います。

このサイトをいつ公開しようかと迷いましたが(まだ完璧じゃないしな〜とか…)、下記の言葉を思い出して本日公開することに決めました。

良いデザインに仕上げるのは簡単です。それは、その中途半端なものを磨きあげることであり、時間のかかることです。
Making good design is easy. It’s polishing the half-assed stuff that takes time
- Stefan G. Bucher

これからちょこちょこ直しつつ、良くしていければと思います。
その他沢山ある素敵な言葉はWEBROCKETSウェブロケッツマガジンさんがまとめて下さってます;D

ちなみにドメインは先にとってしまっていたのでブログタイトルと異なっていますww

プロフィール

Endou Takae
- – - – - – - – - – -

北海道苫小牧市から進学のため秋田県秋田市へ移動。

そのまま秋田に住み着いてしまいました。webデザイン、グラフィックデザイン、イラストetc…

ソーシャル色々です。
twitter→こちら
Facebook→こちら
リクエスト頂けたら100%認証させて頂きます；)

写真は友達のカメラマンさんにとって頂きました。凄く素敵にとってもらって感謝です！

これからよろしくお願いします。