web制作で稼ぐなら最初に読んで欲しい記事

エンジニアがweb制作で必要最低限のwebデザインスキル5つ【10分】

私はこれまでフリーランスでweb制作のコーディングやwebデザインをしてきたのですが必要だったillustratorやphotoshopのデザインスキルは5つのみでした。その他のスキルは、今までのところあまり使っていません。

ちなみに、コーディングをする人もphotoshopというデザインツールのスキルが必要なので、必要スキルを紹介していきます。

どれも10分でマスターできる簡単なものなので、紹介します。

 

web制作で必要最低限のwebデザインスキルの前提

Photoshopのソフトをもっていること

特に自分の場合はコーディング案件をこなす場合、photoshopのツールは毎回(具体的に使う場面は後述)使ったので、持っておいた方が良いと思います。

頑張って無料ツールを探しましたが、設定が複雑で結局使えなかったり、怪しいソフトだったので諦めました。

 

illustratorは最初は不要かも

illustratorは、私の場合は案件によって使う機会があったのですが、

他の知り合いは使う機会がなさすぎてphotoshopしか契約していない人もいました。

illustratorは最初は契約せず、案件で使うようになってから契約しても良いかもしれません。

 

無料のpsdからの書き出し練習用素材でやろう

photoshopデータ(psdデータ)からコーディングが書き出しできる無料の素材を使って練習をしましょう。

コーディングの練習模写サイト!無料素材あり【頻出】

 

エンジニアがweb制作で必要最低限のwebデザインスキル

Photoshopからコーディングする

Photoshopからコーディングする方法【10分】

 

画像の背景を透過させる or 色を変更する

案件:コーディング案件・デザイン案件

クライアントから背景付きの商品画像を渡された時に、背景を消して商品だけの画像に加工することがあります。また、背景色を透明にする場合があります。

背景を消す方法は4パターンくらいあるのですが、一番簡単なものを紹介します。

これは、たまに使うスキルだよ

ニャンニャン

 

illustratorでロゴの配色を変える

案件:デザイン案件

サイトデザインに合わせてロゴの配色を変えることがあります。クライアントからロゴのaiデータをもらっていることが前提です。

これも、たまに使うスキルだよ

ニャンニャン

 

FigmaもしくはAdobe XDでデザイン

これは、webサイトデザインをするとき使うスキルだよ

ニャンニャン

案件:デザイン案件

webデザインをするときは、クライアントの指定が特にない場合は、figmaもしくはAdobe XDという無料で簡単に使えるデザインツールを使いましょう。

Figmaで初心者が簡単にデザインをする方法

Figmaの使い方は5分で3つだけ覚えればOK【初心者向け】画像で説明

 

初心者がAdobe XDでデザインする

Adobe XDでデザインをする方法は以下を参照ください。

 

実際にpsdデータを使って練習するときは、ベイジさんが作成した未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開以下のサイトにあるPSDデータを使うのがおすすめです。

データをダウンロードすると、以下のPSDフォルダ内にPSDデータがあります。

 

例えば、以下の「写真」ファイルから、画像やテキストデータの取得ができます。