Abroad2019-09-01Webデザイン初心者に役立つ良質なツールやサービス、おすすめ本を出し惜しみせず全部紹介Web制作ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。Webから与えてもらった知識や情報を還元したいと思っていた。してブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。できるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。目次とにかく1ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な部分だけ必要なときにチェックしてもらえれば良い。書類関係31.契約書32.見積書・請求書33.会計・確定申告Web制作全般の優良サイトまずはじめに、Web制作全般に関する優良なサイトをあげておく。Webの仕事をしていると、問題にぶつかる。その度に自分で検索して解決していくことになるのだが、何度も繰り返していると、いつも自分の納得いく答えをくれるのが、同じサイト達であることに気づく。して「いつも使うサイト」になっていく。それはやはり、そのサイトに知恵が詰まっていて、わかりやすく解説してくれているからだ。そんなサイトの代表例をあげておく。Web制作に関することなら、このサイトでだいたいのことが解決するだろう。コリスWebクリエイターボックスWebデザインレシピかちびと.netPhotoshopVIPLIGバズ部AdminWebWebkaruまた、このブログでもWebデザイン初心者向けにWebデザインに関する記事を書いているので参考にしてもらいたい。Web制作・Webデザインおすすめ本Webに限らずデザインの基礎知識を身につけたいなら、この本が有名。Webデザイン系のサイトならどこでも推薦されている。2016-06-30Amazonで見るKindleで見る楽天ブックスで見る上のノンデザイナーズ・デザインブックもいいが、個人的に初心者に最もオススメしたいのが「なるほどデザイン」。デザイン本だけあって、中身のデザインが丁寧でわかりやすい。デザイン初心者が一番最初に読むべき本といっていい。デザイン〈目で見て楽しむ新しいデザインの本。2015-07-31Amazonで見るKindleで見る楽天ブックスで見るいまは、Web・ホームページ制作はワードプレスが主流。WordPressでWebサイト作成をはじめたいと考えている初心者にはこの本が入門書としておすすめ。わかりやすい説明で、実際に1つサイトが作れるようになっている。2016-07-15Amazonで見るKindleで見る楽天ブックスで見る上の本で、基礎がある程度わかったら次はこちらがいい。中級以上の内容になっているので、実践力がつく。この本をクリアできれば、ホームページ制作を仕事にできる日も近い。2016-02-16Amazonで見るKindleで見る楽天ブックスで見るデザイン制作デザインの知識があるとWeb制作はもちろん、生活の色んな場面で役立つ。道具は必要だが、投資して損はない。なによりデザインは楽しい。01.デザインに必要なソフトWebデザイナーを志すなら、まずAdobe製品(photoshopやIllustrator)を自分への投資として購入するところから始まる。Adobeツールは、以下の「アカデミック版(12ヶ月)」を利用するとお得。各ツールのオンライン講座とセットで29,800円(※2018年9月現在)。Cloud)を安く手に入れるどうしても無料で済ませたいという方はGIMPもあるが、Webデザインを生業にするならオススメしない。無料ツールで仕事をしているWebデザイナーは見たことがない。世界中の画像を一括検索できるサイトをまとめた。いい写真は質の高いデザインには不可欠。ありがたいことにネット上には無料の素材が溢れている。初心者なら、きっと誰もが一度はお世話になるサイト。(※クレジット表記とは著作権表示のこと)全30の素材サイトを横断的に一括検索できるのがこちら。ブログなんかで「お、この写真かっこいいな」と思ったら、たいていその写真は下の3つのどれかで見つけれる。ハイクオリティな写真が並ぶ超貴重サイト。これであなたもワンランクアップ。Pixabayは素人写真も混ざるが種類豊富、UnsplashとFindAは海外サイトなので検索は英単語で入力。有料サイトだが無料素材もある。「いいね!」すればクレジット表記無しで使える。風景・背景など人物以外の素材が揃う。Graphic03.写真素材(有料)デザイン制作をしていると必ず無料素材では限界がくる。多少出費をしても有料素材を使うと効率的でクオリティの高い作業ができる。fotoliaかPIXTAを使っている人が多いだろう。安く入れるのはfotolia。手元においておきたい人は1冊買ってしまうのもいい。少ない投資で大量の素材が手に入る。このあたりの人物素材はよく使われている良質素材。04.イラスト素材かわいいイラストが豊富にある。商用は要連絡だが、社内掲示や刊行物には最適。05.ピクトグラム、アイコン、ロゴ、他(無料、商用OK)ピクトグラムやシルエット素材は色んな場面で使えるので貴重。無料ロゴ素材が手に入る。ロゴ作成まではできないという方は重宝する。簡単なモノで良ければ十分間に合う。無料ボタン素材が手に入る。ボタンもWeb制作には欠かせない。ワンポイントでアイコンを置くだけでデザインは全然変わる。ユーザーもアイコンがあった方が直感的にわかりやすい。フレームや吹き出しもWebデザインでよく使う。背景要のテクスチャ素材集。質感を意識するとデザインも一歩上達する。06.フォント多少なりともデザインで仕事するなら全1000書体近くが自由に使えるMORISAWAフォントは持っていて損はない。デザインの幅は広げたければPCのデフォルトのフォントだけでは物足りない。日本語フォントは無料ではあまりいいのはないし、探す時間がもったいない。欧文フォンならフリーでも選択肢は広い。07.デザインテイスト・色彩関連デザイン上達のコツは、まず良書で基本ルールを学び、身の回りの良いデザインを徹底的にマネするのが近道。この2冊はまず読むに値する。配色に困ったらこちら。Application色の使い方に関しては、PCCSのトーンを覚えておけばだいぶ違う。デザインテイストのマトリクス表示。感性検索|写真素材・ストックフォト|アマナイメージズ08.バナーデザイン制作バナー制作に関する知識や参考サイトなどをまとめた。バナーデザインの制作ができれば、Web広告単体の仕事があるので、それだけでも稼ぐことはできる。バナーデザインのギャラリーサイト。色んなWeb広告のサンプルが一覧で見られる。デザインのアイデアや構想を練るときに役立つ。Webバナーの作り方はここら辺の記事が参考になる。09.Webサイトデザイン制作Webサイトのギャラリーサイト。これら以外にも、サイトデザインを考えるときは、制作会社の実績紹介なども参考になる。複数枚の画像からGIFアニメーションを生成してくれる。Webサイト構築11.オーサリングソフト&エディタWebサイト構築には、HTML/CSSを書くためのソフトが必要だ。CCでまずはいいだろう。Macの人はCoda2も多い。これらはWeb制作を支援してくれるオーサリングソフトという(有料)。エディタがいいならこちら。イチオシはAdobeの「Brachet」、無料で初めから日本語環境で使いやすい。BracketsTerapadAtomSublimevim12.ワイヤーフレームワイヤーフレームはWebサイトの設計図のこと。手書きやIllustratorで作る人も多いが、オンライン・ドローイングツールも使える。色んな部品が用意されているのが利点。Webクリエイターボックス13.HTML/CSSHTML/CSSは、まずはドットインストールなどで始めて、それから自分にあった書籍を見つけて体系的に学び、ステップアップするのがいいだろう。それでも、いつまでたってもリファレンスは手放せない。14.スマホ対応、レスポンシブデザイン今やアクセスの半分以上はモバイルからの時代。スマホ対応は、制作側も必須のスキルになってきている。tipsレスポンシブサイトの見た目チェックができる。WordPressもうWordPressなしにはWeb制作業界は語れない。世界のWebサイトの25%はWordPressで作られている。15.WordPress基礎知識WordPressを使うなら、多少なりともPHPとMySQLの知識は必要になる。この記事がわかりやすいだろう。WordPressのテンプレートタグも全部覚える必要はないが、常に最新の情報にアプデートしよう。非推奨や廃止になったりするのでネット上の古い記事を参照する時は注意。WordPressでブログだけでなくビジネスサイトも作れるようになれば、WordPressで商売ができる。自分にあった書籍で基本を体系的に学んで自分でゼロから作ってみよう。この2冊をオススメする。16.WordPressテーマWordPressテーマを購入してカスタマイズするのも選択肢の一つ。制作スピードが格段に上がる。CAGEのシリーズが一押し。企業サイト、ビジネスサイトを作るなら、TCDのテーマはクオリティが高くてGOOD。僕もたまにお世話になる。サポートページやカスタマイズ指南のブログもあるので利用しやすい。高級感のあるサイトには「LUXE」、ニュースメディア等には「Opinion」、医療機関は「BIRTH」がおすすめ。PRプログラミング仕組みを作れる技術があれば、それは大きな財産になる。プログラミングができれば、Web制作全体の見え方も違ってくる。一つ一つ言語をとりあげるとキリが無いので、ネット上で各言語を学習できるサイトのみをあげておく。JOB」というサービスもある。JOBHTML/CSS、jQuery、Ruby、PHPなど、とにかく入門レベルの人はドットインストールを利用して学習してもいい。動画で解説してくれる。https://dotinstall.compaizaやProgateも主要言語を無料で学べる。paizaはプログラマ・ITエンジニア向け転職サイトなので仕事も案内してくれる。ドメイン取得&サーバー18.FTPクライアントソフトローカルで開発したWebサイトデータをサーバーに転送するソフト。19.ドメイン取得ドメイン取得ならこちらで。ムームードメインお名前.comエックスドメイン20.レンタルサーバークライアントが個人または中小規模の事業主なら、だいたい下のサーバーのうちどれかで十分間に合うだろう。探せば他にいくらでもある。高機能レンタルサーバー|無料お試し15日間『ヘテムル』WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』ローカル環境フリーランスでWeb制作するなら、ローカル環境(自分のPC内の仮想サーバー環境)を構築しなくてはいけない。開発・保守工程では、ローカル環境内でテストし尽くしてから本番サーバーにアップロード。21.XAMPPWindowsでWeb制作する人はXAMPPでローカル環境を構築するのが主流。XAMPPの設定手順。22.MAMPMacでWeb制作する人はMAMP環境が主流だろう。Windowsでも使える。ぼくはWin10+MAMPで開発している。SEOWeb制作をする上でSEOは欠かせない。SEOは集客に直結するので、SEOに関して深い知識があれば、あなたは単なる制作者で終わらずクライアントから重宝される。単なる制作者でも最低限のSEO知識は必要。23.GoogleツールWebで生計を立てるならGoogleのツールは使わざるを得ない。Consoleも必須。Adwardsアカウント作って「キーワード・プランナー」も利用しよう。AdSense24.SEO基礎知識とにかくバズ部の記事を読んでおこう。良質なコンテンツとはなにかを理解してWeb制作すると取り組み方がかなり違う。25.検索順位チェックGoogle/Yahooのキーワードの順位を一発で検索できるツール。無料版は制限ありだけれど十分使える。26.SEO解析ツール自分の管理するサイトの状況把握に便利。SEO対策を無料ツールで診断!27.Webサイト・サーバー情報チェック28.サイト評価サービス自分の管理サイトも競合サイトも丸裸に。SimilarWebとWooRank.comは要チェック。細かい数値は正確ではないが、Webサイトの全容をつかむのには便利。Review詳しい使い方はこちら。仕事29.クラウドワークコネのないクリエイターがネット上で仕事を得るには、クラウドワークしかない。Works」や「CrowdTech」を利用すれば、そこそこ力があれば月10万前後は稼げるだろう。単価は安いが腕試しには最適。これだけで食っていくには相当な腕が必要なのであくまで練習の場、または副業という位置付けで利用しよう。無料でWebデザインが学べて就職サポートまでしてくれる「TechAcademy」がおすすめ。おすすめTechAcademyキャリアフリーランスの仕事探しには「レバテックフリーランス」がいい。書類関係ここからはフリーランスを目指す人に必要な事務仕事の情報。31.契約書ありがたいことに、Web制作の契約書の実物をダウンロードできる。これをベースに案件に合わせて微修正するだけで、立派な契約書が作成完了。立場の弱いフリーランスは契約書でしっかり自分を守ろう。クラウドサービスもある。「Misoca」は見積書から請求書まで全て作成してくれる便利な無料サービス。フリーランスは書類業務も仕事のうちなので、無料で一括管理できるのは本当に助かる。毎日お世話になっている。並んで面倒なのが、会計や確定申告関連。ぼくは全てExcelで済ませているが、日々の記帳は本当に面倒なので、有料でもよいならWebサービスを使って手軽に管理するのが良い。Use」をオススメしています。ネイティブのニュアンスや生の「使える英語」を学ぶのに最適です。英語を英語で学習する理想のテキスト。英語を独学でマスターするための勉強法やおすすめの良書を紹介しています。英語は単なるツールなので完璧を目指す必要はないですが、「使える英語」を正しく学びこと、そして実践トレーニングを積むことが大事です。海外移住の関連記事29歳で国内大手メーカーを辞め海外移住を目指した経験をもとに、海外生活の現実や海外での仕事、必要なスキルなどをまとめています。海外移住に関しては「憧れだけ」ではない堅実な移住を推奨しています。永住権まで取得した自分にとってニュージーランドは第2の祖国。海外就職ニュージーランド永住権の話と永住権を取得した人達のその後スキル海外移住した僕が考える海外で働くため、世界で生きるためのスキルニュージーランドの記事一覧Web制作の関連記事Web制作・Webデザインに関しては、未経験からフリーランスになった自身の経験をもとに記事を書いています。自分も未熟ですが、これからWebデザイナーを目指す初心者の方に少しでも役立つ内容をお届けします。包丁の関連記事おすすめ包丁やブランドなどを素人にもわかりやすく説明しています。海外では長く料理人を務めていました。マニアまでにいきませんが、包丁好き。暇があればAmazonで包丁を眺めています。包丁の専門サイトも運営しています。当ブログでよく読まれている記事達です。ネット上でできる副業のアイデアや手法、英語関連の記事が人気です。ブログ運営・収益化についても書いています。収益化に必須のツールや無料サービス、おすすめの良書なども紹介しています。国内大手メーカーを退社し海外移住。プログラマー、料理人を経て、今はフリーランスWebクリエイター。colourful.」では主に、英語、Webデザイン、海外移住、NZなどについて書いています。-国内大手メーカーを退社し海外移住。プログラマー、料理人を経て、今はフリーのWeb屋。colourful.」では主に、英語、Web制作・デザイン、ネットビジネス、海外移住、NZなどについて書いています。場所にとらわれないモバイルなスキルを追求しながら、気楽に生きてます。◆広告等のお仕事の話しは、お問い合わせをご利用ください。Policy当サイトのプライバシーポリシーと著作権についてスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。