この記事を見てくださっているあなたはデザイナーの方でしょうか、それともエンジニアの方でしょうか？どちらもされる方もいるでしょう。
現在僕のメインの仕事はコーダーといってあがってきたデザインのデータをwebサイトの形にするのが仕事です。
今回は今までの仕事でよく現場で論ぜられる問題について今回コーダーとしての視点で少しお話していきます。
あがってきたコーディングがデザイン通りになっていない問題
デザイナー
コーダー
webデザインにおいてよく聞くような問題点ですが、なぜこのような意識の差がでてくるのでしょうか？分業している場合に「こういう風なつもりでデザインしていたのに…」という部分がデザイナーとは違った解釈で作られていたり、「ここは言ってくれないとこう作るものだと思うじゃん…」というエンジニア視点での言い分もあったりと多種多様です。
フロントエンドにおいてデザイナーとコーダーの意識の差というのはとても重要ですが、このあたりについて、エンジニアとデザイナーの狭間に生きるコーダーとして少しお話していけたらと思います。
デザイナー「デザイン通りじゃない！」
よく言われる問題として一番多いのがコレです！
正直最初は「え？どこが？」ということが多々あったのですが、今まで長くこの仕事をやってきて気をつけるポイント、または重要視されやすいポイントがだんだんわかってきたのでご紹介していきます。
具体例を見ていきましょう。
数値や指定ではなく「見た目」を合わすべし
まずは以下の画像を見て下さい。
このようなデザインデータがあったとします。（※適当例なのでデザインの良し悪しはおいておきます！）
そしてよくあがってくるようなコーディングデータが以下のような形です。
違いがわかりますか？
よくみると下の画像の方はメニュー部分が上に寄っているのがわかると思います。
以下に比較画像を用意しました。
本来のデータ
コーディングデータ
画像では少し線の中心がズレてますが・・・しかしメニュー部がずれていることは確認できると思います。
このような場合、中心をとるような形で指定を行っていることが原因です。
デザインではLの字が大きいため、画像の高さで中心をとった場合上にずれてしまうのです。
しかしデザイン上では「OGO」部分の中心で揃えているのがわかるとおもいます。
近い箇所の配置でズレていると目立つ
このようなズレは細かいように見えますが非常に目立ちます。
細かいパーツの集合する箇所は余白感や配置が計算されており、デザイン上にも意図があるためデザイナーからみても非常に気になるポイントです。
また、仮に同じ様に「2px」ほどのズレがあっとしてもパーツが密集されている部分とそうでない部分では目立ち方が違います。
大きな余白がある箇所で2pxズレていてもあまり目立ちませんが、画像のような箇所では目立ってしまいます。
ではこのようなズレ問題を起こさないようにするのはどうすればいいのか
ズレが発生すると目立つのはわかったけどどうすればいいの？って思うと思います。
なので下記に対策法をいくつか掲載しておきます。
密集部分は特に指定に気をつける
当たり前ですがパーツの密集部は少しのズレでも目立つため、指定の仕方には気をつけます。
上記の例の場合。
- ロゴに対してメニューの高さは中心の指定だろうな。
- flex等の指定で中心を取っておけば大丈夫だろう。
- cssでflexの指定をし、ちゃんと効いているし大丈夫だ。
という思考手順で満足してしまいがちです。なのでよくデータを確認しましょう。
各種ツールを活用してしっかり確認する
とはいえ単純な目視で判断するのはなかなか難しいと思います。
そこでいくつか役に立つツールをご紹介します。
ScreenFloat
このツールはスクリーンショットを撮影し、その場で透過率を操作することができます。
こういった機能を利用し、カンプデータと実際のコーディングデータを重ね合わせることでズレをチェックすることができます。
【web制作コーディングにおける神ツール】「ScreenFloat」3つの魅力
PixelSnap2
画面上のあらゆるものの大きさを測れるツールです。
測れるだけではなくスクリーンショットにできたり、ガイドを引けたりします。
各種パーツの余白感や大きさをチェックできるため、とても有用です。
positionで微調整を入れる
cssのpositionを利用し、細かい位置のチェックを行いましょう。
margin等の指定ではその他の要素もズレてしまいますが。positionなら指定した要素だけをズラすことができますので活用して微調整していきましょう。
ズレ改善のまとめ
- デザイナーの意図を組んで合わすべきポイントをしっかりあわせる。
- 各種ツールを活用し、ズレを発見、改善しやすくする。
- 数値だけにこだわらず見た目で合わすべし。
- 密集部分のデザインは特にしっかり確認する
このような点をしっかり確認してもらえればズレが大幅に減ると思います！良いコーディングライフを！
