わたしはこれまでウェブ制作案件を8つこなしました。
デザインから案件をこなせるエンジニアになるために、illustratorやphotoshopの講座を受け結構勉強したのですが、必要最低限のデザインスキルは5つのみでした。（笑）
その他のスキルは、今までのところあまり使っていません。
どれも10分でマスターできる簡単なものなので、紹介します。
【フリーランスデザイナー/エンジニアしていて無駄だった努力②】
✔️sketch, adobeXD等デザインツール全て使いこなそうとする
👍デザイン&コーディングセットの案件をやればツールの指定がないことが多いので、自分に合ったツール1つ覚えとけばOK。
デザイン単体で受注する場合は不明— ふる🇹🇭 (@guutenx) 2018年8月10日
目次
0.前提：illustrator、photoshopのソフトをもっていること。
特に自分の場合はコーディング案件をこなす場合、photoshopのツールは毎回使い（具体的に使う場面は後述）、
デザインからコーディングまで行う案件の場合はillustratorもほぼ毎回使ったので、持っておいた方が良いと思います。
頑張って無料ツールを探しましたが、設定が複雑で結局使えなかったり、怪しいソフトだったので諦めました。
AmazonセールやAdobeからより最も安く購入する方法は最後に紹介します。
1.画像の背景を透過させる or 色を変更する
案件：コーディング案件・デザイン案件
クライアントから背景付きの商品画像を渡された時に、背景を消して商品だけの画像に加工することがあります。
また、背景色を透明にする場合がよくあります。
背景を消す方法は４パターンくらいあるのですが、一番簡単なものを紹介します。
【プログラマー向け最低限のデザイン技術①】
💡photoshopで背景の切り取り
商品画像を渡されて商品だけの画像に加工することがよくあります
1.画像を配置
2.自動選択ツール選択後、画像の背景選択
3.選択範囲を反転
4.上部メニューからレイヤーを出し、レイヤーマスクをクリック pic.twitter.com/5PYeyCATBS— ふる🇹🇭 (@guutenx) 2018年8月23日
2.illustratorでロゴの配色を変える
案件：デザイン案件
サイトデザインに合わせてロゴの配色を変えることがあります。
クライアントからロゴのaiデータをもらっていることが前提です。
【プログラマー向け最低限のデザイン技術②】
💡illustratorでロゴの色を変える
サイトデザインに合わせてロゴの配色を変える場合があります
1.ロゴ(aiデータ)を配置し選択ツールでロゴ選択
2.カラーパレットで色変更
3.保存(書き出しを選び、png形式等で保存すれば、そのままコーディングで使える) pic.twitter.com/oGBAFkCOIk— ふる🇹🇭 (@guutenx) 2018年8月23日
3.photoshopで要素の長さを測る
案件：コーディング案件
コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、データに合わせて長さをpx単位で揃える必要があります。
photoshopのプラグインを入れて長さを測る方法もありますが、プラグインを入れること自体がまず面倒なので、この方法でパパッとマスターしてしまいましょう。
【プログラマー向け最低限のデザイン技術③】
💡photoshopで要素の長さを測る
Photoshopデータとpx単位で長さを揃えてコーディングしてと言われます
1.photoshopデータを開き定規を選択
2.上部グリッド→pixelを選択
3.長方形ツール選択
4.測りたいデータの大きさに合わせて長方形作成→長さ測る pic.twitter.com/xTH7WHd6JV— ふる🇹🇭 (@guutenx) 2018年8月23日
4.photoshopの画像書き出しをする
案件：コーディング案件
コーディングのみの案件の時は、ほとんどの場合、クライアントから「photoshopデータ」が送られてくるので、コーディングで実装できない部分を、「書き出し」をする必要があります。
コーディングで実装できない部分とは、例えば、「背景などの柄」や「イラスト」などです。
【web制作時の知っとくべきphotoshop活用方法】
🔶psdデータから画像を切り取ってウェブ制作する方法(画像書き出し方法)
1⃣レイヤーを選択
2⃣対象の画像を右クリック
3⃣pngとしてクイック書き出し
4⃣画像保存
顧客からphotoshopデータしか送られてこない(画像データ送られてこない)場合使えます pic.twitter.com/UayQ9WL6qZ— ふる🇹🇭 (@guutenx) 2018年7月24日
5.パワポ感覚で使える無料デザインツールfigmaでデザインする
案件：デザイン案件
【ウェブデザインを高速で行う】
💡完成度30%の候補を、色/構成/背景別に出して選んでもらい徐々にfix。
テキストは後で挿入
→最初から完成系を出すと手戻り発生率高い✔️配色候補出し
✔️構成候補出し(htmlテンプレ*をスクショ)
✔️背景候補出し*デザイン+コーディング済のテンプレ#Saam pic.twitter.com/x6M8lCI8oL
— ふる🇹🇭 (@guutenx) 2018年8月10日
実際にウェブデザインをする時は、figmaを使うのが最も簡単だと思います。
figmaは、無料でオンライン上で直感的にウェブデザインができるツールです。イメージはパワポ上でデザインを作成している感じです。
オンラインツールなので複数人で一緒に同じアートボードを確認、デザインもできます。
上記は実際にfigmaを使ってデザインをしているツイートです。
簡潔に方法をまとめると以下３ステップです。
1.figmaのページで新規登録する
2. アートボードを作成し、長方形を配置→テキストや、中身を入れていく。
ほとんどパワポと同じ要領で行います。左上からテキストや図形などを選ぶことができます。
ちなみにテキストの日本語フォントは以下４つのみを使うことができます。下2つは装飾フォントなので、基本的には上2つのみを使っています。英語フォントはGoogleフォントなら大体使えます。
– Noto Sans JP
– Noto Serif JP
– Nico moji
– Nikukyu
あと、テキストのフォントをfontawesomeに変えて、fontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。
3.デザインを見てもらいたい人に共有する
右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。
illustratorやphotoshopを最も安く買うには？
わたしはネットで最も安く手に入れる方法をかなり調べましたが、アマゾンのセールで買ったり、illustratorとphotoshopのみを買うよりも、Adobe Creative Cloudというアドビツール全てが入ったパックを「ヒューマンアカデミー講座『たのまな』」から買うのが、年間29800円で最も安かったです。
Adobeのホームページから買うよりCreative Cloudだと3万円/年、イラレ、フォトショのみだと6000円/年安いです。1ヶ月のイラレ・フォトショの講座付きで、Adobe XD(ウェブデザインツール)など他のアドビソフトも一緒に付いてきます。
（通常価格ではなく29800円で購入ができます）
