第7回MLCマークアップ部 開催レポート

弊社では日頃から様々な社内勉強会が開催されていますが、今回は1月18日（水）に社内で開催された第7回MLCマークアップ部の様子をお伝えします。

MLCマークアップ部とは？

html5jマークアップ部が開催しているMarkupCafeにインスパイアされ発足した活動です。

参加者全員が「お題」のWFを見て、各々の設計趣意に基づき、思い思いに自由にマークアップします。
それを持ち寄り、全員で話し合いを進めながら、「正解がない」マークアップの中でも「より品質の高いマークアップとは何か」を模索する場です。

MLCマークアップ部では、HTMLの仕様やアクセシビリティ、情報構造化等に対する理解を深めると共に、議論や発表の機会を通じファシリテーション能力を高めることを目的としています。

お題のワイヤーフレーム

今回で7回目となるマークアップ部。お題は「画像とテキストのレイアウト」で、今回も前回と同様に入社1年未満の方が参加されました。もちろんコーダーだけでなくデザイナー、ディレクター等様々な業種の方が集まり、お互いのマークアップを持ち寄りながら議論を進めていきました。

下層ページなどによく見られる画像とテキストのレイアウトです。

昨今ではfloatやdisplayプロパティのtable系の値, CSS Flexible Box Layout, CSS Grid Layoutに加えて、CSS Shapesで文字の回りこみ位置を任意の領域に設定する方法など、CSSで行うレイアウトには様々な方法が次々と生みだされてきています。
それほどまでに、Webページを制作する上でレイアウトというものは多様で複雑なものが多く、アクセシビリティ視点でのソースオーダー上の問題など厄介なことが多い部分ではないでしょうか。

今回はCSSによるデザインまでを考える必要はないとはいえ、常ですが「ワイヤーフレームで指示されたレイアウトがそのマークアップ構造で実現できるのか」もセマンティクスに並び重要です。

当日の様子

前回同様、休憩スペースにてイベント実施となりました。

来た順に各テーブルに順番に座っていただだく形でチーム分けをし、早速イベント開始です。

社内で初めて顔を合わせる参加者同士は自己紹介もしつつ、事前に行ったマークアップを見せ合いながら議論を進めます。お互いのマークアップの良いところを混ぜ合わせながら、最も妥当であると考えられるマークアップを導き出すこの時間こそ、マークアップ部の醍醐味です。

最終的に、グループ内の議論が落ち着いたところで、それぞれのグループの導き出した最終マークアップを模造紙に書き込み、壁に張り出します。いよいよグループごとの発表の時間です。

各グループのマークアップ

Aグループ

<div class="section">
<div class="inner">

<div class="fl-lyt">
<h2>h2見出し</h2>

<div>
<img src="" alt="">
<p>ここにキャプションが入ります。ここにキャプションが入ります。</p>
</div>

<p>ここにテキストが入ります。</p>
<p>（例）ミツエーリンクスは、顧客企業さまのビジネスを持続的発展に導く、国内屈指のコミュニケーション・デザイン・カンパニーです。</p>
<p>ミツエーリンクスは1990年というIT分野の幕開けともいえる時期から、デジタルコンテンツを中心に、数々のユニークなサービスを提供してきました。
顧客企業さまのマーケティングやブランディングをデジタルメディアで実現し、また継続的に改善し続けるべく、コンテンツ（映像・音声を含む）およびUIの企画・設計・実装、Webサイトの構築・運用を中心に、システム開発、アプリケーション開発、アクセシビリティ/ユーザビリティの向上、アクセス解析に至るまで、様々なサービスを包括的に提供しています。</p>
<p>ミツエーリンクスは、高い技術品質、プロセス品質、サービス品質と共に一連のサービスを有機的に統合し、機能的価値と情緒的価値に変換することで、企業・社会活動に貢献します。</p>
<!-- /.fl-lyt --></div>

<div>
<div>
<div>
<img src="" alt="">
</div>

<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

<div>
<div>
<img src="" alt="">
<p>ここにキャプションが入ります。ここにキャプションが入ります。</p>
</div>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
</div>
<!-- /.inner --></div>
<!-- /.section --></div>

各グループが白熱している中、Aグループは意見が少なかったようですが、命名がゆれたり、figure要素を用いるかどうかの議論があったようです。

どのような画像が入ってくるかがわからない状態では、figure要素を用いるべきかどうか難しいところですが、今回の場合はどのような画像が入るか不明だったということと、実装者によって判断がゆれることを懸念し、あえて使わない方向にしたそうです。

Bグループ

<div class="l-img-01 is-left">
<div class="txt">
<h2 class="m-h2-01">h2見出し</h2>
<p>（例）ミツエーリンクスは、顧客企業さまのビジネスを持続的発展に導く、国内屈指のコミュニケーション・デザイン・カンパニーです。</p>
<p>ミツエーリンクスは1990年というIT分野の幕開けともいえる時期から、デジタルコンテンツを中心に、数々のユニークなサービスを提供してきました。<br>
顧客企業さまのマーケティングやブランディングをデジタルメディアで実現し、また継続的に改善し続けるべく、コンテンツ（映像・音声を含む）およびUIの企画・設計・実装、Webサイトの構築・運用を中心に、システム開発、アプリケーション開発、アクセシビリティ/ユーザビリティの向上、アクセス解析に至るまで、様々なサービスを包括的に提供しています。ミツエーリンクスは、高い技術品質、プロセス品質、サービス品質と共に一連のサービスを有機的に統合し、機能的価値と情緒的価値に変換することで、企業・社会活動に貢献します。</p>
</div>
<div class="img">
<img src="" alt="">
<p class="caption">ここにキャプションが入ります。ここにキャプションが入ります。</p>
</div>
</div>

<!-- ↓class省略↓ -->
<div>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<div>
<img src="" alt="">
</div>
</div>

<div>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<figure>
<img src="" alt="">
<figcaption>ここにキャプションが入ります。ここにキャプションが入ります。</figcaption>
</figure>
</div>

Bグループは最後の画像の部分のみfigure要素を採用しています。このグラフは文脈から切り離すことができる情報であり、単独で成立すると仮定したことにより、figure要素を採用したそうです。

Cグループ

<div class="lyt-img">
<div class="txt-area">
<h2><span>h2見出し</span></h2>

<p>ここにテキストが入ります。</p>
<p>（例）ミツエーリンクスは、顧客企業さまのビジネスを持続的発展に導く、国内屈指のコミュニケーション・デザイン・カンパニーです。</p>
<p>ミツエーリンクスは1990年というIT分野の幕開けともいえる時期から、デジタルコンテンツを中心に、数々のユニークなサービスを提供してきました。<br>
顧客企業さまのマーケティングやブランディングをデジタルメディアで実現し、また継続的に改善し続けるべく、コンテンツ（映像・音声を含む）およびUIの企画・設計・実装、Webサイトの構築・運用を中心に、システム開発、アプリケーション開発、アクセシビリティ/ユーザビリティの向上、アクセス解析に至るまで、様々なサービスを包括的に提供しています。<br>
ミツエーリンクスは、高い技術品質、プロセス品質、サービス品質と共に一連のサービスを有機的に統合し、機能的価値と情緒的価値に変換することで、企業・社会活動に貢献します。</p>
<!-- /.txt-area --></div>

<div class="img-area">
<div class="lyt-media">
<img src="$$$dummy$$$" alt="$$$dummy$$$">
<p class="caption">ここにキャプションが入ります。ここにキャプションが入ります。</p>
<!-- /.lyt-media --></div>
<!-- /.img-area --></div>
<!-- /.lyt-img --></div>

<div class="lyt-col">
<div class="inner">
<div class="col">
<div class="lyt-media">
<img src="$$$dummy$$$" alt="$$$dummy$$$">
<!-- /.lyt-media --></div>

<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /.col --></div>

<div class="col">
<figure class="lyt-media">
<img src="$$$dummy$$$" alt="$$$dummy$$$">
<figcaption>ここにキャプションが入ります。ここにキャプションが入ります。</figcaption>
<!-- /.lyt-media --></figure>

<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /.col --></div>
<!-- /.inner --></div>
<!-- /.lyt-col --></div>

Cグループも最後の画像の部分のみfigure要素を採用しています。誰が見ても区別がつくような基準を置こうということで、グラフか写真かでfigure要素を採用するか否かを分けたとのことでした。他にも基準としてキャプションがあるときとないときを判断材料にするという意見も出たようです。

Dグループ

<div class="lyt-image">
<div class="item">
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="img">
<img src="" alt="">
<p class="caption">ここにキャプションが入ります。ここにキャプションが入ります。</p>
</div>
</div>

<div class="lyt-col">
<div class="col">
<div class="img">
<img src="" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="col">
<figure>
<img src="" alt="">
<figcaption>ここにキャプションが入ります。ここにキャプションが入ります。</figcaption>
</figure>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

Dグループも他の２つのグループ同様、グラフが入る要素はfigure要素を選んだようです。div要素の構造は異なりますが基本的に多くのチームがdiv要素とfigure要素を使い分けているポイントは同じようです。

Eグループ

<main>
<div>
<h1>h2見出し</h1>

<div>
<p><img src="dummy" alt="dummy" width="x" height="x"><br>
ここにキャプションが入ります。ここにキャプションが入ります。</p>
</div>

<p>ここにテキストが入ります。</p>
<p>（例）ミツエーリンクスは、顧客企業さまのビジネスを持続的発展に導く、国内屈指のコミュニケーション・デザイン・カンパニーです。</p>
<p>ミツエーリンクスは1990年というIT分野の幕開けともいえる時期から、デジタルコンテンツを中心に、数々のユニークなサービスを提供してきました。<br>
顧客企業さまのマーケティングやブランディングをデジタルメディアで実現し、また継続的に改善し続けるべく、コンテンツ（映像・音声を含む）およびUIの企画・設計・実装、Webサイトの構築・運用を中心に、システム開発、アプリケーション開発、アクセシビリティ/ユーザビリティの向上、アクセス解析に至るまで、様々なサービスを包括的に提供しています。<br>
ミツエーリンクスは、高い技術品質、プロセス品質、サービス品質と共に一連のサービスを有機的に統合し、機能的価値と情緒的価値に変換することで、企業・社会活動に貢献します。</p>
</div>

<div>
<div>
<div>
<img src="dummy" alt="dummy" width="x" height="x">
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
</div>

<div>
<div>
<figure><img src="dummy" alt="dummy" width="x" height="x">
<figcaption>ここにキャプションが入ります。ここにキャプションが入ります。</figcaption></figure>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
</div>
</div>
</main>

Eグループは、また違った視点からワイヤーフレームを捉えていました。そもそもワイヤーフレームに見出しレベル１がないという点にも着目し、h2見出しというテキストをh1でマークアップしています。

今回も引き続き、すべての発表が終わった後は当社取締役であり、MLCマークアップ部特別顧問でもある木達より各グループのマークアップに対して総評が行われました。

今回の結果、ほとんどのグループがグラフであるかただの写真であるかを基準にどの要素でマークアップするかを選択していました。今回のワイヤーフレームでは、本当に図左上に登場する画像が「h2見出し」のセクションより後に登場するべきものなのか、写真は具体的に何が入るのかなどのヒントがありませんでした。そのためチームごとに独自解釈をして決めた過程の上でマークアップする必要がありました。ランダムでチームわけを実施したためグループ内での実力の差はまちまちでしたが、どのグループも熱い議論が交わされ、今回も大変有意義な時間となりました。

第7回マークアップ部の様子はいかがだったでしょうか。案件と関係なく、しかし案件でよく出会うレイアウトやデザイン、UIなどについて、このような場で議論することはとても重要なことでもあり、いいリフレッシュにもなります。

今回で7回目を迎えたマークアップ部。第6回から時間が空いてしまいましたが、今後もMLCマークアップ部を継続して開催していきたいと思います。

今後も様々な対象者向けにユニークでためになるイベントを開催した様子や、ナレッジを公開していきたいと考えていますのでご期待ください。