みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

先週末、以前掲載した富士山撮影のリベンジに行ってきました。
とても寒くて、首に一週ぐるりと貼るホッカイロを巻き付けてました（笑）

でも今回の撮影も雲が多く、あまり望む写真が撮れませんでした。家から近いのでまたリベンジしたいと思います。

さて、今回はコーディングをするのにも設計が必要か？という視点で、普段どんな準備をしてコーディングしているか書いてみたいと思います。

動作環境の決定

まず動作環境を決定します。動作環境とはどのOSのどのブラウザで動作するかを決定します。以前ほどは酷くはないのですが、OSやブラウザによって大きくレンダリング結果が変わってくるために、この決定は非常に重要です。

なお、色々と頭を悩ませてくれるIEのバージョン9は2017年4月にVistaの正式サポート終了をもって一緒にサポートされなくなります。なので今後はこのブラウザの動作は保証しなくてもよいでしょう。

IE9やVistaを使っている方々は、セキュリティのことも踏まえて新しいものに変えていただくことを推奨します。

但し、仕事で使っているとなかなかそうはいかないもの。サイトを作るときもターゲットユーザーに合わせて、どのバージョンまで動くのをサポートするか決定する必要がありますね。

使用する言語やライブラリの決定

フロントエンジニアリングに限定して言うと、たとえばHTML5を使用するとか、CSS3を使用するとか、この辺は上で決めたサポートブラウザの決定である程度決まってきます。というのもブラウザによって使用できるタグが制限されるからですね。

場合によってはJavaScriptによってサポートされていないブラウザでも動作させることもあります。

マイクロデータの選定

マイクロデータは今後重要な要素ではないかなと考えています。クローリングロボットに対して、どんな情報を指し示しているのか明示することによって、検索結果画面でより正確な情報を掲載することができます。

例えばそれは店の営業時間、会社の概要、パンくずリスト。その他ほとんど何でもあります。これらの中からどの情報を明示化するべきか、http://schema.org/ を見ながら決定していきます。膨大な情報があるので、一苦労ですが、ある程度あたりをつけておくことでより早く、選定することができます。

HTML構造の決定

ある程度決まったらCSS設計も兼ねてHTMLの構造を設計します。HTMLの構造を設計？？？という方もいるかも知れませんが、極めて重要です。HTMLタグ自体にも意味づけされているので、正しい構造で意味づけを行わないと、SEOの効果を失います。検索結果が下がる要因にもなってしまいます。

また、今後のメンテナンス性にも大きく影響を与えるので、中規模サイトでもこの設計に数時間要します。

W3CのValidation Checker で正しくHTMLが掛けているか、このCheckerでついでにHTMLのアウトラインチェックも行い、HTML構造が正しいアウトライン構造で掛けているかチェックを行います。

初期設計時は手書きでラフを！

最初に設計をするときはまず手書きでラフを行います。これはとある保守させていただいているお客様のサイトを、最近のSEO事情に合わせてHTML構造を一から再構築するというプロジェクトの、HTML構造を設計する最初の段階のラフスケッチです。

こうやって、どの情報をHTML文章上でどのように配置するか大きく決めて、この後更に細かく突き詰めて決定していきます。

---

 

こうしてやっとHTMLのコーディングに入っていきます。ここへ至るまでに2桁時間くらいは余裕でかかります。でも段取り8割という言葉を信じて、これが結果最速であること、そして最良のできになることを信じてコーディングしています。

いかがでしたか？ちゃちゃっと書くのも良いことですが、今後のメンテナンスや、SEOのことをより強く考えてコーディングすることはとても大切です。

低コストで作成するサイトも良いのですが、より効果を生むサイトを作るためにはこうしたアナログな手間暇が極めて重要です。

皆さんのサイト、ちゃんとできてますか？気になったら是非ホワイトボードまでご相談ください！

それではまた来週お会いしましょう！