携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯サイト関連書籍

早くも「携帯サイト コーディング&デザイン」の増刷が決定しました!
ご購入いただいた皆様、日頃から当ブログをご覧頂いている皆様
本当にありがとうございます!
また、当初は品切れが続いてご迷惑をおかけしました。

増版のご連絡を頂いたのは先週ですので、
発売日から計算すると…20日くらい?
いやはや自分もびっくりです。

コンピュータ書はもともと万人受けするようなものではないので、
増刷されずに姿を消していく書籍が多いと聞く中、こんな短期間で増刷されるとは。
それだけニーズも多いってことですから、本当にうれしいです。
ちなみに担当者様談では半年で増版でも珍しいとか…(^ ^;)

さてさて、前置きはこのくらいにして本題に。
せっかくですから、こちらでもプレゼント企画をやっちゃいましょう。

ささやかではありますが、
読者の方へ本書をプレゼントさせていただきたいと思います。


以下よりまずはご応募ください。

-------------------------------------------
■「携帯サイト コーディング&デザイン」を2名様にプレゼント。
21日の23:59までご応募を受け付けます。→終了しました。
タイトルは「携帯サイト コーディング&デザイン プレゼント応募」としてください。

※応募のときには住所などは書かなくて結構です。
※当選した方へ後日ご連絡さしあげます。その際にお届け先を伺います。
※2通以上のご応募があった場合は、抽選とさせていただきます。
※ご自身のブログ、Amazonレビューなどで書評をいただける方を優先します。
-------------------------------------------

そんなに人気ブログでもないので、たぶんそんなには集まらないでしょう。発売後ですし。
ですから、たぶん当選確率はかなり高いですよ(笑)
ぜひ、ふるってご応募ください!

あっそれと、プレゼントする書籍は初版のほうになります。
2刷りでは初版で直しきれなかった誤植や間違いなどがある程度修正されますが、
出版社の正誤情報で初版のミスは掲載していますので。

それでは。
スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯ユーザに向けたデコメールの作成のポイントや実際の送り方、デザインテクニックなどを
紹介した記事をThinkITにて執筆させていただきました。本日より公開です。

特集「Webデザインまとめ読み」
月曜日公開特集:総まとめ、モバイルサイト動向
第1回:開封率の高いデコメールでメルマガ配信!

今年一発目のThinkITの月間特集として「Webデザインまとめ読み」と題して、
モバイルだけでなく、HTMLやCSS、FLASHなどWebサイト全般で必須となる知識を紹介します。
ぜひご覧ください。

【ThinkIT】 デコメール作成

今月毎週月曜日はモバイルの特集として4回にわたって掲載予定だそうですが、
僕が担当したのは今回の第1回目だけ。他の3回の特集はどのようなものなのか、
執筆する段階でも知らせていただけなかったので、どういった記事が載るのかちょっと気になりますね。
読者の方は要チェックです。

ちなみに、ThinkITでの執筆は今回で2回目。
前回は今から始める携帯サイト制作と題して、
4回にわたって携帯サイトの制作におけるポイントを紹介しました。
これが、非常に反響があったため今回も執筆する運びとなりました。

さて、話は変わりますが、年末に出版させていただいた
初の単著なる「携帯サイト コーディング&デザイン」ですが、
出版してまもないせいか、人気書籍?として、
現在アマゾンをはじめとするネット書店では入手困難な状況が続いているようです。
ご迷惑をおかけし、申し訳ありません。

book_mobile.jpg

Amazonでは2~4週間でのお届けとなっており、現在も在庫切れが発生しています。
前にもお伝えしましたが、アマゾンでは再入荷が遅いので、すぐに入手されたい方は
大手書店の店頭でご購入されるか、大手書店のオンラインサービスをご利用ください。
ジュンク堂(送料無料)紀伊國屋書店のオンラインサービスでは実際に在庫がありますし、
店頭在庫も潤沢で結構平積みされてますよ~

よろしくお願いします!

では。



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
先日26日に発売させて頂いた携帯サイトの制作本
「携帯サイト コーディング&デザイン」ですが、ご好評頂いているようで
Amazonでは早速再入荷待ち(在庫切れ)となってしまいました。

ご購入頂いた方ありがとうございます!
また、ご迷惑をおかけして申し訳ありません。

book_mobile.jpg

Amazonは再入荷が遅くて有名ですので、もしすぐにでもゲットされたいという方は、
以下のネット書店などではまだ在庫がありますので、チェックされてみてはいかがでしょうか。

■29日現在在庫がある書店
紀伊国屋
ジュンク堂 (送料無料)
ビーケーワン (送料無料)
セブンアンドワイ
楽天
TSUTAYA

また、以下のブログ等で書評を頂きましたので、リンクさせていただきます。

■主な書評先 (Googleブログ検索結果
Amazon カスタマーレビュー
ke-tai.org - ブックレビュー:携帯サイト コーディング&デザイン
idea x idea - 携帯サイト コーディング&デザイン 読者プレゼント
memokami::創造は組み合わせから - 【書評】Mobile Site Codeing&Degign (携帯サイト コーディング&デザイン)
Kamitani79-メロンとバナナとブログ - 携帯サイト コーディング&デザイン
Giyu-Blog::札幌でホームページ制作 - 書籍「携帯サイト コーディング&デザイン」が届く
構想雑文 - 書評:携帯サイト コーディング&デザイン
Log on / Log off - 書評 Mobile Site Coding & Design
ひげろぐ - モバイルサイト作成の参考書
19740308(TM) - 『携帯サイト コーディング&デザイン』を読みました
[M] mbdb - 携帯サイト コーディング&デザイン─モバイルサイトのコーディングに絶対役に立つ
携帯サイト制作 - gootreのメモ帳
CSSで作る携帯サイト - 恵比寿南日記
muneto.murakami.biz Weblog - 携帯サイト コーディング&デザインを読みました。
頭ん中 - 携帯サイト コーディング&デザイン
On a Whim - 「携帯サイトコーディング&デザイン」を読んでみた
サクッとペラいち - ケータイ関連の良書紹介
blog.wonder-boys.net- [books]携帯サイトコーディング&デザイン
愉快議 ~実践塾~ - 『携帯サイト コーディング&デザイン』レビュー



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
書影


携帯サイトの作り方を詳しく解説した本
「携帯サイト コーディング&デザイン」が12月26日(金)に発売(予定)になります。
非常に反響の大きかったThinkITの今から始めるモバイルサイト制作以来の執筆(単著)です。

──────────────────────────────
携帯サイト コーディング&デザイン
12/26 発売予定
ISBN 978-4-7973-4848-4
著者 高木 悠介(ペンネーム)
価格 2,709円
ページ数 260
出版社 ソフトバンククリエイティブ
──────────────────────────────

今までも、携帯サイトの制作に触れた本はあったのですが、
各キャリアが公表している仕様をただ右から左に流しているだけの書籍や
携帯サイトだけではなく、デコメや着メロ、アプリの作り方など
携帯サイトでできることを鳥瞰したような広く浅い内容で、
誰に向けた本なのかターゲットが絞り切れていない本が多かったため、

「結局、汎用性のある携帯サイトを効率的に作るにはどうすればいいの?」

という当たり前の疑問を解決できるような書籍を目指し、執筆いたしました。
本書のターゲットは当ブログの読者と同じで、
「PCサイトを作ったことがあるけれど、携帯サイトはよく分からない」
という方を対象に、携帯サイトのマークアップ(HTML、CSS)と
3キャリア携帯サイトを作る上でのデザインテクニックを解説した本です。

本書の特徴としては、

1. 3キャリアに対応したHTMLやCSSの書き方
2. 表現力の高いモバイルサイトを作る技
3. ユーザビリティに配慮したサイト構成
4. キャリア別のHTMLタグ、CSSリファレンスを掲載

あたりでしょうか。
通常、この手の書籍は最後のリファレンスに
絵文字の一覧表や端末のスペック表、カラーチャート表などを載せていますが、
これはキャリアのホームページを見れば良いわけですし、なんとなく内容の水増しにしか見えません。
(いろいろと事情はあるようですが…)

■HTMLごとに属性やCSSの挙動、対応表、ポイントなどをキャリア別に詳解
リファレンス

対して、本書はそのようなものは一切載せず、4.のリファレンスが充実しているという
面白い本にしてみました。実機画面(3キャリアごとに)を掲載し、
HTMLやCSSをどのように書くと、実機ではどうなるなるのか、
キャリアごとの違いはどう出るのか、といったポイントをまとめています。
(実はこの部分が一番大変だったわけですが…)
CSSリファレンスもうまくキャリア別にまとめられて良かったと思っています。

目次は以下のようになります。

目次

Chapter 1 独自に進化する携帯サイトの世界
1-1 携帯サイトを取り巻く状況
1-1-1 ユーザー層
1-1-2 携帯サイト利用率とシェア
1-1-3 コンテンツサービスの状況
1-1-4 端末の市場動向
1-1-5 携帯サイトのこれから
1-2 携帯サイトが注目される理由
1-2-1  24時間持ち歩く携帯
1-2-2 垂直統合がもたらす認証・著作権・課金モデル
1-2-3 公式サイトと勝手サイト

Chapter 2 携帯サイトはPCサイトと何が違うのか
2-1 携帯キャリア独自の仕様
2-1-1 携帯ブラウザ
2-1-2 HTMLの種類
2-1-4 CSS
2-1-5 絵文字
2-1-6 文字エンコード
2-2 端末に依存する仕様の違い
2-2-1 扱える画像の種類と目安
2-2-2 キャッシュ容量
2-2-3 画面サイズ
2-2-3 文字サイズ
2-3 携帯サイトならではの機能
2-3-1 電話を直接かける
2-3-2 電話帳登録
2-3-3 メールを送る
2-3-4 フルブラウザ切り替え
2-3-5 ブックマーク
2-3-6 GPS
2-4 携帯サイトではできないこと

Chapter 3 汎用的な携帯サイトの作り方
3-1 目的や規模に合わせた作成法の選択
3-1-1 キャリア別静的サイト
3-1-2 3キャリア対応の静的サイト
3-1-3 プログラム完結型
3-2 携帯サイトを作るために知っておくべき知識
3-2-1 基本はPCサイトと同じ
3-2-2 HTMLタグとCSS組み合わせによるキャリア別挙動
3-2-3 よく使う、使わないHTMLタグとCSS
3-3 汎用的なサイトを作る
3-3-1 標準的なサイト構成
3-3-2 サンプルサイトのソースの解説
3-4 携帯サイトの慣習テクニック
3-4-1 装飾は絵文字が最大の武器
3-4-2 半角カナのなせる技
3-5 動作確認
3-6 PCサイトから携帯サイトへの導線付け
3-6-1 htaccessを使ったユーザーエージェント振り分け
3-6-2 IP制限
3-6-3 QRコード
3-6-4 METAタグ

Chapter 4 3キャリア対応携帯サイトの制作ノウハウ
4-1 HTMLヘッダー
4-1-1 HTMLかXHTMLか
4-1-2 DOCTYPE宣言
4-1-3 コンテンツMIMEタイプ
4-2 画像についてのルール
4-2-1 画像の種類と画面サイズ
4-2-2 再配布の禁止
4-3 文字関連のルール
4-3-1 文字色の指定
4-3-2 文字サイズの変更
4-3-3 インデント
4-4 CSS関連のルール
4-4-1 インラインCSSと外部CSS
4-4-2 使えるCSSプロパティ
4-5 「こうしたい」を実現するデザインテクニック
4-5-1 色つき罫線 <HR>
4-5-2 spacer.gifによる疑似罫線
4-5-3 背景見出し(反転文字)
4-5-4 点線区切り
4-5-5 画像の回り込みと解除
4-5-6 下位互換のための記述方法
4-5-7 ページ内リンク
4-5-8 バグの考慮
4-6  CSSハック
4-6-1 外部CSS
4-6-2 CSSへの対応状況の違いを逆手にとる

Chapter 5 携帯サイトのユーザビリティ
5-1 使いやすさを向上する
5-1-1 リンク先とアンカーテキスト
5-1-2 アクセスキー
5-1-3 フォーム入力補助
5-1-4 ページ内コピー
5-1-5 ドメイン指定拒否解除、許可登録
5-1-6 内部リンク
5-1-7 ダイレクト操作
5-1-8 利用者に安心感を与える
5-2 視認性を高めるコツ
5-2-1  1行以内に収める努力
5-2-2  文字量を減らすテクニック
5-2-3 罫線文字で階層を可視化する
5-2-4 メニューと内容説明を1行で示す
5-2-5 余白はできるだけ詰める
5-2-6 PCサイトとは違う画面遷移
5-2-7 色の扱い方

Appendix
A-1 携帯絵文字変換スクリプト
A-2 3キャリア対応携帯画像変換
A-3 キャリア別に外部CSSを切り替える

Reference
・HTMLタグとCSSのキャリア別挙動
文書の本文を記述する
文書のヘッダー部を指定する
HTML 文書であることを示す
HTML 文書のタイトルを示す
略語であることを示す
頭字語であることを示す
住所や連絡先、電話番号などを示す
引用の文章であることを示す
改行を表す
引用や参照を示す
定義部分であることを示す
汎用的なひとかたまりの範囲を定義する
論理的な強調を行う
見出しをつける
キーボードから入力される文字であることを示す
段落であることを示す
プログラムソースなどをそのままの状態で表示する
短い引用を示す
プログラムの出力サンプルを示す
汎用タグ
論理的な強調を表す
プログラムコードの引数や変数を示す
リンクを示す
定義リストで定義する単語と解説を行う
順序なし/ありリストを表示する
入力フォームを表示する
入力フォームの各部品
表を表示する
表の中で表題を示す
画像を表示する
文字を太字にする
文字をひとまわり大きくする
水平方向の罫線を引く
文字を斜体にする
文字をひとまわり小さくする
メタデータを入力する
href属性で指定した文書を参照する
スタイルシートを記述する
ページに記述されたリンク先URLの基準となるURL

・キャリア別CSSプロパティ対応表
NTTドコモ
au
ソフトバンク

Index


本を出すタイミングとしては、高機能な携帯端末が一巡し、リッチな携帯サイトを
閲覧できる環境が整った昨今の状況を考慮すれば、まずまずなのかなと思います。
ぜひ、ご興味があればお手にとってご覧ください!

このあたりの内容は以前のThink ITで執筆させていただいたときも、
特集の中では一番PVもあり反響も大きかったみたいですが、
今回の書籍は完全に未知数。はたして…(^ ^;)

■完全フルカラー
完全フルカラー

全国の書店に流通するのはおそらく早いところで26~28日くらいに
なるのではないかと担当者の方はおっしゃっていました。
待てない方はご予約を(笑)
Amazonでは26日に発売、現在予約受付中となっています。
都内の大きな書店では先行販売も行うみたいです。

■ユーザビリティの解説も
ユーザビリティ

ここ数ヵ月間、本当に忙しい毎日でしたが、
このような執筆活動の機会をいただけて本当にうれしいです。

本書と荒木さんが先日出された
「PHP×携帯サイト デベロッパーズバイブル」もぜひ!



こちらの本と併せて、携帯サイトがさらに活気づけば幸いです。
みなさん携帯サイト作りましょう!

それでは。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
ThinkITで毎週火曜連載している
携帯サイト制作に関する「今から始める携帯サイト制作」が本日最終日を迎えました。
すみません、また宣伝させてください。

最終日の今日は「携帯サイトのユーザビリティ向上策」と題して、
携帯サイトを見た目をよくしたり、使いやすさをよくする方法についてまとめています。
ぜひ、ご覧ください。

第1回 携帯サイトとPCサイトはここまで違う! - 10月7日(火)
第2回 携帯サイトの制作から公開まで - 10月14日(火)
第3回 3キャリア対応の携帯サイトを作るには - 10月21日(火)
第4回 携帯サイトのユーザビリティ向上策 - 本日

今回初めてWeb執筆を体験しましたが、非常に貴重な体験でしたし、
学ぶものも多かった気がします。このブログから連載が決まったこともあり、
正直自分でもお話をいただいたときは、こんなことあるんだとびっくりしましたが、
無事執筆を終えられて良かったと思います。

引き続き、気長にブログを更新していこうと思います。



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
shibaです。

先週に引き続き、Think ITにて、僕が執筆させていただいた
携帯サイト制作に関する記事が公開されています。

第2回目の今日は、「携帯サイトの制作から公開まで」と題して、
汎用的な携帯サイトを作る手順やテクニック、知識を解説しています。

ご覧いただけると幸いです。

第1回 携帯サイトとPCサイトはここまで違う! - 10月7日(火)
第2回 携帯サイトの制作から公開まで - 本日
第3回 3キャリア対応の携帯サイトを作るには - 10月21日(火)
第4回 携帯サイトならではのユーザビリティ向上(仮) - 10月28日(火)



このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
Thinki ITにて携帯サイトの制作についてまとめた
「今から始める携帯サイト制作」を執筆させていただきました。
本日より公開です。

Think IT

このブログと同じで、PCサイトを制作したことはあるけど、
携帯サイトは初めてっていう方向けに書きました。

Think ITについてちょっとだけ説明させていただくと、Impress ITが運営するThink ITは、
Webに関わる技術者向けの技術解説サイトで、毎月2つの特集が組まれています。
特集では、一つのテーマを一人の著者が毎週同じ曜日を担当し、
1ヶ月で3~5回(1回につき3ページ)に渡って解説しています。

で、10月は特集2でモバイル向け制作という特集が組まれ、
その中の毎週火曜日「今から始める携帯サイト制作」が僕の担当。

全4回に渡り以下のようなテーマでお話しします。

第1回 携帯サイトとPCサイトはここまで違う! - 本日
第2回 携帯サイトの制作から公開まで - 10月14日(火)
第3回 3キャリア対応の携帯サイトを作るには - 10月21日(火)
第4回 携帯サイトならではのユーザビリティ向上(仮) - 10月28日(火)


このブログをギュッと濃縮して重要なポイントだけに絞って書いてみたので、
よければ見てみてください。サンプルソースとかもダウンロードできたりしますよ。

携帯×PHPで有名なmemokamiさんも昨日から同じ特集で記事を書かれていますよ~
携帯サイトをテストする方法」というテーマで。素敵。

ちなみに、裏話をさせていただくと、
今回の執筆は以前書いた記事「モバゲーのような携帯サイトを作るための12のTips」に、はてブがえらくつく光景にピンっときたThink ITの担当者様から直接メールを頂いたんです。

やっぱり携帯サイトを制作するにあたって、あまりに情報が少ないんじゃないかと。
そしてそれを求めている人が多いと言うこと。目の付け所が違いますな~笑

実は同時期に別件でも話をもらっていて、いろいろと裏で作業を進めていたりします。
やっぱり携帯サイトってみんな注目しているですね。

肝心の記事ですが、偉そうに語っていて、さらに顔出ししちゃってるし。
あまりその辺は触れないでおいてください。

では。




Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。