WEB/サイト制作時に最低限意識する基本項目11個
2014年09月16日（火）
独立してWEB制作やサイト制作をやる時にやっぱり大事だなーと思ったので、僕もそうですがみんなこれができれば少しはHappyになるのではないかと思い投稿します。
※僕が思う基本的なことなので足りないことや、いらないだろーってこともあるかもしれませんが、そこはあれしてください。
今回意識するのはHTMLコーディングの際の注意点みたいなのがメインなのでプログラマーとかはまた違うのかな。でも、結局プログラミングが入るとプログラマーはチェックしなくてはいけない項目だとおもうので、どちらにしても最低限覚えておいたほうがいいですよ。
１．コーディングする際は適切なインデントをとる
自分だけで簡潔するものであればそこまで意識はしないかもしれないけど、いろいろな人が見る(コードレビュー含め)場合はしっかり階層ごとにインデントをとろう。
案外これって基本的なことの気がするけどできていないことが多い気がする。途中まではとっているんだけど、JSのコーディングのとこだけは、どっかのサイトをコピペしたのか、インデントが異なっていたり・・・。そういった細かなことだけど、作業効率はかなりあがると思うので意識して上げよう。特に自分以外がそのソースを触る場合なんかは特にね。
インデントの種類
タブ：タブでとる(ほとんどは半角スペース4つ分でEditerなどには設定されているはず) スペース：大体スペース4つとかでやったりする。 ※タブでとった方がカーソル移動時に便利だよね
２．scriptの独自記述はまとめる
新規にjsファイルを作成しそこにまとめるか、</body>タグの上に<script>タグをつけてそこにまとめる。遅らせることのできるものはできるだけ読み込みを遅らせることでページの表示が速くなる。
できる限りっていうのが大事で、場合によってJSのプラグインとか使用していると、そこでしか動作しないこともあるので注意が必要なんだけど、そもそもそのように依存してしまうプラグインは使わないほうがよかったりします。（そのあと触るエンジニアの人とかが困ります。ｗ）
あと、JSとｊQueryが混在している場合に特にありげなのが、同じ処理をJS版とｊQueyrで別々に書くこと。document.redyとかね。これは理解がないのにコピペだけでやってるなーって思われてかなり恥ずかしいのでやめたほうがいいでしょう。ｗ
３．コーディング時にもFacebookのOGPタグはつける
対象サイトがパブリックに公開されているページであれば、FacebookのOGPタグはつけておく。シェアされたときのインパクトがぜんぜん違う。コーディングの際はタグだけ埋めこんでもらって、あとで内容を考えるでもあり。(リリース前までに)
特に指定がなくても、これってパブリックなサイトであればシェアされる可能性はあるので、忘れないようにコーディング時につけるようにしておいたほうがいい。現代においてこのタグをいれないで良いようなものはあまり思い浮かばないです。
FBが自動的に判断してくれるだろっていう人もいるだろうけど、それってサイトのdescriptionとかでとってきているっていうのを認識していて、かつFBシェア時にも同じdescriptionであれば問題ないだろうけど、FBシェア時とSEOの項目って全然違うとおもうので、FBシェア時のインパクトをきちんと考えてOGPタグを設計しましょう。（コーダーの方は考えなくてもいいかもしれませんが、これを指摘するだけで、あーこの人プロだなーって思われることも・・・！？）
■OGPの参考 http://webdesignerwork.jp/web/facebookogp/
４．HTML5で記述する場合は適切に構造化(階層化)する（アウトラインを整える）
最近たぶん多くなってきていると思うのですが、せっかくHTML5で構造化できるのに、理解が乏しくてHTML5で記述しているのにコーディングはHTML4みたいな感じになっていて、アウトラインがめちゃめちゃになっている人とかいます。これって外注とかでやっていて、元請けの人達がHTM5のコーディング知識をもっていたら結構恥ずかしいことになっちゃうので注意しましょう。
これについてはもっと良い資料を書いてくれている人がいるので参考にしましょう。
マークアップについてはP81ぐらいに書いていたのでそこを指定していますが、全部読んだ方が知識としはつきますが、ここではここを参考にということで。
よくコーダーの人とかは、デザインができているけど、この対応するのってSEOのためですか？とかって聞いてくる人もいると思うけど、それもそうだけど、一番大事なのはSEOの為とかっていうよりも、正しいコーディングをすること。
それが相成って良いサイトになります。それが最低限です。それが当たり前です。
備忘録までに階層を生み出すセクション要素
マークアップ時にはこのセクション要素のみで構成を立てるっていうのはいいと思います。というか僕がやっています。
■階層を生みだすセクション要素 body：省略します。 article：一つの独立したドキュメントやコンテンツ nav：サイトナビゲーションを示す要素（主要ナビのみ使う） aside：補足的な内容を示す要素（サイドバーや補足） section：一つの章、節、項などの一部分を表す（articleとの差別化を意識） ※できるだけ構造化タグには見出し(H系タグ)をできるかぎりつける。navとかasideはいらなそうだけど。
ここまではいらないとおもうけど参考までに(Qiitaがやっている？)
http://takkaaaaadiary.blog.fc2.com/blog-entry-116.html
→itemscopeとか。これはもうやばいことになるのでまぁ頭の片隅にでもいれて必要な時が来たら思い出そうｗ
５．HTML5で記述する場合はタグの意味を理解してコーディング
項目４と関連して。
HTML5ではタグの意味づけがかなり強化されているので、最低限のタグはきちんと理解して使うこと。
例)
<time>タグ
<address>タグ
みたいな。。。ね。
■参考 http://www.htmq.com/html5/
６．アウトラインのチェックをする
この辺からは最低限のテストみたいな感じですが。要チェックや。
ツールがたくさんあるので参考までにコーディングが終わったらチェックしよう。
Chromeのプラグイン：HTML5 Outliner WEBサービス：http://gsnedders.html5.org/outliner/ GoogleWebMasterの支援ツール https://www.google.com/webmasters/tools/richsnippets https://www.google.com/webmasters/markup-helper/u/0/?hl=ja
７．ブラウザ/端末チェックをする
コーディングして終了ではなく、社内で見れる範囲の端末テストをする。
おそらくこれに工数を多く裂くことになる場合が多いのできちんとスケジュール段階で意識する。
最低限、各主要ブラウザ/端末の最新版とニーズが高いVerのテストをする
ブラウザ：Chrome/FireFox/IE/Safari（※タブレット系）
スマホ端末：iPhone/Android
※タブレット類をPC/スマホどちらにおくかも重要
外注に出している場合は検証端末が絶対あるはずなので問題ないですが、自分たちでやるときは必ず最新版でもいいのでチェックしよう。友達に確認してもらうでも、なんでもいいのでチェックしましょう。思わぬ表示がされていたりするので。そこはプロとして。
８．タグ内のid指定はできるだけさける
これは理解している人がやる分には全然問題ないのですが、自分のコーディングをだれかプログラマーさんやフロントエンドの方等に渡す場合に注意が必要です。やみくもに命名したidを乱用するといろいろなところで障壁になってしまいます。
なのでこの部分としては、特に理由なしにはidしてはさけましょうとしておきます。理解してやるのであれば全然問題ないんです。理解していれば。。。
９．もちろんSEOの基礎知識も
基礎知識は最低限もっていないと近年いらないといわれているSEOの外注とか踏み出しかねない。
もちろん製作を外注している場合もSEOの知識がないと外注業者とも戦えない。
Googleが良いとしているサイトとはどのようなサイトなのかを日々学習しよう。
これに関しては、SEOの話をされたときにコーディングのせいだ！っみたいな感じに怒鳴り散らされないように、日々学習しようってことです。近年ではコーディングもよい方がいいと思いますが、良いコンテンツや良いサイトはきちんと評価されるようなので、良いコンテンツ作りをしましょうっていう方向に持っていけるように、最低限のSEO知識は持ちましょう。
もちろん良いサイトっていうのを認識させる、伝えるためには良いマークアップ、良いコーディングが必要だとも思いますが。そこは最低限やりましょう。
１０．基本的にHTTPでもHTTPSでも対応できるような参照にする
これはコーディングの段階から意識していると、エンジニアさんから「おっ」って思われます。ｗ
■参考 http://labs.opentone.co.jp/?p=4196 例） <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> ↓ <link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
最近はいつSSL対応するっていいだすかわからないのでｗ、SSL使っていなくてものちのちのために考慮してコーディングした方が今後が楽。
１１．jQueryライブラリなど、 CDN 指定できるものはする
参考で解説が早いので参考までに。ｗ
■参考
http://etc9.hatenablog.com/entry/20121028/1351421851
ライブラリ等を外部参照させる際に信用に値するCNDについて。
■GoogleのCDNの一覧 https://developers.google.com/speed/libraries/ CDNを利用することで自サーバ内のリクエスト数を減らすことができ、さらにキャッシュが強い。 例） <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
まとめ
これらを最低限意識するだけでかなりコーディングのクオリティがあがるとおもいます。ただ、製作時にまたは新規事業で大切なのはそのWEBサービスに対する熱意だったりします。
熱意は、そのWEBサービスが世の中やそのターゲットに対して良いサービスだから絶対使った方がいいよ！
という基盤があるからこそ生まれるとおもいます。数字も大事ですが、数字だけで、そこに熱意を感じられなければいいサービスにならないのではないか？だれの為のサービス？見たいな事を反芻して考えて悩んでいくことにより、いいサービスになっていくんじゃないでしょうか。
あと、企業に属している人は良くいいますが、
「変わらない」じゃなくて、「変えられない/変えられなかった」が結果。
なぜ変えられなかったか。説明や納得させることができなかったから。すべて自分。今の社会では「変えられる」人間が必要とされていると、独立した今すごくおもっています。
これを踏まえたうえで
http://www.slideshare.net/gaspanik/web-38740756
を読むとなんだかやる気に満ち溢れませんか？ｗｗ
では、これにて終了とします。なんか熱くなって初めてこんなにいっぱい書いてしまった。
