W3G

全体を何の要素で括るか

これは、どのチームも満場一致でfooter要素で括っていました。ここは意見がわかれるようなこともないでしょう。

一番上のHOME >をどのようにマークアップするか

HOME >の部分をどのチームもパンくずリストと見なしていたので、ul要素またはol要素でリストとしてマークアップしていたのですが、出題者である司会の村岡さん云く「そもそもパンくずリストではなく、単なるHOMEというアンカーリンク」とのことでした。見た目がややこしいUIであれば、コーディングを行う前に、デザインカンプを作成したデザイナーの方に確認をとるという、原点に立ち戻ることの大事さに気づかされました。

なお、パンくずリストとした場合にどのようにマークアップするかは2つ目の出題とかぶりますので後述いたします。

ロゴと会社名の扱いをどうするか

どこまでを画像にするか、テキストにするかなどで意見がわかれるところですが、個人的には会社名も英名も含めて1つの画像で良いかと思います。効率的ですし、テキストにしようとした場合にはフォントの加減で再現できない可能性もあり、またロゴをテキストで再現するためだけにWebフォントを使うのも余分に感じます。ロゴと会社名などはざっくり一枚のセット画像にして、alt属性に会社名を入れる形で良いかと考えます。またはスタイリグの融通を利かせるために一枚のセット画像で切り出して、テキストをCSSで画像置換するなどは好みの問題になるかと思います。個人的には画像置換派です。

問い合わせ先を何の要素で明示し、その範囲をどこまでにするか

まず、問い合わせ先についてはaddress要素です。ほとんどのチームがaddress要素を使えていましたが、その使用範囲はチームごとにバラバラの結果になりました。

当日は、私もお問合せというテキストが入っていることを失念していたのですが、これがなければ神戸本社と東京本社の住所地も含めて、address要素の中身にしてしまって構わないでしょう。この出題ではお問合せというテキストがあるため飽くまでも会社側としては意図的に電話とメールで問い合わせを受付たいように感じ取れます。

お問合せというテキストがなければ、HTML5からはaddress要素は厳密にドキュメントもしくはドキュメントのセクションに関連する連絡先情報でない限り含めてはならないことになっていますが、この出題の場合、会社側・ユーザ側どちらにとっても神戸本社と東京本社の両方とも直接の問い合わせ先になり得るでしょう。

神戸本社と東京本社どちらに問い合わせをしたら良いのかわからないという意見が出ていましたが、私個人の解釈としては、この場合ユーザ側は神戸本社と東京本社のどちらに問い合わせするかを取捨選択できるだけで、おそらくほとんどのユーザは距離的に近い方を問い合わせ先に選ぶでしょう。また会社側としても、東京本社には問い合わせをしてもらっては困るというような場合は最初から掲載すべきではありませんし、会社概要などのページではなくフッタにわざわざ両方の住所地まで掲載しているのは、問い合わせ先として機能していると見なして問題はないはずです。そもそも、クライアントに本社が2社あるならば、両方とも掲載するのかどうかはディレクションとして当然確認することになるでしょうし。

コピーライトを何の要素で明示するか

これは、どのチームも満場一致でsmall要素で括っていました。ここも意見がわかれるようなことはないでしょう。

題1の個人的解と総括

<footer role="contentinfo">
	<div><a href="/">HOME</a></div>
	<dl class="vcard">
		<dt class="fn org"><!--画像置換ここから-->株式会社 バスタイム商事 Bathtime Bussiness Corp.<!--画像置換ここまで--></dt>
		<dd>
			<address>
				<span class="type">お問い合わせ</span>
				<a href="tel:0120-0000-0000" class="tel">0120-0000-0000</a>
				<a href="mailto:infomation@bathtimeshoji.com" class="email">infomation[at]bathtimeshoji.com</a>
			</address>
			<div class="adr">
				<span class="type">神戸本社</span>
				兵庫県神戸市◯◯◯◯◯ 11-11-11 ◯◯ビル 11
			</div>
			<div class="adr">
				<span class="type">東京本社</span>
				東京都渋谷区◯◯◯◯◯ 22-22-22 ◯◯ビル 22
			</div>
	</dd>
	</dl>
	<small>copyright (c) bathtimeshoji. All Rights Reserved.</small>
</footer>

この出題に対して、p要素はどこにも使っていません。個人的に複数の文によって構成される段落がこの出題内にあるかというと、ニュアンス的にあてはまるものがないかと思いますので、何か括る必要のある部分などはp要素以外のdiv要素などの適当な要素を用いています。会社の情報に関する部分で、vCard 使ってたりするのは、自分でclass名を考えなくて済むという点でも便利です。

ul要素?ol要素?そもそもリスト?

個人的には、まずパンくずはリストであって、リストとしてul要素を使うか、ol要素を使うかはサイト構造によりけりです。サイト内のすべてのパンくずを段階的な順序であらわせられるサイトの場合はol要素を使いますが、サイトの構造上でパンくずに並列な構成を含むサイトの場合はul要素を使うようにしています。この出題では、トップページから順に詳細なページへと段階的な順序であらわすことができるのでol要素でも良いかと思います。

また、GoogleよりGoogle と相性の良いサイトとして推奨事項に挙げられているmicrodataかRDFaを組み合わせて用いるのも良いでしょう。ただし、サイト構造上共通で>の大なり記号繫ぎのリンクを羅列しているだけでもGoogleでは勝手に検索結果にリッチスニペットとして反映するようになっているので、SEO上確実にパンくずとして認識させたいなど必要に応じて実施すると良いでしょう。

なお、Googleのリッチスニペット - パンくずリストのサンプルコードでは、リストに関する要素が用いられていないことからパンくずはそもそもリストなのかという意見もあります。リストかリストじゃないかの議論は別にして、パンくずはul要素を使っていれば確実に安全牌だと思います。

パンくずのセットを何の要素で括るか

個人的にはdiv要素に任意のクラス名かID名を与えてグループ化するという解釈で良いかと思います。今回の大阪開催のMarkup Cafeでは、aside要素で括るという意見も出てきました。パンくずをaside要素で括るというのは考えたこともなかっただけに斬新だなと思い、article要素から切り離せないパンくずの場合はaside要素でもアリなのかなと考えさせられました。

たとえば、求人サイトで各求人情報をarticle要素単位で括るとして、各求人情報が所属するカテゴリをパンくずで示すような場合でしょうか。article要素はフィードで配信すべき情報のため、サイトのカテゴリ上でどこに属しているかの情報は切り離しても良いかと思いますので、そういった意味ではこのような場合はaside要素もアリではないでしょうか。

<article>
	求人A
	…
	勤務地：東京都世田谷区◯◯
	…
	<aside class="belong">
		<ol>
			<li><a href="x">東京都</a></li>
			<li><a href="x">世田谷区</a></li>
		</ol>
	</aside>
</article>
<article>
	求人B
	…
	勤務地：神奈川県川崎市◯◯
	…
	<aside class="belong">
		<ol>
			<li><a href="x">神奈川県</a></li>
			<li><a href="x">川崎市</a></li>
		</ol>
	</aside>
</article>

題2の個人的解と総括

<main>
	<div id="breadcrumbs">
		<ol><!--ulでも可-->
			<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="/"><span itemprop="title">Markup Cafeトップページ</span></a></li>
			<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="/info/"><span itemprop="title">店舗情報</span></a></li>
			<li class="current"><span>フード・ドリンク</span></li>
		</ol>
	</div>
	<article>
		…
	</article>
</main>

個人的にパンくずリストは、main要素の中にはあるけれど、article要素の中には含まれていない構成が好みです。パンくずリスト自体は、各ドキュメントでオリジナルな内容となり得る情報なので、main要素の中には存在させたいという意図ですが、先のパンくずのセットを何の要素で括るかで先述したように、パンくずがフィードで配信すべき情報なのかというと、フィードで配信すべきなのはドキュメントのタイトルと本文であった方が望ましいのではないかと考えるためです。

ディレクション上の立場としては、店舗情報の中にフード・ドリンクというページが存在するサイト構成に違和感を感じますが、商品情報の方がしっくりくるでしょうか。こうやってマークアップ以外の余計なことまで気になって、純粋にマークアップだけを楽しむような姿勢になっていない自分はダメですね。