Tips
色、柄の次はモチーフ！
わかっているようで、わからないのが女の子の好きなもの。
女の子好みは千差万別ですが、定番モノがあるんです。
ちょっとしたアクセントに、ぽんっと置くだけで女子向けデザインになっちゃう
定番モチーフを押さえましょう。
リネンやコットンなどの布、レース、ボタン、刺繍など、お裁縫を連想させるものは、いかにも女の子らしいですね。
ナチュラル指向の女性に人気なのがこれらのモチーフです。
雑貨大好き、カフェ大好きな女性に人気なのが、文房具系のモチーフ。
おしゃれな海外文具メーカーのものなら、なお良し。
かわいいだけでも、美人なだけでもない。
女性は自分のあこがれを投影できるオシャレな同性が大好き。
オシャレな女性の写真があるなら、他に装飾はいらないぐらいです。
女性ファッション雑誌の表紙を見れば言わずもがなですね。
ちなみにこの寝顔がかわいいモデルさんの写真は下記サイトでダウンロードできます。
【フリー写真素材】モデル・人物の写真素材はモデルピース
http://www.modelpiece.com/
文字やイラストなど、手描き感はかわいさを出すのに最適な味付けです。
一見女性っぽくなさそうな配色、テイストでも、
手書きフォントひとつで女性向けデザインになります。
これはよく知られていますね。女性はきらきらが好きです。
きらきらの光もそうですが、宝石なんかもきらきら要素に入ります。
なお、きらきらした光の描き方はこちらをどうぞ。
Photoshopできらきらした魔法の光を描く（きらきらブラシ付き）
http://lab.gpol.co.jp/graine/2010/10/photoshop-9.php
エレガンスにもキュートにも、文字通り華やかにも。
お花はいかにも女性らしいという感じですね。
生花の写真、模様、イラストなど、デザインに取り込みやすい題材です。
他にもいろいろありますが、基本はこんな感じです。
調達するのが大変なモチーフもありますが、最近は女子向け素材集がたくさん発売されているので
購入を検討してみてはいかがでしょうか。
(sayaka)
Design
Graphic
秋のイメージに万能に使える落ち葉のブラシ。
(配布元:brushlovers：Fall Leaves )
綺麗な枯葉のブラシ。
(配布元:123freebrushes：Autumn leaves )
紅葉の無料イラストです。
(配布元:emStudio：もみじ紅葉イラスト )
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:Lemon：秋のイラスト )
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:WEBTREATSets.：inFocus Ad Grungy Fiery Red Seamless Patterns )
ランダムな水玉がレトロな印象のパターン。
(配布元:WEBTREATSets.：Free Exotic Polkadots Photoshop Pattern Set )
※ご利用になる前に、利用規約等の確認をお願いいたします。
(megumi)
Graphic
Photoshopで行う一連の編集作業の内容、作業ごとの画像の状態はヒストリーパレットに記録されており、簡単に一つ前の状態の画像に戻せます。
ヒストリーブラシツールは、ドラッグした軌跡をヒストリーパレットで指定したヒストリーの画像と置き換えるツールです。
■使い方
１、ヒストリーから元となる画像を選択します。
２、ドラッグすると、軌跡に併せてヒストリー画像でペイントされます。
■ツールオプション
・モード：描画モードを切り替えます。
・不透明度：描画色の不透明度を設定します。
・流量：インクの量を設定します。
・エアブラシのアイコン：一点でマウスを押し続けると、エアブラシの様に広がっていきます。
■使用例
今回は空部分を白黒にする前のヒストリー画像でペイントして建物部分を白黒で残し、夕暮れの空の色を強調しました。
左のアイコンがパッチツールを表します。
パッチツールを使用すると、傷や汚れなどを自然な画像に修正することが出来ます。
修復ブラシと違う点としては、他の部分の画像で覆う様に隠すという点です。
また、パッチツールでは修復ブラシツール同様、画像の一部を使用するのではなくパターンを使用して塗りつぶすことも出来ます。
■使い方
１、パッチツールを選択します。
２、オプションバーでソースを選択します。
３、修復したい箇所をドラッグして範囲指定します。
４、３で選択した選択範囲を補正元となる綺麗な画像のあるところまでドラッグします。
５、ドラッグ先の画像によって、画像が修復されます。
■使用例
影の部分をソースにしてゴミを削除しました。
Coding
Design
Web service
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。
最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません！
そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。
現時点で確認できるブラウザ環境は、
■windows: IE(6 ? 9), Firefox(3.0, 3.6, 4.0), Chorome(9, 10)
■OS X : Firefox(3.0, 3.6), Safari(4.0, 5.0)
(2011/5/30 現在)
となっておりメジャーなブラウザはほぼ網羅されています。
インターフェイスもわかりやすくていいです。
プレビュー機能では2画面並べて表示したり、
「オニオンスキン」で重ねて表示させたりすることが可能です。
環境によるズレが比較しながら一目で確認できるので、
表示についてシビアな調整が必要なサイトでは特に重宝します。
レスポンスもよく、何より、Mac OS環境の表示状態が確認できるのがありがたい限り。
現在、私がよく活用するツールです。
※ベーシック認証が必要なサイトはプレビューが出来ませんので、ご注意ください。
非常に多くの環境での表示チェックが出来ます。
スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、
結果が出るまでに時間がかかりますのでご注意ください。
IE環境での表示チェックでは有名なソフトですね。
プレビュー機能はもちろん、リンクチェック・JavaSciptも動作するので、
jsで動く部分のチェックもあわせて行うことが出来ます。
今でもIE6対策には欠かせないツールです。
私は旧バージョンを使用したことがありますが、
開発元が提供している分、動作に安定感を感じました。
今年3月にリリースされた最新版では、オンラインサービス（ベータ）の「リモート ブラウザー」を利用することにより、
Mac OS 上の Safari 、「Google Chrome」、「Firefox」でのプレビューも可能とのこと。
試用期限があるものの、機会があれば使ってみたいツールです。
※このソフトは「Microsoft Expression Web 4」に含まれるツールの単体試用版として無償提供されており、
60日間すべての機能を試用できるそうです。
※「リモート ブラウザー」は60日間の試用期間のみ利用可能。
※試用期間が過ぎたあともローカルで動作するIE6/7/8を利用したプレビューは可能です。
Coding
Other
女子にモテるWebデザイン 【3】 女子をメロメロにする6つのモチーフ
第1回：ピンクを使いこなそう
http://lab.gpol.co.jp/graine/2011/04/web-1.php
第2回：模様を攻略！ひと味ちがうデザインへ
http://lab.gpol.co.jp/graine/2011/06/web-2-1.php
色、柄の次はモチーフ！
わかっているようで、わからないのが女の子の好きなもの。
女の子好みは千差万別ですが、定番モノがあるんです。
ちょっとしたアクセントに、ぽんっと置くだけで女子向けデザインになっちゃう
定番モチーフを押さえましょう。
1.布・レース
リネンやコットンなどの布、レース、ボタン、刺繍など、お裁縫を連想させるものは、いかにも女の子らしいですね。
ナチュラル指向の女性に人気なのがこれらのモチーフです。
布系
水玉、花柄、ストライプ柄の布・リネン・帆布糸系
毛糸・縫い目・クロスステッチ・あみぐるみお裁縫系
レース・ボタン・まち針・リボン2.紙・ステーショナリー
雑貨大好き、カフェ大好きな女性に人気なのが、文房具系のモチーフ。
おしゃれな海外文具メーカーのものなら、なお良し。
書く物系
ペン・鉛筆・インクとつけペン・クレヨン・万年筆紙系
ノート・メモ・方眼紙・スケッチブック・段ボール・封筒・タグシール系
セロテープ・マスキングテープ・切手・ラベル3.オシャレな女の子
かわいいだけでも、美人なだけでもない。
女性は自分のあこがれを投影できるオシャレな同性が大好き。
オシャレな女性の写真があるなら、他に装飾はいらないぐらいです。
女性ファッション雑誌の表紙を見れば言わずもがなですね。
ちなみにこの寝顔がかわいいモデルさんの写真は下記サイトでダウンロードできます。
【フリー写真素材】モデル・人物の写真素材はモデルピース
http://www.modelpiece.com/
4.手描き感
文字やイラストなど、手描き感はかわいさを出すのに最適な味付けです。
一見女性っぽくなさそうな配色、テイストでも、
手書きフォントひとつで女性向けデザインになります。
5.きらきら
これはよく知られていますね。女性はきらきらが好きです。
きらきらの光もそうですが、宝石なんかもきらきら要素に入ります。
なお、きらきらした光の描き方はこちらをどうぞ。
Photoshopできらきらした魔法の光を描く（きらきらブラシ付き）
http://lab.gpol.co.jp/graine/2010/10/photoshop-9.php
6.花
エレガンスにもキュートにも、文字通り華やかにも。
お花はいかにも女性らしいという感じですね。
生花の写真、模様、イラストなど、デザインに取り込みやすい題材です。
他にもいろいろありますが、基本はこんな感じです。
調達するのが大変なモチーフもありますが、最近は女子向け素材集がたくさん発売されているので
購入を検討してみてはいかがでしょうか。
(sayaka)
秋のイメージ作り：商用利用可能なブラシ、ベクターデータ、パターン(Photoshop・Illustrator)
秋にぴったりの商用利用可能な「秋のイメージ作りに役立つブラシ、ベクターデータ、パターン」のご紹介をします。
ブラシ
Fall Leaves
秋のイメージに万能に使える落ち葉のブラシ。
(配布元:brushlovers：Fall Leaves )
Autumn leaves
綺麗な枯葉のブラシ。
(配布元:123freebrushes：Autumn leaves )
ベクターデータ
もみじ紅葉イラスト
紅葉の無料イラストです。
(配布元:emStudio：もみじ紅葉イラスト )
秋のイラスト
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:Lemon：秋のイラスト )
パターン
inFocus Ad Grungy Fiery Red Seamless Patterns
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:WEBTREATSets.：inFocus Ad Grungy Fiery Red Seamless Patterns )
Free Exotic Polkadots Photoshop Pattern Set
ランダムな水玉がレトロな印象のパターン。
(配布元:WEBTREATSets.：Free Exotic Polkadots Photoshop Pattern Set )
※ご利用になる前に、利用規約等の確認をお願いいたします。
(megumi)
Photoshopでの画像処理の便利機能
Photoshopでパス抜きや補正・処理などの画像処理を行う時、機能を把握していないとけっこう面倒くさいものですが、Photoshopには便利な機能があるのでそれらを駆使することで簡単に効率良く画像処理を行うことができます。
今回は2つの機能を紹介したいと思います。
１.ヒストリーブラシツール
Photoshopで行う一連の編集作業の内容、作業ごとの画像の状態はヒストリーパレットに記録されており、簡単に一つ前の状態の画像に戻せます。ヒストリーブラシツールは、ドラッグした軌跡をヒストリーパレットで指定したヒストリーの画像と置き換えるツールです。
■使い方
１、ヒストリーから元となる画像を選択します。
２、ドラッグすると、軌跡に併せてヒストリー画像でペイントされます。
■ツールオプション
・モード：描画モードを切り替えます。
・不透明度：描画色の不透明度を設定します。
・流量：インクの量を設定します。
・エアブラシのアイコン：一点でマウスを押し続けると、エアブラシの様に広がっていきます。
■使用例
今回は空部分を白黒にする前のヒストリー画像でペイントして建物部分を白黒で残し、夕暮れの空の色を強調しました。
２.パッチツール
左のアイコンがパッチツールを表します。パッチツールを使用すると、傷や汚れなどを自然な画像に修正することが出来ます。
修復ブラシと違う点としては、他の部分の画像で覆う様に隠すという点です。
また、パッチツールでは修復ブラシツール同様、画像の一部を使用するのではなくパターンを使用して塗りつぶすことも出来ます。
■使い方
１、パッチツールを選択します。
２、オプションバーでソースを選択します。
３、修復したい箇所をドラッグして範囲指定します。
４、３で選択した選択範囲を補正元となる綺麗な画像のあるところまでドラッグします。
５、ドラッグ先の画像によって、画像が修復されます。
■使用例
影の部分をソースにしてゴミを削除しました。
(seishi)
クロスブラウザチェックに欠かせない便利ツール
クロスブラウザとは: 「複数のブラウザ上で，正常に動作すること」を意味します。企業様のサイトでは、まだまだIE6が閲覧対象であったり、
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。
最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません！
そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。
Adobe BrowserLab
adobe社が無償で公開しているサービス。 （利用にはadobe IDでのログインが必要）現時点で確認できるブラウザ環境は、
■windows: IE(6 ? 9), Firefox(3.0, 3.6, 4.0), Chorome(9, 10)
■OS X : Firefox(3.0, 3.6), Safari(4.0, 5.0)
(2011/5/30 現在)
となっておりメジャーなブラウザはほぼ網羅されています。
インターフェイスもわかりやすくていいです。
プレビュー機能では2画面並べて表示したり、
「オニオンスキン」で重ねて表示させたりすることが可能です。
環境によるズレが比較しながら一目で確認できるので、
表示についてシビアな調整が必要なサイトでは特に重宝します。
レスポンスもよく、何より、Mac OS環境の表示状態が確認できるのがありがたい限り。
現在、私がよく活用するツールです。
※ベーシック認証が必要なサイトはプレビューが出来ませんので、ご注意ください。
Browsershots
非常に多くの環境での表示チェックが出来ます。
スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、
結果が出るまでに時間がかかりますのでご注意ください。
IE Tester
IE環境での表示チェックでは有名なソフトですね。
プレビュー機能はもちろん、リンクチェック・JavaSciptも動作するので、
jsで動く部分のチェックもあわせて行うことが出来ます。
今でもIE6対策には欠かせないツールです。
Microsoft Expression Web SuperPreview
こちらはMicrosoftから提供されている、チェックツール。私は旧バージョンを使用したことがありますが、
開発元が提供している分、動作に安定感を感じました。
今年3月にリリースされた最新版では、オンラインサービス（ベータ）の「リモート ブラウザー」を利用することにより、
Mac OS 上の Safari 、「Google Chrome」、「Firefox」でのプレビューも可能とのこと。
試用期限があるものの、機会があれば使ってみたいツールです。
※このソフトは「Microsoft Expression Web 4」に含まれるツールの単体試用版として無償提供されており、
60日間すべての機能を試用できるそうです。
※「リモート ブラウザー」は60日間の試用期間のみ利用可能。
※試用期間が過ぎたあともローカルで動作するIE6/7/8を利用したプレビューは可能です。
(Masanori)
MTカスタマイズ カスタムフィールドの検索
MT4から追加された機能に、カスタムフィールドという独自の入力項目を追加できる便利な機能があります。
ですが検索フォームを使ってカスタムフィールドの値を検索できませんでした。
今回はそれに加えて、カテゴリ検索のAnd検索をする方法を紹介します。
※下記はMT５での解説となります。
こんな感じのAnd検索が可能です
それぞれダウンロードしてインストールしてください。
■カスタムフィールドの内容を対象にして検索：CustomFieldsSearch
■カテゴリー情報による検索：CategorySearch
どちらも修正BSDライセンスですが、これはかなり緩いライセンス形態で、商用利用も改変もしてよいですが、かわりに無保証で著作権の表示が必要というライセンスです。
ソースの上部に著作権表示しておけばOKじゃないでしょうか。
ですが検索フォームを使ってカスタムフィールドの値を検索できませんでした。
今回はそれに加えて、カテゴリ検索のAnd検索をする方法を紹介します。
※下記はMT５での解説となります。
こんな感じのAnd検索が可能です
1.プラグインを追加する
まずTechnology on Informationさんのプラグインを利用します。それぞれダウンロードしてインストールしてください。
■カスタムフィールドの内容を対象にして検索：CustomFieldsSearch
■カテゴリー情報による検索：CategorySearch
どちらも修正BSDライセンスですが、これはかなり緩いライセンス形態で、商用利用も改変もしてよいですが、かわりに無保証で著作権の表示が必要というライセンスです。
ソースの上部に著作権表示しておけばOKじゃないでしょうか。
2.ソースを作成する
○カスタムフィールドサーチを有効にするかどうか。 value="1" これでカスタムフィールド検索が有効になります。 <input type="hidden" name="CustomFieldsSearch" value="1" /> ○検索対象を指定します。 value="entry"でブログ記事が検索対象になります。 value="page"でウェブページが検索対象になります。 <input type="hidden" name="CustomFieldsSearchClassType" value="entry" /> ○カスタムフィールドでないカラムを無視する場合に指定します。 これにより余計な検索をせずに若干結果表示が速くなります。 <input type="hidden" name="CustomFieldsSearchIgnore" value="EntryTitle" /> <input type="hidden" name="CustomFieldsSearchIgnore" value="EntryBody" /> <input type="hidden" name="CustomFieldsSearchIgnore" value="EntryMore" /> <input type="hidden" name="CustomFieldsSearchIgnore" value="EntryKeywords" /> ○カテゴリサーチを有効にするかどうか。 value="1" でカテゴリ検索が有効になります。 <input type="hidden" name="CategorySearch" value="1" /> <input type="hidden" name="CategorySearchSets" value="1" /> ○カスタムフィールド検索 指定したキーと値で絞込みを行います(value="カスタムフィールドタグ:○○○") <select name="CustomFieldsSearchFieldLike"> <option selected="selected">▼エリアを選んでください</option> <option value="area:北海道">北海道</option> <option value="area:青森県">青森県</option> <option value="area:岩手県">岩手県</option> ○カテゴリ検索 カテゴリ選択用がプルダウンの場合は 「select name="1"」に設定すれば有効になるみたいです。 <select name="1" id="select_category">(takanosuke)
出っ歯はステータスやで
出っ歯君は欲望に忠実です。
ここ数年でさまざまな展開を見せているARですが、セカイカメラなんかが有名ですね。
WikipediaではAR（拡張現実）は下記のように定義されています。
拡張現実（かくちょうげんじつ）とは、現実環境にコンピュータを用いて情報を付加提示する技術、および情報を付加提示された環境そのものを指す言葉。引用元：Wikipedia - 「拡張現実」項目
世界を変えてしまうのではなく、少しだけ加えて、楽しくべんりにする。それがARのいいところ。
少し前に、ARを使ったこんなサービスがリリースされました。
これは「Zoff Mirror」というメガネ試着サービスで、カメラのついているPCなら無料ソフトをインストールすることで利用できます。
家にいながら、メガネを取っかえ引っかえ試着して購入までできてしまいます。
そのうち、出っ歯を試着出来る日も来るかも？
（kana）
