簡単に今すぐできる！WEB制作を「はじめて」する人が分かるまとめ

• 作成：2013/03/4
• 更新：2014/11/01
• Web制作 >

もし「全部」自分でやることになっても
一人でサクッと作れるようになりたい

今回はWeb制作や、ツール・ソフトの使い方が「簡単」に分かる、デザインが良い「マニュアル的」なサイトを抜粋しまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ
１．Photoshop (フォトショップ)
２．Illustrator (イラストレーター)
３．Dreamweaver (ドリームウィーバー)
４．iPhone アプリ
５．Kindle 出版
６．WordPress
７．スマートフォンサイト
８．アフィリエイト
９．アクセスアップ / ブログ
１０．ライティング
１１．SEO
１２．プログラミング
１３．html / CSS
１４．Google Analytics
１５．レスポンシブ

Photoshop (フォトショップ)

• 初心者のころ苦労したPhotoshopの機能について丁寧に解説
  Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能
• ほとんど1分～10分ぐらいでできて、きれいに仕上がる
  Photoshopの超基本テクニック - NAVER まとめ
• 背景をきれいに切り抜ぬく方法
  Photoshopを使って背景をきれいに切り抜く方法まとめ | DesignWalker
• トーンカーブの基本をおさらい
  よく分からずにトーンカーブを使っている人に。 (今さらだけど、トーンカーブって凄いよね？)｜Web Design KOJIKA17
• Webサイトを作れるまでに必要な本や記事
  完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 〜①デザイン編〜

Illustrator (イラストレーター)

• 予備知識や基本操作
  これからIllustratorを始めてみようという人のための基本操作とかいろいろ
• イラスト入りで、難しい言葉を噛み砕いて解説してある
  Illustratorによるイラスト制作の基本操作｜1 pixel｜サイバーエージェント公式クリエイターズブログ
• Illustratorで文章を扱う
  Illustratorで文章を扱うとき（文字組版） - DTP Transit（Illustrator, チュートリアル）
• アイコンを作る時によく使う機能
  イラストレーターでアイコンを作る時によく使う機能いろいろ。 | Handy Web Design
• 色の付け方 / 複製 / グラデーション / 回転 / 縮小・拡大 / リフレクト
  Web制作のための、Illustratorの独学方法 - ウェブデザイナーになるには
• 初心者向けの人体を描く講座
  初心者に分かりやすい『人の描き方』講座まとめ｜萌えイラスト上達法！ お絵かき初心者の学習部屋
• Illustratorで覚えておくと便利なワザがまとめて紹介されている
  知らない人は損してる、イラレでスーパーのチラシを作るときの7つのワザ - Cherry Pie Weblog

Dreamweaver (ドリームウィーバー)

• はじめてDreamweaverを使用する際にスムーズに勉強していけるようなサイト
  入門！Dreamweaver使い方講座
• ラッパー・ヘッダー・コンテント・フッターと丁寧に色分け
  誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 | Last Day. jp
• 基礎から上級編まで、ドリームウィーバーの使い方の全てはここで
  Dreamweaver入門 ドリームウィーバーの使い方
• なるべくタグを書かない原稿の流し方
  Dreamweaverのデザインビューを使い倒すために覚えてきたいこと | Webデザインのタネ
• コマンドや拡張機能のまとめ
  Dreamweaverの便利なコマンドや拡張機能のまとめ｜WEB Drawer
• WordPressとDreamweaverの連携と編集方法
  Dreamweaverを使ってWordPressのテーマを簡単カスタマイズ！ | WordPress初心者の部屋～使い方知っとこ？

iPhone アプリ

• 知識なしから２週間ほどでiPhoneアプリを作った手法
  初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ
• 前提知識 / コンセプト / 画面イメージ / 構文など
  知識ゼロからはじめるiPhoneアプリ開発 - A Day In The Life
• 開発するまでの簡単な流れ
  中学生からわかるiPhoneアプリ開発入門。第1回 。 - たのしいiPhone！ AppBank
• 基礎中の基礎を解説
  いまさら聞けないiPhone/iPadアプリの作り方の基礎（1/4） - ＠IT
• Objective-c に関するリンク集
  永久保存版！iPhoneアプリ開発に必ず役立つ！Objective-c Tipsまとめ！ | PLUS
• JavaScriptに絞って習得するための方法
  短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^

Kindle 出版

• 電子書籍フォーマットのデータの作成方法
  ASCII.jp：Kindle/iPad対応！電子書籍の作り方｜今すぐ始める電子書籍制作入門
• 電子書籍に興味あるなら、今書いている文章を登録する前に
  個人が印税35%の電子書籍を出版できる時代 - Amazon Kindleの衝撃：In the looop：ITmedia オルタナティブ・ブログ
• PDFファイルを電子書籍端末で読みやすいように加工できるソフト
  窓の杜 - 【REVIEW】“自炊”したPDFファイルを電子書籍端末向けに最適化できる「PDFDiet」
• 本を自動読み込みする際のScanSnapのオススメ設定
  ScanSnap S1500 の設定まとめ - 電子書籍を自炊するときの 10 のポイント - 彼女からは、おいちゃんと呼ばれています
• Scansnap 1500を使った自炊設定
  Kindle、iPad向け自炊の簡単なまとめ « Bayashi's blog

WordPress

• WordPress初期設定
  WordPressをインストールしたら最初にやってることまとめ | VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-
• WordPress導入に関するまとめ記事
  おそらく最もわかりやすいWordPressテーマ制作チュートリアル | Stocker.jp / diary
• テーマカスタマイズの基礎の基礎編
  WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき | VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-
• WordPressのことも詳しく書いてあるプログラミングの入門記事
  どのプログラム言語を覚えればいいのか分からないっていう初心者さんのためのガイド（Web）
• WordPressでプラグインどれだけできるのかを箇条書き
  WordPressを使ってできる革新的な15のこと – まとめ | Webデザインのレシピ

スマートフォンサイト

• 仕様 / デザイン / コーディング / JavaScript等の解説
  初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer
• スマートフォンサイトを制作するときのポイント
  はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ ｜ Kana-Lier カナリエ
• JavascriptでのPC・スマートフォンの振り分けなど
  ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう
• サイト設計から基礎知識、デザインの知識など
  はじめてのスマートフォンサイト制作「基礎知識や開発環境の準備編」 | ウェブル
• スマホ最適化のための css ソース
  iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
• iPhone / Android / ガラケーをスマホ / UIなどいろいろ
  ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
• スマートフォン対応 / html、css、javascriptまとめ
  スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

アフィリエイト

• 基本 / マニュアル / 無料ツール / Google AdSense / WordPress
  助かりすぎて泣いた！簡単で実践的な「アフィリエイト」まとめ | コムテブログ
• アフィリエイトで収入を得るまでの流れ
  半年で月5万円稼ぐアフィリエイトサイトを作る為の24の手順 - アフィリエイトで稼ぐ方法 | WP SEOブログ
• スーパーアフィリエイターの詳細
  アドセンスで1日2万円稼ぐための6つのレッスン | SEO Japan
• アドセンス以外でも応用できる
  アドセンスで月５万稼ぐための１５のノウハウ - Google Adsenseでお金を稼ぐ方法
• Amazonリンクのサムネイル / トリミング / flickr関連など
  【ブログ運営】私がブログを書く際にお世話になっている7つのサービス:マインドマップ的読書感想文
• アフィリエイトで月数千円
  アフィリエイトでとりあえず月間数千円程度の収入を得る方法 » とりあえず9JP

アクセスアップ / ブログ

• ブログのアクセス向上施策
  ブログを毎月30万PVにするために僕が行なっている15の戦略 | gori.me
• ブログのサイドバーにぜひ置いておきたいもの
  初めてブログを訪問したときに「これがあると嬉しいな」と思う10の要素 - ネットナナメ読み - 山田井ユウキ - builder
• 文章力アップのコツ
  ブログの文章力アップに役立つ記事10選 | 祇園ホステスのネットビジネス挑戦ブログ
• 月平均100万ページビュー達成するための方法
  ブログでめしを食うために行っている5つのSEO | 和洋風KAI
• 「主題」「理由」「論証」「結論」という順番で書く
  ブログのPVを10倍に増やす為に実践した3つの手順 | Content Marketing
• 毎日ブログを更新するため、モチベーションをあげたいときに
  これからブログを頑張ろうと思う人へ。まずは三ヶ月毎日書く。話はそれからだ。

ライティング

• キャッチコピーのつけ方について
  カヤックコピー部のコピー講座
• サイトの記事を書く際に参考になりそうな記事
  初心者でも今すぐできる！読まれる文章の書き方12のコツ - 自分を変える、人生を変える！
• 読んでもらえる文章の書き方
  「シンプルな文章の書き方」 ― 読まれなかった文章をカイゼンしてわかったこと : earth in us.
• 文章構成力向上のまとめ。
  文章が劇的に上手くなる！驚くほど単純なライティング上達法 - NAVER まとめ
• 数字、カタクリコ、呼びかけの3つ
  クリックさせるキャッチコピーの作り方 : NHN Japan ディレクターブログ - Season 8

SEO

• 基本的なこと / ロゴ / ファビコン / 解析 / キーワード
  サイトを作った時に絶対にやるべき10の事 | 無料SEO対策のススメ
• SEOのまとめリンク一覧
  これから本気でSEOを始める人が読むと幸せになれるかもしれない記事50選 | パシのSEOブログ
• 検索エンジン登録 / ping先一覧 / ソースチェック / meta
  サイト立ち上げ後2週間でやった基本的（？）な７つのＳＥＯ対策 | Kousyoublog
• リニューアル時に押さえておきたいSEO対策
  これだけは押さえておきたいSEO対策 : NHN Japan ディレクターブログ - Season 8
• サイト構造化 / 文法 / コーディング / リンク
  40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum

プログラミング

• マンガで解説するという初心者向けの入門講座
  マンガで分かる JavaScriptプログラミング講座
• どの言語か悩んでいる人のために人気TOP10の簡易解説
  プログラミング言語人気TOP10の簡易解説
• プログラミングを一から学ぶひとのための動画まとめ
  サクッと動画で学べるプログラミング学習サイト - NAVER まとめ
• プログラミング言語の基礎をさくっと学びたいとき
  高速でプログラミング言語をマスターするのに有効な記事まとめ - NAVER まとめ
• javascript入門。開発環境を整える
  JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
• 超コンパクトなjQuery講座。JavaScriptの予備知識は不要。
  ASCII.jp：40分で覚える！jQuery速習講座
• jQueryとかJavaScriptに詳しくなくてもOK
  【初心者向け】jQueryが基礎からしっかり学べるサイト【javascript】 - NAVER まとめ

html

• HTMLタグ / CSS / Webテンプレート / カラー早見表 / CGI
  【HTMLタグの簡単検索】TAG index - ホームページ作成情報
• HTML/CSSのリファレンス
  とほほのＷＷＷ入門
• 比較的簡単に分かるHTML５まとめ
  1日でマスターできるHTML５まとめ。 - NAVER まとめ
• リファレンス / ギャラリー / CSS3ジェネレータ
  いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
• HTML5の新要素、コンテンツモデルやアウトライン
  いままでまとめたHTML5の勉強をしたさいに作成したまとめ ～HTML5の新要素の説明からマークアップの基本まで～ | Webデザインクリップ

CSS

• フォントサイズ / 行間指定 / 回り込み / フロート解除などの基礎
  CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
• 実用的なものからネタ系のものまで
  一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
• カラム構成は、ここのサイトが凄いわかりやすい
  CSSによる段組（マルチカラム）レイアウト講座
• CSS全般 / CSSハック / 線・背景 / font
  CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
• カラム / プロパティ / 角丸など自由に生成
  【CSS3】これはやばい！覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 - NAVER まとめ
• h1要素だけで作るおしゃれな見出し集
  H1一つでここまで出来るCSS見出しデザインのアイデア9個 :. SQUEEZE .:

Google Analytics

• 自分アクセス除外 / 曜日別データ / SNSアクセス
  Google Analyticsを導入したらやっておきたい簡単で便利な設定集 | ウェブ力学
• グーグルアナリティクスの計測仕様や算出方法まとめ
  Google Analytics、77の注意点（追記有） | カグア！Googleアナリティクス解説Blog
• 用語解説 / レポートツールの参考に
  GoogleAnlyticsを徹底活用する｜基本的な見方とカスタムレポート作成法 | N1kuMeet5
• 今まで知らなかったことが恥ずかしいと思った機能
  Google Analyticsの意外と知られていない便利な裏技5選 | Web担当者Forum
• 正規表現の活用 / 期間比較 / 500行以上のデータ解析
  Google Analyticsでいいね！ボタンやTweetボタンのアクションを計測する方法 - F.Ko-Jiの「一秒後は未来」

レスポンシブ

• 基礎知識や設置方法 / ブックマークレット
  ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう
• レスポンシブウェブデザインの設計方法
  約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
• 使用頻度が高いコードの書き方まとめ
  レスポンシブ・ウェブデザインでの CSS コードの書き方
• 基礎を学ぶスライドショー
  レスポンシブ・ウェブデザイン基礎
• レイアウトの切り替えパターンなど
  文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

以上、ウェブ制作やソフト・ツールの使い方が簡単に分かるまとめでした。