• 日本語
  • English
  • 中文
MENU
CREATE A PLATFORM FOR DIVERSITY
Web, Game, App, Illustration
https://monstar-lab.com/
Tools
2015/05/13
1pxのズレにさよなら!マークアップをデザインぴったりにするツール3選

みなさんこんにちは。2014年7月入社の濱村です。
プロジェクトメンバーからは、「はまやん」と呼ばれています。どうして「やん」がついたのかは誰にもわかりません・・。

僕は、WEBサイトのマークアップを担当しており、デザイナーが作ったデザインを1pxも違わずにWEBへ再現する仕事をしています。「デザインをWEBに再現する」、ただそれだけのことではありますが、それだけには収まらないのもWEBの常。この単純明快と思われるこの仕事にもいろんな罠が隠されています。

マークアップがデザインとずれている

営業が契約をとり、ディレクターがワイヤーを作り、デザイナーがデザインする。その行程を経てようやく、マークアップが始まるわけですが、いざマークアップされた成果物を見ると、

あれ、デザインとずれてない・・?

ということがままあります。余白が違う、フォントサイズが違う、カラーコードが違う、なんかもういろいろ違う。デザインの何を見てマークアップしたの・・と途方に暮れるケースも珍しくありません。

しかし、僕はマークアップがデザインとずれてしまうことは、そのエンジニアの能力が低いことに原因があるとは考えていません。むしろ、マークアップの「方法」に原因があり、その方法さえ改善できれば、どの人がやったとしても、そこまで大きなずれは起きないと考えています。

デザインと合わせるツール

僕は、マークアップをデザインと合わせるために、いくつかのツールを併用しています。各々で慣れているツール、方法があると思いますが、もし気に入ったものがあれば是非使ってみてください。

アプリを透過させる「Afloat」でデザインを重ねる

デスクトップアプリを透過させるAfloatは、様々な用途に合わせて汎用的に使うことができますが、今回は
マークアップについてどのように使っているかご紹介します。

1. まずインストール
こちらからダウンロード。現状、OS 10.9.4で正常に動作しています。
ダウンロードしたら手順に従ってインストールしてください。
http://afloat.en.softonic.com/mac/download

2. まず、使用しているブラウザをAfloatで透過させます。
ここではTranslucentを選択してください。
1
すると、ブラウザ自体が透過します。
2

3. PSDもしくはデザインの画像データを下に配置してマークアップしていきます。
3

すると、いつもブラウザ上でマークアップをしている環境を維持しつつ、デザインとがっちり合わせることができます。また、Afloatはスマホサイトのときにも同様に使うことができます。XCodeを起動し、iOSシミュレータを立ち上げます。次に、iOSシミュレータをAfloatで透過させ、PCサイトと同様に画像データを下に配置します。そしてsafariで「開発」を選択し調整していきます。これでスマホも同様にマークアップをすることができます。

「PutonDesign」で、ブラウザ上でデザインを重ねる

PutoneDesignは、Chromeエクステンションで、ブラウザ上でデザイン画像を重ねることができるツールです。
http://rrlrlrll.org/update_putondesign/

1.まず、作者のありがたい記事に目を通しながら、PutonDesignをインストールします。
http://rrlrlrll.org/update_putondesign/

2. PutonDesignをクリックします。
4

3. 画像をブラウザへドラッグします。
5

4. 画像がアップロードされます。
6

5. 画像をクリックすると画像が重なります。
7

6. この状態でマークアップします。
Chrome Dev Toolでずれを直していきます。Emulationにも対応しているので、PCだけでなく、Mobileのマークアップにも適しています。また場合によっては、Live reloadを使って直にCSSファイルを編集していっても良いでしょう。

「Xscope」で細かいズレを測定

Xscopeはデスクトップ上のものを測定したり、Photoshopのようにガイドを引けるアプリです。
8

使用用途としては、Ruler Modeで余白を測ってみたり、
9

Frames Modeで枠を固定させてスクリーンショットを撮ってみたり、
10

Screens ModeでiPhoneやiPadなどのデバイスをイメージしてみたり、
11

Loupe Modeで、カラーコードを測ってみたり、
12
などなど、多種多様な使い方ができると思います。特に最近アップデートされた、xScope 4ではAfloatのようにオーバーレイで画像やPSDを透過することができました。
13

他にも様々な新機能が追加されたようですので、xScope 4、是非チェックしてみてくださいね。
There are dozens of new features in xScope 4

まとめ

僕がマークアップに使っているツールは以上になります。他にも皆さんが使っているツールがあれば、ぜひ教えてくださいね。また、今回はSASSやStylusなどのCSSプリプロセッサについては言及しませんでしたが、これらを知っておくと、よりマークアップの精度はあがっていくと思います。

それでは良きマークアップライフを!

Archives