こだわり抜いたデザインを最高の状態でユーザーへ届ける。〜テックブログが公開されました!〜

こんにちは、広報の坂井です。

本日は2月3日(金)、節分ですね!皆様もう豆まきはしましたか?

VASILYでは、テックブログが公開されたのでご紹介します!タイトルは『デザインデータに忠実にCSSコーディングするためのテクニック』。担当はフロントエンドエンジニアの権守(ごんのかみ)です!

tech.vasily.jp

f:id:vasilyjp:20170203160839j:plain

では、いつも通り非エンジニアの皆様に分かりやすく見ていただけるようご紹介していきたいと思います! 

ごんちゃん(社内での権守のニックネーム)、よろしくお願いします!


今回は、『デザインデータに忠実にCSSコーディングするためのテクニック』ということですが、まずは初歩的な質問になってしまうと思いますが、CSSについて少し解説していただけませんか?

はい。CSSとは、ウェブページの装飾をするものです。例えば、背景や文字の色やサイズ、画像の配置などを指定できます。

 

なるほど。分かりやすい。例えば「こんなの」もCSSということですか?

そうです。(笑)iQONの背景やアイテムやテキストの配置や装飾もそうですね。

 

すみません、私の例えが単純すぎましたが、ありがとうございます!(笑)今回は、「デザインデータに忠実に」ということでしたが、CSSという文字列でデザインを書き起こすってすごいことですよね…。

デザイナーが細部までこだわり抜いた作品を一つ一つ忠実に再現していくのは、フロントエンジニアの使命でもあると考えています。ですが、デザイン通りに作ったつもりでも、社内QA(リリース前に社内で確認するもの)でデザイナーにピクセルのずれを指摘されて修正したというのは、フロントエンジニアであれば経験したことがある方も多くいるかと思います。

今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。

 

では、具体的にどのようにやっているか教えていただけますか?

はい。「PerfectPixel」という画像を透過して重ねることでデザインとのずれを確認できるツールを活用してチェックしています。

また、デザイナーには「Sketch」というツールでデザインデータを渡してもらうようにしました。このツールはウェブページ全体のデザインだけでなく、細かく分解した状態で見ることができるので、各パーツごとで正確に構造が把握できるようになりました。

 

なるほど。エンジニアさんとデザイナーさん、双方の協力があってこそ実現しているクォリティーですね!

f:id:vasilyjp:20170203164253j:plain

最後に…前から言おうと思ってましたが、「権守」っていう苗字、珍しいですね(笑)ご出身はどちらですか?

全然関係ないですね!(笑)僕の出身は石川県ですが、石川県に多いわけではありません。この字で「ごんのかみ」と読むのは凄く珍しいみたいですよ!

 

でしょうね!初めてお会いしましたもん!珍しい苗字、羨ましいですね… 


ということで、最後は雑談もはさみましたが、ごんちゃん、ありがとうございました!

VASILYでは、各チームの垣根を超えたコミュニケーションで最高のサービスをお届けできるよう尽力しています。

細部までこだわり抜くサービス作りに、あなたも挑戦してみませんか?

冬期インターンの募集は残す所1ヶ月を切りました!気になる方はお早めに!ご応募お待ちしております!

 

 【お問い合わせ】
株式会社VASILY 広報
press@vasily.jp