これなら分かる！WEB制作を無料で「学べる」サイトまとめ

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

基本的なところを簡単に、楽しく覚えたい

自分でサービス作ったり、会社や違う職種でも
色々と「基本」はおさえておきたい

今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。

もくじ
１．HTML5
２．CSS
３．レスポンシブ
４．配色
５．視線誘導 / 心理学
６．インターフェース / ユーザビリティ
７．SEO
８．ディレクション
９．アクセス解析
１０．WEBマーケティング
１１．コピーライティング
１２．ソーシャル

１．HTML5

• HTML5って何？
  HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog
• Canvasについて知っておく
  Canvas - HTML5.JP
• HTML5をもう少しだけ知りたいなら
  HTML5+CSS3 入門 | yoppa org
• HTML5の背景や目的
  HTML5, きちんと。
• HTMLクイックリファレンス
  HTML5リファレンス
• HTML5で作ってるサイトのまとめ
  HTML5 Gallery | A showcase of sites using HTML5 markup
• カヤックさんのHTML5実力テスト
  HTML5 Coding assessment test - jsdo.it

２．CSS

• CSS3のリファレンス。日本語がありがたい
  CSS3リファレンス
• グラデーションを作るサイト
  Ultimate CSS Gradient Generator - ColorZilla.com
• 少ない手間でそれらしく見せるデザインテクニック
  zurui-design // Speaker Deck
• 比較的実用的かなと思うものを20個紹介
  意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
• 800以上のコードのなかから厳選
  一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
• IE6/7/8でもCSS3を使えるようにする
  たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

３．レスポンシブ

• レスポンシブサイトを作るための簡単な方法
  ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう
• 「jQuery Masonry」というプラグインでレスポンシブ
  なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | gori.me
• jQuery Masonryを詳しく解説
  たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
• ベースとして利用できる超軽量フレームワーク
  [CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework | コリス
• Javascript（jQuery）を使う方法
  レスポンシブWebデザインの画像問題の解決法5種 │ Design Spice

４．配色

• 図式化されてるとすごいわかりやすい
  色彩センスのいらない配色講座
• 配色初心者でも効果的なカラーデザインが出来るように
  配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
• 配色を考える時に役立つ方法
  配色に悩んだときに、きっと役立つ7つの配色技法【基本】
• 雑誌だけじゃなくて他の本からでも抽出可能
  Color of Book - 雑誌の色からhtml,cssで利用できるカラーチャートの紹介
• 色の名前とHTMLタグが一目でわかる色見本
  WEB色見本 原色大辞典 - HTML Color Names

５．視線誘導 / 心理学

• 基本的な視線の動き
  webデザインにおける視線誘導のおはなし | 07design.blog
• もっと、クリックしてくれないかな～という時
  クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
• 広告の位置ってどこがベストなの？
  【ちょい保存版】ヒートマップ分析、H&Mの水着広告の男女差など9選 | PRFREAK
• 盲点な視線の位置
  アナタはどの部分に目がいきますか？デザインの基本：視線誘導や視認性について。（エロいようで真面目な話） / Maka-Veli .com
• 人間の視線をアイトラッキングで分析
  アイトラッキングの実験からわかった12のWeb戦略 | IDEA*IDEA
• 大手サイトを見た男女計5人の視線の流れ
  ユーザーが「見る広告」「見ない広告」--ユーザーの行動を決める要素とは？ - CNET Japan
• 「人の視線をつかまえる」ための方法論
  unoh.github.com by unoh
• 検索結果画面で使用されているテキストリンクの色
  クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学

６．インターフェース / ユーザビリティ

• クリック / ラベル / 文字の濃淡など
  インターフェースデザインで気をつけるべき10のこと | IDEA*IDEA
• 情報の整理整頓 / 優先順位 / サイズについて
  見やすい・使いやすいレイアウトの為に考えるべき事。 | Basic Design Note
• 整列 / 近接 / コントラスト / 反復に注意
  新人デザイナーに教えたいWebデザインの基本原則【整列】
• シャドウ / 光源 / グラデーション / ハイライト
  ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方 | コリス
• プライバシーポリシー / 全角や半角 / 指摘方法
  申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】 | Web担当者Forum
• UI / エフェクト / 色 / フォント / 余白を意識
  「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント « Parkn' Park
• ニックネーム / パス / チェックボックス / フォントサイズ
  団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ - キャズムを超えろ！
• EFO / UIなどのリスト
  Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net

７．SEO

• 作ってからのアクションをチェック
  Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
• Googleの順位決定アルゴリズムをプロが推測
  検索エンジンが順位を決める53の要因（39人のSEOプロが評価した重要度とコメント付き） | Web担当者Forum
• 実際に月5万円稼いでいる方法
  半年で月5万円稼ぐアフィリエイトサイトを作る為の24の手順 | WP SEOブログ
• 競合サイトの解析、自社サイトの弱点調査に役立つツール
  WEB屋が使う最高の無料SEOツール40個 | SWAT9
• ブログタイトル32文字の法則
  本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Life
• SEOエキスパートの方は目次として確認
  Googleアルゴリズム200項目全てを特別公開 | SWAT9
• 被リンク獲得手法一覧
  大量の被リンクを集めたいなら知っておかないと損する記事のまとめ | ウェブ力学
• SEOの基礎を学べる
  SEOの方法 | SEO 検索エンジン最適化

８．ディレクション

• 新人Web担当者さんや、新人ディレクターさんの参考に
  Webサイト制作の一連の流れをまとめてみました | Arch
• 企画・提案書のテンプレ / 最初の方はリンク切れ、後は見れる
  ネットで見られる提案書のまとめ | Webデザインのタネ
• 作業スケジュールに使えるExcelテンプレート
  WEBディレクターの為のEXCEL術（1）作業スケジュール｜designaholic -Creative Column-
• webサイトのラフを作る時の流れ
  私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
• Webディレクターの為に学んだ知識
  僕がWebディレクターの肩書がついてから勉強した15のこと | webdirectooor!!! [ウェブディレクター]
• 提案依頼書(RPF)の書き方参考サイト
  RFP（提案依頼書）書き方のまとめ - NAVER まとめ

９．アクセス解析

• Google Analyticsの計測仕様や算出方法
  Google Analytics、77の注意点（追記有） | カグア！Googleアナリティクス解説Blog
• 便利な機能を４つ紹介
  Google Analyticsを導入したらやっておきたい簡単で便利な設定集 | ウェブ力学
• Google Analyticsとそれ以外15個のツール
  ウェブサイトの課題発見のために、筆者が普段から使っている「解析系ツールボックス」の中身を紹介！ - リアルアクセス解析
• 訪問者がサイトで何を探していたかを知る
  [N] 「Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips！
• 最もサイト改善のヒントを見つけやすいグラフ
  Google Analyticsでサイトのことが丸分かりのバブルチャートをフル活用する方法 | nanapi [ナナピ]

１０．WEBマーケティング

• マンガだから分かりやすい
  PVだけでいいんですか？／【漫画】Webマーケッター瞳 第1話 | Web担当者Forum
• ネットならではのマーケティングデータの集め方
  私はこうやってマーケティングデータを集めています。 : NHN Japan ディレクターブログ - Season 8
• フレームワーク「AIDMA」の解説
  何でやらないの？繁盛店がやっている 本当に売れる「AIDMAの法則」 | お土産屋さんブログ
• 認知・行動心理学をふまえたマーケティング法
  WEBマーケティングに役立つ認知・行動心理学 - NAVER まとめ
• PDCA / 利益の方程式 / ブルーオーシャンを分かりやすく解説
  社会人なら押さえておきたいフレームワーク思考 : NHN Japan ディレクターブログ - Season 8

１１．コピーライティング

• 興味をそそるコピーの書き方11個
  今すぐ反応率の上がる11種類のキャッチコピー | マケラボ
• 読まれることを前提に文章を書く方法
  読みやすい文章を書くのに押さえておきたい基本となる5つのポイント | [M] mbdb
• ウェブの媒体特性に合った文章の大切さ
  Web文章入門 : 第1回 ウェブの媒体特性に合った文章の大切さ | エキスパートコラム | bizYou Webサポート
• 効果的な見出しを書くための特集記事
  成功間違いなしの最強見出し文句10選 | SEO Japan
• コピーライター養成講座の内容
  人を惹きつけ人を動かす文章を書く方法 初心者にもわかるコピーライター養成講座 ～言葉で世の中を動かそう - 久保清隆の成長ノート @ライブレボリューション

１２．ソーシャル

• タイムライン版のFacebookページの制作手順
  人を惹きつけ人を動かす文章を書く方法 初心者にもわかるコピーライター養成講座 ～言葉で世の中を動かそう - 久保清隆の成長ノート @ライブレボリューション
• インプレッション数を最大化する作成方法
  知らないと損するFacebookページのウォール投稿・運用ノウハウ7選！
• facebookページに追加するアプリ
  facebookページ担当者必見！マジで使える無料FBアプリ９つ | little_shotaro's blog
• OGPを一番詳しく解説してある
  フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
• SNS / マイクログログ / グルーポン系などの一覧
  未来を考えるために、これだけは押さえておきたい海外ソーシャル系サービス50個 | little_shotaro's blog
• グーグルプラスの基礎知識、基本的な使い方、楽しみ方
  Google+（グーグルプラス）の使い方徹底ガイド - nanapi Web

以上、WEB制作が分かるようになる「まなび」のブックマークでした。

2016/07/11

最高にわかるChromeデベロッパーツールの使い方(チートシート付き)

初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパー

2014/11/10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014/12/01：続編である「最近のサイトで使われていたCSS小技集」を書きました。 今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高く

2016/11/21

モダンなフォームを作るために覚えておきたいCSSの擬似クラス

モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。 疑似クラスとは 疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセ

2013/07/1

この上なく便利！すごい「jQuery」の小技まとめ３２

先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像な