ポータルサイトを運営しつつ、人がいないのでマークアップしている人間がまとめました。
いま、私は業界特化型の情報発信サイトを運営しています。
SEOでの自然検索をあげつつ、リスティング等で集客して、自社のサービスの利用につなげつつ、そのサービス自体も考えるという環境で働いています。
そういった、どちらかというと普段はそこまでエンジニアしていない自分がサービスを運営する側の目線からマークアップの在り方について日々思っていたことをまとめました。
ただデザインを見たまんまマークアップしていませんか？
LPや期間限定のイベントサイトならいいと思うんです。デザインを見たまんまマークアップしても。
でも長期的に情報を更新して、ユーザーの行動や反応を見ながら日々改善を繰り返していく情報発信サイトだと、それやられるととっても大変なんですよね。
直せない！レスポンシブできない！他の場所に使いまわせない！
外部のリソースを使うとタイムラグがあるし、費用もかかるし、変に置いておくとそのまま根を張って消えないタスクが山積みになるし、ちっさな修正は出た瞬間にさばきたい。
じゃあどういったマークアップなら使い勝手がいいのか？
HTMLを書く、CSSを書く。作業としてみてしまうと見たまんまやるのが当然早いんですよね。
ただ、HTMLやCSSって、とてもユーザーに近い位置にある存在なんですよね。
デザイナーが作ったデザインファイル→HTML&CSS→ブラウザ→ユーザー。
こうやって見ると、デザイナーが作ったデザインファイルよりもユーザーに近い位置にあるデザインファイルなんです。
デザイナーの意図がどうだろうとマークアップしたものがユーザーが見るデザインなんですよ。
逆に言えばデザイナーがミスっていても、マークアップできれいになればOKと言えるぐらいマークアップって重要です。
それなのに、CMSを使えば、マーケッターやライターが気軽に更新できてしまう。
なんて恐ろしい媒体だろうか…。
そう考えるとHTML&CSSにはデザイナーのデザインを再現すると同時に、そういった非デザイナーの手を介してもデザイナーの意図を保持し続けさせるトーン＆マナーをしっかりと設定しておく必要があるんですよね。特にCSSには。
忘れちゃいけない、デバイス対応。増え続ける画面サイズとの闘い
人はブラウザを通して、Webサイトを見ます。
ブラウザはPCやスマホなどの各種デバイスの画面に表示されます。そのサイズは日に日に種類を増すばかり…。
画面サイズが違えば当然見やすい文字の大きさや情報量は違ってきますし、ユーザーの反応を得ないとならないサービス運営者としては死活問題です。
という、具合で、マークアップした情報は見る人の使っているデバイスによって、見やすさが違うし、反応を得るには見やすさを変えていく必要があるんですよね。
「ユーザーが良く利用する画面サイズが変わってきたから、ちゃちゃっと対応させてよ」
これ、ね。
こういったときにちゃちゃっと変更できるかどうか。これもマークアップにかかっています。
デバイスごとに見やすさを変える方法を思い出してみる
ここ数年でいろいろな方法が編み出されてきましたね。
1. 画面サイズごとに異なるHTML&CSSを用意する
方法例）URLリダイレクト、サーバーサイドで読み込むHTMLを切り替える
2. 画面サイズごとに異なるCSSを用意する
方法例）メディアクエリ（レスポンシブ）、DOM
3. HTML&CSSをパーツとして画面サイズごとに組み替える
方法例）マテリアルデザイン、Web Components、ShadowDOM
現時点ではブラウザ側の実装上の問題とか、技術の未成熟面から１．と２．が主流じゃないかなと思います。
しかし、今後は複数のサイトでパーツを共有でき、デバイスごとに情報を取捨選択できる３．の方法が主流になってくる（、というか個人的にそうなってほしい）と思っています。
この３．の時代のマークアップに必要なのは、複数のサイトで共通化できるパーツ群の作成と管理の仕組み。
面ではなく点でマークアップする。さらにその先へ
パーツ単位で実装して、あとから必要なものをまとめなおす。
この共通化は実装する側にとっては楽なんだけど、使う側のユーザーにとってはときとして使いにくい場合があるんですよね。
ユーザーにとってもっとも重要なのは、いま達成しようとしている目的をいかに意識しないで行動できるか。運営側の楽は関係なくて唯一無二の使い勝手が欲しい。というか、それ以外はよくない。
同じ見た目でも、ユーザーの利用する意図が異なるのであれば、別のものなんですよね。
点として作るマークアップ
Webサイトのデザインと一言でいってしまうと画像がドンって感じなんですが、その中身には、サイトの空気を生み出す『ビジュアル』とユーザーにとって価値のある『情報』。そして、それらを活用してユーザーに行動してもらうための『情報設計』がまじりあってできているんです。
ユーザーに行動してもらうための情報設計ですから、当然、画面サイズごと、デバイスの利用シーンごとに考えなおさないといけないんですよ。理想としては。理想としてはね。
ただ、現実として、成功するかわからないWebページに最初からそんなにリソースは裂けない。
けど、手を抜くとそもそも使ってもらえない。ジレンマ。
少ないリソースでもユーザーにとって最低限使いやすいWebサイトを作るには、共通のリソースを活用しつつ、デバイスごとに最低限使いやすい面を作りだすことが必要なんですよね。
そのときに忘れてはいけないのが”同じ見た目でも、ユーザーの利用する意図が異なるのであれば、別のもの”である必要があります。
つまり、ただただ、デザインのパーツを流用するのではなくて、役割をパーツ化して流用するという感覚が大切なわけです。
なので、id名やclass名を目的に合わせた名称にして、管理していく必要がでてきます。
そして今日もビジネスは変動し、Web技術は発展し続ける
そして忘れてはいけないもっとも重要な点。
それは「ビジネスは変動し、Web技術は発展し続ける」ということです。
この変化を見越した柔軟性を与えることで、時代の速度に追従できるWebサイトを実現することが可能になります。
マークアップに必要なものは？というか、サービス運営者として求めているマークアップ
最低限必要なもの
デザイナーのデザインを再現できるHTML&CSSの技術
これから先のWebサイトのマークアップに必要なもの
- 情報設計による情報と要素の役割の理解。
- デザイナーの意図するビジュアル効果の理解。
- 変化を見越した柔軟性のある実装。
『情報設計による情報と要素の役割の理解』
現場ではPC画面、スマホ画面の両方を同時に設計する時間的余裕がない場合が多くあります。（実際、よくやります）
そのときにはマークアップの段階で既存の要素を組み替えることが求められる場合があります。（実際、よくぶん投げます）
デザイナーから上がってきたデザインファイルから、画面の雰囲気や空気を演出するための『ビジュアル』と、ユーザーに取得してもらうことに価値がある『情報』を切り分けて把握し、HTMLに『情報』をCSSに『ビジュアル』を記載することがマークアップの役割と言えます。と、思います。
これによって同じHTMLを使って、デバイスごとに最適なビジュアルを表現することができるようになります。
『デザイナーの意図するビジュアル効果の理解』
デザインは一つ一つの線、一つ一つの色、一つ一つの余白が繊細に折り重なって実現されています。
その一つがずれるとすべての調和が崩れてしまいます。
その繊細さを理解し、デザイナーがこのサイトに表現しようとした空気感をすべてのパーツで実現することがマークアップエンジニアには求められます。
初期段階でそれを体現することは見た目通りに再現するだけなので容易です。しかし、Webサイトは常に変化し続ける媒体です。
そして、その変化を与えるのはマーケッターやライター。ビジュアル表現を専門としない人々です。
彼らが変化を与えても、最低限全体の調和が破たんしないように、デザイナーが設定した”トーン”と”マナー”を表現しておくことが何よりも重要になってきます。
以下がトーンとマナーを構成するCSSとなります。
padding、margin、border、line-height、font-size、font-family、color、box-shadow、text-shadow
これらのCSSを適切に設定しておくことがwebサイトの長期的なビジュアル的調和を保つ秘訣となります。
『変化を見越した柔軟性のある実装』
ビジネスの変動、web技術の発展。それらは急速に唐突にやってきます。
それらを見越した実装ができているかできていないかで、変化への対応速度は大きく変わってきます。
具体的な方法としては、以下があげられます。
・すべてのサイトで共通のフレームワークを利用する。
・情報とビジュアルに切り分ける。
・役割単位でHTMLをマークアップする（id名とclass名の命名規則と継承範囲の限定）。
・デザイナーの意図をCSSで実現する。
といった、具体性のないまとめでした。
想うところがある人はお気軽にコメントください。