みんなが見てる人気のスマートフォン向けWebサイトデザイン
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編(前編) 2.HTMLとCSSで画像を操る編(後編) 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん!!」って方も多いのではないでしょうか? ということで、記事でも書いてみっかぁ!と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です( ̄▽ ̄;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn
スマートフォンにてソーシャルゲームを作ろうとすると、HTML5を中心にブラウザで動作するもの、もしくはネイティブアプリでの提供ということになります。モバゲータウンやグリーはその両方をサポートしています。ネイティブアプリの作り方は既に文献も多数なのですが、HTML5となるとまだ十分とは言えません。この資料は必見です。 「HTML5@iPhoneゲーム開発」はディー・エヌ・エーのスマートフォン開発グループの岸弘倫氏が「DeNA Technology Seminar #3」での講演用に作成したものになります。同社では北米のMiniNation向けにiPhone『Pirate Nation』(海賊トレジャー)をHTML、CSS、JavaScriptで開発して提供していて、そのノウハウを凝縮したものです。 『Pirate Nation』は冒頭の括りで分けるとブラウザで動作するアプリということにな
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ!」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
iPhone向けの最適化サイトを作る際に活用したいのがスライドするページ遷移やAjaxなどだろう。iPhoneに特化した機能だけに実装が若干面倒ではあるが、jQTouchを使えばごく手軽に実現できる。使い方にコツが必要ではあるが、iPhoneらしい優れたユーザビリティを実現したいならぜひとも導入したいライブラリだ。 格好いいインタフェース 元々シンプルなiPhoneインタフェースだったが、スキンにも対応してカラフルなサイト作りにも対応できるようになった。さらにインフォメーションページに対応し、Mac OSXのウィジェットのようにページ全体が回転して表示されるアクションもある。 機能は多数あるが、例えば画像の先読み機能やコールバックイベント、Ajaxの対応などが挙げられる。デザインもリストと数字を並べて表示したり、矢印をつけるなど細かな制御が可能になっている。都市を自由に追加できるワールドク
jQuery MobileはjQuery公式が開発したスマートフォン向けサイト開発用ライブラリ。 MOONGIFTはこう見る jQuery Mobileは数ヶ月前に開発が発表され、ついに1.0α版が登場した待ちに待たれたライブラリ。既に幾つかこの手のライブラリはあるが、本家が打ち出してくる以上、人気は集まるだろう。既に機能も多いので、大抵のスマートフォンサイトならこなせそうだ。 jQTouchは不具合とは言わないまでも、利用に際してはコツを掴む必要があった。jQuery Mobileはぜひそのテツは踏まず、PC向けライブラリ同様の使い勝手を維持してほしいと願ってしまう。 jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用のWebサイトを作るための専用ライブラリは数多い。最適化され、iPhoneなどで見やすい画
iPhone 買いました。iPhone 4。はじめてのスマートフォンですよ。 で、この機会にこのサイトのスマートフォン最適化を図ろうと考えたわけです。今までなにもしてなかったので。しかし恥ずかしながらスマートフォン向けのサイトを作った経験がなかったので、どこから手をつけたものかわからない。そこで、とりあえず参考になりそうなネタを探そうと「wordpress iphone 最適化」あたりでググってみたところ (このサイトは WordPress で作ってます)、どうも WPtouch iPhone Theme というプラグインが人気らしい。このプラグインは有効にするだけで WordPress サイトをスマートフォン向けに最適化してくれる便利なもので、採用してるサイトもよく見かけます。 でもプラグインをそのまま導入したんじゃ面白くない。やっぱテーマは自分でいじりたいし。となると、とりあえず知りた
前回に引き続き、スマートフォン対応サイトを制作する場合に気をつけるべきポイントとして、「PCサイトへの誘導の必要性」についてご紹介します。 スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか? 今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。 スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。 amazon.co.jpのiPhoneサイトを例に見てみると、ト
こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。 最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。 この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。 今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa
WordPress Mobile Admin [ad#ad-2] WordPress Mobile Adminの特徴 モバイルから新しい記事を投稿することができます。 モバイルで撮った写真をWordPressに投稿することができます。 モバイルから記事、ページ、タグ、カテゴリの編集ができます。 モバイルからコメントに返答することができます。 モバイルからプロフィールページを編集できます。 Gravatarをサポートしています。 多言語対応 -WordPressが対応している全ての言語をサポートしています。 [ad#ad-2] WordPress Mobile Adminのスクリーンショット iPhoneを持ってないので、WordPress日本語版でも大丈夫なのか分かりませんが、導入した際の管理画面はiPhoneで下記のように表示されるようです。 多言語対応なので、日本語も平気だと思うのです
[読了時間:2分] ますます拡大するスマートフォン市場。ニュースを配信するくらいの簡単なアプリ配布をしようにも、多大な開発コストが発生してしまい中々手が出ない。しかし「AppMakr」を使えば、15分もあればiOSアプリが作成できてしまうのだ。上の画面はTechWaveの記事やTwitter、YouTubeなどのコンテンツをアグリゲートしてタッチ操作で閲覧できるアプリ。作成までにここまで10分もかかっていない。ちゃんと動作もするし、専用のウェブページ(TechWaveアプリサンプル)からも動作試験が可能だ。 「AppMakr」で作成できるのは、上のサンプルアプリのような「情報アグリゲート&閲覧型」のもの。とはいえ、RSSや画像、動画、PodCast、カスタムHTMLなどが埋め込めるので、アイディア次第で誰も思ってもみなかったアプリにすることもできそうだ。 すごいなと思ったのは、アプリ作成ウ
直谷昇 » Twitterとブログ投稿の連携と告知効果測定を可能にする "Feed tweet" - at 2014/03/15 11:40 直谷昇 » Twitterとブログ投稿の連携と告知効果測定を可能にする "Feed tweet" - at 2014/03/10 11:06 関康治 » 世界で初めて「インターネットのブロードバンド接続を全国民の基本的権利」としたフィンランド - at 2012/08/02 22:03 うえ » Webページを簡単にPDFにしてくれる Web2PDF - at 2011/10/13 16:12 なべ » 遂にiPhone4が月額利用料金2980円という低価格でドコモ回線で利用可能に。海外からSIMフリーiPhoneを購入する注意点をまとめてみました。 - at 2011/05/19 12:12 INOUE,takuya » 遂にiPhone4が月額利
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Health Insurance Parental Control Healthy Weight Loss Cheap Air Tickets Online classifieds Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが7つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜%として表示してくれます。 何を改善すればポイントを上げられるか?についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ
auがタダ同然でスマホ配っててワロタ とりあえず「IS01」ってやつもらってきた 2010年11月08日 13:15 スマートフォン 1:Happy Waon(神奈川県):2010/11/07(日) 14:06:49.00 ID:90FF2R+XP GALAXY Sなど既存のAndroid端末へ対応……電子書籍販売サイト「電子貸本Renta!」 RBB TODAY 11月5日(金)21時23分配信 パピレスは5日、Androidスマートフォンおよびタブレット端末に対応した電子書籍販売サイト「電子貸本Renta!」を開始した。 これにより、「電子貸本Renta!」が配信する約8,000冊の電子書籍が、XperiaやGALAXY Sなど 5日時点で発売されているAndroid端末で利用可能となる。 「電子貸本Renta!」は、クラウド型のコンテンツ配信サービスのため、 PC・iPhone・iP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く