”モバイルファースト”で起こること
「いまやトップレベルのプログラマはモバイルアプリから作る、最も優れたベンダーはモバイルサービスから提供していく」---。米グーグルのエリック・シュミット会長が米セールスフォース・ドットコムのマーク・ベニオフCEOと対談した際の発言である（関連記事）。 つまり“モバイルファースト”である。この言葉は当初、Webサイト作成に当たり、PCではなくスマートフォンなどモバイル機器での閲覧をまずはターゲットにすることを指す言葉だったようだが、この記事ではもう少し広く、アプリやサービスを含めてモバイルを第一に考えて開発し提供する、といった意味で使うことにする。 パソコン時代の終焉 さて、冒頭の発言には前段がある。「パソコンのプラットフォームは限界にきている」とシュミット氏は述べており、パソコンに代わってスマートフォンが情報機器、特に個人が持つデバイスの主役になりつつある状況を説明している。こうした見解自
アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは？ | Web担当者Forum
アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは？「モバイルファースト」という言葉をご存知でしょうか？ これは、グーグル、Facebook、アドビが採用を始めたコンセプトで、最近ではアップルやマイクロソフトも採用し始めているコンセプトです。 「モバイルファースト」というコンセプトは読んで字の如く、Webサイトを作る際に、まずモバイルサイトから作成するというものです。また、サイト制作に限ったものではなく、ビジネス戦略においても、存在が大きくなっているモバイルから考えることは重要な意味を持ちます。また言葉を言い換えれば、モバイルとデスクトップという境がなくなってるとも言えます。 この一見、単純なコンセプトが世界の名だたる企業に採用される理由を考えてみましょう。 モバイルファーストが採用される3つの理由モバイルファーストが採用される大きな3つの理由をまず知っておきましょう。 モ
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
レスポンシブ・ウェブデザインの功罪とモバイルファースト | 初代編集長ブログ―安田英久
今日は、スマホ対応で注目を集める「レスポンシブ・ウェブデザイン」の良い点と悪い点を述べていきます。 結論としては、レスポンシブ・ウェブデザインはすごいと思いますが、現状では、スマホ向けにはレスポンシブ・ウェブデザインを採用せずに専用の軽いHTMLを用意して対応するべきだと私は考えます。そうでなければ、完全にモバイル・ファーストでのデザインで進めることです。その理由を解説していきます。 3分でわかる？ レスポンシブ・ウェブデザイン「レスポンシブ・ウェブデザイン」のことを耳にしたことはあるでしょうか？ 2011年に日本でも注目された、Webページのデザイン手法で、PC向け・スマホ向け・タブレット向けなど、さまざまな画面サイズのデバイスに対応したWebデザインを柔軟に実現できるようにするものです。わかりやすく言うと、次のような仕組みで実現しています。 CSS3の「Media Queries（メデ
スマタブinfo | スペック検索とシェア率が役立つ国内スマホ・タブレット機種情報サイト
スマートデバイスの形状、OS、ディスプレイサイズ、CPU、シェア情報ほか詳細なスペックから抽出・比較ができるため、サービス対象の選定から不具合の調査まで広くご利用いただけます。 機種依存やOSバージョン依存に関わるバグ情報の投稿や検索ができます。質問と解決策の回答はもちろん、自分で見つけた問題の報告も。あなたもぜひ情報の提供者に！（準備中） 国内で販売された機種を網羅的に所有して、豊富な実績を誇る検証サービスに活用してきたKSKが提供します。スマホ・タブレットの信頼できる情報だけでなく、ノウハウも詰まった情報サイトを目指します。
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
ディレクターなら押さえておきたいモバイルSEO34項目 : LINE Corporation ディレクターブログ
ディレクターの渡邉雄介です。 ディレクターブログで以前に何度かモバイルSEOについて言及していますが、今回は、モバイルコンテンツ制作に関わるディレクターが最低限押さえておきたいSEOの進め方と、34個のチェック項目を紹介したいと思います。 SEO、その前に SEOを行うとき、まず最初に何をしていますか？ 「さっそく実施する」とお答えになる方もいるかもしれませんが、私は最初は何も手を付けず、現状の数値の把握から始めています。 たとえば、ページ内に特定のキーワードの出現回数を増やして、そのワードの検索順位の向上を目指しているような場合、施策を実施する前に最低1週間は過去の順位の推移・平均をみておかないと、結果どれだけ向上したのか、適切な検証ができません。 モバイルはPCと違って、まだまだ解析できる項目が限られているため、SEOの実施後にどれだけの変化があったのかを適切に検証をするには、実施前の
auとソフトバンクの外部CSSを切り替えるMobile CSS Switcher 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
auとソフトバンクの3G端末は外部CSSを読み込むことで、 豊富な表現が可能になっています。（ドコモはダメ） ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、 3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。 そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。 まず、どのような設計にするかというと、 ・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。 ・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。 ・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlin
ソフトバンクVGA端末の表示問題を解決する3キャリア対応携帯画像変換スクリプト 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
こんにちは、shibaです。 前回の記事「モバゲーのような携帯サイトを作るための12のTips」が予想以上の大反響で少々びっくりしてます。はてブの数とか半端ないです。こんなブックマークが付く記事を書いたことがありません。笑 いといろとコメントくださった方ありがとうございます。 おかげさまで、この記事以来、怒濤のように仕事が舞い込んできており、 多忙の毎日を送っています。 さて、今回は前回の記事のコメントでいただいた、 ソフトバンクのVGA端末でのサイト内画像の出力に関するお話です。 前回の記事で、ソフトバンクの高解像度（横240ピクセル以上）VGA端末では、ロゴなどの画像を他のキャリアに合わせて横240ピクセルで作成した画像を表示すると、高解像度のまま小さく表示されてしまう（けっこうかっこ悪い…）という問題がでてきてしまうという点について触れました。 ちなみに、ソフトバンク以外のキャリアの
2007年05月13日の記事 | へたぷろ - 楽天ブログ
tk.y 大学4年のエンジニアによる、WEB開発のメモや所属しているラボに関する日記を発信するブログです。 フォローする
404エラー - おタグるーむ
ファイルが存在しない。 サーバーに元々ファイルが存在しないか、既に削除されているために、ファ イルが見つからないというエラーが表示される。 ページの更新中。 ホームページの更新中で、目的のファイルがまだアップロードされていない。 リンク(URL)指定が間違っている。 ホームページの作者が、リンク先のURLを間違って指定していると、存在し ないファイルをダウンロードすることになり、このエラーが表示されます。 タイミングの問題で、たまたま表示された。 ファイルが存在するにも関わらず、ごく稀にこのエラーが表示されてしまう場 合があります。
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
jkondoに憧れて » 超手抜きでウェブサイトをモバイル対応 2008
◆追記 評判良かったので大幅に加筆訂正してみました。 ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。 間違いが含まれている可能性が非常に高いです。 突っ込み大歓迎。 前提 キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 長くなるので最初にまとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。
xhtmlを中心にモバイルサイト構築ノウハウまとめ - 適当な日々
webの仕事をしながら家でもwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれない仕事で某ポータルサイトのモバイルページを構築するようになって1年近く。 ノウハウがある程度溜まってきたのでxhtmlのことを中心に色々とまとめてみる。 目次 雑多なこと ヘッダー divタグ spanタグ brタグ hrタグ imgタグ aタグ サンプル 雑多なこと 出力は基本Shift_JISで（ドコモ基準） 静的ページを作るときは拡張子を.xhtmlにしないとドコモ端末がxhtmlをhtmlと認識してしまう。 （というか静的ページは絵文字とかヘッダー周りで色々不便なので、止めといた方がいい） 動的ページを作るときはapplication/xhtmlをヘッダとして送信してやらないとドコモ端末がhtmlと認識してしまう。phpだと出力前にこんな感じの処理。 header("Conte
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Our Mobile Planet スマートフォン調査
携帯シミュレータ - P1エミュレータ
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合