フリーランスエンジニア営業なしで案件受注

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

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

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

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

 

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

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

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

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

 

illustratorは最初は不要かも

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

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

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

 

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

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

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

 

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

Photoshopからコーディングする

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

ここに、psdの無料素材を記載しています。

これ以外でもpsdの無料素材を使いたい人は、未経験でも1カ月で即戦力クラスの知識が身に付く『Webデザインドリル』にもあります。

 

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

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

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

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

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

ニャンニャン

 

illustratorでロゴの配色を変える

案件:デザイン案件

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

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

ニャンニャン

 

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

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

ニャンニャン

案件:デザイン案件

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

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

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

 

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

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