フルカワカナコ
    • Create new note
    • Create a note from template
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Write
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Engagement control Commenting, Suggest edit
      • Invitee
      • No invitee
    • Publish Note

      Publish Note

      Everyone on the web can find and read all notes of this public team.
      Once published, notes can be searched and viewed by anyone online.
      See published notes
      Please check the box to agree to the Community Guidelines.
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Versions and GitHub Sync
    • Note settings
    • Engagement control
    • Transfer ownership
    • Delete this note
    • Save as template
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Sharing URL Create Help
Create Create new note Create a note from template
Menu
Options
Versions and GitHub Sync Engagement control Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Engagement control Commenting, Suggest edit
Invitee
No invitee
Publish Note

Publish Note

Everyone on the web can find and read all notes of this public team.
Once published, notes can be searched and viewed by anyone online.
See published notes
Please check the box to agree to the Community Guidelines.
Engagement control
Commenting
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Suggest edit
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
Import from Dropbox Google Drive Gist Clipboard
   owned this note    owned this note      
Published Linked with GitHub
Subscribed
  • Any changes
    Be notified of any changes
  • Mention me
    Be notified of mention me
  • Unsubscribe
Subscribe
# CF動画書き起こし「WEBデザイン学習におすすめな本の紹介!」   質:Webデザインに関する書籍ってたくさんありますよね。まだWebデザインを学び始めのとき、どんな書籍を選べばいいのかオススメを教えて下さい! と:今日は実際にWebスクールの教室に置いている100冊以上の中から厳選した、オススメの書籍を紹介していきます。 Webで検索をして、デザインを学ぼうとしている方も多いと思います。 ですがWeb上には情報がありすぎて、その中から自分に合った情報を見つけて実践するのは大変です。 この記事では、CreatorsFactoryのスクール本棚に置いてあるデザイン本の中から、人気でためになるデザイン本を15冊紹介します。 この記事でわかること * デザイン初心者から中級者までオススメの本とポイントが分かる * 自分のレベルや状況に合わせて選ぶべき書籍がわかる * 実際にWebスクールの本棚に並べ、生徒から人気の書籍を厳選 ## 漫画で学べる初学者さん向けのデザイン本 **デザイナーじゃないのに!** https://amzn.to/2QXTNZK **○この本のポイント** * ノンデザイナーでも手に取りやすい漫画スタイル * 現実に近いストーリーベースでポジティブに学べる * デザインの基礎とセットで、会社で通用するノウハウも掲載 と:漫画とイラストがベースになっていて読みやすい。 帯にも「意識低い系」と書かれていて、手に取りやすい一冊だよ。 質:表紙にも「デザイナーじゃないのに!」と、叫ぶイラストがあって安心感がありますね。 **素人ですが、デザインしてみました。-プロのきほんが学べる14のストーリー-** https://amzn.to/3sKd6mo **○この本のポイント** * デザインルールを擬音で表現していてわかりやすい * 作例や写真・画像が豊富でノンデザイナーにも親切 * 漫画スタイルと優しいイラストでデザインが良くなるステップが見える と:こちらも漫画形式で、がっつり学ぶというよりは、気軽にサクッと読み込める内容です。 どちらもわかりやすくスラスラ読み込めるので、デザインやデザイナーの仕事の概要を掴みやすい。1つの1つのデザインルールが難しいと感じる人にもオススメです。 と:特にこの本の面白いところは、余白がないことを「ぎゅうぎゅう」、整列ができていなことを「ガタガタ」など、デザインのルールを擬音で表現しているところ。 イメージがしやすく作例も多く掲載されています。 ## デザイン業界でも王道のデザイン本 と:業界でも有名な、デザイン初心者さんも楽しく読める書籍を紹介します。 Webというよりはグラフィック、デザイン全般の基礎を網羅しているので、デザインの大枠を掴むのにもオススメです。 **なるほどデザイン** https://amzn.to/3xhps9b **○この本のポイント** * ひと目で「なるほど!」となる図解やイラストが豊富 * 難しいデザイン書籍で挫折して、直感的に視覚でデザインを理解したい方にピッタリ * 情報整理やデザインをする前のプロセスもイラストでわかりやすく解説している と:特徴としては、作例が多く掲載されている。OKパターンとNGパターンを比較しながら、題名の通り「なるほど!」と思える構成になっています。 **やってはいけないデザイン** https://amzn.to/3vjb2TY **○この本のポイント** * やりがちな「NGパターン」と改善例をセットで豊富に掲載・解説 * センスや感覚と言われる部分を、言語化していてわかりやすい * ノンデザイナーで自分でデザインをする必要のある入門者にオススメ と:こちらも「こういうのはおかしいよ」というやってしまいがちなデザインのNGパターンとOKパターンを並べて、作例付きで詳しく解説しています。 と:特に初学者さんがやりがちな袋文字や、よくないグラデーション、多用してしまうドロップシャドウの注意点など、実際の現場でよく使う表現もたくさん事例があり参考になります。 新しい本じゃないけれど、個人的にはオススメする1冊です! 質:勉強をする前に予習として読んでもいいかもしれませんね。 と:本屋さんで探すときは、グラフィックデザイン(アート・印刷系)の棚に並んでいることが多いので、注意してくださいね。 ## 有名なデザインの基本をコツを学べるシリーズ と:次に紹介するのは、現在シリーズものとして発売されているデザインの学習本。 これもデザイン教本の中では有名です。 **けっきょく、よはく。余白を活かしたデザインレイアウトの本** https://amzn.to/3gPXs6T **○この本のポイント** * 「余白」に注目し、デザイン全体が良くなる余白の使い方がわかる * デザイン全体の基本についても網羅しているので、入門にもオススメ * NGとOKパターンを比較した今風な作例を多く掲載している **ほんとに、フォント。フォントを活かしたデザインレイアウトの本** https://amzn.to/3aDh4qM **○この本のポイント** * 「フォント」に注目し、デザインでフォントをどのように扱うかの基本がわかる * 使用フォント名が詳しく記載されており、自学習にも役立つ * こちらも作例の掲載が多く、前作の応用編の書籍としてもオススメ **あたらしい、あしらい。 あしらいに着目したデザインレイアウトの本** https://amzn.to/3es8Cf7 **○この本のポイント** * つい過剰になる「あしらい」に注目した、丁寧なレイアウトの作り方がわかる * NGパターンを改善した作例が多く、デザインの引き出しやアレンジに役立つ * ポスターやPOP、印刷物のデザインをされる方にオススメ と:シリーズ1冊目は「余白」にフォーカスしたデザインの基本を掲載しています。 こちらもOKとNGのパターンを比較しながら、多くの作例を見ながら余白の扱い方がわかるようになっている。 質:ある会社の先輩と後輩が登場し、後輩のNGデザインを先輩のアドバイスで直していくというストーリー仕立てですね。比較だけではなく、派生パターンの作例やこんなデザインもありだよ、といった実践向けのフォローがあるのもいいですね。 と:デザイン全般にフォーカスした内容なので、Webデザイナーが読んでも表現方法が広がり、デザインの基礎知識の底上げにもなります。本そのもののデザインもオシャレで、オススメの書籍。スクールではみんなが借りすぎてちょっとボロボロなってます(笑) ## 実践向けの手を動かして学ぶ書籍 **トレース&模写で学ぶ デザインのドリル** https://amzn.to/3eq1rnE **○この本のポイント** * 1日1題のペースで実際に手を動かしながら学べるドリルタイプ * 素材がダウンロードできるので、すぐに手を動かして学べる * トレースや模写のスピードが上がり、初心者から1抜けするにもオススメ と:これは実際にデザイントレースや、作例を真似して技術を身につけるタイプの実践本です。 全部で30のお題があり、1日1題のペースなら約1ヶ月でデザインの基本がわかる構成になっています。 グラフィックの内容ですが、フォントやあしらいなどの様々な表現の練習に使えますね。 質:横長の書籍で読みやすいですね。ちょっと本棚からはみ出しそうですが…。 と:テキストや素材も見本がダウンロードできるので、すぐ手を動かせるのがいいところ。スクールの生徒さんも、中身を確認してから実際に買って勉強する人が多かったですね。手を動かすことが上達への近道。トレースや実践に悩む人にぴったりです。 ## 初級・中級者向けのデザインおすすめ本 と:ここからは、初級・中級者さん向けのデザイン本を紹介します。 制作だけではなく設計や、ディレクションに関わる方にも参考になる書籍です。 **これならわかる! 人を動かすデザイン22の法則** https://amzn.to/2QmRKyx **○この本のポイント** * 心理学やマーケティングを通した、デザインの考え方がわかる * 一手間で書いたくなる、伝わるデザインの作り方も解説 * 商品販売やショップ運営に関わる方にオススメ と:これは「読み物系」のデザイン本ですが、個人的にとてもよかった。 マーケティングや心理学を通じたデザインの意識付けの話で、人の感じ方の法則や心理学の観点をプラスしています。 ここまで紹介してきた書籍で勉強をしてきた人の、次のステップにオススメできる1冊ですね。 質:内容は小説のような読み切りの形です。毎日少しづつ読むのもいいかもしれませんね。 **[買わせる]の心理学 消費者の心を動かすデザインの技法61** https://amzn.to/3gIMrUR **○この本のポイント** * Webサイト設計や人に商品を買ってもらうためのデザインについて解説 * 61の技法それぞれに具体的な作例を掲載、デザインと心理面からアプローチする * ネットショップ運営者やWebサイト設計に関わる方にオススメ と:こちらも心理学やデザインの意識付けの書籍です。 商品が売れるのは、デザインがいいだけではなくて、人の心の動きや環境や状況で行動が変わるという視点から、どんなデザインを使えば行動や意識付けに繋がるかの61の技法を掲載しています。 質:22から61に。約3倍に増えましたね。 と:これもスクールの生徒さんがよく借りるので、ボロボロの1冊…。 ネットショップの仕事をしている人などが、よく読んでいます。 デザインと販売はとても密接な関係、買ってもらわないと意味がない。 より意味のあるデザイン、目的のあるデザインを求めている人にはオススメの2冊です。 ## 知らないでは済まない!著作権について学べる書籍 **著作権トラブル解決のバイブル! クリエイターのための権利の本** https://amzn.to/3aCCh49 **○この本のポイント** * デザイナーやクリエイターの著作権トラブルを豊富な事例から解説・対策する権利の本 * 職業別の事例が豊富で、実際に起きたトラブルと解決・予防の知識をわかりやすく解説 * 写真や挿絵イラストも多く掲載、全体の文章も丁寧に書かれて読みやすい と:デザインの仕事をしていると避けられないのが「著作権」の問題です。 クリエイターの職業別によく起きる権利トラブルや、素材を利用するときの注意点、文章の引用やプログラムコードの扱いなどの事例がまとまった権利の本です。 質:権利や著作権って難しいけれど、知らないといけないことですよね。 と:例えば、素材を使うのに商用利用はNG、ライセンスを載せないと使ってはいけないのにフリーで使っていたりと、違いがわかっていない人も意外と多いんです。商用の仕事では、権利関係はナイーブで知らないでは済まないこともあり、お客さまに迷惑がかかることもあります。 ぜひ手元に揃えてほしい1冊です。 ## ディレクションやUXデザインの勉強に役立つ書籍 と:次に紹介する2冊はWeb制作をしている方にオススメの書籍です。 サイト設計についての本は意外と少ないのですが、この2冊はしっかりまとめられています。 **Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで** https://amzn.to/3tRcyfW **○この本のポイント** * UXデザインという、体験デザインの考え方をわかりやすく言語化 * 実践しやすいテンプレートがダウンロードでき、8ステップで順を追って理解ができる * Webサイト設計や企画、開発に関わる方にオススメ と:これは「UXデザイン」つまりサイト設計の部分に触れている書籍です。 Webサイト設計の基本から、お客さまがサイトに入ってからどのように流れていくのか…などの、UXに集中した内容になっています。 **Webディレクションの新・標準ルール 改訂第2版 現場の効率をアップする最新ワークフローとマネジメント** https://amzn.to/2Qt9Kac **○この本のポイント** * Webディレクションの「ワークフロー」に注目したWebディレクションの基礎が学べる * 進行管理はもちろん、企画から運用まで4つのフェースに分けて詳しく解説 * Webディレクションや企画、進行管理などを担う方にオススメ と:こちらは、Webディレクターさんのワークフロー(仕事の工程)について書かれている書籍。 質:UXデザインもディレクションも、なんだか敷居が高そうな雰囲気がありますね。 と:Webデザインの技術を突きつめていくと、最終的には設計側の話になっていく。 いわゆる「上流工程」と言われる、Webサイトを作る前段階のワークフローがWebデザインはとても重要なんです。 会社の中なら上司や先輩から学ぶこともできるかもしれませんが、実際には学べる環境が少なく「実践ありき」で語られることも多い。 と:わかりやすくまとめられている本書でも、読んだだけではうまく理解できないかもしれません。でもまずは、読んでみて実行する。 わからないところは振り返って読んで、また実行する。成功と失敗を繰り返しながら読み進めるのがオススメの使い方ですね。 実際に仕事が来て、悩みながらこの書籍を読んで身につけていきましょう。 質:確かに後半になるにつれて、考えることがとても多くなっています。一回ではすぐに読みきれないですね。 と:特にWebディレクション本の内容は、経験したことがない人にとっては難しく感じるはず。 でもサラッと読むだけでもWeb制作やWebサイトのルールや流れがわかるので、予習と思って読んでおくのもいいですね! 質:電子書籍版もあるんですね。これなら、空いた時間にも読めそうです。 と:デザイン系は実物の書籍がオススメですが、読み物系の書籍は電子書籍もありですね。 ## Webデザインの初中級者にオススメのWebデザイン本 と:最後に紹介するのは、お待ちかねのWebデザインのオススメ書籍です。 質:内容が多いので、分厚いですね…! **初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉** https://amzn.to/3sPFcN9 **○この本のポイント** * 「1日30分からはじめる」をテーマにHTMLとCSSの基礎を学べる入門書籍 * コードの基本的な書き方から、サイトの公開・運用まで実践を想定した流れが学べる * サンプルデータがダウンロードでき、学びと実践がセットになっている と:「Webデザインの基礎入門」とありますが、内容はHTML/CSSが中心です。 内容は1日30分ずつから始められるよう簡潔に、わかりやすくまとまっていて実践しやすい構成になっています。 この書籍もシリーズがあり、JavaScriptなどを含む上級者向けの本もあります。 **1冊ですべて身につくHTML & CSSとWebデザイン入門講座** https://amzn.to/3tS6Avl **○この本のポイント** * Web制作の1から完成までを、優しく体系的に学べる * サポートサイトや素材ダウンロードで、すぐに手を動かして実践できる * 入門と実践編の2冊があるので、自分のレベルに合わせて選べる と:これは「Webクリエイターボックス」というブログを運営されている、Manaさんが書かれている書籍。 入門講座編と、最近に実践講座編がシリーズで発売されました。 どちらもHTML/CSSが中心で、デザインと言うよりはコーディングをしていく内容です。 質:スクールでも人気で、常に誰かが借りている状態ですね。 と:この2冊はデザインの基礎というより、Webデザインを構築するコーディングなどWeb制作をする方にオススメです。 本の学習は作例がたくさん掲載されていて、ある程度厳選してまとまっているのがいいところ。 本屋さんでパラッと立ち読みして、面白そうだと感じたらぜひ購入してみてほしいですね。 もちろんたくさん買うと結構な出費になるので、Amazonなどのセール割引なども活用して、まとめ買いするのもいいですね。 質:電子書籍と実物の書籍、どっちの購入がオススメでしょうか? と:電子書籍もいいですがパラパラと読むのが難しく、ササッと見て「これ!」と読めるのはリアルの本のいいところ。 かさばるとか持ち歩きにくいデメリットもあるけれど、自宅の本棚にストックしてインスピレーションを得るために使うのもありですね! ### 学習したい内容に合わせて、オススメ書籍を選ぼう! と:今回はWebスクールの教室にも置いてあるデザイン本の中から、オススメを15冊紹介しました。 自分のレベルや学びたいことに合わせて、ぴったりの書籍を選んでくださいね。 質:世の中にデザイン書籍はたくさんありますから、自分にあったものが見つかると勉強もスムーズに進みそうです。 ありがとうございました!

Import from clipboard

Advanced permission required

Your current role can only read. Ask the system administrator to acquire write and comment permission.

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lose their connection.

Create a note from template

Create a note from template

Oops...
This template is not available.
Upgrade
All
  • All
  • Team
No template found.

Create custom template

Upgrade

Delete template

Do you really want to delete this template?
Turn this template into a regular note and keep its content, versions, and comments.

This page need refresh

You have an incompatible client version.
Refresh to update.
New version available!
See releases notes here
Refresh to enjoy new features.
Your user state has changed.
Refresh to load new user state.

Sign in

Forgot password

or

By clicking below, you agree to our terms of service.

Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
Wallet ( )
Connect another wallet

New to HackMD? Sign up

Help

  • English
  • 中文
  • Français
  • Deutsch
  • 日本語
  • Español
  • Català
  • Ελληνικά
  • Português
  • italiano
  • Türkçe
  • Русский
  • Nederlands
  • hrvatski jezik
  • język polski
  • Українська
  • हिन्दी
  • svenska
  • Esperanto
  • dansk

Documents

Help & Tutorial

How to use Book mode

How to use Slide mode

API Docs

Edit in VSCode

Install browser extension

Get in Touch

Feedback

Discord

Send us email

Resources

Releases

Pricing

Blog

Policy

Terms

Privacy

Cheatsheet

Syntax Example Reference
# Header Header 基本排版
- Unordered List
  • Unordered List
1. Ordered List
  1. Ordered List
- [ ] Todo List
  • Todo List
> Blockquote
Blockquote
**Bold font** Bold font
*Italics font* Italics font
~~Strikethrough~~ Strikethrough
19^th^ 19th
H~2~O H2O
++Inserted text++ Inserted text
==Marked text== Marked text
[link text](https:// "title") Link
![image alt](https:// "title") Image
`Code` Code 在筆記中貼入程式碼
```javascript
var i = 0;
```
var i = 0;
:smile: :smile: Emoji list
{%youtube youtube_id %} Externals
$L^aT_eX$ LaTeX
:::info
This is a alert area.
:::

This is a alert area.

Versions and GitHub Sync
Upgrade to Prime Plan

  • Edit version name
  • Delete

revision author avatar     named on  

More Less

No updates to save
Compare with
    Choose a version
    No search result
    Version not found
Sign in to link this note to GitHub
Learn more
This note is not linked with GitHub
 

Feedback

Submission failed, please try again

Thanks for your support.

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

Please give us some advice and help us improve HackMD.

 

Thanks for your feedback

Remove version name

Do you want to remove this version name and description?

Transfer ownership

Transfer to
    Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

      Link with GitHub

      Please authorize HackMD on GitHub
      • Please sign in to GitHub and install the HackMD app on your GitHub repo.
      • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
      Learn more  Sign in to GitHub

      Push the note to GitHub Push to GitHub Pull a file from GitHub

        Authorize again
       

      Choose which file to push to

      Select repo
      Refresh Authorize more repos
      Select branch
      Select file
      Select branch
      Choose version(s) to push
      • Save a new version and push
      • Choose from existing versions
      Include title and tags
      Available push count

      Upgrade

      Pull from GitHub

       
      File from GitHub
      File from HackMD

      GitHub Link Settings

      File linked

      Linked by
      File path
      Last synced branch
      Available push count

      Upgrade

      Danger Zone

      Unlink
      You will no longer receive notification when GitHub file changes after unlink.

      Syncing

      Push failed

      Push successfully