お客さまの設定により、お客さま情報が「非表示」となっております。お客さま情報を表示するにはdアカウントでログインしてください。 お客さま情報表示についてへ お客さま情報表示についてへ
お客さまの設定により、お客さま情報が「非表示」となっております。お客さま情報を表示するにはdアカウントでログインしてください。 お客さま情報表示についてへ お客さま情報表示についてへ
PCサイトスマホ変換「shutto（シュット）」サービス終了
shutto（シュット）サービス終了 PCサイトのスマホ変換サービス「shutto（シュット）」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部： 担当 原島(はらしま)/野林（のばやし） お電話でのお
様々な場面で参考になるUIキットが世の中には本当に沢山ありますが、UIキットと言っても、その種類はPCからiPhoneやiPadなどのキャリア別、質感、色相や目的、本当に様々なUIがありますよね。 そこで今回は僕がこれまでのWEB屋歴の中で見つけたUIキットを僕なりにタイプ別に分けてご紹介。 どういう時に使うのかは人それぞれですが、沢山の人が考えに考えぬいたUIキットであれば、そこから得られる物も本当に多いと思うので、是非参考にしてみるのはいかがでしょう。 黒ベースなUIデザイン Black UI Kit Blaubarry UI Kit FREE Ui elements Set d’elements ui (PSD) スマートフォン/タブレットPC系 UIキット Android GUI PSD Vector Kit Mobility: A free set of mobile UI de
前回の続きで、マルチデバイスの具体的な対応方法をviewportの設定とcssの出し分けの2点でまとめてみました。 スマホ、タブレットに対応させるための方法として、やることは主に以下の二つです。 1,viewportの設定 2,cssの出しわけ それぞれまとめてみました。 viewportの設定 viewportとは、スマートフォンのブラウザのウィンドウサイズに該当するものです。 一方、スマートフォンの画面サイズ、いわゆるdevice-widthは980pxもありません。 iPhoneでいえば、viewportは横幅980px、device-widthは横幅320px、縦幅480pxです。 通常のPCサイトを見ると、ブラウザ上で縮小されて表示されます。 例えば、コンテンツ幅が800pxのサイトでは、縮小されて横幅が左右合計180pxの余白がでます。 また、スマホの画面サイズが横幅32
[html] //UAを確認してandroidならviewportを変更 var viewport = document.getElementById(“viewport”); if (navigator.userAgent.indexOf(‘Android’) > 0) { viewport.setAttribute(“content”, “width=device-width,user-scalable=1”); }else if ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0 ) { viewport.setAttribute(“content”, “width=dev
iPhoneとiPadは解像度がデラ違うもんだがよーmetaのviewportが同じだっだら表示がえろー崩れるからJavascript先生。これは技というにはあまりにもおこがましいですが単純にifでユーザエージェントからviewportを分けてるだけ。でも便利かも。 Javascriptで書くとこんな感じ。 var d = window.document;if(navigator.userAgent.indexOf('iPhone') > -1) d.write('iPhone用のviewport');else if(navigator.userAgent.indexOf('iPad') > -1) d.write('iPad用のviewport');といった具合。これをhead内で呼び出すのみ。たったこれだけでiPadにも対応できるんだからよく設計されてるよなぁMobile Safari
久しぶりの備忘録。 というか、今の場所はFC2がブロックされるもので使いづらい。。。 大震災で本当に日本は大変なことになっているようですが、離れている場所にいると情報も入りづらくて、ただ一日も早い復興を祈るばかりです。 最近よくiPhoneアプリのアイコンを手がけます。 で、困るのが、あれ自動で角丸にされるわけなんですが、それを生かして角が丸いデザインをすることってあります。デフォルトで入っている設定なんかがそれに当たると思います。 で、いざ設計しようとすると、角丸の半径の設定ってどうなってるの？と思いました。 日本語で検索してもなかなか出てこない…キーワードが悪いのでしょうか？ というわけでこういうときは英語です。 “apple iphone icon radius"とか入れて検索するといくつかヒットしました。 諸説あるので精密に知りたい人は自分で調べてください。ここに書いてあるのでデザ
スマートフォン向けサイトの作り方 更新日：2011年1月22日｜公開日：2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないと
iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合、動的なページか静的なページかによって、いくつかの方法が考えられる。 ■PHPやPerl等で動的に書き出している場合 $_SERVER['HTTP_USER_AGENT'] を取得して、「iPhone」や「iPod」が含まれるかによって書き出すヘッダを切り替えるようにするのが簡単。 「$_SERVER['HTTP_USER_AGENT']」を使ったサンプルサイト 『Digital Gate for iPhone』 http://iphone.digital-gate.com/ 上記URLをPCとiPhoneで開いてみると、レイアウトの違いが分かるはず。 ■htmlで公開している静的ページの場合 ★Javascriptを使用する方法 if (navigator.userAgent.indexOf('iPhone') != -1
Thank you for being patient. We are doing some work on the site and will be back shortly.
iPhone・Android 向けのサイトデザインをする際に meta タグに viewport を指定して、デバイスの表示領域に合わせたページデザインを行う。 メタタグでの指定の例 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes,"> 各パラメータと、その内容 width ビューポート（可視領域）の幅（ピクセル値）。 デフォルト値は 980。 200 から 10000 までの範囲を指定できる。 height ビューポートの高さ（ピクセル値）。 デフォルト値は width の値とデバイスのアスペクト比から算出される。 233 から 10000 までの範囲を指定できる。 initial-scale ページが可視領域内にフィットするように計算された値がデフォルト値とな
最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭
株式会社アイ・エム・ジェイ（JASDAQ 4305）のグループ会社である株式会社IMJモバイル（本社：東京都目黒区 代表取締役社長：川合純一）は、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を実施いたしました。 調査期間は2012年3月2日～3月3日、有効回答数は826名から得られました。 調査結果概要 スマートフォンの進化により、サイト内での様々なインタラクティブUIを用いた表現方法が見受けられるようになりました。そこで、今回は複数のインタラクティブUI実例を用いたユーザーの操作印象について調査を行いました。 調査結果より、インタラクティブUIの受容性や好まれる表現は性年代によって異なることがわかりました。 例えば商品カテゴリを選択する際の階層情報を表示する表現では、20代男性の場合、「サブウィンドウが開く表現」もしくは「横タブでの表現」が好まれる結果となった一方、2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォン対応は必要？アナリティクスで確認してみましょう
