スマホの“子機”が続々と出てくるワケ - ITmedia PC USER
先週は立て続けにスマートフォンの“子機”となる新製品が発表されました。 スマートフォンがどんどん巨大化して、性能が上がって画面が見やすくなる一方で持ちにくくなっているのを、子機でカバーするという考え方です。この現象に名前を付けたいのですが、いい言葉が思い浮かびません。「本末転倒」とも違うし……。 懐かしのPDAブランドを冠した「Palm」は、米Verizonのスマホ（iPhoneでもAndroidでも）を持っている人が、同じ電話番号で使えます。大きなスマホを持ち歩かなくても単体で基本的なことはできるAndroid搭載の“コンパニオン”端末です。 オリジナルとは全く違うモノになった「Palm」。サイズは50.6（幅）×96.6（高さ）×7.4（奥行き）mm、重さは約62.5gで、Snapdragon 435、メモリ3GB、ストレージ32GB、3.3型（445ppi）の液晶ディスプレイを搭載し
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
メインビジュアルで訴求。印象的なスマートフォン向けサービスサイト（ランディングページ）まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。代表取締役の岩上です。スマートフォン向けのサービスを紹介する際、メインビジュアルを大きく使いイメージを訴求する手法があります。写真やイラストを大きく使用している印象的なサービスサイトをまとめて見ました。スマートフォンビジネスに携わっている方の参考になれば嬉しいです。 印象的なスマートフォン向けサービスサイト（ランディングページ）25選 1. Square https://squareup.com/ 2. Spotify https://www.spotify.com/int/ 3. MAILBOX http://www.mailboxapp.com/ ※すでにサービス提供を終了しております。 4. feedly https://feedly.com/ 5. pulse https://www.pulse.me/ 6. flipboard https://flipboard.co
スマートフォンサイトへの振り分け at フォノクラフト株式会社：作業メモや備忘録など
<head>内に、下記を入れ『スマートフォン用のサイトを表示しますか？』というアラートを表示させます。 <!-- SmartPhone --> <script type="text/javascript"> //if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { if (document.referrer.indexOf('（ドメイン名：例 phono.co.jp）') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 ||
CSS3でのposition:relative
CSS3でのposition:relative 昨日「スマホサイトでtd/th要素へのposition:relativeはダメ！」と書いたところ仕様書を読め的な圧力がいろんな所からかかってきました。こわいですね。 position:relativeが仕様としてどうなっているかは@Takazudoが5年ほど前に解説しているのでそちらを参考にしてください。 table系にはposition:relativeが効かない | Takazudo Clipping* ただ、これはCSS2.1の仕様なんですね。最新のCSS3ではWD段階ではありますが、次のようになっています。 table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multipl
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
『スマホブラウザサービスのボタン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2011年入社の根岸と申します。 9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。 今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。 ボタンは押したらハイライトしてほしい先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。 その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
アイディアは紙から始まる。スマホ、タブレットなどに使えるワイヤーフレーム・テンプレートたち。 – TechDoll.
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
Googleが提供する世界のスマホユーザーの動向が分かるWEBサイトを知ってる？ – MARS DESIGN Co.,LTD.
ECサイトを無料で作るオープンソース5選＋3！ 自社ECサイト制作に必要なパッケージまとめ 38,131 views 良い企画書をマネることから始めよう！大手企業が行うプロモーションの企画書事例まとめ 16,680 views 今更聞けないマーケティングの基礎が勉強できる便利な５サイトまとめ 13,238 views 0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ 11,786 views 脱初心者！事業計画書の書き方やテンプレート配布サイト4選 11,335 views 売上アップに必要不可欠！販促企画書のアイデアを貰えるサイト5選 8,664 views あなたのサービスが広まる、エレベーターピッチ！ 7,625 views 困った時に使える14パターンの無料名刺デザインサンプルデータ 7,429 views WordPressの導入からデザイン、プラ
スマホサイト制作支援ツール Adobe Shadow を導入してみました | バシャログ。
ダルビッシュが本日6勝目をあげましたね。 シーブレインのダルビッシュこと Latin です。 今回は Adobe から提供されているスマホサイト制作のサポートツール、 Adobe Shadow を導入してみました。 PC側のChromeで閲覧したサイトを、紐付けされたiPhoneやAndroid端末で自動的に表示してくれるというツールです。 スマホサイトは実機確認が大事ですし、かといって、一々QR生成してアクセスするのも面倒･･･面倒くさがりな私にとっては今後活躍しそうな予感！ [PC側]クライアントソフトをインストール http://labs.adobe.com/technologies/shadow/ 2番目の「Download Shadow Labs Release for Mac or Windows」から Windows、またはMac の任意のクライアントソフトをダウンロードして
UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み。
HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート！ HTMLファイ部ほんだです。 カヤックの新規開発事業部「ブッコミジャパン」が、 HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました！ jsdo.it（弊社運営のHTML5コード共有サイト）からHTML5ゲームを簡単に投稿でき、 他のクリエイターによって投稿されたゲームを無料で遊べます！ また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる JavaScriptライブラリ「jsdoitController.js」もリリースしました。 今回は「jsdoitController.js」で使えるようになる 「jsdo.it WebSocket Controller」（以下：jsdo.it コントローラー）の 仕組みについて
“モバイルファースト”の本当の意味と、Web担当者が知っておきたい基本＆実践3ステップ | Web担当者Forum
「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。 スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。 この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。 スマートフォンの普及で見直しが迫られるPCサイトスマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン
スマホ最適化のベストプラクティス10か条 byグーグルGOMO [編集長ブログ―安田英久] | Web担当者Forum
今日は、スマホ最適化のベストプラクティスの情報をお届けします。そして、その元となったグーグルが開設した「GOMO」というスマホ最適化診断サイトの情報も。 グーグルによると、スマートフォン最適化のベストプラクティス10か条は、次のようなものだということです。 これは、グーグルが開設した「GOMO」というスマホ最適化診断サイトからダウンロードできる診断レポートの内容からの情報です（GOMOについては後述）。 スピードを重視 多くのスマートフォン ユーザーは時間に追われており、1 日のちょっとした時間を活用してオンライン上のタスクをこなします。こうした多忙なユーザーを念頭に置きながら、サイトの読み込み時間を短縮し、テキストを読みやすくしましょう。 シンプルな操作 操作がわかりにくいサイトを喜ぶユーザーはいません。操作をわかりやすくし、ユーザーが探している情報を簡単に見つけられるようにしましょう。
![スマホ最適化のベストプラクティス10か条 byグーグルGOMO [編集長ブログ―安田英久] | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/97ba4e65596bd15e278c852cd94dc4f41bc82537/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fnakanohito%2Fnakanohito_icon120.gif%3Fitok%3Dv_x3hsxy)
FirefoxもOSに！ モジラが独自開発したオープンソースOSの格安スマホが年内に発売...
FirefoxもOSに！ モジラが独自開発したオープンソースOSの格安スマホが年内に発売...2012.03.07 18:00 湯木進悟 Firefoxファンの皆さま、お待たせいたしました！ そんな威勢のいい掛け声で、年内にもMozillaが開発を進める新しいモバイルOS｢Open Web Devices｣のプラットフォームにてスマートフォンが発売されるみたいですよ。なんでもOS全体がHTML5ベースで構築されていて、これまでにMozillaがFirefoxの開発で培った技術資産を結集する魅惑のオープンソースな新モバイルプラットフォームとして普及させていく目標が打ち出されているんだとか。 すでに先月開催されたMobile World Congress（MWC）においては、これから実際にOpen Web Devicesを採用したデバイスの発売を目指すパートナーとして、スペインのTelefon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
UI設計におけるスマートフォン対応のまとめ
スマホユーザーのサイト認知経路トップ3はスマホWeb、PC Web、クチコミ／スマートフォンレポート vol.1-1 | スマートフォンレポート | Web担当者Forum
