htmlcss PSDデータからコーディングしてみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

PSDデータからコーディングしてみよう

HTML×CSS|2019年08月19日

2019年08月19日
  • このエントリーをはてなブックマークに追加

これまで、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

アップと公開が完了したら、ポートフォリオに追加してみてください。
成長の秘訣は自分の作ったものを公開することです。
そして、誰かに見てもらって感想や反応をもらうことです。

すると自分一人だけが閲覧できる状態より緊張感が高まりますよね。
結果的に、細かい部分の修正点に気づき、さらにクオリティをあげようとします。
公開するのとしないのでは「意識の高さ」が全く違うのです。
その意識の高さが、クリエイターとしての実力を押し上げてくれます。

作ったら、どんどんポートフォリオに公開しましょう。
そして誰かに作品を見てもらいましょう。
外に発信していくことで、さらに良い作品を作れるようになります。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら