今回はコーダーの仕事内容や私が気をつけている事を纏めてみようと思います。
経験者向けの内容になると思いますので難しいなと思う方は飛ばして貰って大丈夫です。
あとまだCSSを外部に書くやり方をまとめられてませんのでインラインで記載させてもらいます。
作業の流れ
取り敢えず私の会社の仕事の流れを大雑把に書くと下記のような感じになります。
- クライアントから依頼が来る
- クライアントとディレクターで打合せを行い何をいつまでに作るか決める。
- ディレクターがサイトのワイヤー(ページのラフデザインみたいな感じ)とスケジュール、見積もりを作成
- デザイナーがデザインを作成。動き等もデザイナーが決めます。
- コーダーがデザインを元にコーディング
- 公開
各工程にクライアントのチェックや社内での打合せ、チェック等もあります。
前回の記事にも書きましたがコーディングは公開の一個前にある最終工程であるのがわかるかと思います。責任重大ｗでも大丈夫、慣れればある程度コントロール出来るようになります。
そして私個人の作業工程ですが、パソコン、スマフォ1ページだけのLP(ランディングページ。ググって下さいｗ)を想定すると大体下記のような感じになります。
- サーバー、URL、対応ブラウザなどの基本的な部分を確認
- デザインを印刷
- フォントサイズやマージン等を印刷した紙にひたすら記載
- 要素をブロック単位に分けて何となく名前をつける
- ゴリゴリ作成
- サーバーにアップしてブラウザチェック
- 社内でチェックしてクライアントに確認出し問題なければ公開
私はコーディングを今の会社でしかやった事がなく、社内のコーダーは私しか居なかったので全て独学でやっていますが、恐らく他の会社でも流れはそれほど変わらないのではと思います。
最初のうちに確認しておこう
サーバー情報・ドメイン
最終的にファイル納品かサーバーにアップするかになると思うのでどうするか指示が無い場合は確認しておくと良いです。クライアントがサーバーの契約を忘れていて当日に急いでやって貰った事がありました。サーバーはすぐ契約出来るのでいいですがドメインはDNSの反映まで結構待つこともあるので早めに解決しておくと後で慌てずにすみます。ちなみにその時は15時位にサーバーとドメインを取って貰い19時頃になんとか反映されて事なきをえました。。
URL
既存のサイトに追加する場合はURLの確認(フォルダ名でもある)も大事になります。なかなかCSSや画像などを絶対パスで読み込む事も無いと思いますが後からフォルダ名を変えると思わぬミスに繋がる事があります。OGImageとかは絶対パスですね。
対応ブラウザ
私の会社ではもうIEを始め全てのブラウザを最新のみとしています。チェックしているブラウザは以下です。
Windows
- IE11、Edge
- Chrome
- Firefox
Mac
- Chrome
- Firefox
- Safari
iPhone、Androidでもそれぞれ端末で確認しています。IEは基本的に最新のバージョンである11、Edgeでの確認ですが念の為IE9、10でも確認してたりします。各WindowsでIE9と10はもうサポートが終了しているのでもう良いとは思うんですけど一応怖いのでｗ
レスポンシブ？端末切り替え？
ウインドウサイズに合わせて表示サイズを切り替えるか、ユーザーエージェントに合わせて表示サイズを切り替えるかは私的に結構重要だと考えています。例えばスライドショーとかを表示サイズに合わせて対応するかしないかは結構作業時間に影響するんですよね。あと横幅を％で書くかどうかなど作り方に結構関わってくると思います。
LPなどの場合本体のサイトのやり方に合わせる必要がありますが、新規に作る場合、JSがあまり必要なかったり、レイアウトがPCとSPで大きく変わらない場合、大きな画像が少ない等の場合はレスポンシブ、その逆の場合はユーザーエージェントで切り替える事が多いです。
そういえば以前はSP版を作成するかどうか確認するとデザインし忘れてた！なんて事が多かったんですが、最近はGoogleのSP版必須宣言で作るのが当たり前になっちゃいましたね。
スケジュール
当たり前の事なんですがいつが公開日でいつクライアントにテスト出しするかのスケジュール確認は重要です。ディレクターによっては逆に何日で出来るか確認される場合もあります。私はその場合、掛かりそうな時間の1.5倍は取るようにしています。結構イメージ通りにいかない事が多いんですよねｗ
スケジュールと作業量を見てヤバそうな場合は手伝って貰うなどの対応が必要なんですが慣れないうちは自分がどれ位かかるかなんてわからないんですよね。大体何日（又は何時間）で出来るかを考えながら作業して、実際にかかった時間との差が見積もりの甘さだと言うことを毎回意識しながらやっていると段々イメージ出来るようになってくると思います。これは頑張るしかないｗ
アナリティクスのタグ
いまでは当たり前のようにみんな使ってるGoogle社のアナリティクス。これはアクセス解析をするのに必須ですのでタグを作って貰えるか聞いておくと良いと思います。クライアントがWEBに疎くてくれない場合は、私の会社では自社のアカウントでタグを作って取り合えず入れておいています。後々やっぱりアクセスが知りたいといわれた時に見せる事が出来ますし、自分達でもアクセスがどんな感じでPCとスマホとどっちのユーザーが多いのかなど見ることが出来ます。
必要事項の確認が一通り終わったらいよいよ作業です。
作業しよう
デザインを印刷する
私の会社では印刷することに特に制限がありませんので問答無用で印刷しますｗ
印刷した紙にイラレやフォトショップを確認しながらフォントサイズやマージンを書くようにしています。デザインデータを確認しながらでも良いんですが確認してCSS書いて確認してCSS書いてっていうのがどうにも手間に感じて結構細かく書くようにしてます。例えばこんな感じです。
ざっくりですが隙間がどれ位か、font-size、line-height、colorやbackground-colorなどがどれ位かなどをガシガシ記載します。画像に書き忘れてしまいましたが、デザイナーさんによっては色々とフォントを使い分けてる事も多いです。その辺りも最初に書いておくと楽かと思います。
ついでにブロックごとに何となくクラス名を決めておきます。area area1の所はクラスを二個入れています。画像ではコンテンツ部分が少ないですがもっと多い場合はarea area2などとしたり、コンテンツの内容に合わせてnewsWrapper、topicWrapperなどとしています。
コーディングする
準備が出来たらガリガリ書いていきますが、最初から書くのは面倒なのでindex.html、css、jQueryなどの初期セットを作って使用しています。zipに纏めてみましたので良かったらダウンロードしてみて下さい。
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>テンプレート | テンプレート</title> <meta name="keywords" content="●, ●, ●, ●, ●" /> <meta name="description" content="●●●●" /> <meta property="og:title" content="●●●●"> <meta property="og:site_name" content="●●●●"> <meta property="og:type" content="website"> <meta property="og:url" content="http://●●●●/"> <meta property="og:image" content="http://●●●●/img/common/og.jpg"> <meta property="og:description" content="●●●●"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/img/common/favicon.ico" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/top.css" /> <!-- CSS | END --> </head> <body> <!-- Google Analytics --> <!-- Google Analytics | END --> <div id="wrapper"> <header id="header"> <h1> <a href="#">ロゴ</a> </h1> <nav id="gnav"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> <!-- gnav | END --> </header> <!-- header | END --> <div id="contents"> </div> <!-- contents | END --> <footer id="footer"> © Copyright 2018 </footer> <!-- footer | END --> </div> <!-- wrapper | END --> <!-- JAVASCRIPT --> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/top.js"></script> <!-- JAVASCRIPT | END --> </body> </html>
css
@charset "utf-8";
/*
==============
base.css
==============
*/
/* -----------------
■ デフォルトリセット
------------------- */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0 none;
border-collapse: collapse;
color: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
list-style-type: none;
margin: 0;
outline: medium none;
padding: 0;
table-layout: fixed;
text-decoration: none;
vertical-align: baseline; }
/* -----------------
■ フォント
------------------- */
body { font-family: Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
/* -----------------
■ 全体
------------------- */
/* -----------------
■ ヘッダー
------------------- */
/* -----------------
■ コンテンツ
------------------- */
/* -----------------
■ フッター
------------------- */
/* -----------------
■ 汎用
------------------- */
.lh0 { line-height: 0; }
.clearFix:after{
content: ".";
display: block;
clear: both;
height: 0;
font-size:0;
visibility:hidden; }
みたいな感じです。これを作っておくととても楽ですがhtmlは進化も早いので時々見直すとよいと思います。
コーディング方法は人それぞれですので参考程度に見て貰えればと思いますが私は下記の事に気を付けています。
- エリア事に分けて作る
- できる限りheight指定はしない
- インデントは意識してしっかり付ける
- CSSの並びをテンプレ化する
- 画像名やクラス名を出来るだけパターン化する
エリア事に分けて作る
これは見て貰った方がわかりやすいかと思いますのでサンプルを作成しました。
<div id="contents"> <div class="area area1 clearFix"> <div class="left"> <h2>ダミー見出し</h2> <p>ダミーテキスト</p> </div> <div class="right"> <img src="ダミー" alt=""> </div> </div> <div class="area area2"> <div class="left"> <img src="ダミー" alt=""> </div> <div class="right"> <h2>ダミー見出し2</h2> <p>ダミーテキスト2</p> </div> </div> <div class="slideWrapper"> <ul> <li><img src="スライド画像1" alt=""></li> <li><img src="スライド画像2" alt=""></li> <li><img src="スライド画像3" alt=""></li> </ul> </div> </div>
…内容が薄すぎてちょっと分かりにくかったかもしれませんがcontentsの一個下の階層に大きな枠を作っているのがわかるでしょうか。area1 area2 slideWrapperの様に同じ階層に並ぶ要素を兄弟と言います。areaの下にあるleftやrightは子です。contentsは親ですね。
大枠を兄弟にしておくとスライドの部分だけ横幅100%にしてと急に言われたとしても修正が簡単にできますし、area1の上に移動したり複製したりするのも簡単です。area2の中に作ってしまっているとcssの書き方にもよりますが外に出して調整するのが大変だったりします。
できる限りheight指定はしない
入社したての方や、面接時に送って貰った作品を見るとうまくCSSでコントロール出来ずheightを使ったりpositionで無理やり位置を決めている人を良くみます。グリッドレイアウト等で高さを合わせるのに指定したり、理解して使用するのは必要だったりします、うまく行かないからと取り合えずで指定すると後々ガタがでますのでおすすめできません。floatが解除できずに使ってる人が多いような気がします。
<div style="width: 300px; margin: 0 auto;"> <div style="float: left; width: 150px; height: 150px;"> 左側のテスト </div> <div style="float: right;"> <img src="http://kklog.tokyo/wp-content/uploads/2018/05/01.jpg" alt=""> </div> <div> これは下にやりたい </div> </div>
実際にコーディングしたものがこれです。
ちょっと強引ですけどこんな感じでしょうか。
最近ではどのブラウザでもできると思いますので「左側のテスト」の所にマウスを持っていき、右クリックをして「検証」みたいなボタンを押してみて下さい。chromeの場合はこんな感じです。
そうするとソースが表示されると思います。右側にあるheightのチェックを外してみましょう。
「これは下にやりたい」が上に行ったのが確認できたでしょうか。ブラウザ上でちょちょいと様子を見たい時にはとても便利ですので検証は是非覚えてみてください！コーダーには必須と言っても過言ではない機能です。これ重要です。
floatを行った場合は必ず回り込みを切るというCSSが必要になります。切り方には色々あるのですがこのパターンの場合は「これは下にやりたい」を囲っているdivにclear:bothを付けてあげるのが正解です。せっかくなので「これは下にやりたい」を右クリックして「検証」を押し、右側のelement.styleの所にclear:bothを入れてみてください。
「これは下にやりたい」がまた下に戻るのを確認できたでしょうか。「左側のテスト」と画像がfloatで回り込みになっているのを「これは下にやりたい」の所で解除したので自動で高さが取れるようになったのですがこの辺はややこしいのでまた今度詳しく説明したいと思います。何となくheightを使わなくても大丈夫というのがわかって貰えたら助かります。
ちなみに私が書くときはこうします。
<div class="clearFix" style="width: 300px; margin: 0 auto;"> <div style="float: left; width: 150px; height: 150px;"> 左側のテスト </div> <div style="float: right;"> <img src="http://kklog.tokyo/wp-content/uploads/2018/05/01.jpg" alt=""> </div> </div> <div> これは下にやりたい </div>
実際にコーディングしたものがこれです。
先ほどと同じように「左側のテスト」の高さを外して見てもらうと、崩れないのがわかるかと思います。これはclearfixといってfloatを行った要素の、親要素に付けておくと解除してくれる仕組みです。早めに知りたい方は是非ググって見て下さい。floatをしたら必ず解除する。これ重要です。
インデントは意識してしっかり付ける
ついないがしろにしがちな部分だと思いますがインデントを付けるのは非常に重要な事です。インデントというのは行頭の出だしをずらす事なのですが、これをしているとしていないとではソースのわかりやすさが全然違います。
例えばこれがインデントが適当な例です。
<div id="contents"> <div class="area area1 clearFix"> <div class="left"> <h2>ダミー見出し</h2> <p>ダミーテキスト</p> </div> <div class="right"> <img src="ダミー" alt=""> </div> </div> <div class="area area2"> <div class="left"> <img src="ダミー" alt=""> </div> <div class="right"> <h2>ダミー見出し2</h2> <p>ダミーテキスト2</p> </div> </div> <div class="slideWrapper"> <ul> <li><img src="スライド画像1" alt=""></li> <li><img src="スライド画像2" alt=""></li> <li><img src="スライド画像3" alt=""></li></ul> </div> </div>
「エリア事に分けて作る」の所に使ったソースを大分派手にインデントを崩した例になります。わかるわかるという人もいるんじゃないでしょうか。こんなにひどい奴いないだろぉ～と思うと思うんですが結構いるんですよ。。本当に。この状態のファイルを引き継いで修正をしないといけない事態を想像するとぞっとしませんか？もうどこから始まってどこで終わってるのかさっぱりわかりません。
経験上始まりのタグと終わりのタグが同じ縦線上に並べるように意識して作れると、この人は丁寧に作ってくれる人だと思って貰えます。というかちゃんとやってないと自分が苦労する事になりますｗ特にjsやphpのようなプログラムでは閉じタグ一つ抜けるだけでエラーになるので本当に重要です。
CSSの並びをテンプレ化する
これは個人的にやっている事なのですが、CSSを書く際に並び順を自分の中で決めておくとよいと思います。
表示非表示系、
ポジション関係、
横幅、縦幅、
マージン、パディング
フォント関係
バックグランド
z-index
私の場合はこんな感じで決めています。並び方に意味はありませんので好き好きでよいと思うのですが、こうしておくと修正の際に上側にあるか下側にあるかなど探しやすくなり効率が上がります。font-sizeはえ～とどこだ？みたいに探す時間がかなり省けますので是非お勧めです。
画像名やクラス名を出来るだけパターン化する
キャメルケースとスネークケース、どっちがどっちだっけと思ってググっていたら良いページを発見しましたｗ興味のある方は是非見てみてください。https://html-coding.co.jp/knowhow/tips/naming-rule/
作った後のチェック工程
見た目を確認する
これは当たり前と言えば当たり前の事なんですが、初めから出来てる人は少ないように感じます。かくいう私も最初はちゃんとやっていなかったような気がします。
私の会社がシステム会社ではなく、デザイン会社だからかも知れませんがコーダーに求められる要素としてデザインをしっかりWEBに反映するというのがあります。デザイナーのこだわりは半端ないです。マージンがちょっと違うだけで指摘されますｗ
なので極力同じになるように作ったページをブラウザで表示しながら、デザインをとなりに倍率100%で並べてみます。こんな感じ。
★ブラウザとイラレの並び画像をいれる
並べてみたり、重ねてブラウザとイラレ等を交互に表示してみたりしてサイズや空き具合、フォントの見た目などに違いがないか確認してみると良いと思います。結構、あっ、ここが違うって気づくことが多いです。これをやってデザインを極力再現しておくとデザイナーの信頼が得られます。
極力というのは完全に再現するのは難しいためです。イラレ等でみるフォントとブラウザで見るフォントは同じフォントを指定していても見た目が違う事が多かったり、フォントにはline-heightが効いてる関係で、空き具合を物差しツールで測っても正確に測れない為です。
★ラインハイとが原因で正確にはかれないよ画像をいれる。
1～2px程度のズレはデザイナーさんに説明すれば許容してくれる事が多いです。5pxとかズレてるとかなり見た目に違うのでそこは頑張って合わせた方が良いと思います。
必ず色々なブラウザでチェック
先にも書きましたが私の会社ではWindows、Mac、スマホでそれぞれ色々なブラウザでチェックを行っています。と、偉そうに書いてますがこれはどこの会社でもやっていると思いますｗ昔はIE6対応が必須で本当に苦労しました。最近やってなくて忘れがちですが色々な所にzoomを入れていたのは良い思い出です。一番びっくりしたのは存在しないはずの場所に別の所に書いたテキストが表示されるバグです。何あれ…。
それはともかく、私はチェックする際に頭だけでMacのChromeはOK,Firefoxはここがダメとやってると分けがわからなくなるので紙にチェックシートを印刷して、チェックを入れるようにしています。これをすると全ブラウザしっかりチェックした！感があって好きなんですよね。人それぞれな所だとは思いますがおすすめです。
アナリティクス入ってる？
アナリティクスは入っているでしょうか？クライアントがいらないという場合は入れない方がいいと思いますが、入れてない事で後からしまったーと思うこともありますので意識しておくと良いと思います。
トランジションでフワっを演出
私はスケジュールに余裕がない時はこういうやってもやらなくても良いプラスアルファな作業をオプションと考えて作業しています（デザイナーから指定がない場合ですが）。時間がない時はまずデザインを再現する作業が優先ですのでコーディングを終わらせて、気持ちに余裕が出来てからオプションを付け足していくようにしているんですが、その一つにtransitionがあります。
リンク部分にマウスを持っていくと色が反転したり、薄くなるサイトが多いと思います。その際、trantisionを指定していないと一瞬で切り替わるのですが、指定しているとフワッと時間をかけて切り替わります。
色がかわる違いを感じて貰えたでしょうか。何となくマウスが乗った時気持ち良く感じる…その程度の事ですが意外と重要だったりしますので私は意識するようにしています。
まとめ
ざっくりまとめますと
・作業前に必要な情報を確認する
・デザインを出来る限り精密にWEBで再現する
・修正のしやすさを意識してコーディングする
・各OS、ブラウザで確認する
・余裕があれば細かい部分にも気を使う
という所を私は意識しながら作っています。作り方は人それぞれですし経験から思った事をまとめていますのでよくない部分もあるかも知れませんのでこういう人もいるのか程度に見て貰えれば幸いです。また何か思い出したら追加していこうと思います。
次はまたHTMLやCSSなど、基本的な部分を書いてみようと思います。
コメント