WordPressの完全無料オンライン体験

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

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

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

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

 

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

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

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

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

 

illustratorは最初は不要かも

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

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

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

 

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

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

案件:コーディング案件

photoshopで要素の長さを測る

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

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

photoshopで文字情報を取得する

 

photoshopの画像書き出しをする

案件:コーディング案件

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

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

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

ニャンニャン

 

画像の背景を透過させる 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データがあります。

 

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