TECHNOLOGY 2014.05.14

【学生必見】【スペシャル対談】プロに評価されるマークアップ

  • HTML5/CSS3
  • javascript
  • Markup

最近、IN VOGUEでは学生さんからの採用応募も増えてきました。そこで今日は『Web標準の教科書』『現場のプロから学ぶXHTML+CSS』などの著書があり、CSS Nite、サイバーガーデンbizなどを通じてHTML5やCSS3に関する講演活動を多数行われている株式会社サイバーガーデンの代表の益子貴寛さんを迎えて、IN VOGUEマークアップチームのリーダー藤原と育成担当の新井が、学生さんやこれからプロを目指そうとする方向けに、仕事の現場で評価されるマークアップ、というテーマで対談をさせていただきました。


—マークアップエンジニアとしては、制作物のどのようなところが評価ポイントになるのでしょうか?

IN VOGUE:
最近の潮流として、JavaScriptによるリッチなコンテンツ演出が注目されがちだと思います。それももちろん大事ですが、マークアップエンジニアの仕事の本質として、その裏側のHTMLやCSSの設計も重要なポイントです

IN VOGUE 藤原・新井

益子:
そうですね。HTMLやCSSは実務上、メンテナビリティ(保守性)、スケーラビリティ(拡張性)、検索エンジン最適化(SEO)、アクセシビリティなど、さまざまな要件を満たせるように制作します。いまでは当たり前になっている「Web標準」、つまり、Webで標準的に使われるテクノロジーの知識をきちんと身につけること、そのうえで、要件に応じて工夫することが大切です

「適切なマークアップさえできていれば、どのような要件であっても半分はクリアできていると思ってかまいません。しっかりとした土台のうえに、華やかなビジュアルデザイン、アニメーション、リッチな表現を重ねることで、魅力的なWebデザインにできます。また、HTML5の時代になってきて、構造面での適切さを判断する「アウトライン」という設計思考のマークアップが求められます。さらに、どのようなAPIを利用し、ユーザーに役立つ機能やギミックを提供するか。こういった判断も、おっしゃるような「設計」の一部です」

株式会社サイバーガーデン代表の益子氏

—制作物の評価ポイントとして、「表現」と「設計」のふたつの側面があるということでしたが、それぞれのポイントを教えてください。まず、表現についてはどうでしょうか。

IN VOGUE:
「まずはデザインの再現性があります。IN VOGUEでは採用選考の1ステップとして応募者にスキル課題に挑戦してもらっていますが、デザインとコーディングの差違がないかどうかを、まずチェックします」

「具体的には、マージンルール、フォントサイズ、色などからスタイル設定に統一感があるか、ということですね。デザイナーがグリッドシステムなどにもとづき、こだわってマージンやボックスサイズを計算してデザインしてるのに、それを無視したコーディングはよくありません」

もちろんデバイスによってプレーンテキスト部分のフォントは違いますので、まったく同じにはできませんが、デザインをどれくらい忠実に再現できているのかチェックしています。Google Chrome拡張機能「PerfectPixel by WellDoneCode」で、デザインデータとコーディングデータを比較するツールがあるので、チェックしながらコーディングを最終調整するとよいと思います

参考:https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

益子:
たしかに、プロジェクトそのものやデザイナーの意図を理解し、ページとして忠実に再現するのも、マークアップエンジニアの大切なスキルのひとつです。ただ、ブラウザごとの表示の差異もありますよね。IN VOGUEさんでは、ブラウザ対応という観点から、制作物をどのように評価していますか?
IN VOGUE :
Internet Explorer、Google Chrome、Safari、FireFoxなど、広く使われているブラウザでひととおりチェックしています。これは、実際の仕事では多くのブラウザで問題なく表示されるようにコーディングを調整するため、ブラウザごとの差異の理解と、適切に対応するスキルが現場レベルでは必要です

学生さんの制作物でよくあるのが、モダンブラウザのみ対応しているケース。プロ目線では、これは最低限のラインです。たまに特定のブラウザしか対応してないものがありますが、実際の案件では一部のブラウザのみで表示されればよしとすることはほぼないので、減点対象になります。さまざまなブラウザに対応したコーティングを心がけることで、ブラウザごとの仕様の違いが知識として溜まるので、普段からその辺りを意識してコーディングするとよいですね。あと、ブラウザシェアを把握しておくといいと思います

ブラウザシェア:https://netmarketshare.com/

益子:
数年前まではInternet Explorerが圧倒的なシェアを誇っていましたが、現在はさまざまなブラウザが利用されています。日本のスマートフォン搭載ブラウザを考えると、iPhoneはSafari、AndroidはGoogle ChromeかAndroid Browserです。たくさんのユーザーにきちんと情報を届けるために、制作側も環境の変化にキャッチアップすることが大切ですね。
IN VOGUE:
そして、ユーザビリティの観点から、フォントサイズ、文字量、ブラウザサイズの可変対応があります。具体的には、次の3点をチェックしています
● フォントサイズは、3段階くらい上げても崩れないか?
● 文字量が増減してもデザイン性が保たれているか?
● ウィンドウサイズを可変してもレイアウトが崩れないが?
IN VOGUE:
フォントサイズは、ユーザーが読みやすいサイズに変更できることが前提です。ユーザーがフォントサイズを大きくして閲覧しても、表示が崩れないかをチェックします。目安として、3段階くらい大きくしても崩れないければよいでしょう

画像化していない通常のテキストは、フォントサイズと同様、文字量によってボックスの幅や高さが変わってくるので、増減しても崩れないようにボックスサイズを指定しておきましょう。また、ユーザーの閲覧環境によって画面サイズが異なるので、ウィンドウサイズを広げたり狭めたりして表示をチェックしておきましょう

デザインの再現性、複数のブラウザ対応、フォントサイズやウィンドウサイズの可変対応の3つをポイントとしてあげましたが、これらは基本的な部分なので、しっかりと表示をチェックし、多くのブラウザでの再現性の高いコーディングを目指してほしいと思います
益子:
ユーザー環境を知るために、アクセス解析データを確認することが大切です。デバイス、OS、ブラウザ、ウィンドウサイズの種類など、制作するうえで参考になるデータがたくさん見られます

現在ではスマートフォンやタブレットからのアクセスが半分を超えているWebサイトがほとんどです。スマートフォンでは「Flashコンテンツ」「表示の遅いページ」「アニメーションが複雑なページ」は受け入れられません。実行できない、操作性が著しく低下する、強制終了の原因になるなど、ユーザビリティ上の問題が大きいからです。マークアップエンジニアは、デスクトップブラウザでの表現だけでなく、このような点をきちんと理解しておき、コーディングより前の企画やデザインの段階で、関係者に説明しておいたり、周りと意識をすり合わせておくことが大切です

—それでは、ふたつの側面のもう一方、設計面についてはどうでしょうか。

IN VOGUE:
デザイナーから支給されるデザインデータを見た目として再現しつつ、HTMLの文書構造をしっかりと考え、適切なHTMLタグを使用してマークアップを行い、他の人にとっても見やすいようにソースコードを整形します

CSSについても、記述ルールやネーミングルールなど統一感のある記述を行い、サイト全体の共通要素のモジュール化を意識したCSS設定を行います。他の人が作業に参加しても見やすくメンテナンスしやすいように考えて設定することが大切です

言葉にすると簡単ですが、このような要件を案件ごとに高い精度で、しかも作業期限や納期が決まっている中で実現するには、かなりの経験と知識が必要になってきます。学生の方はハードルが高く感じるかもしれませんが、まずはやれることからはじめてみましょう
益子:
他人の目を意識してソースコードを書く、他人にもわかりやすいようにスタイルを設定する、ということですね。わたしはよく、「半年後の自分は他人である」といいます。他人への気づかいは、回りまわって自分のためにもなる、ということです

HTML、CSS、JavaScriptにも「オブジェクト志向」が求められていますね。特に大規模サイトの構築では、おっしゃるようにモジュール化やコンポーネント管理の考え方を導入しないと、安定運用がむずかしくなってしまう。マークアップエンジニアにも、多分にディレクターの役割が求められるので、技術的なスキルだけでなくディレクションのスキルも磨く必要があります。このような経験は、将来、ディレクターやプロジェクトマネージャー(PM)になったときにも活かせるでしょう

—学生さんは、チームで制作をすることが少ないと思いますので、この辺はなかなかむずかしいかもしれません。具体的には、どのようなことから手をつけるのがよいですか?

IN VOGUE:
たとえば、小さなサイトを個人で制作する場合もマークアップガイドラインをつくってみることですね。ガイドラインを明確に定めることで、自分の書くソースコードに統一感が出ます。プロジェクトを展開して、いざチームで制作することになった場合にも、スムーズにマークアップ作業に入れますし、ガイドラインをメンバー間で共有・遵守することで、新規ページの修正、更新などの作業を効率的に進められるようになります

それに、自分のマークアップをあらためて見つめなおすよい機会にもなります。就職活動にあたっても、自分のマークアップの指針をしっかりと採用担当者に伝える名刺代わりになるかもしれませんね。
益子:
欧米の企業では、SassやLESSなどのCSSプリプロセッサーの実務経験を、マークアップエンジニアの採用基準に含めているところがあり、日本でもそういう企業が出てきています。CSSプリプロセッサーを使えば、自然とガイドライン的な意識を持ち、設計思考にならざるをえない。ガイドラインを自分で作るのもよい方法ですし、CSSプリプロセッサーを使ってみて、あらためて自分の制作スタイルを整理するのもよいでしょう

—ちょっと細かい話になるかもしれませんが、具体的にガイドラインをつくる際には、どのあたりがポイントになりますか?

IN VOGUE:
まずはガイドラインで定める項目を決めることです。あまり細かすぎると守るのがむずかしく、かえって実効性が落ちてしまったり、案件ごとに柔軟に対応するのむずかしくなってしまうので、さじ加減が必要です。主な項目としては、次のとおりです
● 全体
● ディレクトリ構成
● ネーミング(ファイル名、id・class名など)
● ターゲットブラウザ
● meta要素
● OGP設定などのSNS対応
● インクルード方法
● 上記のルールにもとづいたフォーマットの用意
● HTML
● DOCTYPE
● 文字コード
● 表記ルール(インデントの有無、コメントアウトの記述方法など)
● 上記のルールにもとづいたフォーマットの用意
● CSS
● 文字コード
● 表記ルール(インデントや余白の有無、コメントアウトの記述方法、セレクタの指定方法、プロパティの指定順序など)
● 上記のルールにもとづいたフォーマットの用意」
IN VOGUE:
次にそれぞれの項目についての、具体的なルールを考えます。いままでマークアップしてきたデータを見つめなおしたり、他人のソースコードをじっくりと分析して決めましょう。やはり、細かすぎるとガイドラインを守る手間が増えすぎてしまい、逆に効率が悪くなってしまうので注意が必要です

具体的なルールが固まってきたら、すでにあるソースコードを、ガイドラインにもとづいて書きなおしてみましょう。学校の課題などでグループ制作の機会があれば、自分のガイドラインをまず提案し、メンバーと議論するのがよいですね。ここのルールは細かく決めておいた方がよいとか、ここは個々の判断にまかせてもよいなど、改善点や追加点が出てくると思うので、それらを盛り込んでガイドラインを完成させましょう。ガイドラインにもとづいたソースコードを用意し、テンプレートとして使用するとよいでしょう。
益子:
テンプレートの話が出たので、CMS(コンテンツ管理システム)に触れておきます。数名以上でWebサイトを運営する場合は特に、CMSを使うのが当たり前の時代です。HTMLを1ページ1ページつくるのではなく、記事の中身だけを書き、システムに用意したテンプレートを当てはめてページを生成するしくみです。「ブログ」を思い浮かべてもらうのがわかりやすいでしょう。WordPress、Movable Type、a-blog cms、baserCMS、concrete5など、オープンソースで無償のものから、エンタープライズを前提にした有償のものまで、さまざまな製品があります

実務的には、よほど大きな制作チームで、かなり分業化が進んでいる職場でない限り、マークアップエンジニアにはCMSをカスタマイズするスキルが求められます。HTML、CSS、JavaScriptなどフロントエンドだけでなく、サーバやデータベースなどバックエンドの知識が、ある程度は必要です。複雑なカスタマイズのために、PHPやPerlなどプログラミングのスキルを要するCMSもあります

やることが多くてたいへんそうな感じがしますが、フロントエンドのスキルをベースにしつつ、自分の興味に応じてほかの分野を深堀りすることが大切です。必ずしも技術的なことに限らず、プロジェクトマネジメントやマーケティングなど、深堀りできる分野はたくさんあります

—かなり細かい話になりました。最後に、これらの積み重ねが、今後にどう活きていくのかという展望や、夢のある話(笑)をお願いします。

IN VOGUE:
学生のみなさんは、ここで話題にのぼった点に気をつけてサイトを構築していくことで、いままで気にしていなかったこと、これから取り組むべきことがいろいろと見えてきたと思います。それらの課題を解決するには知識が必要であり、経験を通して知恵に変えていくことが必要です。その繰り返しでマークアップの本当の力が培われていくので、ぜひいつまでも「あれこれ気になる」「疑問を持つ」という気持ちを忘れないエンジニアになってほしいですね。HTMLやCSSの設計は本当に奥が深いので、見た目の演出に力を注ぐだけではなく、裏側の設計にもしっかりと目を向けて、プロに評価されるマークアップを心がけてみてください
益子:
マークアップは、対マシンという意味で、0から1を、無から有を生み出せる楽しい作業です。デザインの観点からは、そのままでは「絵」でしかないものに、人々が操作できるWebページとして、いわば命を吹き込むのがマークアップという作業です。Web制作では、よく「ユーザーインターフェイス(UI)」という言葉がつかわれますが、そもそもHTMLそれ自体が、丸ごと「ユーザーインターフェイス」です。という意味で、マークアップエンジニアはとても人間的な仕事であるといえます

どのような物事にも、頭で考えてどうかという「論理」と、気持ちが動くかどうかという「感情」の両方がともなうように、マークアップにも「設計」と「表現」がともないます。常に両方からアプローチすること、両方の充実を目指すことが大切です。その経験の積み重ねは、マークアップエンジニアという仕事を追究するとしても、関連領域のスキルを深めるとしても、きっと役に立ちます

—ありがとうございました。