まとめ：モバイルUIデザインギャラリー7撰 Zen Startup
スマフォのアプリがスタートしてまだ4年足らずだが、アプリ市場は急激に成長しており、世界中のビジネスパーソンが、アプリ開発で一攫千金を狙っている。では、アプリ成功の鍵とはなんだろうか。僕は現在ヒットしているアプリをリサーチすることと、UIデザインの2つが特に重要だと考える。 モバイルアプリのUIデザインは、パソコンやタブレットと比べて画面が小さいため、今までとは異なった「限られたスペースで行う使いやすいデザイン」が重視される。例えば、広告スペースや、会員登録ボタンのデザインも慎重に検討しなければなれない。表示するコンテンツのボリュームも最小限に留めるべきである。 では、どうすれば「使いやすいデザイン」を生み出せるか。それは海外のヒットしているアプリを徹底的に試してみることだ。例えばFacebookアプリやPathアプリは絶対に参照したほうがいい。 今回は「絶対に抑えておきたいモバイルUIデザ
HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作った - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 以前ご紹介した、HTML5製のWebサイト 向けUIフレームワーク・Kendo UIの モバイル版に触ってみたついでに 日本語化してサンプルにしました。 まだベータ版みたいなので、実用 段階では無さそうですが。 Kendo UIのモバイル版です。去年の夏くらいに記事書いたので合わせてご参照頂ければ幸いです。 タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI 選択肢はずいぶん増えてきましたが、これもその一つという事で・・・jQueryベースで動作しますので、JQMの代替として覚えておいてもいいんじゃないでしょうか。 基本的には有償版の販売がビジネスモデルみたいですが、OSSとしてGPLライセンスで配布されています。モバイ
クロスプラットフォーム対応モバイルサイトを構築するために必要なファイルをまとめた -Mobile Boilerplate
HTML, CSS, JavaScriptをはじめ、sitemap.xml, .htaccessやアクセス解析など、モバイルサイトを構築するファイルをまとめた「Mobile Boilerplate」を紹介します。 「Mobile Boilerplate」はjQuery MobileやSencha Touchなどと相性がばっちりだそうです。 Mobile Boilerplate [ad#ad-2] Mobile Boilerplateの特徴 クロスプラットフォーム対応（Android, iOS, Blackberry, Symbian） CSSはIE Mobile 7をターゲット ホームスクリーンアイコン（Android, iOS, Symbian） ビューポートの最適化（Opera Mobile, Android, iOS, IE, Nokia, Blackberry） ビューポートのスケ
モバイル開発に欠かせないテストツール14選
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 も含め諸々ダウンロードしなければいけませんし
多数デバイスに対応させる事も可能なモバイル自動対応WordPressプラグイン・WPtap - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 iPhoneに対応させるWPプラグインは 結構あります。例えばよく見かけるのは WPtouchです。しかし、ちゃんと探せば 更に高機能且つ、手軽なプラグインも あります。WPtap もその一つ。日本で 紹介している記事は皆無ですが、非常に 機能の充実したプラグインです。 僕も昨日知ったばかりで、iPhoneとiPadでしか確認をしていないので、タイトルで「多数デバイスに対応」と言い切ってしまうのは微妙な気がしたのですが、釣ってでも知ってほしいプラグインだったのでご了承頂ければと思います。じゃあ日曜に記事公開するなよって話ですがｗ iPhoneだけでなく、iPad、Android、BlackBerry、Nokia S60+などに対応しており、対応デバイスを追加すること
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
MdN Design｜総合情報サイト
専門知識を必要としないケータイサイト制作が始まっている ケータイサイト制作には、PC向けWebサイトの制作にはないさまざまな配慮が必要になる【1】。もとをたどれば、小さな端末に機能を盛り込むための規格への対応やユーザーの利便性向上のためのケアなのだが、PC向けのWeb制作やサイト運用の現場感覚からすれば、めんどう以外のなにものでもない。それが嫌でケータイサイト制作を敬遠するWebクリエイターを著者は知っている。かけるコストと工数を抑えながら、これら「ケータイ専用の配慮」をどうやってクリアするかは開発・運用のひとつの焦点だ。 ひとつの回答がFlashによるWeb制作だ。事実、FlashはWebクリエイターとケータイサイト制作を結ぶ大きな懸け橋になっている。トップページのFlash制作からケータイサイト制作に参入したというWebクリエイターは多いのではないだろうか。ページデザインの自由度の高さ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
モバイルSEOはじめの一歩 など10記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
日本語で読めるSEO/SEM情報モバイルSEOはじめの一歩 - 検索エンジンにインデックスさせるには （アイレップの SEM フロンティア）モバイル端末がアクセスしたときに、モバイル専用サイトを見せているWeb担当者も多いだろう。ここで注意すべきは、モバイル検索用のクローラにもモバイルサイトを見せなければならないということだ。さもないと、モバイルサイトがインデックスされないという事態に陥ることがあるそうだ。 モバイル検索のクローラにモバイルサイトを見せるには、検索エンジン会社が公開しているモバイルクローラのユーザーエージェント名やIPアドレスで振り分ける方法が一般的だ。 PCサイトからモバイルサイトへのリダイレクトは301? 302? （アルファSEO）モバイル端末からPCサイトにアクセスした場合にモバイルサイトにリダイレクトするときには、301と302どちらのリダイレクトを使うべきなのだ
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
– このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PCやモバイルなど異なる画面サイズに対応したウェブデザイン集 -Media Queries
fallinstar.org
http://www.seo-blogs.biz/2010/03/15/1567/
【Rockbird】モバイルサイト構築運用プラットフォーム