在宅「ママ×プログラミング」でライフステージに合わせた働き方を実現ホームページの作り方がわからない...できるだけわかりやすい本があれば教えて欲しい...この記事は、上記のようなお悩みをお持ちの方のために書きました。「ホームページの作り方」といっても、初心者の方にはなんだかイメージが付きづらく、ちょっと取っつきにくいイメージがありますよね。上記2点についてまとめましたのでこれを読めばスッキリお悩みが解決するはずです。最後までお読みください。まとめホームページの作り方には2パターンある!画像:Shutterstockまずお伝えしておきたいのが、自分でホームページの作るには2つのパターンがあるということです。それが、CMS(WordPressやwix、jimdo等)を使って作るプログラミング言語を覚えてから自分で作る以上の2つです。それぞれ具体的にご紹介していきます。System(コンテンツ管理システム)の略で、後述するプログラミング言語のような専門知識がなくても、ホームページ等のサイト構築を自動的に、かつ簡単に行えるシステムです。いくつも種類がありますが、中でもWordPress(ワードプレス)Wix(ウィックス)Jimdo(ジンドゥー)上記の3つが有名です。このうちWordPressは全世界のWebサイトのうち3分の1以上を占める超有名ソフトウェアで、あらゆるデザインの本格的なブログやホームページを作れます。残り2つのWix、Jimdoはマウスを使ったドラッグ&ドロップだけで現代的なホームページを作れ、かつ無料です。いずれも予めデザインのテンプレートが用意されていて、それを使って簡単に作成ができます。その反面、ある程度デザインが決まりきってしまうという難点があります。いえ、よほどホームページにこだわりがなければ、基本はこの3つを使えば満足のいくホームページが作れるでしょう。手軽に費用をかけず、サクッと見栄えの良いホームページが作りたいという方は上記3つのうちどれかを使えばいいでしょう。プログラミング言語を覚えて作るもうひとつの方法はプログラミング言語を覚えて自分で1から作るという方法です。Webサイトには様々なものがありますが、どのサイトもプログラムで動いています。ホームページを制作する上で用いられる言語は、HTMLCSSPHPJavaScript/jQuery以上の4つが多いです。これらを学習し身につければ、CMSでは実現できない自由な凝ったデザインや、独自の機能を持たせた個性的なホームページを作ることができます。その一方、プログラミング言語の習得には時間がかかりますし、スクール等に通って習う場合はお金もかかるという側面もあります。自分だけのこだわったホームページが欲しいんだという方はこちらがおすすめです。以上のように、ホームページを作るには2つの方法があります。いうわけでここから先では、作り方別におすすめの本を紹介していきます。画像:shutterstocでは、まずはCMS(WordPress、Wix、Jimdo)を使ったホームページの作り方がわかるおすすめの本を順にご紹介します。WordPress:いちばんやさしいWordPressの教本キャラクター同士の会話形式、わかりやすい図解などが多用されていて、「WordPressがまったくわからない」という方でも安心してホームページ作成が進められます。高性能な無料WordPressテーマ「Linghtning」を使ってホームページが作るという内容になっているので、このとおり進めれば最後にはちゃんとホームページができあがるようになっているのも嬉しいポイント。大手書店チェーンで売上No.1を記録した実績もあります。初心者の方はまずこちらを読んでみましょう。この本の評価・口コミ「WordPressはすでに使用していて独学でなんとかなっていました。もこの本に出合って、初めて知ることが多く、大いに役に立ちました。「ああ、そうか、そういうことだったのか!」と何度もつぶやいてしまいました。制作していく順番に書かれているのでわかりやすかったです。「ホームページ作成のスクールのテキストとして使用しています。簡単にホームページの形ができました。わかりやすいテキストと感じます。実際に作成していくと現在は有償であったりしてどんどん変化するWordPress。あることを前提に使用することになります。「初めてワードプレスを導入するにあたり、特徴を知るには良い買い物だったと思います。https://amzn.to/2QRRSSeいちばんやさしいWordPressの教本丨Amazon・楽天Amazonでの評価:3.6(最高5)Amazonで試し読みの可否:可WordPress:はじめての簡単WordPress入門[決定版]こちらも同じく、WordPressを触ったことがないという初心者の方向けに書かれた入門書です。WordPressでホームページを作る際の全体的なざっくりした流れから、各項目ごとの詳細な説明まで図解付きでわかりやすく記載されています。WordPressに最初から設定してあるテーマ(デザインのテンプレート)を使ったホームページの作成方法が書かれており、超初心者の方でも安心です。この本の評価・口コミ「すごく分かりやすいです。WordPressって、なにやら、コードを書いてブログを作るソフトなのだと思っていたのだけれど、この本は違った。本当にわかりやすく書いてあり、写真も豊富。初心者にはおすすめの一冊。「初めてワードプレスをやるかたにお勧めです。elevenをもとに書かれていました。「仔細に書かれて参考になります。したHPを作成する人向けではなく、素人の人で初めてWORDPRESSでHPやブログを作成する人向けには良いのではないでしょうか?決定版と書かれていますが、そうでも無い感じはします。https://amzn.to/2Xv4wZPはじめての簡単WordPress入門[決定版]丨Amazon・楽天Amazonでの評価:3.3(最高5)Amazonで試し読みの可否:可なお、上記以外の「WordPressの入門書」は以下の記事にもまとめていますので、合わせてお読みください。「Wixってそもそもどんなサービスなのか?」という点から解説してある、全くの初心者の方向けの入門書です。基本の操作方法から、Wixでホームページ作成をする際に用いられる各種用語の説明・索引も用意されていたりと、初心者のための配慮が行き届いた仕様になっています。Wixの公認のトレーナーの著書ですのでわかりやすく、Wixでホームページを作ろう!と考えている方にはおすすめの一冊です。この本の評価・口コミ「とても有益。ウェブショップなどビジネスの分野の詳細が欲しかった。基本が知りたい初心者には、WIXがどういったモノか知るには、よかったですが、慣れて来て、こんな風にしたい!となると載ってなかったり、アップデートの度にWIX自体の仕様が変わる事が増えてきたので、ネットで探さないといけない事が多いです。https://amzn.to/2WtFgXB初心者でも今すぐ使える!改訂Wixでホームページ制作丨Amazon・楽天Amazonでの評価:3.7(最高5)Amazonで試し読みの可否:不可Wix:Wixで作るホームページはじめの一歩こちらも同じく、Wixやホームページを全く知らないという方向けに書かれた入門書です。Wixの機能説明から実際の作り方まで、図解(写真)つきで解説されてあり、パソコンで実際にその画面を確認しながら操作・作成が進められます。学習だけでなく「実際にホームページを作る」ことに重きを置いている本ですので、早くWixでホームページを作りたいという方にはおすすめの1冊です。この本の評価・口コミ「わかりやすく書かれています。おかげで、1ヶ月未満で、2つのHPを立ち上げることができました。「ヨガスタジオをオープンするにあたりHPを作成しました。jimdoでも作りましたが、もっと自由度がありおしゃれなHPが作りたくWIXを選択しました。パソコンの知識がないので、jimdoよりも難しい」WIXでしたが、この本のおかげで何とか公開することができました。「サイト作成の為の知識が無くても簡単にしかも無料でホームページが作れると聞いてすぐにWixのアカウントを取得しましたが、経験も予備知識も全く無い状態だったので何もかもが手探り状態(^^;)日本ではまだ知名度が低いツールらしく、検索かけても解決出来ず。そんな日々が続いていたのでこのような書籍が発売されてとても助かっています。JimdoデザインブックJimdoExpertというJimdoのカスタマイズに長けたプロが書いた本で、機能説明から作り方まで非常にわかりやすく書かれています。作り方はもちろん、ホームページの作成を始める前にやっておくべきことから書かれているので、ホームページ完成までのイメージがわきやすい内容となっています。「応用編」としてホームページとSNSとの連携や集客方法まで触れられており、これ1冊あればホームページ運用に必要なほぼすべての作業をこなすことができます。この本の評価・口コミ「簡潔に書いてあるので、読んだ通りにやってHPをつくることができました。「探していたのはこれです!!と言わんばかりの内容に大満足。お客様に使い方の説明をできる本をさがしていて、ついでに購入した本でしたが、本来買おうとしていたものは現在のものに対応しておらず、使い物にならなかった。Jimdo入門こちらも、初心者向けにJimdoを使ってホームページを作成するための方法と、運用方法までが丁寧に書かれている1冊です。いう観点で、専門用語を極力省いてわかりやすく書かれているので、横文字やネット特有の専門用語が苦手という方にも安心な内容。Jimdoの管理画面の操作方法だけでなく「ホームページを運用していく」ことを前提に説明されている点も好印象です。この本の評価・口コミ「無料のホームページで、しかも出来栄えもいいし最高です。そこでお世話になったのがこの本です。画像:shutterstoc続いては、ホームページ作成に必要なプログラミング言語をわかりやすく勉強できる本を、プログラミング言語別にご紹介します。「HTMLやCSSってなに?」という超初心者の方向けに非常に丁寧に書かれた、入門用に最適な1冊です。いえ基本的な要素の説明だけでは終わらず、実際に自分でホームページを作りながら学ぶ形式になっており、実用的なスキルもきちんと身につく1冊です。「HTMLとCSSをマスターとまではいかなくても、ある程度の基礎的な知識やスキルを身に着けたい」という方はまずこの本から始めてみましょう。つく本はたくさんありますが、本当に、初心者のための、タイトルどおりの、入門書はコレです。他の本が専用エディタをインストールすることを前提としているのと違い、メモ帳でも十分にやっていけるというところが、この本の入力量の少なさを物語っています。「親切すぎるくらい丁寧な解説。一通りのHTMLとCSSの仕組みがよくわかりました。「内容は本当に基本のキなので、勉強する部分はまだまだありますが、html勉強始めは一冊やり終えることが大事だと思います。これをやった後に別の基本書でまた勉強すると基礎が身について良いと思います。HTML/CSSデザインの教科書HTML&CSS学習の王道の一冊ですが、ある程度HTMLとCSSの知識がついてきたところで読むことをおすすめします。何のために勉強するのか?」が具体的に書かれているので、課題をこなしながら確実にスキルアップが目指せます。学習語は、HTMLやCSSの「あれ、どうなんだっけ?」と忘れた際の参考書としても有用です。買っておいて本はないおすすめの一冊です。この本の評価・口コミ「全体を通して一つのサイトを作り上げるというのが目的なので、実践的な知識が身に付きます。この一冊でHTMLとCSSの基本は完璧なのではないのでしょうか。「タイトル通り、一つのサイトを作りながら学びます。「初心者向けの本は、初心者がつまずくような省略をできるだけしてはいけないのだけれど(ものすごくストレスになって続かないから)、それがきちんと守れているので良著です。内容としても充実している。※なお、HTMLとCSSに関するおすすめの学習書は以下の記事にもまとめています。2019年5月16日PHP:最初に「読む」PHPそのタイトルの通り、PHPのことを読んで理解する、わかりやすい解説がされています。イラストや図解も用いて「HMTLとの違いは?」という観点から噛み砕いた表現で解説されていて、一発でポイントを理解できるような作りになっています。過去にPHPでつまづいた経験のある方にもやさしい内容ですので、PHP勉強の最初の1冊として最適です。この本の評価・口コミ「この本は条件分岐・繰り返し・ファイル操作・データベース連携やAPI連携などを含み、サンプルを作成しながら学ぶ形式になっています。「少しずつ少しずつ合間を縫ってphpを勉強しています。わかりやすくてphpがどんどん楽しくなります。いま第四章まで順調に来ることができました。https://amzn.to/2Wov91v最初に「読む」PHP丨Amazon・楽天Amazonでの評価:3.8(最高5)Amazonで試し読みの可否:可PHP:いきなりはじめるPHP~ワクワク・ドキドキの入門教室~上記書籍と同じく「プログラミング自体を知らない」という初心者でも理解できるように書かれた本です。難しい用語は本当に一切使っておらず、イラストのかわいさも相まって、PHP学習のハードルを感じさせない良書です。各章ごとに1つの課題をクリアしていく形式を取っているため、着実にレベルアップをしている実感が得られ、復習も簡単にできます。こちらもぜひおすすめしたい1冊です。この本の評価・口コミ「何も分からない初心者が、いきなり勉強を始めるにはとてもとっつきやすい本。「会社に多くの初心者用冊子沢山あるのですが、ずぶの素人ではなんのことやら。本当に何も知らない人でもできます。初心者用の冊子で挫折した人は是非手に取ってもらいたいものですね。気づけばプロ並みPHP改訂版と一緒に購入おすすめです。「本書ではPHP以前のWebプログラミングで躓く点なども触れられています。※なお、PHPに関するおすすめの学習書は以下の記事にもまとめています。2019年7月9日JavaScript:スラスラわかるJavaScriptJavaScriptを学習するための最初の1冊として最適な本です。「JavaScript関連の知識はゼロ」という状態から、プログラムが自力で作れるようになるところまでを完全フォローしている本なので、基本的な技術はこの本さえあればほぼ身につきます。漫画やイラスト、図解を用いて丁寧に書かれており、内容も必要最低限のもの。簡単というよりも挫折しにくい内容となっています。この本の評価・口コミ「前半HTMLとCSSの基礎に触れ、続いて本題のJavaScriptと全体的な構成・バランスのよい内容で満足です。図解も多く、各項目の説明も丁寧でわかりやすいです。途中のチェックテストと解説も参考になり理解が深まります。「専門学校でホームページ開発を習いました。この本のおかげでjqueryで画面に花びらを舞わせたり、スクリプトで音声入り、インターバルタイマーを作ることができました。※なお、JavaScriptに関するおすすめの学習書は以下の記事にもまとめています。本のタイトルからしてわかるように「jQueryについて何も知らない」という方向けに書かれた入門書です。いえ、最終的には仕事で使えるレベルにまで持っていけるように順を追って書かれており、後半は実際にjQueryを用いてサンプルを作成するため、見栄えの良いホームページを作るための技術がきちんと身につくようになっています。目的に応じて細かく章が分けられているので、復習にも最適。jQueryを学ぶならまずはこれをどうぞ。この本の評価・口コミ「良く書かれている教材です。字も見やすいですし良く読んで、サンプルを反復すれば中級までの概念とスキルはは学べます。jQueryを学ぶには多少はJavaScriptの勉強は必要ですね。「とてもわかり易い参考書にでした。「これがないとはじまりません。JQわかりはじめてたら、この本を3回は読んだほうがいいです。※なお、jQueryに関するおすすめの学習書は以下の記事にもまとめています。画像:shutterstoc最後に、ホームページをより見栄えのいいデザインにするために読むべき、「デザイン関連」の書籍をいくつかご紹介します。「Webデザイン」に特化している本で、初心者向けにわかりやすく書かれています。レイアウトからカラーリング、画像の形式・使い方・特徴、フォント、HTMLとCSSまで必要なものをすべて網羅していて充実しています。企業のホームページなど、実際に存在する優れたデザインのWebサイトを例にとり、どこがポイントになっているのかまでやさしく解説しているので、具体的かつ実用的な内容になっています。この本の評価・口コミ「初学者でもわかりやすい本。オールインワンっていう言葉で理想だけど、中々その言葉を体現するツール(ひょっとしたら人も!?)って無いもんだけど、この本はまさにオールインワンなWEBデザイン本だ。いうか、動画や紙媒体のデザインをする人にもとても参考になると思った。参考に参考となるのが、事例として豊富に掲載している実際のウェブサイトのトップ画面。「仕事としてWeb制作をすることになり、大変参考になりました。数字を上げる文章とデザインの基本原則ネットで売上を上げるためという明確な目的を設け、見た目のデザインだけでなく、「心に刺さる文章の書き方」にまで言及した良書です。男性と女性の「買い物」の違い、女性特有の購買心理を汲んだ「セールスコピーランティング」のノウハウが満載。リピーターの獲得法まで触れられており、小さな会社・個人でも実践できる内容になっているおすすめの1冊です。いう言葉も聞くほどのインパクトがある名著です。通販業界で一線を走っているコピーライターは『シンデレラ』を例に出して解説することが多いのですが、今までいまいちわかりませんでした。この本を読んで真意を理解できました。女性は『すでにお城に住んでいる』という表現はまさに目からウロコです。通販に関わる人は必ず読むことをおすすめします。「女性の衝動の本質は・・・・『本来の自分を取り戻したい』という感受性から来ると、説明するのが本書。本書の著者が女性であることから、信ぴょう性が高い内容である。『本来の自分を取り戻したい』という心理的なものは、従来の心理学書にも出てこない、独自な観点である。独自な観点では有るが、それで色々な女性の行動が説明できてしまうことに驚いた。数字を上げる文章とデザインの基本原則│Amazon・楽天Amazonでの評価:4.3(最高5)Amazonで試し読みの可否:可なるほどデザインホームページだけでなく、本や写真、あらゆる作品のデザインに関して書かれている、大きな意味での「デザインの本」です。絵や図、写真が豊富で目で見て楽しむタイプの本になっており、デザイン初心者の方や、特に目的なく買ったとしても読みやすく楽しめる内容です。この本自体がすでに美しくデザインされており、直感的にデザインとは何か?がわかる入門書となっています。この本の評価・口コミ「デザイナーにも非デザイナーにも!どちらにも良い本だと思います。チャプターごとに分かれているので見たい部分をサッと見れるのがよいです。例に挙げられてるデザインがベストとは思いませんが思考に関しては、すごく上手にわかりやすくまとめくれてると思いました。「グラフィックデザインを仕事としている者です。本当にいい復習になります。デザインを言葉で論理的に説明するのって難しいんです。これを頭に置いてプレゼン等すると説得力が違いますね。慣れてくると感覚に頼りがちになったりしますが、これは基本に立ち帰らせてくれます。本で学習を効率的に進める4つのコツ画像:shutterstocここからは本を読んで学習する際のコツをご紹介します。目次に目を通すいきなり本を読み始めるのではなく、まずは本の目次にざっと目を通しましょう。目次を読むだけでもその本の内容をざっと把握することができます。眺めながら把握していきましょう。逆に言えば、目次を読んでも自分の欲しい内容がなければ、その本の中にあなたの欲しい情報はないかもしれません。気になったところを読みこむ目次で見てピンときたところを読み込みましょう。本を読む際に、最初から読まなければいけないと思っている方は多いようですが、実際はそんなことはありません。一度ではわからない箇所は何度か読むことでわかるようになりますし、ピンポイントで自分の知りたい内容を知ることができるので効率的です。実際に手を動かすそしてもちろん読むだけで終わりではなく、実際に手を動かしていきましょう。WordPressやWix、Jimdoを使ったホームページの作り方の本は特にこれが大事で、読むのと同時並行で進めていくのが重要です。読むだけではすぐに忘れてしまう知識も、手を動かすことで確かなスキルに変わっていきます。実際に手を動かしつつさらにもう一度本を読むことで、さらにスキル・知識は定着します。進捗をアウトプットする最後はSNSやブログ等をやっている方限定ですが、SNS・ブログで、本で読んだこと・学んだことを積極的にアウトプットしていくことは非常におすすめです。フォロワーや読者との交流を通して、質問が来た箇所を答えれば、さらにスキルや知識は確かなものになります。それを行うことでSNSやブログの集客力が増しますので、作成したホームページへの集客源にもなります。まとめホームページはCMSを使って作る場合でも、プログラミング言語を勉強して作る場合でも、学習に最適な本はたくさんあります。今回ご紹介した本を参考に、ぜひあなたの理想通りのホームページを作ってみてください。TweetPocket「プログラミング、右も左もわからない...」という方にオススメ当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。都内ホテルにて設備機器のメンテナンスを経験。当時から副業として行っていたWebライティングと独学でのプログラミング学習経験を活かし、Webライターとして侍で記事編集業務を担当。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。