学ぶプログラミング言語を間違えると悲惨な話

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

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

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

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

 

 

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

illustrator、photoshopのソフトをもっていること

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

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

 

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

photoshopで要素の長さを測る、文字情報を得る

コーディングの案件では必ず使う必須スキルだよ

ニャンニャン

案件:コーディング案件

photoshopで要素の長さを測る

コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、データに合わせて長さをpx単位で揃える必要があります。

photoshopのプラグインを入れて長さを測る方法もありますが、プラグインを入れること自体がまず面倒なので、この方法でパパッとマスターしてしまいましょう。

photoshopで文字情報を取得する

 

 

photoshopの画像書き出しをする

これもコーディングの案件では必ず使う必須スキルだよ

ニャンニャン

案件:コーディング案件

コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、コーディングで実装できない部分を、「書き出し」をする必要があります。

コーディングで実装できない部分とは、例えば、「背景などの柄」や「イラスト」などです。

 

 

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

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

ニャンニャン

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

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

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

 

 

illustratorでロゴの配色を変える

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

ニャンニャン

案件:デザイン案件

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

 

 

簡単な無料デザインツールfigmaもしくはAdobe XDでデザインする

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

ニャンニャン

案件:デザイン案件

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

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

【5分】デザインツールfigmaの使い方を初心者向けに1番わかりやすく解説

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

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

【5分】webデザイン初心者はAdobe XDを使うべき。プラグインなしで効率化