グレヌデサ La graine du dessin

スマートフォンのコーディングで気を付けたい4つのポイント

2012-02-01T15:00:00Z

はじめに

現在、スマートフォンは大きく分けて2つのOS（iOS、Android）があります。
OSごとの仕様の違いも重要ですが、特に問題になる端末の違いは画面の解像度で、
iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる)
Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本)
と、表示サイズが大きく異なります。
さらにスマートフォンは画面を横に回転させることもできるので、
解像度が縦横反対になることも想定しておかなければいけません。

iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。

iOSのSafariは様々な制限やバグがある

・画像のサイズ制限がある（GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル）
・Web Fonts は使えない。
・zoomプロパティを使用した場合、特定の条件で文字が拡大するバグ

[参考サイト]
PhoneのSafariブラウザにおける、色んな制限｜FINE lab.
http://lab.fine-net.com/modules/wordpress2/index.php?p=15
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ｜to-R
http://blog.webcreativepark.net/2011/04/07-063417.html

Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない

Androidでスタイル属性に高さを指定した場合、ボックスサイズが拡大されず、中のテキストのみ大きく表示されます。対処方法として、背景画像を指定することでブラウザ標準の枠線を取り去ることができます。また、CSS3である程度の装飾は可能にです。

[参考サイト]
Android・iPhone向けwebサイト開発で知っておくと良いこと｜村式流イッパシエンジニアへの道
http://blog.ville.jp/2011/04/25/619

横に回転させた時に画面のサイズに合わせて拡大させたい場合

ワンソースで全てのスマートフォンに横幅をフィットさせる方法です。この方法を使えば一回のコーディングですべての端末に反映することが可能ですが、端末ごとに拡大縮小をすることになるので、文字サイズが読みづらくなったり、逆に大きくなりすぎたりする場合があり、けして万能な方法ではありません。また、Android2.1以降でselectボックスのサイズを大きくするときの懸念点として、 zoomプロパティを使用した場合に発生するiPhoneの文字の表示バグ等があります。使用する場合は表示チェックを入念にしなければいけません。

[参考サイト]
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには｜これからゆっくり考L +α http://sakaki0214.com/2011/06/05223738.html

スマートフォンサイトで文字サイズが違う場合

iOSのsafariではフォントサイズが自動アジャストされ、PCで見ていたサイズとかなり差異がある場合があります。それを解消するためにcssに-webkit-text-size-adjust というプロパティを使用することで、フォントサイズの変更が可能になります。このプロパティはwebkit特有の特有のプロパティで、基本はautoになっています。必要があれば変更するぐらいで、基本的にはあまり使用しません。

[参考サイト]
項目：文字サイズの自動アジャスト｜＠IT
http://www.atmarkit.co.jp/fsmart/articles/iphone/04.html
iPhone/Androidサイトで文字サイズを固定する方法｜Web Designing satoimo18+
http://www.satoimo18.com/archives/136

スマートフォンはPCと比べて比較的コーディングはしやすいですが、実機チェックと対応バージョンの考慮など、様々な制限があるので、要件をしっかり決めてから、デザイン、コーディングを進めるのが重要です。

(kazuki)

Photoshop・Illustratorでリボンを作るチュートリアル10選

2011-12-21T15:00:00Z

ガーリーにもエレガントにも、キュートにも。
くるくると動きのあるリボンのグラフィックをワンポイントにするだけで
デザインがランクアップすること間違い無し！
覚えておくと何かと重宝するリボンの描き方チュートリアルをまとめてみました。

【Illustrator】カリグラフィブラシでパスを描いてアウトライン化

カリグラフィブラシでパスを描いてアウトライン化、
その後手前と奥のリボンを分割して色を塗り分ける方法です。
複雑なくるくる具合にしたい場合に最適です。
このチュートリアルではプレゼントBOXの描き方の中で、リボンの作り方が紹介されています。

How to Make Festive Vector Gift Boxes | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/how-to-make-festive-vector-gift-boxes/

【Illustrator】3D効果を使う

自由曲線に3D効果をつけてリボンを作る方法です。お手軽。
細かい微調整は必要ですが、パースを正確にしたい場合におすすめ。
リボンの太さが一定になるので、少し無機質な雰囲気になるのと
うねりに合わせて太さをデフォルメしたい場合には向かない方法です。

イラレラボ　illustrator-labo - Tutorial_くるくるリボンを描く
http://illustrator-labo.com/?p=218

【Illustrator】パスを垂直に下ろして1面づつ作る

自由曲線を垂直にコピーして作る方法です。
1面1面作っていかなければならないので、複雑な動きの場合は面倒ですが
リボンの太さを変えたり、動きをもたせたりといったデフォルメがしやすいのが特徴です。

Creating a ribbon in Adobe Illustrator | Veerle's blog　※英語
http://veerle-v2.duoh.com/blog/comments/creating_a_ribbon_in_adobe_illustrator/

【Illustrator】結んだリボン

こちらは3D効果を使った結んだリボンの描き方です。
短時間でハイクオリティなリボンが描けるのでおすすめ！
このチュートリアルひとつ覚えておくだけで、いろいろ応用が効きそう。

イラレラボ　illustrator-labo - Tutorial_リボンの描き方
http://illustrator-labo.com/?p=365

【Illustrator】勲章リボン（ロゼット）

こちらは欧米ではメジャーな勲章リボン。（ロゼットというそうです）
フリルがかわいいですね。ランキングのイメージなんかに使えそうです。

Create a Tri-Color Rosette Ribbon in Illustrator | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/create-a-tri-color-rosette-ribbon-in-illustrator/

【Photoshop】質感がすてきなレトロリボン

ペタンと折り返されたストライプのリボンです。
パターンオーバーレイで布のような独特の質感を出します。

Design a Retro Style Ribbon　※英語
http://www.photoshopstar.com/graphics/design-a-retro-style-ribbon/

【Photoshop】巻きついたリボン

最近Web界で流行りの、巻きついたリボンのデザイン。
サイトデザインに反映する時の画像の切り出し方とコードの書き方まで紹介されています。
しかも、うれしいPSDソースファイル付き！

Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!) | Webdesigntuts+　※英語
http://webdesign.tutsplus.com/tutorials/site-elements/create-a-3d-ribbon-wrap-around-effect-plus-a-free-psd/

【Photoshop】超基本のリボン

おなじみの超基本リボン。直線的なので、描きやすいです。
うれしいPSDソースファイルつき！

Ribbon Tutorial - Learn how to create a simple ribbon using adobe photoshop.　※英語
http://www.trickdigest.com/tutorials/banner.html

【Photoshop】アプリアイコンで作ったリボン

iPhone Giftのグラフィックでやってた、アプリアイコンリボンをつくってみたよ！というチュートリアル。
変形ツール「ワープ」をつかってアイコン画像をぐりぐりとねじ曲げています。
同様にすると、こんなリボンも作れます。こちらはムービーフィルムのイメージなんかに応用できそうですね。

iPhone Gift Ribbon　※英語
http://webdesignerwall.com/tutorials/iphone-gift-ribbon

【Photoshop】超リアルな結んだリボン

覆い焼きツールと焼き込みツールでハイライト、シャドウを描き込む本格派。
難易度が高いですが、かなりリアルなものが作れます。

Photoshop design ribbon logo stock photo in photoshop. | Fun tutorials　※英語
http://www.php2k.com/blog/beginners-photoshop-tutorials/photoshop-design-ribbon-logo-stock-photo-in-photoshop/

番外編

最後は、リボン素材のまとめ記事をご紹介。
時間がない場合はフリー素材を使っちゃいましょう。ファイルの中を見ることで勉強にもなります。
※利用規約は各々のサイトをご確認ください。

Photoshop VIP | リボンやステッカー、バッジを簡単作成、PhotoshopフリーPSD素材30個まとめ
http://photoshopvip.net/archives/29521

30 kostenlose Photoshop Ribbon Sets | hpvorlagen24 Webdesign Magazin
http://www.hpvorlagen24.de/2011/04/26/30-free-photoshop-ribbon-sets/

これらを全てマスターすれば、あなたに描けないリボンは無いはず！
たのしいリボンライフを送って下さい！

(sayaka)

ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips

2011-11-23T15:00:00Z

破線を書く

Webデザインで、囲んだり、区切ったりと、よく使われる破線。
今回は、Photoshopのブラシツールで簡単につくれる破線をご紹介します。

1)ツールパレットから鉛筆ツールを選択してから、F5を押しブラシパレットを表示

2)間隔に任意の数値を入力

3) 線を描くと破線になります。

図形の境界線を破線で描く

Photoshopで図形の境界線を描くときに、レイヤースタイルの"境界線"を使用する場合があります。
この境界線を使って破線で描きたい場合は、一工夫が必要です。

1) 破線のパターンを用意します。

2)これをパターンに登録

3)好きな図形を描きます。

4)レイヤースタイルの"境界線"を選ぶ

設定を

○サイズ：2pixel

○塗りつぶしタイプ：パターン

○パターン：先ほど作ったパターン

この方法は、繰り返し同じあしらいのボックスを作成したい等の場合に便利です。

番外編：境界線のあしらいを工夫する

レイヤースタイルの"境界線"の塗りつぶしタイプ：パターンを使って、いろいろなあしらいの線を簡単に作ることが出来ます。

ガーゼパターンを使って不規則な破線。

羊皮紙パターンを使ってクレヨン＆手書き調の境界線。

漆喰パターンを使ってがっちりとした印象の境界線。

ゼロから作ると時間がかかるボックスのあしらいもこの方法だと少々の時間で出来るので便利です。（今回使用している環境は、Photoshop CS5です。）

(masanori)

高品質なWebデザイン素材（PSD）がダウンロードできるサイトまとめ

2011-11-09T15:00:00Z

このボタンのデザインって、どうやって作るのかな？
質感のあるWebデザインのパーツや素材の作り方が分からない、知りたい！って方におすすめする、
Webデザイン用の高品質なPSD素材がダウンロードできるサイトをご紹介します。

眺めるだけで、デザインの参考や学習になるのはもちろんですが、
ダウンロードしたpsdデータを読み解くことで、制作の裏側を学ぶこともできます。
レイヤー効果やテクスチャーなど、このように使っているのか！と発見があり勉強になります。

みなさんもぜひ参考にしてみてください。

Elemis

ページデザインのテンプレートから、パーツ、パターン、テクスチャ素材等をダウンロードできるサイト。
細部まで緻密に作られているデザインは勉強になります。

Freebies Booth

ボタンやメニュー、アイコンなど、主にデザインのパーツを紹介しているサイト。

Free PSDs & Resources for Web Designers by Orman Clark

Orman Clarkさんによって作成された、デザインパーツサイト。
フォームやボタン、グラフィックなどがダウンロードできます。

※ライセンス、利用条件にについては各自ご確認ください。

(yukari)

初めてHTML5でコーディングにする際に気をつけるべき事

2011-10-26T15:00:00Z

近頃HTML5が本格的に導入される傾向が高まりつつあります。
HTML5対応が促進される理由は、XHTMLの時よりもセマンティクス^*な文章構造を意識してコーディングをすることで、
データ自身に的確な意味をもたせる事が可能になりました。
それにより、サイト自身の情報の精度が高まり、検索結果等に正しい情報が反映されていくことになります。

*セマンティクスについてはこちらをご参照ください
エンタープライズ：Gartner Column：第11回そもそも「セマンティクス」とは何だろう？
http://www.itmedia.co.jp/enterprise/0108/20/01082088.html

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。 ]]> section要素はdivタグと同じような使い方をしない sectionタグはdivなど、要素を大枠で括って使用していたものと置き換えるのではなく、
見出しを含む文章や章、段落などをひと塊として扱います。

間違い例

<section>
　<div id="header">
　　<h1>sitename</h1>
　</div>
　

　<div id="contentsWrap">
　　contents
　</div>
　

　<div id="footer">
　　footer
　</div>
　
</section>

上記のように、全てをsectionタグで梱包してはいけません。

正しい例

<div id="wrapper">
　<div id="header">
　　<h1>sitename</h1>
　</div>
　

　<div id="main">
　　<section>
　　　contents1
　　</section>

　　<section>
　　　contents2
　　</section>
　</div>
　

　<div id="footer">
　　footer
　</div>
　
</div>

情報を細分化し、以下のようにmainタグ内生成し、要素ごとに区切って使う事が望ましいです。
なお、sectionタグ内に見出し要素がない場合はarticleタグ、重要でない要素にはasideと使いわけます。

header要素、hgroup要素は必要な場合のみ使用する

headerは各ページの上部に付けるだけではなく、
各要素の見出し、イントロダクション、ナビゲーションなど、
情報の導入部分や誘導部分との梱包として使用する事が望ましいタグです。
また、hgroupも見出し要素に使用するのですが、
こちらは要素ごとに対し小見出しやキャッチフレーズ等が複数ある場合、
それらをひと塊として扱うために使用します。

header間違い例

<section>
　<header>
　　<h1>pagename</h1>
　</header>
　<p>read</p>
</section>


sectionタグ内でアウトラインが生成できており、尚且つ見出し要素が一つしかありませんので、
この場合headerタグは必要ありません。

header正しい例

<section>
　<h1>pagename</h1>
　<p>read</p>
</section>

hgroup間違い例

<header>
　<hgroup>
　　<h1>pagename</h1>
　　<h2>promoword</h2>
　</hgroup>
</header>


header内にhgroup要素しかない場合は、headerタグを使用しなくてもいいです。

hgroup正しい例

<hgroup>
　<h1>pagename</h1>
　<h2>promoword</h2>
</hgroup>


header要素、hgroup要素は、同じ意味合いのタグで囲まれていれば生成せずに使用することが望ましいとされています。

nav要素

nav要素にはサイト内の誘導するナビゲーション要素が入りますが、
全てのナビゲーション要素をnavタグで囲むことは望ましくありません。
特にグローバルナビゲーションやサイト内検索、ページ内リンクなど、
サイトにとって主要なものに関してはnav要素を使い、
サイトを分割するページャーやブログのタグなど、
優先度の低いものには使用しないとする方がよいとされています。

navタグを使用する際には、この要素がこのサイトにとって主要となるナビゲーションか？
navタグで囲む物がsectionタグ等で梱包できないか？
などを基準にし設置しましょう。

今回はよく使用するHTML5の一部だけのご紹介ですが、
よりサイト内の情報に気をつけてマークアップする事が重要です。

(kazuki)

職業病って怖い

2011-10-12T15:00:00Z

職業を理由に犯罪は起こしちゃいけませんね

普段の生活の中で「このテクスチャ使えるかも！」とバシバシ素材集めができるぐらいの...まずいいカメラを手に入れる事から始めねばいけませんが。

ネットからテクスチャに限らず素材をダウンロードする際は利用規約にご注意を。

（kana）

女子にモテるWebデザイン【3】女子をメロメロにする6つのモチーフ

2011-10-05T15:00:00Z

第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)

2011-09-28T15:00:00Z

秋にぴったりの商用利用可能な「秋のイメージ作りに役立つブラシ、ベクターデータ、パターン」のご紹介をします。

ブラシ

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での画像処理の便利機能

2011-09-14T15:00:00Z

Photoshopでパス抜きや補正・処理などの画像処理を行う時、機能を把握していないとけっこう面倒くさいものですが、Photoshopには便利な機能があるのでそれらを駆使することで簡単に効率良く画像処理を行うことができます。

今回は2つの機能を紹介したいと思います。

１.ヒストリーブラシツール

Photoshopで行う一連の編集作業の内容、作業ごとの画像の状態はヒストリーパレットに記録されており、簡単に一つ前の状態の画像に戻せます。
ヒストリーブラシツールは、ドラッグした軌跡をヒストリーパレットで指定したヒストリーの画像と置き換えるツールです。

■使い方
１、ヒストリーから元となる画像を選択します。
２、ドラッグすると、軌跡に併せてヒストリー画像でペイントされます。

■ツールオプション
・モード：描画モードを切り替えます。
・不透明度：描画色の不透明度を設定します。
・流量：インクの量を設定します。
・エアブラシのアイコン：一点でマウスを押し続けると、エアブラシの様に広がっていきます。

■使用例
今回は空部分を白黒にする前のヒストリー画像でペイントして建物部分を白黒で残し、夕暮れの空の色を強調しました。

２.パッチツール

左のアイコンがパッチツールを表します。
パッチツールを使用すると、傷や汚れなどを自然な画像に修正することが出来ます。
修復ブラシと違う点としては、他の部分の画像で覆う様に隠すという点です。
また、パッチツールでは修復ブラシツール同様、画像の一部を使用するのではなくパターンを使用して塗りつぶすことも出来ます。

■使い方
１、パッチツールを選択します。
２、オプションバーでソースを選択します。
３、修復したい箇所をドラッグして範囲指定します。
４、３で選択した選択範囲を補正元となる綺麗な画像のあるところまでドラッグします。
５、ドラッグ先の画像によって、画像が修復されます。

■使用例
影の部分をソースにしてゴミを削除しました。

(seishi)　　　　　　

クロスブラウザチェックに欠かせない便利ツール

2011-08-31T15:00:00Z

クロスブラウザとは: 「複数のブラウザ上で，正常に動作すること」を意味します。

企業様のサイトでは、まだまだ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カスタマイズ　カスタムフィールドの検索

2011-08-17T15:00:00Z

MT4から追加された機能に、カスタムフィールドという独自の入力項目を追加できる便利な機能があります。
ですが検索フォームを使ってカスタムフィールドの値を検索できませんでした。
今回はそれに加えて、カテゴリ検索のAnd検索をする方法を紹介します。
※下記はMT５での解説となります。

こんな感じのAnd検索が可能です

1.プラグインを追加する

まずTechnology on Informationさんのプラグインを利用します。
それぞれダウンロードしてインストールしてください。
■カスタムフィールドの内容を対象にして検索：CustomFieldsSearch
■カテゴリー情報による検索：CategorySearch

どちらも修正BSDライセンスですが、これはかなり緩いライセンス形態で、商用利用も改変もしてよいですが、かわりに無保証で著作権の表示が必要というライセンスです。
ソースの上部に著作権表示しておけばOKじゃないでしょうか。

2.ソースを作成する

<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<div class="inner">
<p>検索項目を選択して、"検索する"ボタンをクリックしてください。</p>

<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
  <input type="hidden" name="CustomFieldsSearch" value="1" />
  <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" />
  <input type="hidden" name="CustomFieldsSearchField" value="area" />
  <input type="hidden" name="CategorySearch" value="1" />
  <input type="hidden" name="CategorySearchSets" value="1" /> 
  
  <select name="CustomFieldsSearchFieldLike">
    <option selected="selected">▼エリアを選んでください</option>
    <option value="area:北海道">北海道</option>
    <option value="area:青森県">青森県</option>
    <option value="area:岩手県">岩手県</option>
    <option value="area:宮城県">宮城県</option>
    <option value="area:秋田県">秋田県</option>
    <option value="area:山形県">山形県</option>
						↓
  </select>
  
  <input type="hidden" id="select" name="limit" value="<$mt:SearchMaxResults$>" />
  <select name="1" id="select_category">
  <option value="0">全カテゴリー</option>
  <MTTopLevelCategories>
  <MTSubCatIsFirst></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount">
  <option value="<mt:categorylabel>"><$MTCategoryLabel$></option>
  </MTIfNonZero><MTSubCatsRecurse><MTSubCatIsLast></MTSubCatIsLast>
  </MTTopLevelCategories>
  </select>
</div>
<div class="btnsearch">
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="image" accesskey="4" src="/img/btn_search.gif" alt="検索する" class="hoverImg">
</div>
</form>

○カスタムフィールドサーチを有効にするかどうか。
value="1" これでカスタムフィールド検索が有効になります。
type="hidden" name="CustomFieldsSearch" value="1" />

○検索対象を指定します。
value="entry"でブログ記事が検索対象になります。 
value="page"でウェブページが検索対象になります。 
type="hidden" name="CustomFieldsSearchClassType" value="entry" />

○カスタムフィールドでないカラムを無視する場合に指定します。
これにより余計な検索をせずに若干結果表示が速くなります。
type="hidden" name="CustomFieldsSearchIgnore" value="EntryTitle" />
type="hidden" name="CustomFieldsSearchIgnore" value="EntryBody" />
type="hidden" name="CustomFieldsSearchIgnore" value="EntryMore" />
type="hidden" name="CustomFieldsSearchIgnore" value="EntryKeywords" />

○カテゴリサーチを有効にするかどうか。
value="1" でカテゴリ検索が有効になります。
type="hidden" name="CategorySearch" value="1" />
type="hidden" name="CategorySearchSets" value="1" /> 

○カスタムフィールド検索
指定したキーと値で絞込みを行います(value="カスタムフィールドタグ:○○○")
name="1" id="select_category">

(takanosuke)

出っ歯はステータスやで

2011-08-03T15:58:46Z

出っ歯君は欲望に忠実です。

ここ数年でさまざまな展開を見せているARですが、セカイカメラなんかが有名ですね。

WikipediaではAR（拡張現実）は下記のように定義されています。

拡張現実（かくちょうげんじつ）とは、現実環境にコンピュータを用いて情報を付加提示する技術、および情報を付加提示された環境そのものを指す言葉。

引用元：Wikipedia - 「拡張現実」項目

世界を変えてしまうのではなく、少しだけ加えて、楽しくべんりにする。それがARのいいところ。
少し前に、ARを使ったこんなサービスがリリースされました。

これは「Zoff Mirror」というメガネ試着サービスで、カメラのついているPCなら無料ソフトをインストールすることで利用できます。
家にいながら、メガネを取っかえ引っかえ試着して購入までできてしまいます。

そのうち、出っ歯を試着出来る日も来るかも？

（kana）

実務で使える便利なCSS3ジェネレーター5種

2011-07-27T15:00:00Z

スマートフォンの利用者が増加するにつれ、HTML5とCSS3のコーディングもより身近になってきましたが
CSS3のプロパティは指定する箇所やコードが非常に多く視覚的にも判断しにくいのが難点。
そんな時に便利な、見て、いじって、実務に導入できるCSS3ジェネレーター5種類を紹介します。

Layer Styles

http://www.layerstyles.org/

Layer StylesはPhotoshopライクなCSS3ジェネレーターです。
使い方はまさにPhotoshopのレイヤー効果と同じで、
スタイルの数値を変更するだけでボックスに指定した効果が適用されます。
最後に左下にある『CSS Code』のボタンをクリックすると、
現在表示されているボックスに適用されているコードが生成されます。

生成可能CSS3：
border-radius, background-image, box-shadow

CSS3プロパティジェネレーター

http://css-eblog.com/eblog_sample/0912/css3-generator/

CSS3プロパティジェネレーターは全て日本語表記なので、英語が苦手な方にも扱いやすくなっています。
こちらも使い方はPhotoshop等のグラフィックソフトと操作方法が同じなので、感覚的に操作できます。
また、このジェネレーターはIE6向けのfilterも出力できるのでIE6も指定ブラウザであるときは便利です。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow

CSS3 Playground by Mike Plate

http://css3.mikeplate.com/

CSS3 Playgroundはボックスをレイヤー化でき、複数枚重ねてグラフィックを作れる様になっています。
ボックスを追加する場合は、右上の緑の＋ボタン、削除する場合は赤のXボタンをクリックするだけです。
惜しいのは、複数ボックスを生成した場合、選択しているボックスしかコードがコピー出来ないところです。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow, transform, column-count

CSS3.0 Maker

http://www.css3maker.com/

CSS3.0 Makerはアニメーションの指定まででき、Transitionの中にあるTransition Timingで動きの速度が変更できます。
また、通常状態かホバー状態か設定できるセレクトボックスが用意されているので、
アニメーションつきの少し凝ったナビゲーションを作りたい時に最適です。

生成可能CSS3：
background-image, background-image, box-shadow, text-shadow, transform, outline-style

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generatorはグラデーション作成に特化したできるジェネレーターです。
自分が作ったグラデーションを保存することができるので、頻繁に使うものやストックしておきたい時に便利です。

生成可能CSS3：
background-image

使用頻度が高くなりそうなCSS3のジェネレーターは色々あるので、
上手く使えば効率よく一歩進んだコーディングが出来るのではないでしょうか。

(kazuki)

夏のイメージ作り：商用利用可能なブラシ、ベクターデータ、パターン(Photoshop・Illustrator)

2011-07-20T15:00:00Z

夏にぴったりの商用利用可能な「夏のイメージ作りに役立つブラシ、ベクターデータ、パターン」のご紹介をします。

ブラシ

Clouds

少しイラストチックな雲のブラシ。
(配布元:brushlovers：Clouds )

BK Cloud Vector Brushes

コミカルな雨雲や雷雲のブラシ。
(配布元:BrushKing：BK Cloud Vector Brushes )

Cloud Formations

こちらは上のブラシと対照的にリアルな雲を作れるブラシです。
(配布元:brushlovers：Cloud Formations )

Ice Brushes

見ただけで涼しくなりそうな氷のブラシ。
(配布元:free-brushes：Ice Brushes )

Summer Beach

夏のビーチのイメージにぴったりのブラシ。
(配布元:free-brushes：Summer Beach )

Star 2 Brush Pack for Photoshop or Gimp

星のブラシは夏のエネルギッシュな雰囲気を作れそうです。
(配布元:texturemates：Star 2 Brush Pack for Photoshop or Gimp )

30 High-Res Tree Brushes

青々した木のシルエットが収録されているブラシセット。南国の雰囲気のする木のシルエットもありました。
(配布元:ARSGRAFIK：30 High-Res Tree Brushes )

ベクターデータ

free Vector Pack - Safari and Zoo Animals

動物園にいる動物のシルエットのベクターデータです。
(配布元:spoongraphics：free Vector Pack - Safari and Zoo Animals )

パターン

30 High-Res Tree Brushes

青々した木のシルエットが収録されているブラシセット。南国の雰囲気のする木のシルエットもありました。
(配布元:PATTERRIFIC：Free seamless patterns Dragonflies )

----------------------
ご利用になる前に、利用規約等の確認をお願いいたします。 (megumi)

初心者さんにおすすめ！HTML、CSS、Dreamweaver参考サイト＆書籍

2011-07-06T15:00:00Z

HTML、コーディングの学習に実際に役立った、おすすめのサイトと書籍をご紹介。
これからwebを学びたい方、現在学習中の初心者さん必見！のおすすめ情報です。
よろしければ参考にお役立てください。

(yukari)

グレヌデサ La graine du dessin

スマートフォンのコーディングで気を付けたい4つのポイント

はじめに

iOSのSafariは様々な制限やバグがある

Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない

横に回転させた時に画面のサイズに合わせて拡大させたい場合

スマートフォンサイトで文字サイズが違う場合

Photoshop・Illustratorでリボンを作るチュートリアル10選

【Illustrator】カリグラフィブラシでパスを描いてアウトライン化

【Illustrator】3D効果を使う

【Illustrator】パスを垂直に下ろして1面づつ作る

【Illustrator】結んだリボン

【Illustrator】勲章リボン（ロゼット）

【Photoshop】質感がすてきなレトロリボン

【Photoshop】巻きついたリボン

【Photoshop】超基本のリボン

【Photoshop】アプリアイコンで作ったリボン

【Photoshop】超リアルな結んだリボン

番外編

ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips

破線を書く

1)ツールパレットから鉛筆ツールを選択してから、F5を押しブラシパレットを表示

2)間隔に任意の数値を入力

3) 線を描くと破線になります。

図形の境界線を破線で描く

1) 破線のパターンを用意します。

2)これをパターンに登録

3)好きな図形を描きます。

4)レイヤースタイルの"境界線"を選ぶ

番外編：境界線のあしらいを工夫する

高品質なWebデザイン素材（PSD）がダウンロードできるサイトまとめ

初めてHTML5でコーディングにする際に気をつけるべき事

間違い例

正しい例

header要素、hgroup要素は必要な場合のみ使用する

header間違い例

header正しい例

hgroup間違い例

hgroup正しい例

nav要素

職業病って怖い

女子にモテるWebデザイン 【3】 女子をメロメロにする6つのモチーフ

1.布・レース

布系

糸系

お裁縫系

2.紙・ステーショナリー

書く物系

紙系

シール系

3.オシャレな女の子

4.手描き感

5.きらきら

6.花

秋のイメージ作り：商用利用可能なブラシ、ベクターデータ、パターン(Photoshop・Illustrator)

ブラシ

ベクターデータ

パターン

Photoshopでの画像処理の便利機能

１.ヒストリーブラシツール

２.パッチツール

クロスブラウザチェックに欠かせない便利ツール

MTカスタマイズ カスタムフィールドの検索

1.プラグインを追加する

2.ソースを作成する

出っ歯はステータスやで

実務で使える便利なCSS3ジェネレーター5種

Layer Styles

CSS3プロパティジェネレーター

CSS3 Playground by Mike Plate

CSS3.0 Maker

Ultimate CSS Gradient Generator

夏のイメージ作り：商用利用可能なブラシ、ベクターデータ、パターン(Photoshop・Illustrator)

ブラシ

ベクターデータ

パターン

初心者さんにおすすめ！HTML、CSS、Dreamweaver参考サイト＆書籍

女子にモテるWebデザイン【3】女子をメロメロにする6つのモチーフ

MTカスタマイズ　カスタムフィールドの検索