タグ

モバイルに関するwasabi_tsのブックマーク (17)

  • http://mobileredesign.jp/column.html

    wasabi_ts
    wasabi_ts 2010/11/15
     モバイルデザインについてのコラム
  • いまからでも遅くない! ケータイデザインの基礎固め

    いまからでも遅くない! ケータイデザインの基礎固め:一撃デザインの種明かし(6)(1/2 ページ) 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった! ケータイデザインの基礎の基礎 ケータイの画面サイズを考える! 一般的な画面サイズはQVGA(縦320px×横240px)ですが、最近ではQVGAワイド(

    いまからでも遅くない! ケータイデザインの基礎固め
    wasabi_ts
    wasabi_ts 2010/03/29
     ケータイデザインの基礎!画面サイズや文字サイズについて書いている
  • いまからでも遅くない! ケータイデザインの基礎固め

    絵文字と同じように文章の中に画像を入れたり、アイコンとして使用したりできます。 フォントサイズが中のときは18×18px、小のときは12×12pxくらいのサイズで作成すると絵文字ともそんなに差がなく、文字とのバランスもよく表示されます。 上のお花犬のサイトでは犬の名前は「名前」のように文字で表現せず代わりにアイコンが表示されていたりと、絵文字だけでは表現できない役割をしています。 よくあるフロート画像の使用例と、フロート画像をうまく使った例 画像を寄せてその横にテキストを回り込ませて表示させる例です。 モバゲーやgreeなどの大手ポータルサイトにあるTOPページなどでコンテンツ内容の補足画像としてよく使用されています。floatをうまく使った例として、右のQooキャンペーンサイトでは、回り込ませる画像を背景となじませることで、区切りの印象をなくし、世界観をうまく表現しています。 背景画像で

    いまからでも遅くない! ケータイデザインの基礎固め
    wasabi_ts
    wasabi_ts 2010/03/29
     ケータイデザインの基礎
  • 携帯サイトの画像にaltは必要?titleはどうする? - これからゆっくり考L

    突然ですが、私はイメージタグにaltは「必須」だと思ってます。 だってほら、ユーザビリティやSEOなんか考えたら必要だし、altがないとエラーになってしまうし。 最初に入社した制作会社でも、先輩に「ここ、alt入ってないよ。」と口をすっぱくして言われた私としては なんとしても全部に入れたい。 altを入れる必要ない時でも空のaltは絶対入れます。こんなん→alt="" 最近モバイルコーダーと化した私を悩ませているこのalt。 携帯サイトだとどうなんだろうと悩む今日この頃。 悩んだきっかけというのは、クライアントから「altが途中できれてるから削除してほしい」という修正依頼がきたことなんです。 ※意味が分からない人はこのエントリー末尾からサンプルページを見るべし! 最初は「えぇ!?」と思ったんですが、言われるがまま修正対応。alt撤去。 次に、「titleも途中できれちゃってるんで短くしてく

    携帯サイトの画像にaltは必要?titleはどうする? - これからゆっくり考L
    wasabi_ts
    wasabi_ts 2009/09/15
     ケータイのALTとタイトル問題
  • モバイルサイトで使われる画像の容量を落とす方法 : LINE Corporation ディレクターブログ

    はじめまして!モバイルサイトのデザインをしている、まどかです。 今回はモバイルサイトで使われる画像の容量の落とし方についてお話ししたいと思います。 みなさんはモバイルサイトを見る時に、なかなか開かなくてイライラしたことはありませんか? ユーザーのみなさんに「ストレスを感じることなくサイトを見てもらう」ことを私たちは常に考えています。 そのためには、いかに画像をキレイに容量を減らすかが大事です。 PC 用の画像を用意する場合は Photoshop で用意するだけで大丈夫なことが多いですが、モバイルサイトではそうはいきません。 Photoshop で容量を減らしてもキレイにはできないからです。 容量の減らす方法は2つあります。 ・psdデータを Fireworks を使って減色する方法 ・最初から Photoshop の鉛筆ツールを使ってドットで描いていく方法。 イラストを描いたものや写真、デ

    wasabi_ts
    wasabi_ts 2009/09/15
     画像の容量を落とす方法
  • papalabs.com

    このドメインを購入する。 papalabs.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    wasabi_ts
    wasabi_ts 2009/09/04
     EC-CUBEの絵文字対応表
  • 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    さっそく、読者の方から、「iモードブラウザ」が「2.0」になりましたが、 携帯サイト市場としてすぐに対応は必要ですか? というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。 結論から言うと 「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」 と思います。 iモードブラウザ2.0がドコモ新機種(昨年の夏モデル)に搭載されたとき、 技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、 私はその情報はもちろん作り手として知る必要はあると思うんですけど、 おそらく皆さんが思っているのは、そうではなくて、 じゃぁすぐに対応すべきかっていうことだと思うんです。 確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、 XHTML+CSSベースで携帯サイトが作れるようになった今でも、 核となる制作ノウハウ

    wasabi_ts
    wasabi_ts 2009/09/01
     携帯サイトコーディング&デザインサイト 青い本の筆者サイト
  • HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど

    HTMLタグボード HTMLタグ一覧、CSSリファレンス、SEO、ブログ収益化などWebサイトやブログを運営する人を応援する総合コミュニティサイト

    HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど
    wasabi_ts
    wasabi_ts 2009/09/01
    HTML、CSSタグ集
  • 自分の携帯電話の端末情報(キャッシュ容量など)を取得するスクリプト 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    前回ブログで書いた携帯サイト作成時のページ容量編についての関連情報です。 携帯の機種ごとのキャッシュサイズ(ページ表示用の一時メモリ)を調べる方法がないか調べてみたところ、以下のスクリプトを発見しました。 Kawa.net XPさんの公開されている[Perl] phone.pl 携帯電話キャリア自動判別ライブラリ で、どうやらキャッシュサイズを取得できそうです。 こちらで公開されている「phone.pl」をもとに、 自前でごくごく簡単なCGIを作りましたので、 もし、ご自分の機種のキャッシュ容量を知りたければ、 以下にアクセスすれば分かります。 ■自分の機種の端末情報(キャッシュ容量など)を知るスクリプト ※2次元バーコードを読み取りできる機種をお持ちの方 (結果で表示された番号等の意味は、配布元をご覧になってください) ※それ以外の方 URL:http://www.dspt.net/cg

    wasabi_ts
    wasabi_ts 2009/09/01
     携帯電話の端末情報を習得するスクリプト
  • モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト

    モバイルデザインアーカイブとは? 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー?」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。

    wasabi_ts
    wasabi_ts 2009/08/21
     モバイル事例サイト 便利
  • 絵文字を使いこなして見るためのページ【Docomo】全ページ

    携帯電話の絵文字の情報を集めてみました、絵文字を使用したCGIを自分で作成する為に集めた資料なので、拙い部分も多いとは思いますが、皆様の参考になればと思い、公開させて頂きます、又ページで使用している絵文字の情報の著作権等に関しては各キャリア及び画像の製作者が有すものが含まれております、ので絵文字等を利用する場合には、著作権に十分に注意してご利用下さい。 ドコモ・au・SoftBankの絵文字と、ドコモ・au・SoftBankにて公開されている電子メールの絵文字変換表を電子データにして公開しています。 携帯メールで絵文字がどのように変換されるかのご参考としてもご利用いただけるかとも思います ページの情報を使用したことによって受けた、いかなる損害等に関してもページの作成者は保障いたしません、利用者の責任においてデータをご利用頂きますようお願い申し上げます。 又、HPはリンクフリーです、

    wasabi_ts
    wasabi_ts 2009/08/21
     絵文字対応表
  • iモードの絵文字(メール・ウェブ変換表(docomo ⇒ 他キャリア))

    このページを作成するにあたり、以下より絵文字相互変換リストを利用させていただきました。この場を借りてお礼申し上げます。 ウノウラボ Unoh Labs: 絵文字の相互変換リスト 2008/07/28 docomo→au(ウェブ)を最新端末に合わせて変更 i-mode基絵文字No.70 → au絵文字No.122(従来はNo.97) i-mode基絵文字No.80 → au絵文字No.414(従来はNo.51) i-mode隠し絵文字No.183 → au絵文字No.110(従来は未対応) 最終更新日: 2008年07月28日 絵文字画像はご自由にお使いいただいて結構です(連絡不要)

    wasabi_ts
    wasabi_ts 2009/08/20
     絵文字変換一覧
  • モバイル機器向けXHTML仕様

    モバイル機器向けのXHTMLとして、現在その仕様が公開されているものには、 W3Cによる「XHTML Basic 1.0」 WAPフォーラムによる「XHTML Mobile Profile 1.0」 の2つが挙げられます。いずれも、元の言語は、XHTML 1.0です。XHTML 1.0は、HTML4を再仕様化したものですので、含められている要素や属性は、よく知られているものです。 EZwebのWAP2.0端末には、Opnewave XHTML拡張属性を加えた「XHTML Mobile Profile 1.0」に、さらにEZweb独自の拡張要素を認識するブラウザが搭載されています。 現在のEZweb環境では、 xml宣言を省略可能 ブラウザがDTDをチェックしない 各種の拡張要素/属性をブラウザ側で認識する ので、ほとんど従来のHTML文書を作成するような手軽さでWAP2.0対応機用コンテン

    wasabi_ts
    wasabi_ts 2009/08/19
     モバイル機器向けXHTMLの仕様
  • XHTML Mobile Profileリファレンス バージョン 1.0

    XHTML Mobile Profile リファレンス バージョン 1.0 オープンウェーブシステムズ株式会社 東京都新宿区西新宿6-22-1 新宿スクエアタワー17F http://www.openwave.com Part Number XHRF-10-004 October 2001 Legal Notice Copyright © 1994-2001, Openwave Systems Inc. Portions copyright © 1994&-1999, Netscape Communications Corporation. Portions copyright © 1994&-1999, Oracle Corporation. All rights reserved. These files are part of the Openwave Software

    wasabi_ts
    wasabi_ts 2009/08/19
     コード集
  • 今から始める携帯サイト制作

    携帯販売業務のアルバイトを経て、現在はベンチャー企業のWebサービスで主にマークアップを担当。PCおよび携帯サイト制作のほか、デコメ、SEO、LPO、モバイルアフィリエイトなどWeb全般の業務に携わる。HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。 HTMLタグボード:http://www.dspt.net/ 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-:http://dspt.blog59.fc2.com/

    wasabi_ts
    wasabi_ts 2009/08/19
     サイト制作方法
  • ke-tai.org > Blog Archive > Firefoxでモバイル端末をシミュレートするアドオン「FireMobileSimulator」

    Firefoxでモバイル端末をシミュレートするアドオン「FireMobileSimulator」 Tweet 2008/9/4 木曜日 matsui Posted in 記事紹介・リンク | 3 Comments » thorikawaさんからのタレコミです。 (情報提供ありがとうございます) FireMobileSimulatorは、ドコモ、au、ソフトバンクの3キャリアに対応し、HTTPリクエストや絵文字表示などをシミュレートしてくれるFirefoxのアドオンです。 → 遙かへのスピードランナー Firefoxでモバイル端末をシミュレートする独自アドオン「FireMobileSimulator」を公開します [d.hatena.ne.jp] → Firefox Add-ons FireMobileSimulator [addons.mozilla.org] Firefoxでケータイ開発

    wasabi_ts
    wasabi_ts 2009/08/16
     シミュレート
  • Top - FireMobileSimulator.org

    FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは? FireMobileSimulatorは、主要3キャリア(DoCoMo/Au/SoftBank)の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ

    wasabi_ts
    wasabi_ts 2009/08/14
     firefox上で携帯コーディングを見るアドオン
  • 1