価格比較テーブルの高品質なPhotoshopテンプレート:phpspot開発日誌
Friday’s Freebie: Pricing Table Template | Web Designer Aid
価格比較テーブルの高品質なPhotoshopテンプレートの入手が出来ます。
プランごとの価格や性能、機能についての比較に便利で多くのWEBサイトで導入されているものですが、テンプレートがあることで、いざ自分が実装するという時にも便利に使えそうです。
雑誌風のレイアウトでサイトを作るためのJavaScriptフレームワーク『TreeSaver.js』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
綺麗にレイアウトしてくれたり、ページコントロールなどが用意されているので便利かもですよ。ご興味のある方はこちらからどうぞ。
» Treesaver.js
http://treesaverjs.com/
アクセントのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
「ブブンデザインアーカイブ」は、デザイン性に優れたPCWebサイトのパーツをキャプチャしてアーカイブした、Webデザイン見本集サイトで、Webデザイナーのアイデアインスピレーションを加速化する目的のため立ち上げたとのことです。
利用者がオススメのパーツを投稿できるようになっており、それがアーカイブされ検索できるというサービスです。
「ヘッダ」「デザイン・装飾系」「機能」「コンバージョン」「フッター」の大きく5つのパーツがブブン別アーカイブとして検索出来るようになっています。
また業界別アーカイブとして、サイトの業界から登録されたパーツを検索することも可能です。
スマートフォン最適化デザイン
国内のスマートフォン向けに最適化されたサイトをまとめているサイトをまとめました。
iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト
あのモバイルデザインアーカイブと姉妹サイトです。
登録数も豊富、カテゴリ毎で見れて便利です。iPhone対応サイト トップ | meet i [ミートアイ]
こちらもかなりの登録数、スマートフォン対応サイトってこんなにあるんですね。iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています
残念ながら更新が10年6月でストップしている模様ですが、国内サイトのまとめです。iPhone/touch に最適化されているサイト報告
2chのログ？にもありました。FX関連のiPhone対応アプリ/サイトまとめ | [FOREX PRESS]
FXサイトに特化したまとめ。
デザイン構築時に抑えておきたいこと
スマートフォン最適化を実施する際に最低限抑えておきたいこと - livedoor ディレクターブログ
基本だと思いますが忘れないようにしないといけないですね。
要点引用。・一画面に表示する要素はできるだけ軽く、シンプルにスマートフォン最適化を実施する際に最低限抑えておきたいこと
・画面遷移を省いた表示方法を活用する
・外出先で必要とされる機能を重視する
・スマートフォン本体やアプリなどで馴染みのあるUIを参考にする
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
超まとめ。軽量化についてなんかも載っています。KenG Weblog - WebサイトをiPhoneに最適化する方法
iPhone上でのブラウザの挙動等、基本情報がまとまっています。
これも抑えておいた方が良さそうです。スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)
スマートフォン特有タグ
スマートフォン向けサイトの制作では、普段使わないタグが出てきます。
Yuki’s SlowLife | 【iPhone・iPad】サイト制作のまとめ
viewportやフルスクリーンモードの事等、非常にまとまっていて分かりやすいです。iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK
html5のお勉強も合わせて。inputのtype属性を覚えましょう。
シミュレータ
ある程度出来上がった段階で表示の確認をしたいのに、iPhoneもスマートフォンも無いよ！という方はシミュレータを利用しましょう。
iPhoneのシミュレータ「iBBDemo」（Windows用）
こちらで紹介されているAir製のiBBDemo（現在はver2）で、iPhone/iPadの表示確認が可能です。
利用にはAirとSafariのインストールが必要です。
スマートフォンのユーザーエージェント一覧
スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる
もの凄いまとまってます。Web サイトのスマートフォン最適化: UA 判別篇 - terkel.jp
PHPでのユーザーエージェントの切り分けが記載されていますので、この2つの記事を合わせると完璧かも知れません。
JavaScriptライブラリ
スマートフォン最適化を行うためのJavaScriptライブラリがいくつかあります。
このブログのスマートフォンページはiPhoneテンプレートfor MTを使用していますが、そこではiuiというライブラリを使用されています。
⇒iui - Project Hosting on Google Code
他にも流行りのjQueryを使用したものがいくつかあります。さすがに中身は全て見れていませんが有名なところと紹介記事をピックアップ。jQuery Mobile
MOONGIFT : スマートフォン最適化サイトの本命か「jQuery Mobile」
jQuery Mobile | jQuery Mobile
jQuery Mobileの公式サイトです。jQuery Mobile: Demos and Documentation
アルファ版のデモページです。いい動きしてます。jQuery iPhone UI
MOONGIFT : iPhone向け最適化Webサイトを構築するjQueryライブラリ「jQuery iPhone UI」
jQTouch
iPhone最適化サイト構築 Post Topic jQTouchを使ってiPhone最適化サイトを作り込む
これだけ見ておけば急に言われても困らないでしょう。
明日から頑張ります！
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！
以下を参考にしたサイト作りを行いたいですね。
・一画面に表示する要素はできるだけ軽く、シンプルに
・画面遷移を省いた表示方法を活用する
・外出先で必要とされる機能を重視する
・スマートフォン本体やアプリなどで馴染みのあるUIを参考にする
スマートフォン最適化を実施する際に最低限抑えておきたいこと
mixi と Facebook には大きな隔りがある。 UI 。 mixi でトップページを開いた時、リソースはカテゴリごとに分けて表示されているが、 Facebook では全てのカテゴリのリソースが同じように表示されている。
また、 Comment や Like をつけるにあたって mixi ではカテゴリページやリソースのパーマリンクへ行く必要があるが、 Facebook ではトップページでその全てを行なうことが出来る。
この違いはかなり大きいのではないかと思う。 Like や Comment を付ける際の心理的動線的な障壁が Facebook ではかなり小さい。この小ささは、該当ユーザーへの @ を記述するだけである Twitter に比肩するか、それ以上だと思う。その上、扱えるリソースの種類は Twitter よりも多い。
text.ssig33.com - mixi と Facebook の違うところについて考えてみた。 (via syoichi)
CSS HappyLife ZERO
が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。
制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したり とか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違ってい たり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。
って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。
なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！
コーディング前に確認しておきたいこと。 - CSS HappyLife
以下、見出しです。
■ 基本的な確認事項
DTDは？
文字コードはutf-8でOK？
keywordsは？
descriptionは？
titleの記載ルールは？
ディレクトリのルールは？
ファイル名は？
対応ブラウザは？
IE6は何処まで厳密に対応すべき？
ヘッダーなどの共通パーツはどのように処理する？
拡張子は、htmlが必須？
システムが入る場合、留意点は？
アクセス解析は何が入る？
javascriptは自由に使える？
その他注意事項等は？
■ デザインに関して確認しておきたいこと
faviconは有りますか？
リンクカラーの指定は？
デバイス？画像テキスト？
複数行になった場合の処理
背景画像の切れた先の処理は？
このリストのマーカーは標準？画像？
微妙にマーカー画像のサイズや色が変わった？
順序リストの数字だけ太字だったり色が違う
逆N型の順番に並んだリスト
同じ（にしか見えない）サイズのボックスが並んでいる場合
行間がページによって変化する
隣のボックスと合わせて上下が中央揃い
確認事項と言うよりお願い的な
ポータル・検索サイト
770px iGoogle 920px842pxからのリキッドYahoo 950px Livedoor 954px Goo 970px MSN 950px Infoseek 850px Excite 920px フレッシュアイ 986px はてな 920pxからのリキッド @nifty 945px BIGLOBE 950px OCN 950px So-net 970px ODN 760px AOL 900px au one 980px //iGoogleの値を間違えて記述していたので修正し ました。
各新聞社のニュースサイト
YOMIURI ONLINE 920pxからのリキッド 毎日jp 950px asahi.com 780pxからのリキッド NIKKEI NET 985pxからのリキッド 大手ニュースサイト
ITmedia 970pxからのリキッド CNET Japan 990px CNN.co.jp 1000px Impress Watch Headline 960px TechCrunch Japanese 962px スラッシュドット・ジャパン 915pxからのリキッド web2.0系サイト
mixi 950px GREE 740px MySpace 800px Flickr 848px 755px del.icio.us 785pxからのリキッド Digg 945pxからのリキッド 800px Last.fm 960pxからのリキッド Photobucket 970pxからのリキッド Zooomr 850px Buzzurl 930px
今webサイトは幅何pxで製作されているのか | Liquid Paper Clips
企業系だと800px前後が多い中、一般的なBtoCサイトではほとんど1000未満なようです。
IE6のバグ対策法をまとめた『Ultimate IE6 Cheatsheet』が便利ですね… - IDEA*IDEA ～ 百式管理人のライフハックブログ
IE6対応は大変ですよね。これはブックマークするしかないですね
