【ブログ移転】ChouChouがはてなブログからWordPressに引っ越しました。
【本の紹介】これからWebデザイナーになりたい方におすすめの本を紹介します。
こんにちは、fuyu_naです。
私は今年の7月から独学でWebデザインの勉強を始め、バナーやWebサイトのデザイン制作に取り組んだり、アウトプットを続けた結果、11月頃から少しずつお仕事依頼が頂けるようになり、一緒に働こうというありがたいお誘いも頂けるようになってきました。
そして最近、「独学でこれからWebデザインの勉強を始めたい」という方から「どうやって勉強したの？」というご質問を頂くことがあるので、今回は私が実際に参考にした本をまとめてみました。
なぜ本で学ぶのか？
ネットでの学習プログラムやスクールがある中で、私はそれらを使わずに「本」から学ぶ方法を選びました。
その理由は、
- 本が好きだから
- 内容がしっかりまとめられていて、体系的に学べるから
- 印をつけておけば後から何度でもすぐに確認できるから
あとは本を買うためにお金や置き場所も必要になるので、「やっぱりやーめた」と引き返しにくくなると思ったからです。本棚に本を並べておけば、いつでも気が向いた時に読めますし、せっかく買ったんだから勉強しないとって気持ちになります。
まずはデザインの基礎から
最初はデザインの基礎を学びました。以下2冊の他にも「ノンデザイナーズ・デザインブック」という本も評価が高くおすすめです。私はデザイン入門教室を読んでからノンデザイナーズ・デザインブックに書店で出会ったので、その場でパラパラめくって読む程度で内容が把握できました。なるほどデザインはサブタイトルの通り「目で見て楽しむデザインの本」です。ちなみにデザイン入門教室はいつも手の届くところに置いてあって、今もお世話になってます。
Webデザインの基本と見本帳のチェック
Webデザインの基本が1冊あれば、Webデザインにおけるワークフローやレイアウト、HTML&CSS、Javascript、レスポンシブデザイン、実装までの流れなどがざっくり学べます。Webデザイン良質見本帳は、目的に合わせてどんなデザインにするかの参考になります。基本はWebサイトのデザインについてですが、バナー制作をする際にも配色やレイアウト、余白やフォントの使い方など参考にしています。
HTML&CSSについて手を動かしながら学ぶ
以下の2冊は実際にHTML&CSSを書きながら学べて、効率よくコーディングの基礎練習ができます。「HTML5&CSS3デザインブック」は特に評価が高いです。「HTML&CSSとWebデザインが1冊できちんと身につく本」は内容に沿って学習していくとオシャレなWebデザインが自分の手で作れるので満足感があります。
アプリケーションの使い方を手を動かしながら学ぶ
IllustratorとPhotoshopの本を並べましたが、最初は「Photoshop」を使えるようにしました。バナー模写や企画課題に取り組むなどしてPhotoshopが一通り自由に使えるようになってから、「Illustrator」を使い始めました。印刷物の制作をしないのであれば、最低限Photoshopだけでもいけそうだと思ってましたが、自分でデザインのパーツを作ったり、ロゴやアイコンを作ったりするのにはIllustratorが適していると思うので、結局は両方勉強した方が良いと思いました。いずれもadobeの無料版が1週間使えるので、節約したい方は先にどちらかを練習して、できるようになったら次という形の方が良いと思われます。
最後に
今回は、独学からWebデザイナーになるために参考にした本をご紹介しました。今思えば、7月にWebデザイナーになると決めた時、私もこのようなブログ記事を読んでました。5ヶ月後にまさか自分がこんな記事を書いているとは思いませんでしたが、少しでも「これからWebデザイナーになりたい」だれかのお力になれれば幸いです。
【Illustrator】密かにイラレ勉強会を開催しました。（＋バナー模写）
イラレを使い始めて数日の私がわからないところ（むしろほぼ全て）をお二人にZoomで画面共有しながら教えて頂きました。感謝しても感謝しきれない、最高に私トクな会でした。
転職先の話や今抱えているお仕事の話も親身になって聞いて頂けて、デザイナーとしての先輩というか、先生というか、なんとも表現しにくいですが、貴重な存在に出会えたことを心底嬉しく思いました。
お二人以外にも普段から仲良くして頂いている方々、「これがわからない」ってツイートすると親切に教えて下さる方々、みんなで高め合ってデザインを勉強している #masacaデザイン部 の存在などがあって、最近ますますデザインが好きになってるなーと思います。好奇心が何より優先して無鉄砲に挑戦したりもすることも多い自分ですが、そんな方々の存在があるから「大丈夫」と思うわけで、「挑戦してみよう」って気になるんだと思います。
もっともっと勉強して、お世話になってる方々に恩返ししたいです。
今日は、昨日のイラレ勉強会で教わったことを実践すべくバナー模写をしてました。
今週末キャンプに行くので、それにちなんでキャンプのバナーを模写しました。
極寒みたいだけど大丈夫だろうか。コテージとはいえめちゃくちゃ寒そうです。今年5月のGWにキャンプした時でさえ寒くて毛布にくるまってたけど、懲りずにまた行ってきます。「寒い！」って言いながらするキャンプも絶対楽しいと思うし（あほなのかな）、冬生まれなので寒さには強い…はず。
【Illustrator】イラレ上達に向けて「バナー模写」
こんばんは、fuyu_naです。
最近ありがたいことに紙のお仕事依頼を頂いたので、「Illustrator」（イラレ）を本格的に練習し始めました。以前からやりたいとは思っていたものの、Photoshopでこと足りていたので最近まで触れずにきました。前述したお仕事の詳細についても面白そうなので、後日改めて書きたいと思います。
イラレの勉強ですが、最初はこちらの本を見て基礎を学びました。フォトショを練習し始めた時も同じシリーズにお世話になり、演習などもついているのでわかりやすいです。ショートカットキーとかも記載してくれてるので、何回も見直しそうです。
続いて、イラレでバナー模写をすることにしました。
イラレでバナー模写 No.1
バランスの悪さが目立ち過ぎてお見せするの恥ずかしいのですが、記念すべきイラレ模写処女作なので晒しておきます。。最初は誰だってこんなもんだ！って自分を励ましながら模写しました。少し大げさでした、実際はうまくいかなくても楽しかったです。
少しずつイラレに慣れてきた No.2
つっこみどころは多々ありますが…。背景の柄とか梅の花、ロゴなどを作るのが楽しかったですイラストはイラストACさんからお借りしましたが、終盤は色々できることが分かってきて、もっとイラレ使っていきたいと思いました。
今日はこのあとZoomで英会話（英語できないけど）なので、これで終わります！
まだ書きたいことはあるので、後日追加するかもしれません。
…では！
バナーコンペで落選して得た学び【法律事務所編】
先日、法律事務所のサイトへ誘導するバナーのコンペで提案したのですが、残念ながら採用ならずでした。他の方々のバナーから学ぶことがたくさんあったので、今後に活かすために記録しておきます。
（明瞭な画像は依頼者様の希望で表示できません）
まず、今回のコンペですが自分が「30分でどれだけできるか」を試したかったので提案締め切り30分前から制作を開始しました。24時に締め切りが訪れるので、23時30分頃にPhotoshopを開き、23時55分に提案画面でメッセージを入力するという強行作業でした。
結果、フォントにばらつきがあったり、文字の位置が揃っていなかったりとミスが目立ってました。見直す暇もなく滑り込みセーフという感じで提案。
失礼なことをしてしまったと反省してます。以後このようなことはしません。
以下、他の方々が提案したバナーの考察などを書いていきます。
提案された全バナーを俯瞰して気づいたこと
-
ほぼ全員が「青」メインの配色にしていた。
-
提案者全員が弁護士さんの写真を入れていた。
-
「青空」の写真を使ったデザインが複数あった。
-
小見出しの前に ☑︎ を使っている人が複数いた。
-
文字はゴシック体、明朝体を使う人が半分ずつぐらいで、両方使っている人もいた。
-
事務所のロゴを引用している人もいれば、オリジナルで入れている人もいる。
個人的には採用されたデザインよりも他の方のデザインの方が良いと思ったのですが、それって依頼者さんが「どんなデザインを求めていたか」を理解できてなかったということかもしれません。デザインの勉強を始める前は「おしゃれなもの」が良いデザインだと思ってましたが、勉強し始めてからは「目的にあったもの」がより良いデザインだと認識しています。つまり、採用されたバナーがおそらく最も「依頼者さんが求める目的に合ったもの」だったのだと思います。
全体的に配色が青かったことも興味深かったです。おそらく提案者はみんな「誠実さ」「安心感」を求めて青にしたのでしょうが、同じ「青」でも重めの青や、フレッシュな雰囲気の青など、どんなイメージにするかによって使用されている青が違ったので、配色って改めておもしろいと思いました。
私のバナーは他の方々のバナーと並んだ時、押しが弱く、どこか全体がぼんやりしていました。前から文字を大きくするのが苦手でしたが、今回は思い切って大きくしたつもりでした。それでも他の方はまだ大きい…！文字が大きければ良いわけではないのですが、しっかりメリハリをつけられるようになりたいです。
ちなみにブックデザインはタイトルが大きいほど売れるらしいです。
尊敬する寄藤文平さんが言っていました。
採用されたバナーのポイント
-
文字のジャンプ率を有効活用してメリハリがある。
-
アイコンなどは使わず、弁護士の写真と文字で構成。
-
事務所の名前がセンターで最も目立っている。
-
全体的に漢字が多く使われていて「まじめ」な印象。
-
盤面率が高く少し硬い印象。
なぜかいつも下の方へと配置してしまう「事務所名」ですが、採用された方は「バーン！」とセンターに、しかも1番目立つ大きさでレイアウトされていました。自分の中の固定観念が壊れた感じがして気分爽快でした。採用されたバナーは事務所の名前が目立つ、看板のようなデザインでした。
また今までロゴはそのまま使わないといけないと思い、誘導先のサイトから保存して使っていましが、今回採用された方はオリジナルで、しかも明朝体からゴシック体に変更して使用していました。これも新鮮でした。
採用された方のバナーの印象をまとめると、全体的に情報量が多いけどメリハリがついていて分かりやすく、漢字が多く文字が詰まっているので「真面目」な印象でした。法律事務所のバナーなら少し固く見える方が信頼感があって良いのかなと思いました。
最後に
今回、法律事務所のサイトへ誘導するバナーのコンペに挑戦しました。結果は不採用でしたが、採用された時以上の学びが得られました。知らないうちに自分の中に固定概念が出来上がっていたこともわかり、もっとたくさんのデザインを見て、幅広いジャンルのコンペに挑戦し、デザインの引き出しを増やしていきたいと思いました。