はじめに

現在、スマートフォンは大きく分けて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)

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

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

破線を書く

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

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

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


※200%なら1点置きに、300%なら2点置きの破線になります。

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

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

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

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



4×4pixelのボードに2pixelのドットで図のような柄を描きます

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

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

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

 

設定を

○サイズ：2pixel

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

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

にすると、出来上がりです。

出来上がり:

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

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

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


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

 

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

 

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

 

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

(masanori)

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

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

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

Elemis

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

Freebies Booth

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

Free PSDs & Resources for Web Designers by Orman Clark

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



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


(yukari)

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

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

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。

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

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

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

（kana）