Adobe Shadowが便利！導入手順をまとめてみた！ (PIXEL LAB)
Adobe Shadowとは まだ、プレビューリリースですが、かなり即戦力なソフト「Adobe Shadow」が昨日公開されました。 ウェブサイトのスマホ対応は、なかなか手ごわいテーマですが、このソフトをつかえば、 Win、もしくはMacのChromeで表示しているウェブサイトを、iOSデバイスや、Androidデバイスにて、 同時に表示してくれます。いちいち、スマホにアドレス打ち込んだり、タップしなくてもOK！チラ見でOK！！ 検証作業のストレスが、圧倒的に軽減されます。 あと、ほかのサイトは、スマホ対応、どうしてるんだろうかといったとき、 Chromeでチェックすれば、デバイスでもすぐに表示されるので、他サイトの検証にも役立ちます。 ちょうどリアルタイムで、スマホ対応で泣いている僕に、希望の光をくれたこのソフトのために、 導入方法を紹介したいと思います。 ちなみに、デバッグ機能もあるの
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
jQueryを使ったサイトで縦スクロールは見るのですが、横スクロールのものを見たことがありません。縦画面のタブレットやスマートフォンを考慮して縦スクロールが多いと思うのですが、どなたか横スクロールのサイトをご存知の方はいませんか？
jQueryを使ったサイトで縦スクロールは見るのですが、横スクロールのものを見たことがありません。縦画面のタブレットやスマートフォンを考慮して縦スクロールが多いと思うのですが、どなたか横スクロールのサイトをご存知の方はいませんか？
非公開サイト
サイトの構築。作品の販売。ブログの投稿。この他にもさまざまな機能があります。 ログイン サイトをはじめよう 非公開サイト このサイトは現在プライベート設定になっています。
スマートフォン向けのサイトデザインでとっても大切な5つのポイント
J Taylor Design スマートフォンにおいて、スクリーン上のクリック（つまりタップ）無しに使うことは考えられません。ナビゲーションはユーザーが必要とすることが得られるように、明確な進路を与えるべきです。 ナビゲーションで重要なことは二つ。 まず、ナビゲーションが視覚的にタップ可能に見えるか確認してください。見た目をボタンやリストのようにしたり、矢印などを加えてもよいでしょう。ただし、スマートフォンではtitleのテキストをホバーで表示したり、ホバー時のエフェクトを適用できないので、それ無しでも押すことができるように見えることが大切なポイントです。 もう一つの重要なことは、ラベルです。 「戻る」というラベルがあれば、ユーザーは戻ることを期待します。これは当たり前のようですが、ユーザーにとってラベルが何を意味するか分かることを確認してください。 ラベルを有意義にするポイントは、シンプ
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」:phpspot開発日誌
Cue ? A gesture icon system ? Some Random Dude スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」 スワイプとかいっても、それ何？と言われそうな気がする今日このごろですが、今回紹介するアイコンを使えば、なんとなく説明がしやすくなるかも。 次のような指を模したデザインに矢印などをつけてジェスチャーを表現したアイコンセットが公開されています サイト自体のチュートリアルページなんかに使うといいかもしれませんね。 PNG、SVG形式で公開されています 関連エントリ オープンソースのマルチタッチ用ジェスチャーアイコンセット iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 Firefox4のAudio Data APIで楽譜をWEB上で演奏するデモ
iPhoneやAndroid向けのUIパターンギャラリー・Mobile Design Pattern Gallery
カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。
スマートフォン（iPhone/Android）アプリのマーケティングとマネタイズ戦略を資料にまとめてみた《基礎編》：Android （アンドロイド） × グローバル：オルタナティブ・ブログ
@metaps_satoです。 最近セミナーの告知ばかりでしたので真面目にアプリのマネタイズに関する記事を書こうと思います。 ◆現在のスマホアプリの市場をまとめてみた スマホ市場は本当にスピードが速い。１ヶ月情報を追っていないと既に以前の情報が古る過ぎて役に立たなくなってしまいます。 市場のプレーヤーも増えますし、様々な企業がトライアンドエラーを繰り返しているので、成功事例・失敗事例もすさまじいスピードで増加しています。一旦ここらで情報まとめといたほうがイイなと感じましたので市況からマーケティングやマネタイズに関する基礎的な情報をまとめました。 ◆一番相談が多いのはやはりマーケティング ここ最近ビジネスでよく聞かれるのはアプリのマーケティングです。とりあえずアプリ作って見たものの、集客どうしようかという場合です。アプリの世界はウェブと違って外部リンクのようにう投げ合う文化が存在していないの
スマートフォンのUIデザインパターン集 | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 みんなのブロックチェーンは，ブロックチェーンの入門書。暗号やハッシュなどを含め，基礎からブロックチェーンの仕組みを学べる書籍です。 いろんな方に「新しい技術を学ぶことの楽しさ」を感じ取ってくれたら著者として嬉しいです:-)。お金は技術的にどのように定義されるのか。 みんなのIoTは，モノのインターネットと呼ばれるIoTの入門書です。IoTの基本について，読者に寄り添って優しく解説しました。裏テーマは一番とっつきやすいPython入門書。サポートページはこちら みんなのPython 第四版は，より分かりやすい入門書を目指し，機械学習やデータサイエンスの章も追加して第三版を大幅に書き換えました。Python 3.6にも華
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
デザイン知識の幅を広げる参考サイト vol.2 – ｜ .design()
今回も前回の続きとして、デザインの参考となるサイトのご紹介です。 今回は、iPhoneでのサイトデザインの紹介サイトをいくつかご紹介します。 iPhone Design Box 国内中心のiPhoneサイトデザインの紹介サイトです。個性的なアプリやデザインの種類が豊富で、柔軟性を養うことができます。 CSS iPhone 国外のiPhoneサイトデザインの紹介サイトです。こちらも個性的なUIばかりで、さらっと見るだけで洗練された上質デザインのインスピレーションを受けることができます。 AGT smartphone design gallery 国内外の企業系サイトが多数紹介されています。更新頻度が高く、マウスオーバーだけで画面の隅々まで見渡せるようになっています。一覧ページで各サイトの全体的なデザインを見たい人にはとても嬉しいサイトです。 iPhoneサイトデザイン集のiPhoneデザイン
スマートフォン時代のWebサイト制作 第1回 スマートフォン対応の重要性とその方法 | デベロッパーセンター
iPhoneに始まり、さらにここ数年で様々なAndroidケータイが登場し、日本でもスマートフォンが普及し始めています。それにともない、企業サイトやECサイトを、スマートフォンブラウザーで利用するユーザが着実に増えてきています。世界規模でいえば、2012年頃にはスマートフォンの販売台数がPCを超えるという予測もあります（ITU, Mark Lipacis, Morgan Stanley Research.2009 資料PDF ）。これはビジネス的に考えて、「まだ様子を見て、対応しなくてもよい」とはいえない状況でしょう。そこで、本連載では「スマートフォン時代のWebサイト制作」をテーマに、スマートフォン対応に必要となる考え方、Dreamweaverを使ったスマートフォン対応のテクニックなどを解説していきます。第1回目となる今回は、スマートフォン対応サイトを制作する前段階について考えてみましょ
スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good night, Posterous
サイトのスマホ対応3つの手法と、単なる“対応”を超えたスマホ最適化の優れたツールとは | Web担当者Forum
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
http://www.css-lecture.com/sp/