CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。Read less
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。
最近スマートフォン用サイトの引き合いが増えてきていますが、そこで培ったノウハウもこのブログで紹介していこうと思います。今回は、スマートフォン（およびタブレット）用サイトでの動画の取り扱いについて。 スマートフォンで動画というと、真っ先に思いつくのはYoutubeにアップしてリンクを張り付ける方法ですが、企業の内規や動画の性質によっては、Youtube上に動画をアップすることができない場合もあります。先日担当したキャンペーンサイトもまさにそうでした。というわけで、ここではYoutube貼り付けじゃない方法での、スマートフォン/タブレット端末用サイトで動画を掲載する際のポイントをご紹介します。違ってるところがあればコメントでご指摘いただけると幸いです。 ちなみに、プラットフォームやOS毎の実装状況をひとまずまとめると以下の通り。なお、スマートフォン/タブレット版はデフォルトブラウザでの利用が前
いま「スマホファースト」との言葉も広まり始めたように、誰もが普通にスマートフォンを持ち歩く時代が訪れ、企業がスマートフォン対応をより重視するようになってきた。だが、とりえあえずスマホ対応しました、といったレベルに留まっていたり、そうでないにしろ、本当に現在の「スマホサイト」が、本来のビジネス上の狙いが果たせるサイトになっているか、自信は持てるだろうか？ どうしても成果があがらないならば、やはりサイトそのものの作りが悪いことは疑わなくてはならない。フィーチャーフォン時代からサイトを運営していた企業にも、初めてモバイル端末向けのサイトを構築した企業にも、スマートフォン向けにサイトを作る場合、知らなければ気づきにくい、かつ陥りやすい独特の「スマホサイトの罠」に気をつけなくてはならない。 そこで本稿は、スマートフォンサイトの構築にノウハウを持ち、コンサルティングも手がけるドコモ・ドットコムに聞いた
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
2013-06-30 狭い幅で開いたら勝手にスマートフォンのUserAgentでリクエストするChrome拡張を書いた ダウンロード https://chrome.google.com/webstore/detail/keffnkgkjiancfjjolkoejiocficcbni リポジトリ https://github.com/Cside/auto-change-to-sp-ua.crx 640px（設定で変えられる）以下の幅のウィンドウでWebページにアクセスすると、勝手にスマートフォンのUserAgentに偽装してアクセスする。よければ使ってみてください。 Cside 2013-06-30 22:37 Write a comment Prev. entry
サイトがスマートフォンからの利用に関して何らかの問題を抱えている場合、サイトオーナーに問題解決を促すインセンティブがこのほど登場した。Googleが米国時間6月11日、問題のあるサイトの検索結果の表示順位を下げる計画を発表したのだ。 Googleのモバイル検索チームのプログラマーである加藤義清氏とウェブマスタートレンド担当アナリストを務めるPierre Far氏は、ブログで次のように述べている。「スマートフォンユーザーへの更なる検索体験の向上と、スマートフォン環境での閲覧の支障を減らすため、Googleでは近日中に、誤った設定をおこなっているスマートフォン向けサイトに影響のある、いくつかのランキングの変更を予定しています」 2人はよくある問題の例を以下のようにいくつか紹介している。 デスクトップユーザー向けページを訪れたスマートフォンユーザーをリダイレクトする際、それぞれに対応するスマート
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
1.デザイン 2.画像編集 3.シミュレート スマートフォン向けサイトを作成するにあたって、役に立つツールをご紹介いたします。デザインと画像編集に関してはブラウザ上で動作するツールとなっています。インストールする面倒がなく利用できる利点があります。 ■1.デザイン 【CSS3 Generator】 スマートフォンで使われる角丸や影などのスタイルを簡単に作成できるツール。 http://css3generator.com/ 【CSS 3.0 MAKER】 スマートフォンで使われる角丸や影などのスタイルを簡単に作成できるツール。 http://www.css3maker.com/ ■2.画像編集 【befunky】 ブラウザ上で画像編集ができるツール。無料でも十分使える。日本語版がないのが残念だがいろいろ触っているとかっこよく編集できる。 http://www.befunky.com/ 【PH
※Androidでアクセスされた方は使用感をいただけると幸いです。 （サイトトップ） 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑） （IE系ではちゃんと表示されません…そのうち手入れします。すみません） どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 （ちなみに対象としているスマートフォンはiOSデバイス（iPh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
