タグ

mobileとwebデザインに関するtamaotのブックマーク (8)

  • いまからでも遅くない! ケータイデザインの基礎固め

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

    いまからでも遅くない! ケータイデザインの基礎固め
  • モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト

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

  • [Think IT] 第1回:携帯サイトとPCサイトはここまで違う! (1/3)

    XHTML Mobile Profileに対応したHTML 連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基となるHTMLについて説明します(図1-1)。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基HTMLを基準に作られていますが、携帯ブラウザ(iモード、EZweb、Yahoo!ケータイ)で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof

  • 3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン - livedoor ディレクター Blog(ブログ)

    こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G(FOMA・WIN・3GC)端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末(FOMA・WIN・3GC)がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末(PDC・P型・C型など)を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運

    3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン - livedoor ディレクター Blog(ブログ)
  • モバイルサイトをPCで見るためのツールやFirefoxアドオン : LINE Corporation ディレクターブログ

    こんにちは。ライブドアでモバイルディレクターをしている河野です。 モバイルディレクターをしていますと、モバイルのサイトをPCで見たいという要望が少なからずあります。それは、PC からの方が実機で見るよりレスポンスが早く、また電波状況に左右されずに閲覧できたり、リンク先の URL の情報やヘッダ情報、画面キャプチャーなど実機からでは得られない情報を取得することができるからです。 そこで今回はモバイルサイトを PC で閲覧する方法についてまとめながら、開発を進めるのに便利なツールや Firefox のアドオンを紹介できればいいなと思います。 Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つ

    モバイルサイトをPCで見るためのツールやFirefoxアドオン : LINE Corporation ディレクターブログ
  • 第11回 PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド

    その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能

    第11回 PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
  • 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

    最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT

    3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
  • モバイルでのXHTMLとCSS

    ちょっと脱線#2 次々と賛同者が! iアプリとかで良かったら喋るよー♪by yoshiori モバイルってなかなか知識得る機会ないから興味あるよ!by tobetchi なんかしゃべりましょうか?むしろ最近の話に弱いですが、準備しますよby tmtysk いきたいby fshin2000 高まる期待(*'∀`)=3ワクワクby cafistar モバイル勉強会興味津々!by clearether モバイル勉強会期待してます。by kaoritter これに対して携帯から全レスするみにたぼ (`・ω・´) シャキーン

  • 1