私はこれまでフリーランスでweb制作のコーディングやwebデザインをしてきたのですが必要だったillustratorやphotoshopのデザインスキルは5つのみでした。その他のスキルは、今までのところあまり使っていません。
ちなみに、コーディングをする人もphotoshopというデザインツールのスキルが必要なので、必要スキルを紹介していきます。
どれも10分でマスターできる簡単なものなので、紹介します。
【フリーランスデザイナー/エンジニアしていて無駄だった努力②】
✔️sketch, adobeXD等デザインツール全て使いこなそうとする
👍デザイン&コーディングセットの案件をやればツールの指定がないことが多いので、自分に合ったツール1つ覚えとけばOK。
デザイン単体で受注する場合は不明— ふる🇹🇭 (@guutenx) 2018年8月10日
目次
web制作で必要最低限のwebデザインスキル5つの前提
Photoshopのソフトをもっていること
特に自分の場合はコーディング案件をこなす場合、photoshopのツールは毎回（具体的に使う場面は後述）使ったので、持っておいた方が良いと思います。
頑張って無料ツールを探しましたが、設定が複雑で結局使えなかったり、怪しいソフトだったので諦めました。
illustratorは最初は不要かも
illustratorは、私の場合は案件によって使う機会があったのですが、
他の知り合いは使う機会がなさすぎてphotoshopしか契約していない人もいました。
illustratorは最初は契約せず、案件で使うようになってから契約しても良いかもしれません。
エンジニアがweb制作で必要最低限のwebデザインスキル5つ
photoshopで要素の長さを測る、文字情報を得る
案件：コーディング案件
photoshopで要素の長さを測る
コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、データに合わせて長さをpx単位で揃える必要があります。
photoshopのプラグインを入れて長さを測る方法もありますが、プラグインを入れること自体がまず面倒なので、この方法でパパッとマスターしてしまいましょう。
【プログラマー向け最低限のデザイン技術③】
💡photoshopで要素の長さを測る
Photoshopデータとpx単位で長さを揃えてコーディングしてと言われます
1.photoshopデータを開き定規を選択
2.上部グリッド→pixelを選択
3.長方形ツール選択
4.測りたいデータの大きさに合わせて長方形作成→長さ測る pic.twitter.com/xTH7WHd6JV— ふる🇹🇭 (@guutenx) 2018年8月23日
photoshopで文字情報を取得する
ウェブ制作初心者向け、コーディングを行う場合の
【photoshopの文字フォント、サイズなどを2秒で得る方法】1.左の選択マークで対象の文字をクリック
2.キーボードのF8をクリックする
3.フォント、サイズ、行間、文字の間隔、文字色がわかります
特に制作会社案件では上記項目の数字反映しましょう pic.twitter.com/8NrorKHVZG— ふる (@guutenx) 2018年12月28日
psd通りにコーディングするために見落としがち
🧐文字間の間隔（letter-spacing）1.対象の文字をクリック→F8で要素見るhttps://t.co/5wBnNfHkmmと書いてある部分の数字/1000でemを算出
例：170/1000=1.7emなのでletter-spacing:1.7em;になる pic.twitter.com/I97jLJJtsS
— ふる (@guutenx) 2019年1月25日
psd通りにコーディングするために見落としがち
🧐行間（line-height）1.対象の文字をクリック→F8で要素見る
2.行送り/フォントサイズで算出フォントサイズ：22px 、行送り：44pxの場合
44/22=2なのでline-height:2;になる pic.twitter.com/iWCS0aUV8N— ふる (@guutenx) 2019年1月25日
photoshopの画像書き出しをする
案件：コーディング案件
コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、コーディングで実装できない部分を、「書き出し」をする必要があります。
コーディングで実装できない部分とは、例えば、「背景などの柄」や「イラスト」などです。
【web制作時の知っとくべきphotoshop活用方法】
🔶psdデータから画像を切り取ってウェブ制作する方法(画像書き出し方法)
1⃣レイヤーを選択
2⃣対象の画像を右クリック
3⃣pngとしてクイック書き出し
4⃣画像保存
顧客からphotoshopデータしか送られてこない(画像データ送られてこない)場合使えます pic.twitter.com/UayQ9WL6qZ— ふる🇹🇭 (@guutenx) 2018年7月24日
ニャンニャン
画像の背景を透過させる or 色を変更する
案件：コーディング案件・デザイン案件
クライアントから背景付きの商品画像を渡された時に、背景を消して商品だけの画像に加工することがあります。また、背景色を透明にする場合があります。
背景を消す方法は４パターンくらいあるのですが、一番簡単なものを紹介します。
【プログラマー向け最低限のデザイン技術①】
💡photoshopで背景の切り取り
商品画像を渡されて商品だけの画像に加工することがよくあります
1.画像を配置
2.自動選択ツール選択後、画像の背景選択
3.選択範囲を反転
4.上部メニューからレイヤーを出し、レイヤーマスクをクリック pic.twitter.com/5PYeyCATBS— ふる🇹🇭 (@guutenx) 2018年8月23日
ニャンニャン
illustratorでロゴの配色を変える
案件：デザイン案件
サイトデザインに合わせてロゴの配色を変えることがあります。クライアントからロゴのaiデータをもらっていることが前提です。
【プログラマー向け最低限のデザイン技術②】
💡illustratorでロゴの色を変える
サイトデザインに合わせてロゴの配色を変える場合があります
1.ロゴ(aiデータ)を配置し選択ツールでロゴ選択
2.カラーパレットで色変更
3.保存(書き出しを選び、png形式等で保存すれば、そのままコーディングで使える) pic.twitter.com/oGBAFkCOIk— ふる🇹🇭 (@guutenx) 2018年8月23日
ニャンニャン
FigmaもしくはAdobe XDでデザイン
ニャンニャン
案件：デザイン案件
webデザインをするときは、クライアントの指定が特にない場合は、figmaもしくはAdobe XDという無料で簡単に使えるデザインツールを使いましょう。
【ウェブデザインを高速で行う】
💡完成度30%の候補を、色/構成/背景別に出して選んでもらい徐々にfix。
テキストは後で挿入
→最初から完成系を出すと手戻り発生率高い✔️配色候補出し
✔️構成候補出し(htmlテンプレ*をスクショ)
✔️背景候補出し*デザイン+コーディング済のテンプレ#Saam pic.twitter.com/x6M8lCI8oL
— ふる🇹🇭 (@guutenx) 2018年8月10日
Figmaで初心者が簡単にデザインをする方法
初心者がAdobe XDでデザインする
Adobe XDでデザインをする方法は以下を参照ください。
実際にpsdデータを使って練習するときは、ベイジさんが作成した未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開以下のサイトにあるPSDデータを使うのがおすすめです。
データをダウンロードすると、以下のPSDフォルダ内にPSDデータがあります。
例えば、以下の「写真」ファイルから、画像やテキストデータの取得ができます。
