マークアップする上で気を付けること

今回はwebサービスを作る上で大切だと思うことを私の価値観の元書いていきます。私自身まだまだ勉強中で、この記事の通りだとは思わないという方もいるかと思います。その場合は良ければコメントなどで理由をいただけると気づきが得られるのでありがたいです。それではスタート！

デザイン再現

デザインは自分で作る場合も他のデザイナーからデザインを貰う場合もあるかと思いますが、一番大切なのはデザインの再現度です。デザイン上にある要素（ボタンや見出し、画像など）がすべて存在しているかはもちろん、文字サイズ、フォントの種類、余白の大きさ、カラーコードが正しいかなどデザイン通りに作ることは必須事項です。

ただ個人的にピクセルパーフェクトは必要無いと思っています。（※1ピクセルのずれも無いデザイン再現のこと）できるに越したことはありませんが、全ての端末・OSで確認するのは現実的ではないので極端な崩れ方をしない中でデザインを再現することが重要だと考えます。

読みやすいコード

タグの意味を正しく理解し読みやすいコードを作るのは、改修作業などの時に役に立ちます。divとspanだけでもマークアップはできますが、section・ul・headerなどのタグはそれだけでページ構造の意味を表します。また、インデントを開け入れ子関係をわかりやすくするのも大切です。cssであればsassなどを使うと、より可読性が高く改修しやすいコードを書くことができます。

アクセシビリティ

近年盛り上がっているアクセシビリティという概念ですが、ざっくり言ってしまうと誰でも同じ情報が得られるようにしようというものです。健常者でも子供と老人では文字サイズで読みやすい・読みづらいなどがありますし、目が見えない人は読み上げソフトを使用します。そういった環境の違いがあっても同じ情報が得られるように注意してマークアップしなければなりません。有名な技術ではWAI-ARIAのrole機能などで、クリックできる要素にはボタンのroleを記述することにより、ブラウザがbuttonタグでなくてもボタン要素と認識してくれるようになります。

日本ではあまり話題になりませんが、人権意識の高い欧米ではアクセシビリティが不十分なサイトに賠償命令が出た裁判などもあったようです。裁判で負けるからというわけではありませんが、どんな人も平等に情報を得られるサイト作りを気にかけていきたいです。

米最高裁でドミノ・ピザが視覚障がい者に敗訴、知らなかったら済まされない企業ウェブ・アプリのアクセシビリティの必要性

マークアップからの視点

これは必須項目でも何でもありませんが、マークアップする際その後のサイト運営に良くないと思ったことはディレクター、デザイナーに伝えるようにしています。

サイト内のボタンデザインが統一されてない、見出しのフォントサイズが異なる、デバイスサイズによる文字の折り返しが考慮されていないなどなど…。状況によりますが、狙ってやっているわけでは無さそうな時にフィードバックを上げます。おかしなところもデザインのまま組んで返す人もいますが、手戻りになることも多いので先回りした方がスムーズに進みます。

終わりに

今回は自分が気を付けている部分を改めて見つめ直してピックアップしてきました。ほかにもいろいろ気にすることがあって大変ですけどバックエンドエンジニアよりフロントエンドエンジニアの方が合ってると感じています。これからも役立つ記事やそうでない記事をアウトプットしていきますので、良ければイイネ、フォローお願いいたしますm(_ _)m