「Illustrator & Photoshop 手描き風アナログデザインのつくり方」（技術評論社）の評判・価格・レビュー
Webデザインを学ぶための教材の基本情報・価格・レビュー。
PR・広告を含みます
Webデザインをスクールで学ぶなら、教育訓練給付で最大80%OFF。
対象講座なら受講料の最大80%（給付区分・上限・要件あり）が後日戻り、実質負担を抑えられます。独学の本＋スクールの併用も。
▶ あなたの講座でいくら戻るか試算（無料・30秒）
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
無料相談で適用条件を確認できます
はじめての方へ：教育訓練給付のしくみと損しない選び方 ／ 申請手順5ステップ
学んだ後に「作って公開する」ための環境例です。サーバー・ツールは教育訓練給付／補助の対象外です。
※給付率・実質額は区分（一般20%／特定一般40%／専門実践 最大80%）と要件で変わり、即時値引きでなく後日支給です。最終可否はハローワーク・厚労省でご確認ください。掲載はPR（送客手数料を受領）。
この本について
本書はデザイン手法のひとつとしての手描き風デザインやパーツを作成するためのテクニック集です。具体的にはAdobe IllustratorおよびPhotoshopのテクニックとなりますが、ポスターやチラシ、雑誌記事などの紙媒体だけでなく、Webデザインや映像、スマホアプリなどでもよく見かける、味わいのあるラフな手描き感や質感などを活かすポイントを中心に制作方法を解説していきます。 写真をスキャンして質感のあるイラストにする方法、フォントを手書き風文字にする方法、スケッチ風のWebデザインを作成する方法、などなど、Illustrator & Photoshop でのテクニックが満載です。 解説しているサンプルはダウンロードサービスで入手できるので、実際の完成品がどのような構成になっているのかを読者は確認できます（一部の写真などは収録されていません）。さらに、デザイン作例に使用した素材もそのまま収録し、実際の制作も追体験できます。 なお、 Illustrator および Photoshop はCC2018での解説となっており、収録しているデータもCC対応のみとなっています。 はじめに 本書の読み方 サンプルファイルのダウンロード
PART 01 手描き風デザインのためのIllustrator & Photoshop 基本テク 01 IllustratorとPhotoshopの基本の連携 02 Illustrator の効果で手描き風に演出する 03 Illustratorのブラシで手描き風の線を描く 04 Photoshopのブラシで手描き風の線を描く 05 写真をベースに線画を描いて色を塗る 06 写真をベースに塗り重ねてイラストを描く 07 Photoshopのフィルター効果でアナログの質感を表現する 08 テクスチャ素材を合成する 09 手描きイラスト画像をパス化する 10 手描きイラストと写真を合成する
PART 02 手描きデザインのための素材パーツのつくり方 01 フリーハンドで描いたような文字デザイン 02 落書き風のロゴデザイン 03 墨で描いたようなにじみ文字 04 複数の手描きイラストをランダムにレイアウトする 05 均一な線にニュアンスを加えたイラスト 06 ドット柄のパターンをつくる 07 和紙のちぎり絵を再現する 08 手描きした線画イラストを着色する 09 一文字ずつ加工してつくるタイトルロゴ
PART 03 手描き風デザインのためのアイデア（紙媒体編） 01 手描きブラシで地図を描く 02 温かみのある素材を使った地図デザイン 03 2 色刷りのイベントフライヤー 04 写真を水彩画タッチのイラストに加工する 05 毛筆風ブラシを使った年賀状デザイン 06 チョークアート風のポスター 07 消しゴムはんこ風の背景デザイン 08 クレヨン風に加工した子ども向けチラシ 09 版ズレしたレトロな雰囲気のDM 10 立体的なペンで描いたようなデザイン
PART 04 手描き風デザインのためのアイデア（Web編） 01 鉛筆風の質感を施したWebサイト 02 線画イラスト風の飾りをあしらったバナー 03 色鉛筆風の背景を使ったヘッダーデザイン 04 タイトルにグランジ加工を施し印象を強める 05 コスメパレット風ブラシを使ったWebサイト 06 手づくり感のあるステッチ風Webデザイン 07 アメコミ風デザインに加工する 08 インクがこすれたように加工する
判型：単行本
Webデザインとは
「Webデザイン」とは、ウェブサイトやアプリの見た目、構成、操作しやすさを整える活動です。見た目だけでなく、情報の優先順位や導線設計まで含めて検討します。結果として、読む人が迷わず目的を達成できる体験を作ることを目標にします。
こんな人向け：想定読者は、制作の入口にいる初心者や、CSSやレイアウトの基礎を学び直したい人です。デザインを「作る」だけでなく、使いやすさまで意識して学びたい人向けです。
独学ロードマップでの位置
学習は、理解→設計→作成→改善の順で進めると、知識を定着しやすくなります。単発の技術学習だけで終わらせず、どの場面で使うかをセットで回すと本の内容を実務へ接続しやすくなります。
- まずは目的別にサイト要件を言語化し、ページの情報を分類します。
- 次に色・文字・余白・階層の原則で、見た目の一貫性をつくる練習をします。
- 続いてレイアウトとレスポンシブ対応の考え方を結びつけ、想定デバイスでの体験を確認します。
- 制作した画面を実際の閲覧フローで検証し、修正点を箇条書きで記録します。
- 最後にアクセシビリティ、速度、保守性といった運用視点を加え、次作品へ再利用できる基準を整理します。
独学で足りる？体系的に学ぶ選択肢
独学では「どこまで作れれば十分か」を先に決めることが肝心です。派手な見た目より、基本原則と実務での再現可能な手順がある教材を選ぶと継続しやすいです。模写・再設計・自分の題材への当てはめを1セットにした教材ほど判断軸が定まりやすいです。
独学のリズムが取りづらい人や期限管理が必要な人は、学ぶ順番と提出物が明確な体制を選ぶと進みやすいです。単発学習より、設計・制作・レビューを一巡できる環境で進めることで、迷いの少ない習得につながります。 ▶ 給付でいくら戻るか試算
よくある質問
Q. まず何から手をつければよいですか？
最初はHTML/CSSの確認より前に、公開目的と読者像を決めると迷いが減ります。次に情報の構造を図にして、ページの核となる導線を作ると理解が早まります。
Q. 独学で途中で止まりがちになる原因は？
作成が上手くいかないより、評価基準が曖昧なまま次に進むことが原因です。制作ごとに「何を優先したのか」を1枚にまとめるだけで、次の判断がしやすくなります。
Q. 習得の目安はどのくらいで作れますか？
人によって進み方は異なるため一律の時間は断定できません。小さなページを短サイクルで何度も改善する反復が、理解を加速させる一般的なやり方です。
次の一冊：次は「HTML/CSS基礎」「UI基準・タイポグラフィ」「アクセシビリティ」「コーディングの実装面」を順に確認すると、Webデザインの読み解き方が深まります。あわせてレビュー観点を文章化し、次の本選びの基準を固定すると比較が容易になります。
