悩んでる人Web制作の案件色々見てるけど、求められてるのは結局「デザイン」ばっかじゃん！俺コーダーなんだけど…。
結局、デザインも勉強しなきゃいけないの？デザインって独学とかってムリじゃね？
みんなどうしてるの？外注？
といったお悩み、疑問をもつ方へ向けた記事になります。
先日、以下のツイートをしました。
コーダーはコーディング、デザイナーはデザインをそれぞれ突き詰めようっていう意見もある
でもフリーランスだと両方の知識ないと案件なかなか取れないのが現状
僕コーダーなんでデザインできませんじゃなく、バランスよく両方できる人が重宝される
最低限の知識は押さえとこうっていう姿勢がだいじ
これについて深堀りしていきたいと思います。
- Web制作に最低限必要なデザイン知識について、サクッと学べる方法がわかります。
- クラウドソーシングのデザインつきコーディング案件も、怖がらず受注できるようになります。
【Web制作者・コーダー必見】最低限やるべきデザインの勉強法まとめ
この記事では、「コーディングの勉強が終わって案件獲得を目指してるけど、結局求められてるのはデザインだと知り萎えてる人」向けに、最低限やるべきデザインの勉強と、その方法についてまとめています。
大規模な制作会社だと、コーダーとデザイナー、役割が細分化されていることもあると思います。
しかしフリーランスであれば「俺コーダーなんで、デザインはできません」っていう姿勢では間違いなく通用しないし、そのような人に仕事が舞い込んでくることはありません。
なのでどちらかを突き詰めるより、バランスよく両方の知識をもっておく必要があります。
まずデザインの概念を勉強する
まずはデザインの「概念的な部分」について把握することが大切です。
「デザインとは何か」とか「デザインの基本原則」といった部分を知っているだけでも、デザインの仕上がりに大きな差が生まれます。
デザインの概念を勉強するのにおすすめ書籍があります。下記の2冊です。
書籍①：なるほどデザイン
書籍②：ノンデザイナーズ・デザインブック
書籍①：なるほどデザイン
数あるデザイン書籍の中でもいつも常にランキング上位の良書、「なるほどデザイン」。
デザインの概念から、デザインに必要になる引き出し、色が持つ印象、書体が持つ印象…など、デザインに関する幅広い知識を網羅しています。
初心者であればこれ一冊読むだけで基本的なデザイン知識を身につけることができますので、デザイナーでなくてもぜひ読んでおきたい1冊です。
書籍②：ノンデザイナーズ・デザインブック
タイトル通り、デザイナーじゃない人のためのデザイン本。
デザインの4つの基本原則などを具体例を交えて紹介されているので、デザイナーでなくても、ビジネスパーソンとして最低限押さえておきたいデザイン知識を網羅している一冊です。
ただ個人的な感想ですが、もともと海外著者の本なので「翻訳されてる感満載の日本語」が少し気になります。
良質なデザインを見る
良質なデザインを作るためには、良質なデザインを見て勉強するのも大切です。
こちらの勉強にもおすすめ書籍があり、それが下記です。
書籍①：Webデザイン良質見本帳
書籍①：Webデザイン良質見本帳
良質なWebサイトデザインの見本を415パターンも網羅している書籍です。
良質なサイトデザインの見本がジャンル、雰囲気、色合いごとに分けられています。
クライアントが求めている「雰囲気」や「色」からお手本となるサイトを探すことができるので、たいへん勉強になるうえ、パッと見るだけで完成イメージが浮かぶので、実務でも重宝します。
僕自身も実案件でこの本を見返してサイトデザインの参考にすることもあるので、買って損はない、保存版のような存在となってます。
こちらの本は「デザイン辞書」のような位置づけです。見てる分にはおもしろいので、いつまでも見てられます。ゆえに見てる時間ばかり長くなりがち。
なので対策として、「必要なタイミングで、必要な部分だけを見る」といった用途で使うよう意識しましょう。その方が効率がいいです。
アウトプットし、成果物を作る
上記の書籍でデザインの基礎を学んだら、あとは学んだことを活かしつつ、アウトプットをしましょう。
アウトプットとは具体的にいうと、実際にデザインカンプを作成してみる、ということです。
実際に自分で作ってみることで学びになるし、作ったものは成果物としてアピール材料になるからです。
この章では下記の項目をそれぞれ解説します。
何をアウトプットするのか
おすすめデザイン制作ツール
何をアウトプットするのか
具体的に何をアウトプットするか。
それは、クラウドソーシングサイトで募集されてるデザイン案件の仕事内容にあるサイトデザインです。
あなた自身が作りたいデザインの架空のサイトでも構いませんが、それだと自己満足になりがちです。
実際のところ、デザインの練習とかサンプルサイトでよく見るおしゃれなカフェとかパン屋さんとかの架空Webサイトって、案件としてはほとんどないからです。
実際よくあるのは、「リフォームを行う会社のHPデザイン」「電気配線の工事を行う会社のHPデザイン」「小～中学生向けサッカー教室のLPデザイン」「女性向け電動鼻毛カッター製品LPデザイン」などです。
はて…どんなデザインにしたらいいんだろう？と悩まされるものばかりですが、それがキモです。
応募するしないは別として、これまで書籍などで勉強したことを活かして、悩みながら作ってみましょう。
実際に悩み抜いてデザインを作ったら、案件に応募してみてもいいでしょう。もしそれが通って受注につながれば、「デザインでお客さんの悩みを解決できた」という立派な実績になりますからね。
以上のやり方で、せめて4～5つくらいはデザインカンプを作りましょう。アウトプットは多ければ多いほどデザイン力は身につくので、時間があればぜひたくさん作ってみてください。
もし受注に至らなくても、「あなたが作ったデザイン成果物」として残り、ポートフォリオとして使えます。
おすすめデザイン制作ツール
上記で紹介したデザインカンプ。それを作るためには、デザイン制作ツールを使うのがいいでしょう。
おすすめのデザイン制作ツールは下記です。
ツール①：Adobe XD
ツール②：Figma
ツール①：Adobe XD
Adobe XDは、直感的な操作でデザインカンプを作成できるツール。
IllustratorやPhotoshopよりもやさしいUIで、操作が直感的なので、ウェブサイトのデザインカンプを作る用途には最適です。
また共有する際も、URL、画像書き出し両方に対応していますので、クライアントに成果物を見せる分にも問題ありません。
お金はかかりますが、初心者にも優しく、今後の仕事でも間違いなく重宝するツールです。
IllustratorやPhotoshopなどの、Adobeソフト。これらは高額ですが、Web制作をする上では必須になります。
「デザインカンプはIllustrator形式 or Photoshop形式」と定めている会社が未だに多いからです。
XDや、後述するFigmaを使う会社も増えてきてますが、まだごく一部のモダンな会社に限ります。
なのでAdobeソフトはケチらず、自己投資のつもりで1年間だけでも買ってみましょう。
イラレとフォトショ持ってればできることの幅が広がり成長につながるので、十分回収できます。
ツール②：Figma
こちらのFigmaも直感的な操作で、サイトデザインを作成できるツールです。
Figmaの最大の特徴は、ブラウザ上でデザインが作れることです。そのため複数人でのリアルタイム編集にも向いています。
有料版と無料版がありますが、1人でデザイン制作を行う分には、無料で十分事足りるのも魅力。
作ったデザインカンプはもちろんURLや画像で共有もできるので、まずはこちらでデザインカンプを作って成果物として使いましょう。
デザインの勉強になるサイト
書籍やアウトプットで体系的に学んだら、足りない部分をサイトの記事で補いましょう。
デザインをするうえで勉強になると思ったサイトを下記に掲載します。
サイト①：chot.design
サイト②：Qiitaの記事
サイト①：chot.design
chot.designは、無料で学べるデザイン学習サイト。
中でも下記「はじめてのデザイン～デザインの基本・考え方」という講座が、デザインを学ぶ上でとても有益だと思います。
はじめてのデザイン〜デザインの基本・考え方〜｜chot.design
会員登録することで学習状況を記録したりいろいろ便利なようですが、普通に勉強する分にはしなくても問題ないです。
サイト②：Qiitaの記事
おなじみエンジニア情報共有サービス「Qiita」にて、先日見かけた以下の記事です。
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】
エンジニアに限らず、デザインの概念・考え方としてとても勉強になったので、ぜひ読んでほしい記事です。
まとめ
以上、「【Web制作者・コーダー必見】最低限やるべきデザインの勉強法まとめ」でした。
必要最低限のデザイン知識を取得し、デザインありの案件にも積極的に胸張って応募できるよう、日々成長していきましょう。
1992年生まれ｜2020年10月フリーランスとして独立｜Web制作、SEOライティングを軸に活動中｜接客→生産管理→システム開発会社→現在｜モリブログ運営。Web制作、フリーランスジャンルを中心に更新中。PV数は年間14万人以上｜｜温泉、旅行、甘いものが好き。
