いまからでも遅くない! ケータイデザインの基礎固め:一撃デザインの種明かし(6)(1/2 ページ) 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった! ケータイデザインの基礎の基礎 ケータイの画面サイズを考える! 一般的な画面サイズはQVGA(縦320px×横240px)ですが、最近ではQVGAワイド(
絵文字と同じように文章の中に画像を入れたり、アイコンとして使用したりできます。 フォントサイズが中のときは18×18px、小のときは12×12pxくらいのサイズで作成すると絵文字ともそんなに差がなく、文字とのバランスもよく表示されます。 上のお花犬のサイトでは犬の名前は「名前」のように文字で表現せず代わりにアイコンが表示されていたりと、絵文字だけでは表現できない役割をしています。 よくあるフロート画像の使用例と、フロート画像をうまく使った例 画像を寄せてその横にテキストを回り込ませて表示させる例です。 モバゲーやgreeなどの大手ポータルサイトにあるTOPページなどでコンテンツ内容の補足画像としてよく使用されています。floatをうまく使った例として、右のQooキャンペーンサイトでは、回り込ませる画像を背景となじませることで、区切りの印象をなくし、世界観をうまく表現しています。 背景画像で
突然ですが、私はイメージタグにaltは「必須」だと思ってます。 だってほら、ユーザビリティやSEOなんか考えたら必要だし、altがないとエラーになってしまうし。 最初に入社した制作会社でも、先輩に「ここ、alt入ってないよ。」と口をすっぱくして言われた私としては なんとしても全部に入れたい。 altを入れる必要ない時でも空のaltは絶対入れます。こんなん→alt="" 最近モバイルコーダーと化した私を悩ませているこのalt。 携帯サイトだとどうなんだろうと悩む今日この頃。 悩んだきっかけというのは、クライアントから「altが途中できれてるから削除してほしい」という修正依頼がきたことなんです。 ※意味が分からない人はこのエントリー末尾からサンプルページを見るべし! 最初は「えぇ!?」と思ったんですが、言われるがまま修正対応。alt撤去。 次に、「titleも途中できれちゃってるんで短くしてく
はじめまして!モバイルサイトのデザインをしている、まどかです。 今回はモバイルサイトで使われる画像の容量の落とし方についてお話ししたいと思います。 みなさんはモバイルサイトを見る時に、なかなか開かなくてイライラしたことはありませんか? ユーザーのみなさんに「ストレスを感じることなくサイトを見てもらう」ことを私たちは常に考えています。 そのためには、いかに画像をキレイに容量を減らすかが大事です。 PC 用の画像を用意する場合は Photoshop で用意するだけで大丈夫なことが多いですが、モバイルサイトではそうはいきません。 Photoshop で容量を減らしてもキレイにはできないからです。 容量の減らす方法は2つあります。 ・psdデータを Fireworks を使って減色する方法 ・最初から Photoshop の鉛筆ツールを使ってドットで描いていく方法。 イラストを描いたものや写真、デ
このドメインを購入する。 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
さっそく、読者の方から、「iモードブラウザ」が「2.0」になりましたが、 携帯サイト市場としてすぐに対応は必要ですか? というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。 結論から言うと 「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」 と思います。 iモードブラウザ2.0がドコモ新機種(昨年の夏モデル)に搭載されたとき、 技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、 私はその情報はもちろん作り手として知る必要はあると思うんですけど、 おそらく皆さんが思っているのは、そうではなくて、 じゃぁすぐに対応すべきかっていうことだと思うんです。 確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、 XHTML+CSSベースで携帯サイトが作れるようになった今でも、 核となる制作ノウハウ
前回ブログで書いた携帯サイト作成時のページ容量編についての関連情報です。 携帯の機種ごとのキャッシュサイズ(ページ表示用の一時メモリ)を調べる方法がないか調べてみたところ、以下のスクリプトを発見しました。 Kawa.net XPさんの公開されている[Perl] phone.pl 携帯電話キャリア自動判別ライブラリ で、どうやらキャッシュサイズを取得できそうです。 こちらで公開されている「phone.pl」をもとに、 自前でごくごく簡単なCGIを作りましたので、 もし、ご自分の機種のキャッシュ容量を知りたければ、 以下にアクセスすれば分かります。 ■自分の機種の端末情報(キャッシュ容量など)を知るスクリプト ※2次元バーコードを読み取りできる機種をお持ちの方 (結果で表示された番号等の意味は、配布元をご覧になってください) ※それ以外の方 URL:http://www.dspt.net/cg
モバイルデザインアーカイブとは? 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー?」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
携帯電話の絵文字の情報を集めてみました、絵文字を使用したCGIを自分で作成する為に集めた資料なので、拙い部分も多いとは思いますが、皆様の参考になればと思い、公開させて頂きます、又本ページで使用している絵文字の情報の著作権等に関しては各キャリア及び画像の製作者が有すものが含まれております、ので絵文字等を利用する場合には、著作権に十分に注意してご利用下さい。 ドコモ・au・SoftBankの絵文字と、ドコモ・au・SoftBankにて公開されている電子メールの絵文字変換表を電子データにして公開しています。 携帯メールで絵文字がどのように変換されるかのご参考としてもご利用いただけるかとも思います 本ページの情報を使用したことによって受けた、いかなる損害等に関しても本ページの作成者は保障いたしません、利用者の責任においてデータをご利用頂きますようお願い申し上げます。 又、本HPはリンクフリーです、
モバイル機器向けの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対応機用コンテン
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
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でケータイ開発
FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは? FireMobileSimulatorは、主要3キャリア(DoCoMo/Au/SoftBank)の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く