情熱大陸「コミュニケーションデザイナー 山崎亮」

コミュニケーションデザイナー
山崎亮(37歳）

1973年生まれ。
父親の仕事の関係で引越しすることが多かった。
人間関係図を頭で作りたがっている。

25歳で建築事務所。

３１歳で独立。


現在20のプロジェクトを進行中。
かつ東京大学の博士過程で論文誌執筆中。

地方の再生。

家島を変えたのは住民のおばちゃん。
そのおばちゃんの集まりのNPO。
コミュニケーションを取ることでコミュニティを生む。

これまでにない職業。
崩壊する地域をコミュニケーションデザイナーとして支援する。
地方都市の駅前活性。地方田舎の祭りによる活性。高齢者が多い島に若者を集める。


元々は公園などをデザインしていた。

人間と人間をつなぐ人が今はいない。
新分野の開拓者。

もの作らずに価値を生む。

周りにどれだけ言われようとも人をつなぐデザイン。


限界集落再生依頼。

わずか9人の集落。
廃校になった校舎が事務所。

そこにいる人達がどういう人たちのなのか？？
どういう暮らしなのか？

場の雰囲気は和らげながら会話して
人の心を出していただく。
質問よりも相槌で相手が気持ちよくなってもらう。

人それぞれは目指したい方向が違う。
着地点は？ゴールは？

懐に入るためには？
彼の生きてきたプロセスが影響。

コミュニティを作るためには

自主性、貢献感、継続。

この３つがキーワード。

そして、人を繋げること。

一度受けた案件は長く継続してサポート。
これまで結果を示してきた。
その対価は最小限。時間も最小限。

その時間を他のものに使う。
たくさんの人を繋げるために。


未来の歯車。
今までなかったものが回り始める。

文化と歴史を持って継続してきた島がある。
高機能だけを追求してきた都市がある。

どこまでも限りなくコミュニケーションを必要としている場所がある。
人は生きるために必要なこと。

コミュニケーション。

HTML5メモ書き：section要素

HTML4からHTML5への移行で数多くの要素が新たに導入されました。

今回はその中の１つであるsection要素を見ていきます。

section（セクション）とは章や節で見られるように見出しと中身がまとめられた範囲を指しています。

本などでそうですが、

・・・・・・

一章：桃太郎誕生

～川で桃を拾う～

むかし、むかし、あるところにおじいさんとおばあさんが住んでいました。
（どこに住んでたねん！？）

（中略）

～桃の中から～

川から拾ってきた桃を斧割ると中から可愛い赤ん坊が出てきました。
おじいさんは言いました。
「怪我しなくてよかった、よかった！」

桃から無事生まれた赤ん坊を２人は「桃太郎」と名づけました。

・・・・・・

という風に見出しである「桃太郎誕生」とそれに関する内容の文章が
合わさってセクションとなります。
さらに細かく一章の中にいくつかの節が「～桃の中から～」のように
ありますがこれももちろんセクションです。
これは本の世界だけでなく、通常Webの世界でも続くものです。
元のセクションがあって、その中に階層的にセクションが並んでいるのです。

元々ドキュメントというのはセクションのまとまりであります。


以前のHTML4などではマークアップだけで１つのセクションが
どこまでを構成しているかなんて分かったもんじゃありませんでした。
見出し要素の<h1>～<h6>要素でセクションを区別するために用いてたぐらいです。

従来のマークアップですと・・・

<h1>桃太郎</h1>
<p>桃太郎とは?</p>
<h2>生い立ち</h2>
<p>桃から生まれた男の子とは？</p>
<h3>なぜ川から流れてきたのか？</h3>
<p>桃は川に流れやすい</p>
<h3>なぜ斧で桃を割った時に怪我がなかったのか？</h3>
<p>桃の強度</p>
<h2>桃太郎のきびだんご</h2>
<p>きびだんごの由来</p>

以上のような階層を持ったドキュメントのつもりとなっているのが従来のマークアップです。
「これで階層のようになっているやんね？」
と同じ階層であるのに若干ごまかしているのです。暗黙知的に階層であると。。。
そんなのいかんということで
HTML5で明示的に階層を示すことができるようになったわけです。
セクションを明示的に示す要素として、<section>や<article>などの要素が
役割を持つようになりました。
これらはセクションニング・コンテンツといい要素のグループ化がされています。

HTML5ですと・・・

<h1>桃太郎</h1>
<p>桃太郎とは?</p>
<section>
　<h2>生い立ち</h2>
　<p>桃から生まれた男の子とは？</p>
　<section>
　　<h3>なぜ川から流れてきたのか？</h3>
　　<p>桃は川に流れやすい</p>
　</section>
　<section>
　　<h3>なぜ斧で桃を割った時に怪我がなかったのか？</h3>
　　<p>桃の強度</p>
　</section>
</section>
<section>
　<h2>桃太郎のきびだんご</h2>
　<p>きびだんごの由来</p>
</section>

と階層的にマークアップすることできます。
構造的に非常に分かりやすくなったのがHTML5の魅力ということですね。


そこでsection要素についてふか

要素のグループ化のカテゴリー
○フロー・コンテンツ
○セクションニング・コンテンツ


コンテンツ・モデル
○フロー・コンテンツ

※フロー・コンテンツとはドキュメントに現れるコンテンツ全般を表しています。

コンテンツ・モデルの階層的にはフロー・コンテンツが上なのでフロー・コンテンツに

属していますが意味合いとしてはセクションニング・コンテンツの方が強いですね。

利用可能な場所
○フロー・コンテンツが期待される場所

開始タグと終了タグは必須
要素固有のコンテンツ属性はなし


section要素は名前から分かるように一般的なセクションを表します。
セクションニング・コンテンツに属する要素であるので
アウトライン・アルゴリズムというコンテンツの階層構造であるアウトラインを
どんな風になっているか見極めるための方法に基づいて
セクションを作ることになります。

よくわからないなという人もいると思うので
明日はアウトライン・アルゴリズムについて書こうと思います。
section要素をメモ書きする前にもっと基礎からやらねばですね！！


ちなみにこのmemo書きの参考文献や引用は
「徹底解説HTML5　マークアップガイドブック」
著者は羽田野　太巳さん
から多数memo書きしています。
メモなので自分なりに解釈して、似たようなことばかり書いています。


徹底解説HTML5マークアップガイドブック/羽田野太巳さん


￥3,150
Amazon.co.jp

HTML5とHTML4の違い

HTML5とHTML4の違いって何だろうか？
と改めて考える。

HTML5はちょびちょび勉強すると言っときながら久しぶりの勉強。
毎日１時間はとらんといかんね。というわけで読書memoを兼ねて。

～HTML5とHTML4の違い～

• コンテンツモデル
• アクセシビリティ
• 要素

この３点が大きな違い。


１．コンテンモデルって何ぞや？

HTML4におけるブロックやインラインの概念に置き換わるもの。
そうかそうか～。

・・・ブロックやインラインの概念って何ぞや？？

HTML4のbody要素の中で扱われていたものは大きく分けて
ブロックレベル要素とインライン要素で分けれたそうな。

○ブロックレベル要素

見出しや段落などの文章を構成する基本要素

ex．見出しの<h>要素や表の<table>要素など

※ブロック要素には他のブロック要素やインライン要素を持つことはできる。

○インライン要素

主にブロックレベル要素の内容に用いられるものなので

ブロックレベル要素の中の特定の部分に何らかの機能を持たせる要素

ex．ハイパーリンクの<a>要素や強調の<em>要素など

※インライン要素には他のインライン要素を持つことはできるが

当然ブロックレベル要素は持てない。

まあ要するに要素をグループ化がHTML4までは中途半端だったのを
今回はHTML5で「コンテンモデル」を用いて正しく決めていきませんか？
っていう話なのかと私は感じています。

コンテンモデルは要素をグループ化するものでそのグループ化にも
しっかり名前が付いています。
その各グループでは、そのグループに属するものはどんなコンテンツを
いれたらええのかっていう定義がしっかりされています。

要するにコンテンモデルの通りにマークアップすることが規定準拠なので
これからはより慎重にマークアップする必要があるということです。
今まで適当だったのでここぐらいはしっかりやって、
見やすい、分かりやすいマークアップ言語となるのならばいいのではないかと感じています。

２．アクセシビリティ

HTML4では適当だったそうでそれがしっかり仕様で細かく規定されているのがHTML5。
音声読み上げがしやすくなるなどWEBバリアフリー化へ大きく貢献するのではないかと思います。


３．要素

HTML5では新たな要素が結構あるとのことで。。。

・文章構造やセマンティックにできる要素
section要素、article要素、hgroup要素など

・マルチメディア対応の要素
video要素、audio要素

・図形を描写する要素
canvas要素

もちろん削除された要素もあります。
font要素やcenter要素など。。

他には意味が変わった要素もあります。


う～ん、色々な変更があるそうで、勉強しがいがあると思います。
といってもHTML自体がまだまだ踏み込めてない私には
どっちにしろ勉強する必要があるのですから・・・この規約変更に出会えたのは
ある意味ラッキーですね。ラッキーかな？

もちろんまだまだ変更点は多数あるので気づいたら書いていこうと思います。

さて、目指せ週５日更新！！