現代のWebサイトをデザイン・コーディングするとき、当たり前で意識すること。

はじめに

プロの現場で当たり前に取り入れられている技術やテクニックをあなたは知っていますか?

現代のWebサイトは、デザイン面では情報が明確に伝わり、ユーザーにパフォーマンスがよく、アクセシビリティの優れているWebサイトを提供することを求められています。
また昨今のプログラムの複雑化によって、以前に比べソースコードの視認性、柔軟性を業務の中で求められるようになりました。

未経験な方や、勉強中の方がいきなり完璧にこなすのはとても難しいです。
まずは少しずつできるようにしましょう。

この記事は、大前提としてSEOに沿ったWebサイト作りに向けた記事になっています。
私が普段意識している、初心者の方でもすぐに取り入れれるポイントをいくつかご紹介させていただきます。
一部主観も入っております。ご了承ください。

デザイン編

レスポンシブデザインを心掛ける

現在の日本のモニターサイズの主流は、フルHDの「1920×1080」か「1366×768」がほとんどです。
逆に、ひと昔前に主流だった解像度「1024×768」「1280×800」は、2020年現在で国内シェア率は10%を切っています。
それらの恩恵を受け、余白を十分に使ったゆとりを持たせたデザインを採用できるようになりました。
しかし解像度の変化があるにもかかわらず、昔の仕様で作られたWebサイトはどのように見えるでしょう。
左右に余白が空きサイトコンテンツがギュッと詰まったように見栄えの悪いものに見えるのです。

Webフォントを使ってみる

あなたはWebフォントを知っていますか?

Webフォントとは、あらかじめWebサーバにフォントデータを読み込んで利用するフォントです。
Webフォントを使うことにより、デバイス間のフォントの違いを気にせず、よりリッチな表現をすることができるようになります。

Webフォントのサービスの代表としてGoogleが提供しているGoogle Fontsがあります。
こちらは、登録不要で無料で提供されているため、一度試してみてはいかがでしょうか。

余白をしっかりとり、情報に集中させる。

img02

こちらはデザインにもよりますが、余白が少なく詰まっているデザインになっていませんか?
例えば、要素のふちと文字との間に、視覚的に見える余白が少ないと、詰まった印象を与え、文章を読んでいるとき、視界に不要な情報が映り、文字を集中して見ることができません。

コントラスト比の低いものは避ける

img03

デザインをするとき、コントラスト比を気にしていますか?
実はSEOにはコントラスト比を確認していると言われています。
文字やボタンなど、背景とのコントラスト比が低いと視認性がよくなく、UI的にもよくありません。
私は普段、Color reviewを使ってコントラスト比を確認しながら色を選んでます。

文字サイズは適切であるか

文字サイズを適切に使えていますか?
文字サイズが大きすぎたり、小さすぎたりしていないかを確認しましょう。
SEOコンサル会社によっては、文字サイズもSEO基準の1つに入っているというところもあります。
私がデザインするときの文字サイズの基準は、PCは本文15px~16px、SPは本文14px、見出しは17px~22pxまでをベースに考えています。SPは文字サイズが20px以上だと大きいと感じるかたが多いため、気をつけましょう。

コーディング編 - HTML

コメントアウトを活用して可読性のあるコーディングを心掛ける

img05

コーディングのスピードを意識するあまり、何も考えずコーディングしていませんか?
そのまま作業を進めていくと、修正作業が入ったり、ほかの人に引き継ぐ際、コードが汚くてわかりづらい、修正に時間がかかったりと、いろいろな問題にあたります。
すべてにコメントをつけろっとは思いませんが、せめて1セクション、1コンテンツごとにコメントをつけるとわかりやすいです。

見出し(hタグ)を適切に使う

見出しを適切に使えていますか?
見出しはSEOの評価にも大きく関係すると言われているマークアップです。
基本的に大きい見出しにh1、その次にh2、h3と階層が深くなるごとに小さい見出しを使用するのがルールです。
私は見出しを使うとき、以下のことを気を付けています。

見出しレベルを飛ばさない

デザインの都合でh1の次にh3を使ったり、h2の次にh4を使ったりしていませんか?
もし使っている場合、それはNGなので修正しましょう。
私はSEO META in 1 CLICKというChrome(Edge)の拡張機能を使って確認しています。

h1はこのページが何のページかわかるように

h1は見出しタグの中でも一番重要な役割をしています。
基本的に、h1は1ページに一つがいいと言われています。
なので私はトップページはロゴに、下層ページは記事のタイトルなどに使い分けています。

見出しに画像を使うときはalt属性は必ずつける

imgタグを使うときは、適切なalt属性をつけるのは当たり前です。
ロゴ部分のalt属性に"ロゴ"のような不適切なものをつけていませんか?
会社名やサービス名など、きちんと正しく使うように気をつけましょう!

見出しの日本語と英語表記はまとめる

昨今のWebサイトでよく日本語と英語をセットで見出しに使っているページを見かけます。
日本語も英語もそのコンテンツをさしているのであれば、見出しタグを分けるのは不適切であるため、避けましょう。

画像、動画の最適化

img06

Webサイトに置く画像や動画をそのまま置いていませんか?
技術の進化によってスマートフォンで撮った画像や動画の解像度、容量がだんだん大きくなっています。

例えば、iPhone11Proで撮影した写真を使うとします。
オリジナル(無加工)の写真は3.33MBもあります。これはGoogleが推奨しているページサイズ1.6MBを推奨の値の倍以上あります。
また、2年ほど前にGoogleのSEO担当者がクローラーのダウンロードできるWebページのサイズにはおおよそ10MBくらいの限界があると明確にしました。
つまり、10MB以上あるページはGoogleの検索結果に出せないことになります。

そのまま使うと、ページの読み込み速度が遅くなり、ページの直帰にもつながります。
特に、ECサイトでは0.1秒でも表示速度が遅くなると購入率が下がるというデータも出ております。
画像を使うときはPCは要素の等倍、SPは2倍サイズで作成し、画像の場合Tinypng、動画の場合videosmallerなどのツールを活用し最適化を心掛けましょう。

iOS14より次世代フォーマットWebpに対応したため、IEをのぞくすべての主要ブラウザでWebpを利用することができます。
積極的に利用することを心掛けましょう。Webpの解説はこちらの記事を参考にしてください。

画像は遅延読み込みをする

Webサイトに画像を置くときは、画像の遅延読み込みを使いましょう。
loading="lazy"を使えば簡単に実装できますが、IE・Safari・iOSが非対応のため、ライブラリを使って実装するようにしましょう。

更新によって数が増減する可能性がある場所は、崩れないようにコーディングする

規則性のあるデザインなどで、数が増減する可能性がある箇所は、コーディングするときに数を増やしたりして崩れないことを確認しながらコーディングするようにしましょう。

JavaSrcript、CSSは必要な場合を除き読み込み場所を統一しましょう。

JSやCSSをインラインや外部ファイルにばらばらに書くとメンテナンス性が非常に悪くなり、不具合の原因や修正するときのロスにつながります。読み込むときは場所を統一しましょう。

JSは</body>の直前に書く

ライブラリなど、必要な場合を除き、JSはレンダリングを妨げないためにも</body>直前に<script>タグを置くようにしましょう。

ユーザーが意図しない動きを避けよう

チェックボックスのラベルをリンクにしていたり、クリックできないのにホバーアクションがついていたりしませんか?
それらはUX的にもよくないので避けましょう。

コーディング編 - CSS

あらゆるウィンドサイズでページを見れるようにする

Webサイトをどのウィンドサイズで見ても崩れないようにコーディングしましょう。
現在、モニター解像度のシェア率はPCで1280pxが考慮するべき最小値です。全くいないというわけではありませんが、考慮しなくても問題ない数値だと思います。
そこで1つテクニックとして、min-width を使いブレイクポイントまでこれ以上要素を小さくされないようにするのもアリです。
もし取り入れる場合、1100px~1200pxが主流です。

リセットCSSを使う

Webサイトはブラウザによってデフォルトで余白や文字の大きさが決められています。
ブラウザ間に差異が出ないように、コーディングをするときはリセットCSSを活用しましょう。

id名、class名は適当につけない

id名やclass名を適当につけていませんか?
id名やclass名を適当につけていると時間がたった時の修正、他人が見たときにその要素に何が充てられているかわからなくなってしまいます。
他人が見たとき、それが何の要素をあらわすものなのか分かりやすい名前を付けるように心がけましょう。
class名、id名を悩んだらこちらの記事を参考にしてみてください。

!importantやインラインスタイルを使用しない

!importantやインラインスタイルを多用していませんか?
もし使っている方はすぐにCSSセレクターは全部classで指定するようにしましょう。
なぜか?って思うかもしれません。それは詳細度が関係してくるからです。もし、ごっちゃに混ぜて書いてしまうとあれ?記述しているのに反映されない。などのトラブルの原因になってしまいます。

なるべく絶対値ではなく相対値(%、em、rem等)使う

絶対値(px)を使うと、ユーザーが文字のサイズを大きくしたり、環境によって崩れやすくなってしまいます。また、少しサイズを変えたいときの修正も手間になってしまいます。
ユーザーにとって快適な環境を提供するためにもできるだけ相対値を使いましょう。

フォントサイズの指定はpxではなくremを使う

フォントサイズを決めるとき、pxを使っていませんか?
もし使っている場合、remを使いましょう。
なぜremを使う必要があるのか。それはアクセシビリティの観点からpxだと拡大できないからだと考えられているからです。

hoverアクションは必ずつける

面倒くさいからとホバーアクションをほったらかしていませんか?
ホバーアクションはユーザーがクリックできると認識できる重要な部分です。
面倒がらずにクリックできる範囲には必ずつけるようにしましょう。

CSSスタイルをもとにしたクラス名はやめよう

初心者のかたのよくありがちだが、 color: red; を .c-red などのクラスを作っていませんか?
もしやっている場合はやめましょう。
修正が大変になるし、可読性を損ないます。

コーディング編 - 完了後

実機デバイスで確認する

動作確認をデベロッパーツールのサイズ変更機能だけで済ませていませんか?
実は実機とデベロッパーツールで見え方が異なることがよくあります。
特にPCではきれいにおさまっていたのにSPだと1文字落としているなどよくあることなので、必ず実機でも確認するようにしましょう。

正しいマークアップが出来ているか確認する

HTMLは間違った使い方をしても、表示上はうまく動いているということがほとんどでなかなか間違えに気づきません。
そこでW3Cが提供している構文チェックツールを使い閉じタグ抜けや、タグの使い方のミス、タグの誤字などをチェックするようにしましょう。

モバイルフレンドリーを心掛ける

現在では、SPがPCのトラフィックを上回っています。また、検索エンジンで圧倒的なシェアをもつGoogle検索も、モバイルフレンドリーなページを優先的に使用されるようになっています。
モバイルフレンドリーかはGoogleが提供しているモバイルフレンドリーテストツールを利用しましょう。

パフォーマンスやアクセシビリティを確認する

完成したサイトがユーザーにとって使いにくいものになっていませんか?
Googleが提供している「Lighthouse」を使い確認するようにしましょう。
パフォーマンスは60点以上。ほかの項目は90点以上を基準に調整するように心がけましょう。

最後に

すべてをいきなり取り入れることはとても難しいと思います。
実際の現場のルールなどによっても紹介したポイントに当てはまらない場合もあると思います。
私は、半年後に自分で改修作業をすると考えながらコーディングをしています。