見出し画像

コーディング模写【実務が体験できるpsdデザインカンプからのコーディング】

こんにちは!しゅう丸(@shumarukiti)です!

これからWEB制作で稼ぎたい人が実務を想定してスキルアップ出来るように、コーディング練習用のpsdデザインカンプを作成しました。

なぜこのコーディング練習用のpsdデザインカンプを作ろうかと思ったのかと言うと、

✔︎ WEB制作のデザインは、ほぼpsdかaiがほとんどだから

✔︎ ホームページを模写、実務を想定をした最適の教材がないと感じたから

といった感じです。

XDも流行していますが、XDは自分で案件をコントロールする時には重宝するのですが、制作会社やクラウドソーシング系の企業から仕事を受けてデザインをいただく場合は、ほぼpsdかaiです。
※追記※
XDで作成されたデザインカンプも増えています。

なのでWEB制作で稼ぎたいならpsdかaiのデザインカンプを元にしたコーディングに慣れておくと強いです。

ちなみに、「psdデータ→Photoshopで作られたデータ」、「aiデータ→Illustratorで作られたデータ」です。

HTML、CSS、jQueryの基礎勉強が終わった段階でよくサイト模写をすすめられますよね?(僕もすすめています)

サイト模写はコーディングのスキルアップには効果的な勉強方法なのですが、実務がpsdやaiデザインカンプを元にしてコーディングをすることがほとんどなので、サイト模写をやるよりpsdかaiデザインカンプのデザインでコーディングする方が効率良いのでは?と思っています。(サイト模写はデベロッパーツールの使い方が理解できるメリットはあります。)

実際に僕もサイト模写は経験しましたが、いざ案件を受注して実務に入ってみると、psdデザインカンプをクライアントさんから渡されて、「これどうやってコーディングすればいいの?psdて何?どうやって画像取れば良いの?」と戸惑いました。

そこでコーディングの基礎を終えた方向けに、3万円のLP案件を想定した実務経験が体験出来るコーディング練習用のpsdデザインカンプを作成しました!

コーディング練習用デザインカンプの目的

実務を想定したpsdデータからのコーディングを経験して、実務案件の準備をする

これは僕が駆け出し時の頃、喉から手が出るほど欲しかったのできっと有益なものになっているはずです。

どんな人向けなのか?

✔︎ HTML、CSS、jQueryの基礎勉強は一通り終わっている

✔︎ サイト模写の経験がある

✔︎ 案件を受注してWEB制作で稼ぎたい

✔︎ コーディングの実務を体験してみたい

といった方向けです。

購入していただく前にちょっと一言。

この練習用psdデザインカンプですが、コーディングするのは正直難しいです!難易度高めです。←HTML、CSS、jQueryがまだ不安な人は、まだ早いと思うので購入しないでください。

また決して安くはない価格なので途中で放り出してしまうかもと思う方も購入しない方が良いかもです。

とはいえこのデザインを8割程度コーディング出来ればLP案件を受注出来るレベルになっているはず。※ただしレスポンシブではなくPC版なので、レスポンシブやSP版の制作は勉強する必要ありです。

どんな内容なのか?

〜本noteの内容〜

✔︎ psdデータのダウンロードURL

✔︎ 簡単な指示書(ここはスライダー、コンテンツ幅は◯◯pxなど)

✔︎ おまけ:aiデータのダウンロードURL

実際のLPは下記の画像をご覧ください。

画像1

繰り返しですがぶっちゃけ初心者がコーディングするとなると挫折する内容になっています。

難しいのは難しいのですが、8割ほどコーディング出来れば簡単なコーディング案件は受注出来るレベル感になるんじゃないか?と思います。完璧を目指して欲しいですが、難しいと思うので8割くらいできれば大丈夫と思って取り組んでください。

〜本noteの注意点〜

✔︎ 添削サービスはついていません。

✔︎ aiデザインカンプはおまけでpsdデザインカンプと若干異なります

✔︎ ポートフォリオとしての公開は控えてください(著作権の関係)

✔︎ Photoshopが必要です(無料体験版あり)

〜コーディングする際の注意点〜

コーディングデザインはコーディングを専門としないデザイナーさんが制作したものも多いです。そのため「ここコーディング不可能じゃない?」、「コーディングに時間がかかりそうなデザインだ...。」、「font-sizeが10px以下だし、小数点もある...。」みたいなことがよくあります。

今回の練習用デザインはわざとコーディングしにくいデザインにしています。なので繰り返しになりますが完全に再現出来る必要はなく、8割くらいの完成度を目指しましょう。この練習用デザインでは、「実務ってこんな感じなんだな」という感覚を身に付けて欲しいと思ったのが1番の目的です。

ちなみにpsdデザインカンプからのコーディングには正解はなく、基本テキストでコーディングするのが好ましいのですが、どうしてもコーディング出来ないところは画像でもOK。←実務ではクライアントさんにしっかり確認しましょう。

この続きをみるには

この続き: 538文字

コーディング模写【実務が体験できるpsdデザインカンプからのコーディング】

しゅう丸

1,980円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
100
未経験からWEBエンジニアになって海外を拠点にフリーランスとして活動しています。未経験からWEB系フリーランス挑戦→挫折→WEB系企業転職→WEB系フリーランス

こちらでもピックアップされています

Programingを始めるにあたって
Programingを始めるにあたって
  • 7本
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。