【Web制作】初心者がポートフォリオ作成するのにおすすめしたい本10選

※本ページはプロモーションが含まれています。
※本記事に掲載している広告収益の一部はWebらぼに還元されています。

コラム

Web制作の学習を独学で始めたいけど本を使うのはどうなの?

ポートフォリオを作ってみたいけど独学で作れるかな

Web制作の初心者によくある悩みですが、本のポイントを抑えて学習していけば、初心者で独学でもポートフォリオは作成できます

この記事では独学で実際に使ってきた、ポートフォリオ作成に必要なコーディングからデザイン・プログラミング までトータルでご紹介します。

未経験から学習してWebサイトを作れるまでになった本なので初心者で迷われている方はぜひ参考にしてください。

下記は筆者がこれらの本とネットの検索を利用し独学で作成したポートフォリオです。

Ishi's Style

初めてのポートフォリオでつたないですが、このくらいまでは作成できるようになります。

ぜひ記事を最後までご覧になってポートフォリオ作成のヒントにしてくださいね。

Web制作を独学で進めるコツ

独学で学習するコツは毎日少しの時間でもいいから勉強すること。

なぜなら継続が何よりもの学習方法だからです。

しかしどうしても飽きたりしてしまうこともありますよね。

そんな時取り組んでほしいことがあります。

  • 1日5分または本1ページでもいいので勉強に触れる
  • モチベーションを保つため目標を立てる
  • 朝早く勉強を始めるなど時間を決めて習慣化する
  • 1時間に1回、10分ぐらい休憩を入れる
  • どうしてもしんどいときは思いきって休んでリセットしよう

1日5分または本1ページでもいいので勉強に触れる

これは勉強を身に染み込ませるためです。

なぜなら日にちが空いてしまうと、また勉強する最初のとっかかりが億劫になります。

たとえば第1章まで勉強したので第2章に入る時に日にちが開くと、再び本を開き勉強する意欲が削がれやすいものです。

ですので、毎日少しでもWeb制作に関する勉強に触れることをオススメします。

モチベーションを保つため目標を立てる

目標を立てることは向かっていく方向が見えているので勉強することがブレません

目標がないとこっちがいいか、あっちがいいかと迷い最終的に勉強が続かなくなります。

効率的に勉強を進めていくためには目標が必要です。

具体的には3ヶ月後にはポートフォリをを作成して、クラウドソーシングなどの実務にチャレンジしてみる。

そして半年後、1年後は制作会社に入ろうか、フリーランスを目指そうか、など目標をあげましょう。

その通りにならなくてもいいのです。

いつでも軌道修正して目標を立てて行くのが重要です。

朝早く勉強を始めるなど時間を決めて習慣化する

朝活とも呼ばれているように朝早い時間に勉強をすることです。

朝早く起きて勉強するのは、心身ともにゆとりが生まれ朝日によるセロトニン活性でスッキリして勉強に取り組むことができます。

その前にちょっとした運動をプラスすると脳も活性し相乗効果があります。

夜型から朝型にシフトチェンジするのをオススメします。

1時間に1回、10分ぐらい休憩を入れる

何時間も続けて勉強をやりがちですが、短い休憩時間を取り入れるのは集中力維持のためにはオススメです。

1時間に1回10分ぐらいの休憩で頭がスッキリするでしょう。

本格的にはポモドーロ・テクニックという方法があります。

勉強のタスクを25分の作業に区切って5分休憩を取り入れ繰り返す方法です。

集中力の向上や時間管理・タスク管理の作業効率が上がりますのでポモドーロ・テクニックはオススメです。

どうしてもしんどいときは思いきって休んで頭の中をリセットしよう

しんどいときはリセットしましょう。

休んでしまうと遅れてもう諦めてしまいそうになりますが少し勉強から離れてみると、なりたい目標が頭に浮かんでくるものです。

そして再び目標のために勉強を始めればいいのではないでしょうか。

人と比べず自分自身のペースで勉強を進めて行きましょう

独学のメリット・デメリット

独学で勉強することにはやはりメリット・デメリットがあります。

メリットデメリット
・スクールなどの費用がかからない
・自分のペースでできる
・自走力が付く
・質問する場所がない
・挫折しそうになる
・モチベーションを保つのが難しい

独学はコストがかからなく自由度が高いですが、周りに聞く人がいないので調べるのに時間がかかってしまうのが難点です。

メリット・デメリットを理解して自分に無理がないか確認しながら取り組みましょう。

質問できるメンターを利用することも視野に入れておくと独学の勉強がグッとしやすくなるかもしれません。

独学初心者がはじめてのポートレートを作るのにおすすめしたい本10選 

実際にポートフォリオを作成するために使用した本をご紹介します。

ぜひご自身で作成される参考になさってください。

  • 1冊ですべて身につく HTML&CSSとWebデザイン入門講座
  • HTML&CSS 逆引き辞典
  • これからWebをはじめる人のHTML&CSS,JavaScriptのきほん
  • JavaScriptコードレシピ すぐに使えるテクニック278
  • よくわかるPHPの教科書
  • スラスラ読める PHPふりがなプログラミング
  • WordPress 仕事の現場でサッと使える!デザイン教科書
  • いちばんやさしいWordPressの教本
  • Webデザイン良質見本帳
  • Photoshopしっかり入門

1冊ですべて身につく HTML&CSSとWebデザイン入門講座

こちらの本はWeb制作の初心者が学習するのに必須な内容が盛り込まれています。

デザインからコーディングに必要なHTML/CSSの知識、サイト制作のサンプルまでカバーされています。

ポートフォリオを作成するとき、この本の巻末にあるWebサイト制作のサンプルがとても役立ちました。

例えばHTML/CSSの記述方法であれば、HTMLファイルの作り方・タグの説明など、CSSではプロパティの詳しい説明があり作成の理解が深まります。

またデザインについても、配色やレイアウトなど役立つ内容が盛り沢山です。

ひと通りサンプルを同じように作成ができましたら、今度は自分自身で本を見ずに作成してみることで力がつきます。

ぜひポートフォリオ作成の前にチャレンジしてくださいね。

1冊ですべて身につく HTML&CSSとWebデザイン入門講座(Amazon商品ページへ)

HTML&CSS 逆引き辞典

こちらは参考書というより辞典になっています。

HTMLのタグやCSSのプロパティを逆引きで探すことができます。

ある程度HTMLやCSSの理解が深まってくると、表を作るときの<ul><ol><dl>リストの使い分けはどうだったかな、など忘れたとき項目を逆引きで調べることができます。

430ページのボリュームでタグやプロパティの使い方がカバーされているので、迷ったり忘れてしまったなという時はこの本を利用してください。

HTML&CSS 逆引き辞典(Amazon商品ページへ)

これからWebをはじめる人のHTML&CSS,JavaScriptのきほん

この本を選んだのは、HTML/CSSの学習に絡めてJavaScriptが盛り込まれています。

JavaScriptはプログラミング言語で、HTML/CSSで作られたサイトに動きをつけて作成できます。

例えばサイトで画像が何枚もスライドするのを見たことはないでしょうか。

JavaScriptを利用することによってサイトがリッチになります。

この本はHTML/CSSも学習できるのでサイト制作の基礎がカバーされるのでオススメです。

これからWebをはじめる人のHTML&CSS,JavaScriptのきほん(Amazon商品ページへ)

JavaScriptコードレシピ すぐに使えるテクニック278

この本は様々なJavaScriptのコードが盛り込まれています

私はもう少し深くJavaScriptを知ってWebサイトに、よりリッチな動きをつけようと考え選びました。

初心者の方に最初は少し難しいかもしれませんが、知っておくとサイト作成をより楽しいものにできますので利用してください。

JavaScriptコードレシピ すぐに使えるテクニック278(Amazon商品ページへ)

よくわかるPHPの教科書

この本で取り扱っているPHPはプログラミング言語です。

Webサイト制作にお問い合わせフォームを見たことはないでしょうか。

そのお問い合わせ内容を送信・受信することに関わってくるのがPHP言語です。

本では会員登録ページやログインなどの実装がありデータベースの理解が深まります

Web作成にPHPまで・・・と初心者には少し難しいかもしれませんが、初めて自分でお問い合わせの実装ができたときは嬉しいものです。

ぜひチャレンジしてくださいね。

よくわかるPHPの教科書(Amazon商品ページへ)

スラスラ読める PHPふりがなプログラミング

この本はPHPをより深めたいと選びました。

最終的にはWebアプリケーションが作成できます。

もうWebサイトとは離れた感じがしますが、PHPの基礎を身につけることによって理解を深めようと考えました。

コード全てに振り仮名がふってあり、ページも約200ページと読みやすくサッとアプリケーションが作れPHPが身近に感じられるでしょう。

ぜひPHPも深めてサイトをより使いやすいものに作成してください。

スラスラ読める PHPふりがなプログラミング(Amazon商品ページへ)

WordPress 仕事の現場でサッと使える!デザイン教科書

WordPressはWeb上でブログなど多く見られます。

ポートフォリオとは異なるのでは、などど思われるかもしれません。

この本はWordPressをHTML/CSS・PHPでカスタマイズする内容です。

ポートフォリオの作成が終わった後、ぜひチャレンジしていただきたくおまけでご紹介します。

WordPressは誰でも簡単にサイトを作成できますが、この本では好きなデザインでページを作成する方法の内容になっています。

将来クラウドソーシングを利用した仕事を考えている方はWordPressを学ぶことは仕事の幅も広がりますので、勉強して損はありません。

WordPress 仕事の現場でサッと使える!デザイン教科書(Amazon商品ページへ)

いちばんやさしいWordPressの教本

WordPressのおまけ2です。

こちらはWordPressのテーマを使用した作成方法の内容になっており、この本の通り進めれば間違いなく簡単にサイトが作れます

初めてだけどWordPressでサイトを作ってみたいという方はカスタマイズではなく、テーマから作成するのがオススメです

いちばんやさしいWordPressの教本(Amazon商品ページへ)

Webデザイン良質見本帳

ポートフォリを作る際、悩まれるのはデザインではないでしょうか。

そのようなときこちらの本は最適です。

例えば優しい雰囲気で、またはかっこいい雰囲気でなど作成したいと考えたとき、そのイメージにあったサンプルが用意されています。

デザインの基本がカバーされているのでこれ1冊で悩まずポートフォリオ作成に役立つでしょう。

アイディアが中々わかないという方は本を眺めているとひらめくかもしれませんので、かなりオススメします。

Webデザイン良質見本帳(Amazon商品ページへ)

Photoshopしっかり入門

Webサイトに載せる画像を編集するのに必須なのがPhotoshopではないでしょうか。

Photoshopの操作画面を見ると難しく感じられますが、使用方法が読みやすく書かれていますので安心です。

Photoshopはソフトウェアなので購入して利用する必要があります。

年間プラン月々払い2,728円/月(税込)、年間プラン一括払い28,776円/年(税込)です。

Photoshopしっかり入門(Amazon商品ページへ)

Web制作の初心者がポートフォリオ作成するのにおすすめしたい本10選 まとめ

・Web制作の学習を独学で始めてもポートフォリは作成できます。

・Web制作の学習を独学で始めたいけど本でも十分に学習はできます。

ここまで実際にポートレートを独学で作成できるおすすめ本をご紹介してきました。

Web制作を独学で初めても本を利用してポートフォリは作成できます。

ただ初めての時は悩む時間が多いので時間かかるでしょう。

しかし諦めずに完成できたら自信になり自分の実績になります。

まずは初めの1歩をチャレンジしましょう。

独学は自分には大変と感じたら、スクールも考えて見てはいかがでしょうか。

自身でもこのようなプログラムを作ってみたい、プログラミングを本格的に学んでみたいときはスクールがおすすめです。

テックアカデミー無料メンター相談
TechAcademy [テックアカデミー]
大切なのは、誰から学ぶか。選抜された現役エンジニアから学ぶならテックアカデミー。

HTML/CSSはもちろんJavaScript・PHPなど他にも様々なプログラミング言語を学習できます。

基本からしっかり学べるので初心者の方にもおすすめです。

最短・最速で脱プログラミング初心者|Skill Hacks(スキルハックス)
Skill Hacks | 株式会社スキルハックス|スキルをつけて人生の自由度を上げる
最短・最速で脱プログラミング初心者フリーランスエンジニア...

スクールよりのお手頃価格で学習できるので人気のスクールになっています。

動画視聴がメインでサポートもしっかりあり初心者でも安心です。

スクールは独学学習ではつまづきやすいところをカバーしてくれますので、初心者の方でもっと早くできるようになりたいという方はスクールが最速でおすすめです。

ぜひご自身でも様々なプログラムで楽しい動きなどを工夫して、Web制作サイトに取り入れてみてはいかがでしょうか。

こちらの記事はWebデザインスクールを厳選して紹介しています。

ぜひこちらも参考にしてください。

※本ページはプロモーションが含まれています。
※本記事に掲載している広告収益の一部はWebらぼに還元されています。

コラム
meguをフォローする
WEBらぼ