##前回の話
前回の話
余白は正しく使いましょうって話をしました。
##今回の話
今回は実際にマークアップ、コーディングをする時に、どんなことに気をつけているのか。
そんな話をしていきたいと思います。
##マークアップとコーディングってそもそもなんだ
マークアップエンジニアとかコーダーとか、よく耳にする言葉ではありますが違いってあるの？
大きくは違いはなくって、コーダーの上位の存在がマークアップエンジニアらしいです。
とあるサイトの言葉引用しますとこんな感じらしい
( https://mynavi-creator.jp/blog/article/the-role-of-mark-up-engineer )
もし「マークアップエンジニアとは何か？Webコーダーとの違いは？」と聞かれたとすれば、「デザイナーが設計（作成）したページデザインを、そのまま忠実にコーディングするWebコーダーに対して、マークアップエンジニアは、SEOやアクセシビリティなども考慮し、サイトの目的達成のために、ユーザビリティの向上を追及し、最適な形で表現（コーディング）できる人材」と答えるでしょう。さらに言えば、「ユーザーの行動やユーザーの環境を理解し、より質の高いユーザー体験をフロント側で実現できる人材」とも付け加えるかもしれません。
個人的には肩書きでしかないのであまり気にしてなかったですが、こう言われるととても大事なことがありますね。
ユーザーの行動やユーザーの環境を理解し、より質の高いユーザー体験をフロント側で実現できる人材
ユーザーの行動や環境を理解して、クオリティを求めるのはかなり大事です。
いわゆるUI・UXのことでもあるんじゃないかなと思っています。
##コーディングするときのwebデザインの見方
webサイトをコーディングする時、大体の人はどこからかwebデザインをもらって、それを基にコーディングしていくと思います。
デザインを1pxのズレもなく再現をするのも良いですが…
例えば…
###PCとSP(スマホ)のデザインをもらった時
PCからコーディングする、SP(スマホ)からコーディングするとか個人間で色々あると思いますが、
個人的には、「この要素(ブロック)はどんな積み方をしているのか」を見て欲しいです。
どういうことかというと、以下のようなデザインがあるとします。
イラレで簡単に作ったので雑なのはご愛嬌ください。
左がPCデザインで、右がSPデザインですね。
ヘッダー、フッター、KV、グリッドコンテンツがあってよくあると思われるデザインと思います。
このAとBのコンテンツに注視してもらいたいです。
PCデザインではAの要素が先に来て、Bの要素が後から来ています。
Webでは基本左上から要素を詰めていきますので、単純なら以下のようになります。
<div class="A"></div>
<div class="B"></div>
ここでSPデザインを見てみます。
Bの下にAがありますね。
これ単純にHTMLで書くと以下のようになります。
<div class="B"></div>
<div class="A"></div>
ここで あれ？ と思いますよね。
PCとSPで書き方が違います。
以下のように、PCの時だけ、SPの時だけ表示すると分けることもできますが、あまりスマートではありませんね。
<div class="A pcOnly"></div>
<div class="B"></div>
<div class="A spOnly"></div>
こういう時はSPデザインの書き方を踏襲して、簡単な例だとfloat:right;などを使うとか
<div class="B" style="float:right;"></div>
<div class="A"></div>
何が言いたいのかというと、もらったデザインをコーディングし始める時は、
まずPCとSPのデザインを一度見合わせる必要があるということ。
業務上でもこういったPCとSPの構成の差異はよくありました…
一度PCデザインからコーディングして、後からSPデザインを始めるとここの書き方が違うな…というようなことに出会うことと思います。
今まで出会ったことがない人は、この見合わせが出来ているか、単純にそんな問題に出会わなかったかかと思います。
PCデザインだけの場合でも、デザインは一度全体に目を通したほうがいいです。
目を通して、「ここはこうやって実装して…」「こことここは関係性があるから…」などとメモしてコーディングの目安にすると、コーディング効率がグッと上がります。
###デザイナーの意図を汲み取る
webのデザインをする人って意外とwebについてあまり詳しくない人が多いイメージがあります。
「webについて詳しくない」というより、「cssのことを知っているか」かもしれないですね。
先に述べたようにもらったデザインを一度全体を見てみると、
「これはcssじゃ実装できないな…」とか、「ここのスタイルごちゃごちゃしそう」とか、問題を抱えそうなものが見受けられたり…
そうした時はもちろんデザイナーに相談するのが一番ですが、これはデザイナーに気をつけてもらいたいってことですね。
####フォント
コーディングをする人に気をつけて欲しいことは、フォントです。
これは意外と見ていない人が多いみたいです。
もらうデザインの大体は、我らがAdobeのイラレやフォトショですが、ここで使用しているフォントに気をつけたいです。
web対応しているフォントを使っているかはデザイナーの問題ですが、デザイン上でテキストに反映しているフォントがwebでは反映されておらずメイリオのままとかはダメ。
力の入っているデザインの場合は細かいフォントのしてが多いこともあります。
私なんかはfont-familyはちゃんと反映するのですが、font-weightがデザインとwebでは見え方が違うことがあって合わせるのに苦労したりしました。
フォントのcssスタイルは種類豊富なので、まずこれを染み込ます必要がありますが、その都度調べて 覚えていくのがいいでしょう。
例えば、
- カギ括弧や句読点の空白とかも詰めたいとかは、
font-feature-settingsで空白を調整したり - webフォントがデザインのフォントよりウェイトが太いとかは、
-webkit-font-smoothingで調整したり
cssでは再現できない場合には、最悪画像などで対応することもありますが、あまり良いとは言えませんね。
####色
色もしっかりカラーコードを確認したいですね。
もしデザインのカラーモードがRGBではなく、CMYKになってたらデザイナーの責任ですが、色の差異が大変なことになりますので、ここも確認したいですね。
これもフォントと同じようにデザイナーが指定した情報をしっかり確認して入れ込むようにするのがいいです。
色だけでなく、不透明度も一緒に確認したほうがいいです。
スポイトツールで色を確認しようと思ったら不透明度も設定されていて正しい色が抽出できないこともあります。
色を抽出出来ないだけではなく、webでの表現が変わったりもするので確認したいところです。
####レイアウトのマージン
デザインをみると綺麗に整っているけど、webに書き起こしたらバランスがおかしいなんてことがあってはまずいですよね。
レイアウトの各ブロックごとのマージンも確認します。
Adobeのイラレやフォトショの場合はスマートガイドというもので操作中のオブジェクトと他のオブジェクトの距離が表示されたりするので確認はしやすいはずです。
マージンをデザイン通りに指定するだけでもいいのですが、この際にレスポンシブ時にどうレイアウトを変更するのがいいのかを考えるのも大事です。
レスポンシブ対応はほぼ当然といってもいいぐらい当たり前になってきましたが、気持ちよくレスポンシブ出来ているとUX的にもプラスになります。
レスポンシブについて考えながらコーディングができると、数をこなしていく中で「ここはこうすべきだな」とかパターンが見えてきます。
レスポンシブは難しいかもしれませんが、マージン含めここまで考えてコーディングしてあげればデザイナーも冥利に尽きると思います。
「デザイナーの意図を汲み取る」ことは大事ですが、大体は仕様書なんかに「ここはhoverしてアニメーションはこんな感じ」とか書いていたりするのでそういったものがあればそれに従うのが良いでしょう。
それにプラスアルファで、仕様書の指摘から外れたり邪魔にならない程度に、UI・UXをより気持ちよくするための工夫をするのがコーディングする上でステップアップできるものなんじゃないかと思います。
##終わり
簡単にですが、私がマークアップ・コーディングをする上で気をつけていることを少しだけ列挙しました。
他にもSEOとかアニメーションさせる工夫とか色々ありますが、簡単なとこを今回で紹介しました。
ここでの内容はあくまでも私個人的なものなので、もっとスゴイ人のマークアップ方法とかを参考したほうがいいと思いますが、
プログラミングやコーディングがまだ苦手と言う人にちょっとした参考になってくれればいいなと思ってます。
次回は、特に何も決まってませんがなんかネタがあれば投稿したいと思います。
→次回投稿未定