Webコーダーの仕事は、デザイナーさんの作成したデザインカンプをHTMLやCSSのマークアップでWeb上に再現することです。

デザインカンプはAdobe製品のPhotoshop、Illustrator、XDで作成されることが多く、コーダーはそれらのデザインカンプから正確な値を取得して再現する必要があります。

このnoteでは、Photoshop、Illustrator、XDのデザインカンプを用意しました。デザインカンプから実際にコーディングする体験をしていただきたいと思っています。

※ Adobeツールを持っていない方でもXDの共有URLがあるのでコーディングできます。

■ 目的
各デザインカンプからの値取得や画像の書き出し、コーディングに慣れること！

カンプのデザインは以下のとおりです。簡単そうに見えますが、0からのコーディング経験が浅い方だと、意外と難しいかもしれません。

これは模写コーディング会で実際に使っているもので、Progateの初級レベルの方でも再現できるような構成となっています。

■ 対象レベル
Progateの初級レベルをクリアしている

ついてくるもの

■ Photoshopのデザインカンプ（psdファイル）
■ Illustratorのデザインカンプ（aiファイル）
■ XDのデザインカンプ（xdファイル）
■ XDのデザインカンプの共有URL
■ 素材の画像（できればカンプから書き出してほしい）
■ はわにまんのコーディング例（HTML、CSSのファイル一式）

模写コーディング会は3時間のコーディング時間がありましたが最後まで完成する人がゼロでした。慣れていない方だと多分５時間くらいかかるのかと思ったりします。

■ 所要時間
慣れていない方だとPCページの作成で5時間ほど

時間は特に意識しなくていいので、「デザインカンプからコーディングする」という経験を積む１つとしていただけたら嬉しいです。

手前味噌で恐縮ですが、参考になりそうなわたしの記事も添付しておきます。今回と同じカンプを使っているので記事の内容もより理解しやすいかと思います。

■ ファイルの作り方とか
→ https://haniwaman.com/zero-coding/

■ Photoshopからコーディング
→ https://haniwaman.com/photoshop-coding/

■ Illustratorからコーディング
→ https://haniwaman.com/illustrator-coding/

■ XDからコーディング
→ https://haniwaman.com/xd-coding/

■ XDの共有URLからコーディング
→ https://haniwaman.com/xd-share/

■ コーディング後のチェック方法
→ https://haniwaman.com/perfect-pixel/

Photoshop、Illustrator、XDのデザインカンプの取得は、ご購入後に表示されるダウンロードのリンクから行えます。

※ 売上は模写コーディング会の運営費に使わせていただく予定です。

ご購入いただいた方の感想

ダウンロード

以下のリンクから、ファイル一式をダウンロードしてください。