サイトトップページ

サイトトップページに必要なものは、
  • 学校名
  • 更新日
  • カテゴリリスト
  • コンテンツリスト
  • 連絡先
  • コピーライト
です。

見栄えはCSSで制御しますので(なくても構いません)、とりあえずHTMLの文書構造をきちんと把握しましょうね。

ユーザビリティを考えると、できるだけ少ないクリック・スクロールで目的のページへたどり着けるようにしたいですね。


1.ここはどこ?そう、モバイル版学校HPのトップページ


 SEO(Search Engine Optimization:検索エンジン最適化)は、WEB2.0時代に非常に重要な概念です。検索エンジンの力が大きくなり、“LINKのページ”の意味を考え直さなくてはならなくなった(ただ、おすすめリンクを並べたページから探すよりも、必要な情報のキーワードを検索エンジンにかけたほうが早く目的を達成できるようになった)今、いかに検索エンジンで上位にヒットさせるかは、非常に重要な意味をもちます。学校HPは商用ではありませんが、学校名を検索エンジンに入力してサイトを探す人は少なくありません。学校名を入力した時に、自サイトが1位にヒットしているでしょうか?「ゆびとま」なんかに負けてませんか?

 正しくマークアップすることは、文書を正しくコンピュータに知らせることになります。ここでは、1ページ1大見出しという原則に則り、大見出しに学校正式名称をいれましょう。

 また、ページ内リンクで、ページトップに戻ってこれるように、idセレクタをつけておきましょう。

<h1 id="top">J-team小学校</h1>


2.更新日表示はパケット代を節約する


 次に最終更新日を表示しましょう。携帯はパケット代がかかりますから、更新しているか分からないのにあちこちクリックさせてしまっては迷惑になります。PCサイトのように「いろいろ見てもらうためにあえて濁す」ような意図をもたないようにしましょう^^

 日付表示は、アクセシビリティを配慮すると、○月×日とすべきです。が、携帯サイトなので、2006/02/04のようでも大丈夫でしょう。ここでは、定義リストを使います。

<dl>
 <dt>最終更新日</dt>
 <dd>2月4日</dd>
</dl>


3.カテゴリリストでショートカット


 まず、モバイルサイトにはどのようなコンテンツが展開されているのかをアナウンスするために、カテゴリリストを設けましょう。また、ここにページ内リンクをつけておくことで、スクロールの手間を省けます。さらに、各カテゴリに更新日をつけておくと親切ですね。

 カテゴリリストであることを小見出しとしてマークアップし、その下にリストを設けます。

 ページ内リンクをつけるために、アンカータグをつけます。アンカータグはインライン要素なので、ブロック要素である<li>タグの中に記述します。ページ内リンクにはidの前に#をつけます。

<h2>モバイルコンテンツ</h2>
<ul>
 <li><a href="#news">ニュース</a>(2月3日)</li>
 <li><a href="#gaiyou">学校概要</a></li>
 <li><a href="#tayori">学校だより</a>(2月3日)</li>
 <li><a href="#class">クラス紹介</a>(1月13日)</li>
 <li><a href="#kids">児童より</a>(1月16日)</li>
 <li><a href="#event">行事</a>(1月10日)</li>
 <li><a href="#pta">PTA</a></li>
 <li><a href="#community">地域</a></li>
</ul>


4.各コンテンツの詳細リストを設ける


 コンテンツ詳細がこの下から始まることをアナウンスするために、カテゴリリストと同列の小見出しをマークアップします。

 その次に、各コンテンツの小見出しを設けます。これは一つ下層の見出しであるため、h3タグを使用します。また、各コンテンツには、先ほどのカテゴリリストからジャンプしてこれるように、設定したidを付け加えます。

 カテゴリリストと同じ容量でコンテンツリストを作成していきます。

 ここからは、各コンテンツリストの間に、ページトップへ戻れるリンクを設けます。リンク先はページ最上部に設けた大見出しにつけたidのtopを設定します。

<h2>コンテンツ詳細</h2>
<h3><a id="news">ニュース</a></h3>
<ul>
 <li><a href="news/topics.htm">トピックス</a></li>
 <li><a href="news/news.htm">お知らせ</a></li>
 <li>災害など緊急連絡</li>
</ul>
<p>▲<a href="#top">TOP</a></p>


5.学校連絡先は意外に重要


 学校にちょっと連絡したいという場合は、意外に多くあります。ここでは連絡先につかうaddressタグを使います。デフォルトでは斜体になります。

<address>
 〒000-0000<br />
 神奈川県横浜市<br />
 tel:000-000-0000<br />
 fax:000-000-0000<br />
</address>

 改行タグはどちらかというと文書構造にそぐわないタグなので、できるだけ使用は避けたいところですが、このように記述する際は、必要になります。
 また、先ほどのように、定義リストを使用してマークアップをしても構いません。その場合は以下のように記述するとよいでしょう。

<h3 id="aboutus">連絡先</h3>
<dl>
 <dt>住所</dt>
 <dd>〒000-0000 神奈川県横浜市</dd>
 <dt>電話</dt>
 <dd>000-000-0000</dd>
 <dt>ファックス</dt>
 <dd>000-000-0000</dd>
 <dt>メール</dt>
 <dd><a href="mailto:web-creator@tomosen.net">web-creator@tomosen.net</a></dd>
</dl>


6.コピーライトを忘れずに


 著作権表示と文責の両方をこめまして、コピーライト表示はしっかりつけるようにしましょう。これは、全ページにいれるので、パケット代の無駄と思われてしまうかもしれませんが、はずすべきではありませんね。Dreamweaverを使用している方はライブラリ機能を使うと便利です。

<address id="copy">copyright©2000-2006 tomosen. All rights reserved.</address>


7.ページ全体を確認しましょう


 ここで全体を書いてしまうと、まだ作成されていない各コンテンツへのリンクが並んでしまうので、全体を通してみたい方は千秀モバイルにアクセスし、ソースを見てください。DTDはXHTML 1.0 Transitionalとなっていますので、ベーシックに直していただければと思います。

http://www.edu.city.yokohama.jp/sch/es/senshu/mobi...
2006年02月05日(日) 21:17:58 Modified by web_encounter




スマートフォン版で見る