完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 　〜①デザイン編〜

「Webサイトを作れるようになりたいけど何から始めればいいかわからない」そんな人のために完全な素人の人がひとりでWebサイトを作れるまでに必要な本や記事集めました。

この記事テーマは３つの記事に分かれています。

一つ目は今回の、
完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 　〜①デザイン編〜
後日公開予定の、
〃　〜②コーディング編（HTML&CSS）〜
〃　〜③集客・Webマーケティング編〜

以上の３つです。

Webサイトの制作手順

初めての方は「Webサイトをどういう順番で作るか？」について知らないと思いますので、説明します。Webサイトを作成し、公開してたくさんの人に見てもらうまでには大きく７つのステップがあります。

①どんなWebサイトにするか考える（企画）

Webサイトを作るためにまずはどんな目的で、誰に、どんな情報やサービスを届けたいのかを考える必要があります。
企画に関しては、こちらの記事
誰のため？何のため？Webサイトを作り始める前に。
に具体的に考えるべきことが書いてあるので、読んでみてください。

②サイトの構造（サイトマップ）を考える

どんなサイトにするか決まった後は、どのようなサイト構造（トップページとお店紹介ページと…等）で作成するか決めます。
サイト構造を図式化して分かりやすくしたものをサイトマップと呼びます。

こちらの記事
Webサイトの構成図を簡単に作れる便利ツール
にサイトマップを作成するツール等が紹介されているので、こちらのツールを使用してもいいですし、図にせず箇条書きでまとめるだけでも大丈夫です。

③ワイヤーフレーム（Webサイトのレイアウト）を作る

次にそれぞれのページの、上の画像のようなワイヤーフレームを作成します。どういうレイアウトでどこにどういう情報を載せるか決めることが目的なので、詳細な文字は入れず、文字は見出しやキャッチコピーなどのみ入れるだけで大丈夫です。

手書きでノートやスケッチブックに書くだけでもいいですし、CaccoのようなWeb上で簡単にワイヤーフレームを作成できるツールを使用します。

④Photoshop（Fireworks）でページごとの１枚絵のサイトデザインを作る

Photoshop、もしくはFireworksというAdobe社のデザインソフトを使用してサイトのデザインを作ります。
フリーソフト等で作ることも不可能ではないですが、制作効率及び作品のクオリティが大きく下がると思うので、Photoshop、もしくはFireworksを準備してください。

PhotoshopとFireworks、どちらでもデザインはできるのですが、個人的には汎用性に優れているPhotoshopをお勧めしています。
シンプルなWebサイトを効率的に作りたいという方はFireworksの方がいいかも知れません。

関連おすすめ記事
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由

１枚絵のサイトデザインができたらPhotoshopのスライスツールでそれぞれの画像をパーツごとに切り出します。

⑤HTML&CSSでコーディングする

HTMLとCSSという言語を使って文字情報を入れたり、先ほど切り出した画像を適切な場所に配置するなどして、
先ほどPhotoshopで作成したサイトデザイン画像をWebページとして作ります。

⑥Webサイトを公開する

インターネット上の住所であるドメインを取得し、レンタルWebサーバーを借りて作成したサイトを公開します。

⑦集客する

Webサイトをただ公開しても誰も見てくれません。
検索エンジンに登録したり、SEO対策、SNSを使った集客などをしてたくさんの人にWebサイトにきてもらいましょう。

以上の７つがWebサイトを作成し、集客するまでのステップです。
今回の記事では①〜④までを扱います。
 
もっと制作手順（ワークフロー）について知りたいという方は、こちらの本がおすすめです。

本邦初！「Nokia」「トヨタist」「KDDIリスモ」…etc.ウェブデザインの過程で発生した実際の企画書、ラフ、仕様書など全てを見せて解説！(Amazonより)

実際の制作現場の企画書、ラフ、仕様書などを見ることができ、効率的なワークフローがイメージしやすくなっています。

他これら２つの記事もワークフローの参考になります。
どうやってWebサイトを作るのかの理解（ワークフロー）
ワークフロー１３

Webサイトのデザインを作る上で最低限必要な知識・スキル

ある程度以上のクオリティのWebサイトデザインを作る上で最低限必要な知識・スキルは３つあると思います。

①デザインの基本原則の知識

②Photoshopなどのツールを使えるスキル

③素材の入手先の知識、もしくは素材を作成できるスキル

以上の３つです。
 
Photoshopを使えるようになる＝Webサイトのデザインができるようになる
のように考えてる人も多いですが、Photoshopはあくまで何かを作るためのツールに過ぎず、Photoshopの機能をいくら知っていてもある程度以上のクオリティのWebサイトデザインを作ることはできません。

例えば、一眼レフカメラの機能についてとても詳しい＝いい写真を撮れる
とは限らないのと一緒のことです。
 
いいデザインをするにはデザインの基本原則について知る必要があります。
「こんなものを作りたい！」ということが決まって、それをカタチにするときに初めて、Photoshopなどのツールのスキルが必要になります。
 
そして多くのWebサイトでは写真や背景のテクスチャなどサイトを作る上での素材が必要になります。
自身でイラストが書けたり、Photoshopの機能を駆使して素材が作れるなら問題ありませんが、初めてWebサイトを作りたいと考える多くの人は自分で素材を作ることは難しいと思います。

そこでこの記事でおすすめの素材サイトや素材サイトの紹介記事を紹介します。
 
では以上の３つについて本や記事を紹介していきます。

①デザインの基本原則の知識を得る

やってみよう、基本のデザイン。デザインを学ぶには、理屈だけでなく実際に手を動かし、自分でデザインすることが欠かせません。本書は基本的な図 形や文字、色による平面構成から、実践的なレイアウトまでを、実際に手を動かして学ぶことのできる画期的なトレーニングブックです。本書をひととおり学習 することで、「視覚的な表現としての論理」を理解して、デザインを組み立てるための基本的なスキルを身につけることができます。（Amazonより）

デザインの基本を学べる本の中でも有名な良本。
「デザインとは？」「揃えること」「余白の取り方」などデザインする上で最も基本的な事柄に始まり、書体や色、レイアウトなどデザインする上で最低限必要な要素の基本知識が書いてあります。

「デザインってそもそも何！？」って人がまず読む本としてぴったりです。
 

デザインとかレイアウトという仕事は、特別な訓練を受けた、特に感性の鋭い人しかタッチできない仕事と思われがちだ。しかし本書を読めば、それは錯覚だっ た、ということがわかる。ごく基本的なことを理解すれば、実は身近で使いやすい技術であることがわかる。謎に包まれていたレイアウトを、一気に身近な技法 にしよう。本書では第1日目から第4日目までで「様式」がどのように決まるかを解説した。次に第5、6日目は、絶対にマスターしたい造形の原則を図説し、 第7日目は、次のステップへのヒントを紹介している。（「BOOK」データベースより）

こちらもデザインの教室と並び、デザインの基本を学べる本の中でも有名な良本。

色彩や文字、レイアウトなどWebデザインをする上で学ぶべき要素はたくさんありますが、その中でもレイアウトはWebサイトのデザイン要素の多くを占めるため、最も重要だと思います。
 
「どこにどの情報を配置するべきか」をこの本で学んでください。

雑誌などのデザインを中心とした本ですが、デザインの根本的な原則は紙のデザインもWebデザインも同じなので、Webデザインを考える際にも必要な知識が詰まっています。

その他参考記事

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
配色パターンからWebデザインを考える

②Photoshopなどのツールを使えるスキルを得る

クリエイター養成スクール「デジタルハリウッド」で使用されているテキストをそのまま書籍化したシリーズ「デジハリシリーズ」のIllustrator、 PhotoshopのバージョンCS5対応させた改訂版書籍です。架空のカフェで使われる、ロゴ、名刺、メニュー、チラシなどを作成しながら、各アプリ ケーションの使い方を学んでいきます。デジタルハリウッドの監修のもと、初心者から読めるレベルになっており、この書籍を一冊読めば、Photoshop とIllustratorの基礎を習得できる内容になっています。（Amazonより）

実際の制作物をチュートリアル形式で作成していく本です。
PhotoshopやIllustratorの本の多くは逆引きのものや機能をただ書いたものが多いのですが、初めての人がそのタイプの本を読んでも何かを作る力が身に付かず、いざ作るとなっても何から始めていいのかわからないということになると思うので、まずこの本のようなチュートリアル形式の本を使って制作物を解説とともに作成して、その後逆引き系の書籍を辞書代わりに使用するのがいいと思います。
 

本書は「Photoshopでやりたいことはあるけど、操作方法がわからない!」という方のために目的別に項目をまとめた逆引き本です。 （Amazon）

こちらは数ある逆引きタイプの本の中でも最も優れた良本です。途中説明が省かれていたりするところがありますが、先ほど紹介したチュートリアル本でPhotoshopの基本操作を理解した後だと問題ないと思います。
画像の選択やパターンの作成、色調補正など、Webデザインでよく使用される技法が網羅されています。まずさっと流して読んでどんな機能があるのか確認し、機能を使いたくなったときに辞書代わりに使用するのがいいです。
 
以上２冊があれば最低限いい感じのWebデザインをするために必要なスキルは身に付くと思います。

③素材の入手先を知る

素材サイトは有料、無料のものがありますが、無料で済むなら無料がいいという方が多いと思うので、無料サイトを紹介します。
もちろんですが、有料サイトの方が素材のクオリティは高いです。

頻繁に使用する５つの素材サイト

アイコン素材①（iconfinder）
アイコン素材②(nounproject)
いろいろ揃ってる素材サイト(9search)
ハイクオリティな素材が色々揃っている素材サイト(elemis)
写真を中心としたハイクオリティな素材が多数あるサイト (Stock.XCHNG)

その他おすすめの、素材ブログやまとめ記事

海外の素材を中心に様々な素材をブログ形式で多数提供している(PHOTOSHOP VIP)
僕のWEB屋人生で見つけたテクスチャ、パターン系の素材サイト全部
以上の素材サイトを知っていればどんなコンセプトのサイトもある程度作れると思います。

まとめ

次回は、「完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 　〜②コーディング編（HTML&CSS）〜」を公開します。
 
Webサイトを作れるようになるための近道は、まず何か作りたいものを作ってみることだと思います。自分のブログやポートフォリオサイトでも、友達のお店のWebサイトでも何でもいいです。
 
今回、また今後も紹介していく本や記事で最低限の知識を身につけた後は早速何かを作ってみてください。
そして紹介したデザインの法則などを参考にしつつ、始めは自分の作りたいWebサイトに近いサイトを見つけて、それを真似て作ってみてください。
検索エンジンで「Web デザイン　（まとめ）」などと検索すると、良デザインのWebサイトを集めたギャラリーサイトがたくさん見つかるので、その中から参考にするサイトを見つけてください。
 
完全に真似ると著作権の問題でまずいことになりますが、配色やレイアウトを真似ることは全然問題ないです。
そして真似るときは単に何も考えずに真似るのではなくて、「なぜこのデザインは美しいのか？」について常に考えるようにしてみてください。
 
いいデザイン、美しいデザインには必ず理由があります。
その理由を見つける癖を付けて、たくさんいい作品をみて、いい作品を真似ていく内に、デザインの引き出しが増えてデザインが上達すると思います。