先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。
今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。
もくじ
動きを出す（クライアントサイドスクリプト）
４．JavaScript
５．jQuery
ユーザーにアクションを起こさせる（サーバサイドスクリプト）
６．php
７．Python
８．Ruby
バージョン管理システム
９．git
アプリ開発
１０．ハイブリッドアプリ
１１．ネイティブアプリ
サーバー
１２．MySQL
１３．Apache
１４．nginx
デザイン
１５．フォント
１６．タイポグラフィ
１７．配色
１８．カンプ
Adobe系
１９．Photoshop
２０．Illustrator
２１．Dreamweaver
コンテンツ
２２．ライティング
保守
２３．Google Analytics
２４．AdWords
２５．SEO
２６．Webmaster
２７．SSH
ページを作る
HTML5
まずは、文字や画像をページに表示するところから。以下はHTML5、CSS3を学べるスライドとサービスまとめ。予備知識はHTML5リファレンスでつけます。
- HTML5, きちんと。
- 今からハジメるHTML5マークアップ
- HTML5とはなにか？マイクロソフトはHTML5をどう考えているのか？
- HTML5入門＆jQuery” 勉強会
- JavaScript、HTML5、CSS3を学べる。コーディングの様子が動画で見れる
CSS
htmlがなんとなく分かったら、次はページのデザインです。cssについての基本知識はとほほのスタイルシート入門(基礎知識)で。あとはちょっとサイトをステキにするCSSの基本が分かりやすいですね。CSS3リファレンスはこちら。
Sass
CSSに慣れてきたら、CSSを効率的にクールに書けるSass（サス）。初心者の方は飛ばしても良いです。cssの入力をサポートしてくれる。変数・関数が使えるなどなど。Sass/SCSS入門ドットインストールで基本を勉強。
クライアントサイドスクリプト
JavaScript
HTMLとCSSが書けるようになったら、javascriptやjQueryを勉強してみましょう。ページに動き（計算結果、絵を動かしたり）などを出すことができます。javascriptが分かるとスマートフォンアプリも作れるように。以下はjavascriptのつまずきポイントの分かりやすい解説。
jQuery
jQuery は Javascript のライブラリのひとつです。アニメーション効果（スライド、フェードイン、ツールチップなど）をつけたりできます。長くなりがちなJavaScriptのコードを、もっと短く簡単なコードでJavaScriptを動かすことができます。CSSを書いたことがある人なら、分かりやすいと思います。
サーバサイドスクリプト
php
PHPでは見る側がデータを送信したり、選んだり「見る側が何らかのアクションを起こせる」ようにできます。代表的なものが掲示板やカートシステムなどです。環境を設定するところからなのでXAMPP – 開発環境一括インストールでXAMPPをインストール。後は、ローカルで色々テスト出来ます。
Python
Googleで利用されていることで有名、海外で人気のPython。いまひとつ日本では人気がありませんが、初心者にも扱いやすく可読性に優れているのが特徴です。とにかく、コードは見やすいですよ。入門編はpython入門から応用までの学習サイトでOK。
Ruby
プログラムを楽しむ言語と述べた「まつもと ゆきひろ」氏が開発しているフリーソフトウェア。取引先の人と話していたとき、昔のTwitterはRubyで出来ている。と聞かされて興味を持ちました。
バージョン管理システム
git
何故かスルーされやすいGit。gitを使うときの基本的な流れを分かりやすく解説。バージョン管理ってなに？ってところから書いてあります。
- サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
- イラストでわかる！git入門の入門 : アシアルブログ
- Gitがこわくて触れられなかったけど、このスライドで理解出来るようになったよGitサイトまとめ
- サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
アプリ開発
ハイブリッドアプリ
HTML5でアプリ開発。HTMLで実装した時の失敗パターンを避けるための知識、ノウハウなども学べます。僕もアンドロイドとiPhoneどちらも対応させたくて、Titaniumで何個かリリースしたことがあるんですけど、JavaScriptさえ分かれば簡単です。作るのは簡単ですが、登録したりリジェクトあたりが面倒でした。
- HTML5ハイブリッド アプリ開発実践編
- Titanium でつくろう！ iPhone/Android 両対応アプリ
- スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 – ＠IT
- Titanium mobile で開発を始める時に役立つ情報のまとめ | astronaughts.net
ネイティブアプリ
Objective-Cの概要。 SEL,IMP型とかデリゲート、ブロックについてなど。参考サイトは、アプリを公開するまでの道のりなどが詳しく書かれています。
- Objective-Cひとめぐり
- 知識ゼロからはじめるiPhoneアプリ開発 – A Day In The Life
- 中学生からわかるiPhoneアプリ開発入門。第1回 。 – たのしいiPhone！ AppBank
- 永久保存版！iPhoneアプリ開発に必ず役立つ！Objective-c Tipsまとめ！ | PLUS
サーバー
MySQL
MySQLのインストールや設定等の初心者向けの説明。データベース、テーブル、レコード作成の部分など。初心者は黙ってutf8。
Apache
公開前に抑えておきたいApacheセキュリティ対策+PHPの基本設定。簡易的な防衛策の一つ。スライドはApacheモジュールの利点や欠点について。
nginx
nginxの読み方、何なのか、誰が作っているのかというところから書いてあります。もう一つは、nginxのインストール方法、設定、アプリとの連携。
デザイン
フォント
欧文書体の種類、文字の太さと字幅、雰囲気などフォントの超基本的な部分から解説。もう一つはウェブフォントの基礎。参考サイトはフォントの選び方や基礎知識。
- はじめての欧文書体
- TypeTalks第10回「もっと知りたい！Webフォント」
- フォントの基本的な選び方 | Arch
- 最低限知っておきたいフォントの基礎知識 – ラクスルマガジン｜raksul [ラクスル]
タイポグラフィ
和文フォントは仮想ボディ、字面、枠、ツメ組みなど。欧文フォントはベースライン、エックスハイト、キャップラインなど。参考リンクのほうは、書体とフォントの違いや和文欧文の特徴などを細かく解説してあります。
- 「Webデザイナーのためのタイポグラフィと文字組版」
- [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
- 文字を扱う上で知っておきたい基礎知識 | Basic Design Note
配色
色の組み合わせ方法を分かりやすく解説してあるスライド中心。人間の感覚に近い HSB カラーモデルで配色するお話など。
カンプ
モックアップ手前までの流れ。ラフデザインの場合、他の人のやり方を見る機会が少ないと思うので参考に。
- 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
- WEBディレクターなら参考にしたい手書きの画面設計書｜designaholic -Creative Column-
- アプリ･サービスのモックアップ(ワイヤフレーム)を具体的なタスクに落としこむ方法
Adobe系
Photoshop
基本的な画像補正(トーンカーブ)の使い方。初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能など。
- よく分からずにトーンカーブを使っている人に。 (今さらだけど、トーンカーブって凄いよね？)｜Web Design KOJIKA17
- Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能
- 写真は怖くない！すごい「Photoshop」マジック小技集２３ | コムテブログ
- 最近覚えた便利すぎておしっこちびるかと思ったPhotoshopの小技/ショートカット11こ | クリエイティブメモメモ
Illustrator
Illustratorの使い方の基本や予備知識。Illustratorは我流で使っている人が多いと思うので他の人の使い方を見てみるのも勉強になると思います。
- これからIllustratorを始めてみようという人のための基本操作とかいろいろ
- ［Illustrator ABC］TS12 IllustratorをWeb作業に最適化するためのポイント
- 写真からイラレで図面を起こす – Togetter
Dreamweaver
これからWEB業界を目指す人は、Dreamweaverの使い方から学んでいいかもしれません。普通のエディターでできないことも沢山あるので。以下は起動や環境設定の初期から解説してあります。
コンテンツ
ライティング
キャッチコピーのつけ方についての実践的なスライド。売り上げが劇的に改善する！売れる文章（セールスレター）の書き方など。
- カヤックコピー部のコピー講座
- 売り上げが劇的に改善する！顧客心理に響く「売れる文章」9つの書き方 | 京都のWebライダー松尾のブログ
- 文章をデザインする – 段落や箇条書きをより読みやすくするために – YATのBLOG
- コンテンツ作りの三原則
保守
Google Analytics
僕は一人で毎月解析保守レポートを15社ほど作成していますが、GAの基本知識は元より、コンバージョン関連、曜日別、時間別などの設定は必須です。コメントの書き方や基準値を知っておくと捗ります。
- 最初に設定しないと絶対損する！Google Analytics 9個の必須設定＆解説 | Find Job ! Startup
- Google Analytics、77の注意点（追記有） |カグア！Googleアナリティクス解説Blog
- Googleアナリティクスオタクの私が、毎日見ているたった1つのレポートの、本当の見方を教えよう［第60回］ | Web担当者Forum
AdWords
AdWordsやリスティング保守も10社ほど毎月保守してます。コンバージョンを上げたり、売上を上げるための知識は最低限必要です。GoogleショッピングとEC-CUBEとAdWordsの連携などもやってみると売上げアップにつながります。
- 成功する広告の書き方 – 21の法則 | グーグル アドワーズ ラボ
- リスティング広告の売上げをあげるために絶対に読むべき記事まとめ | アドリス
- リスティング広告に関わる会社の社員教育でオススメ出来る5冊+1 | SEM-LABO
SEO
コンテンツを作ったら検索エンジンの上位に表示させる知識も入れておきましょう。
Webmaster
アクセス解析はサイトに入ってから、ウェブマスターはサイトに入るまでのことを知ることができます。他に重複ページの警告などをチェック。
SSH
参考リンクはサイトやイラストは可愛いのに、中身はディープな内容。サーバ運営に関する基礎知識をわかりやすく解説。スライドはSSHのノウハウいろいろ。ポート転送、多段ssh、セキュリティの基本知識。興味ない人でも読んでおいて損はないとおもいます。
完全素人がひとりでWebサイトを作れるまでに必要な情報やスライドでした。
[...] ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７ …今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 … [...]
[…] コムテブログ […]
[…] ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７ | コムテブログ はてブ：1431 色々と書いてありますが、主にコンピューター言語系のまとめです。辞書的ボリュ […]