読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

携帯用の告知ページのHTMLとCSSを公開しておきます。

お知らせ Web標準

インクルーシブデザインワークショップの告知ページの携帯用HTMLとCSSを書いたので、せっかくだから公開しておきます。

モバツイにインクルWSの広告出してるよ!

先日から宣伝しているインクルーシブデザインワークショップ with Re:Creator's Kansaiですが、先週あたりから携帯電話でもそれなりのデザインで閲覧できるように対応させました。

理由はワークショップそのもののテーマが携帯電話ということもありますし、またモバツイ無料で広告を出させてもらえると知り、f-shinさんにお願いすると快く承諾をいただいたので、せっかくならPCサイトを携帯で見てもらうのではなく、携帯用のページを用意しようかと思った次第。

せっかくだからコードを共有

コーポレートサイトそのものを携帯対応にしてほしいという案件は少なくとも僕の周り(NPO法人や公益法人等)では聞かないのですが、河野武さんのスライド「モバイル・サイトの重要性」などを読んでいると、携帯対応はWebサービスでは当たり前、コーポレートサイトもそろそろか、という印象を受けました。

携帯の現状のレンダリングを踏まえた上でどういったコードがベストなのかについては、僕自身はまだまだ勉強中です。しかし、勉強しようにもPCのWebサイトと違い、携帯のHTMLやCSSはなかなかのぞき見ることができません。というわけで、ベストプラックティスとはほぼ遠いですが、こんなHTMLとCSSを書くと、携帯電話ではこんな表示になるよという意味で下記のコードを確認してもらえればと思います。一応、3Gと呼ばれる機種のみをサポートするイメージで作りました。たぶん。

ついでなので、QRコードも生成してみました

以下はメモなのですが、

  • 1つのコーポレートサイトを携帯向けにフルスクラッチで作成するのは時間も手間もかかりますが、1ページ、もしくは少ないページ数の告知ページなら練習がてらにはちょうどよいかな、と。無論、将来的には1枚のHTMLをCSSだけでPCと携帯と切り替えられるのが理想。
  • 凝った作りにするのであれば、サーバサイドや.htaccessでキャリア別にテンプレを振り分けるべきなのでしょうが、今回はhttp://www.re-creators.jp/inclusive/200811/への携帯からのアクセスをhttp://www.re-creators.jp/inclusive/200811/mobile/に飛ばすだけにしています。
  • 一応、DoCoMo、au、SoftBankの実機にて確認済み。
  • 前述のワークショップでは、この携帯用の告知ページを事前に視覚障害者の方にテストしてもらい、その結果も公表する予定(当日の会場のデジハリ大阪校は携帯の電波が届かないので)

コード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta content="application/xhtml+xml; charset=UTF-8" http-equiv="Content-Type" />
<meta content="text/css" http-equiv="Content-Style-Type" />
<meta content="text/javascript" http-equiv="Content-Script-Type" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="robots" content="index,follow" />
<meta content="障害者や高齢者の生の声を取り入れながら携帯電話のプロトタイピング" name="description" />
<meta content="インクルーシブ,デザイン,ワークショップ" name="keywords" />
<title>インクルーシブデザインワークショップ with Re:Creator's Kansai</title>
<link rel="alternate" media="handheld" href="http://www.re-creators.jp/inclusive/200811/mobile/" />
<style type="text/css">
	<![CDATA[
		a:link{color: #164964;}
		a:focus{color: #06A7CE;}
		a:visited{color: #295899;}
	]]>
</style>
</head>
<body>
<div color="#333333" style="font-size: xx-small;">
	
<div style="margin: 10px 0 0 0;">
<div style="text-align: center;" align="center">
<img src="logo.gif" alt="インクルーシブデザインワークショップ with Re:Creator's Kansai" width="178" height="58" />
</div>
<div color="#777777" style="margin: 10px 0 0 5px; font-color: #777777;">障害者や高齢者の生の声を取り入れながら携帯電話のプロトタイピング</div>
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 0 5px 0 5px">

<div style="margin: 10px 0 5px 0;">
<span color="#74AF0A" style="font-size: small;"><font color="#74AF0A">■ コンセプト</font></span><br /><br  />
Webサイトを制作する上でユーザビリティやアクセシビリティが大事だというのは分かる。<br  /><br />
けれど、本当に障害者や高齢者のためになっているんだろうか。<br /><br />
Webデザイナーやコーダー、ディレクターの皆さんはそんなことを一度は考えたことがあると思います。<br  /><br />
それを解決するにはどうすればよいのか。本人に聞くのが一番確実で手っ取り早いですよね。<br /><br />
<strong>インクルーシブデザインワークショップ</strong>は、そんな僕たちがちょっとした新しい視点を得られる場なのです。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#0B90BF" style="font-size: small;"><font color="#0B90BF">■ ワークショップ</font></span><br  /><br  />
インクルーシブデザインワークショップは、6名から7名を1グループとしたワークショップ形式で行います。<br  /><br />
そのうちの1名には必ずリードユーザと呼ばれる障害者や高齢者の方に入ってもらいます。<br /><br />
今回のテーマは<strong>「携帯電話」</strong>です。<br /><br />
リードユーザが普段どのように携帯電話を使い、どんなところが好きで、一方何に不満を感じているのかをヒアリングし、携帯電話のプロトタイプを制作します。<br /><br />
1. リードユーザの携帯電話に対する意見をヒアリングします。<br />
2. その意見をどんどんリストアップし、イメージを膨らませます。<br />
3. プロトタイプを制作します。<br />
4. グループごとにみんなの前で発表します。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">開催概要</font></span><br  /><br  />
日時<br  />
└2008年11月19日水曜日<br />
 18時30分から21時<br />
場所<br  /><a href="http://dhw.weblogs.jp/_osaka/guide/guide.html">デジタルハリウッド大阪校</a><br />
定員<br  />
└20名前後<br />
参加費<br />
└2,000円<br />
 (領収書発行します)<br />
準備物<br />
└携帯電話
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />

<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">お申し込み</font></span><br /><br  />
お申し込みは<a href="http://uemachi.cotocoto.jp/event/28786">cotocotoお申し込みページ</a>の右側メニューの「参加申し込みはこちらから」に次の項目をご入力ください。<br />
<ul>
<li>お名前</li>
<li>メールアドレス</li>
<li>電話番号</li>
<li>所属<br />(デザイナー、ディレクターなど、学生の方は専攻等)</li>
</ul>
電話番号、所属に関しては任意となっておりますが、可能なかぎりお書きください。<br /><br />
なお、デジハリ生の方は先着4名まで無料で参加できますので、所属にその旨お書きの上ご登録ください。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />
	
<div style="margin: 10px 0 5px 0;">
<span color="#E28915"><font color="#E28915">お問い合わせ</font></span><br /><br  />
お問い合わせやご質問等に関しては、<a href="http://d.hatena.ne.jp/aratako0/">TRANS</a>のあらたの<a href="mailto:aratakojima@gmail.com">メール</a>、もしくは<a href="http://mixi.jp/show_friend.pl?id=4913021">mixi</a>まで。
</div>

<hr size="1" color="#EEEEEE" style="border-color: #EEEEEE;" />
	
<div style="margin-top: 10px;">
<span color="#E28915"><font color="#E28915">主催</font></span><br /><br  />
<ul>
	<li><a href="http://www.symlab.sys.i.kyoto-u.ac.jp/incl/">京都大学インクルーシブデザインユニット</a></li>
	<li><a href="http://www.re-creators.jp/">Re:Creator's Kansai</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>