これまで、HTMLとCSSでコーディングスキルを学んできました。
今度は、実際のPSDデータからWEBサイトをコーディングしてみましょう。
基本的にWEBサイトは、最初にデザインデータを作ります。
そのデザインデータからパーツを切り出して、コーディングするのです。
通常の仕事の流れでは、まずデザインされたデータが渡されます。
データの形式はPhotoshopが多いですがIllustratorの時もあります。
またXDで作られている時もあれば、他のデータ形式だったりします。
デザインを渡された時点で、パーツが書き出されていることは、ほぼありません。
どうコーディングするか、デザイナーでは分からないからです。
よって、基本的にデータからパーツを切り出すのもコーダーの役目です。
HTML×CSSでコーディングする人もデザインツールを使える必要があるのです。
今回、デザインデータが無い方のためにPhotoshopのサンプルデータを用意しました。
もし、ご自身のデザインデータが無い場合、サンプルデータをお使いください。
サンプルデータをコーディングしてみてください。
コーディングすべきデータがある方は、ご自身のデータで作りましょう。
自分のデータをコーディングすることが、モチベーションも上がるはずです。
では、さっそく詳しいミッションの説明をしていきます。
今回のミッション
Photoshopのデザインデータからコーディングしてみましょう。
まず、どちらかコーディングしたいデータを選んでください。
■ WORKROOMデザインデータ(254MB)
https://startout.work/sample_data/sample_psd_wr.zip
■ サンプルCafeサイトデザインデータ(42,4MB)
https://startout.work/sample_data/sample_psd_cafe.zip
選んだら、それぞれコーディングしてみましょう。
もちろん、両方ともコーディングできればなお良いです。
もしご自身でデザインデータを作ってあるなら上記は不要です。
ご自身で作ったデザインデータをコーディングしてみてください。
サンプルデータを使う方は、簡単にPhotoshopについて学ぶ必要があります。
ただし、複雑な機能を使いこなす必要はありません。
デザインするのでなければ、簡単な機能を使えるだけで大丈夫です。
■ 下記でデザインについて学ぶことができます。
https://startout.work/top_pc_web.php?cat=design
Photoshopについて学んだら、PSDからパーツを書き出してみましょう。
■ 下記でPSDからパーツを書き出す方法が学べます。
https://startout.work/single_pc_web.php?id=1089&cat=design
簡単なPhotoshopの使い方と書き出し方法がわかれば、準備完了です。
これでミッションを進めることができますので、さっそく取り掛かりましょう。
完了後はポートフォリオに加えよう
コーディングが完了したら、作品をサーバーに公開してみてください。
サーバーにアップし公開する方法は下記で学ぶことができます。
■ WEBサイトをインターネット上に公開する方法
https://startout.work/single_pc_web.php?id=1831&cat=knowledge
アップと公開が完了したら、ポートフォリオに追加してみてください。
成長の秘訣は自分の作ったものを公開することです。
そして、誰かに見てもらって感想や反応をもらうことです。
すると自分一人だけが閲覧できる状態より緊張感が高まりますよね。
結果的に、細かい部分の修正点に気づき、さらにクオリティをあげようとします。
公開するのとしないのでは「意識の高さ」が全く違うのです。
その意識の高さが、クリエイターとしての実力を押し上げてくれます。
作ったら、どんどんポートフォリオに公開しましょう。
そして誰かに作品を見てもらいましょう。
外に発信していくことで、さらに良い作品を作れるようになります。