独学で学んできたWEBクリエイターだったけど、初心者に役立つサイトと学習方法を教える

2016年6月18日tool, WEB制作

今日のはてぶチェックで上がっていた記事に影響受けて書いてみました。
紹介されている情報と被らないように書いてみたので、下記もチェックしてみてくださいな。

なるべく【学んでいく】というのを趣旨で書いたので、コピペだけでサイトが作れる様になる的なサービスとかサイトとかは紹介していない。(便利なんだけどね)

一応タイトルは【WEBクリエイターだったけど・・・】となっていますが、現在も副業でサイト制作したりしています。常に勉強中。一応リアルで初心者に教えたりしてサイト作れるようになった人も居るので、参考になればと思います。

上記記事で挙げられているサイトは確かに初心者に役立ちそうなんだけど、全くIT系の知識が無い人間には、恐らくwordpressの導入なんかで躓きそうな気がするが、挑戦するのはいい事だと思う。ドットインストールは分かりやすいと思うので見ておくべき。

最近クソみたいなデザインとグッチャグチャのソースコード書いてる。ミーハー丸出しアフィサイト

これに憤慨してるのはよくわからんが、公開・配布されているテンプレートをほぼそのまま流用orちょびっと改変して使っているとかかなぁ?アフィサイトだけじゃなく中小企業のサイトなんかにはそういうのが多かったりする。テンプレコードそのままのやつとか。自社開発のテンプレートじゃなく他社が無料配布してる物で画像配置しただけとかで商売するとかどうなん?とか思う。そういうサイトが増えているという所に危惧する。

そんな訳で、初心者がWEB制作をするに当たって学習にも良く、役立つサイトを紹介していきたいと思います。

スポンサーリンク

HTMLとCSSを理解する

まずはHTMLとCSSを理解する事から全てが始まる。
理解するにはとにかく手を動かす必要がある。

HTMLもCSSもPHPもjava scriptもMySQLもコードを打つことで覚えていく。
(その方が覚えやすい)

HTMLとCSSを覚える段階として、辞書代わりに準備するのは以下のサイト。

恐らく初めて見る方は、このページを開いた時点でげんなりすると思うが、コードを打っていればそれぞれのタグやプロパティなどの名前や動作、役割、仕様など勝手に暗記されていく。

無料で使えるツールの準備

メモ帳でもHTMLファイルやCSSファイルは作れるが、操作性が悪いの一言に尽きる。かといってAdobe Dreamweaver等を導入するにしても月額料金が掛かってくる。無料で使える高機能なアプリケーションもあるので、学び始めはそちらで代用して学習し、収益性のあるサイトを作った時や、就職に向けてのポートフォリオサイトを作る時なんかに導入したらいいと思う。

オススメのテキストエディタ

オススメのテキストエディタはSublime Text – Downloadだ。様々なプラグインがあり、拡張性は抜群。バージョン3もあるのだけど、3には無いプラグインなどもあるので、私はバージョン2のまま使い続けている。

Sublime Textを使うならEmmetは必ず入れておくべき。
使い方は以下を参考に。

Emmetの導入方法

【HTML編】初心者向けEmmetの使い方

【CSS編】初心者向けEmmetの書き方

他にも無料で使える高機能なエディタはたくさんあるので、自分に合ったものを使ってみるのがいいと思う。好みは人それぞれですし。

その他の主なテキストエディタ
■windows向け無料
サクラエディタ
TeraPad
Notepad++

■windows向け有料
秀丸エディタ(有料)

■Mac向け無料
mi – テキストエディタ
CotEditor -Text Editor for OS X

オススメのフォトレタッチソフト

Adobe Creative Cloudも月額2180円だからそんなにお金は掛からないが、お金をかけずに学ぶならGIMPを導入するのがいいかもしれない。

ダウンロードから基本的な使い方がまとめられているのが以下のサイト。

用途はバナー作ったり背景作ったり、写真修正・加工したり。
機能と操作性もphotoshopに似たところがあるので、これで慣れておくといいかも。

photoshopを使うなら以前書いた記事を参考に。

超絶スキルアップ間違いなし!国内・海外のphotoshopのチュートリアルブログとサイト13選

写真素材等は以下のところを利用するといい。

国内・海外の無料写真素材サイトまとめ

ただポートフォリオ等制作する時は、なるべく有料の物か自分で用意したクオリティの高い素材を使った方がいい。これは”質”と”印象”の話。

写真素材・ロイヤリティフリーストックフォト – PIXTA(ピクスタ)とかだとWEB用途だと結構安いのでオススメ。

印刷物への対応

何気にWEBデザイナーやWEBクリエイターの仕事でも、会社によっては印刷物の制作もしなければいけない所もある。(小さいところだと特に)

余裕があれば・・だが、印刷関連の知識とツールの準備もしておくといいかもしれない。

学ぶのにも実際使用するのもADOBE Illustrator一拓だ。

・仕事で使うに当たって

ローカル開発環境を用意する

まだ制作段階に入らないの?

って準備は大切ですよ。
ゲームとかだと説明書読まなくても実際プレイして操作方法とかコツとか覚えていく事は出来るけど、WEB制作は別物です。

実際XAMPP等のローカル環境で作ってからテストして公開の流れを身につけておかないと大変なことになる。あとこういった環境を整えておくとPHPやMySQL、Rubyなど等、サーバーサイドのプログラミングをして使いたい時にテストしやすいので準備すべき。

WindowsだとXAMPP
MacだとMAMP

それぞれをインストールしやがれください。

導入方法は下記サイトを参考に。

https://www.youtube.com/watch?v=xpudzlIsCJs

実際にコードを打ってサイトを作る

準備が整ったら、WebデザインレシピさんのこれからWebサイトの制作をしたいけど、何から勉強したらいいの?っていう人のためのガイドを一通りざっと目を通してみるといい。

実際の学習方法としては、一番個人的に効果があったと思うのは、自分が【凄いデザインのサイト】だと思うサイトのソースを見て、分からない部分は調べ、一行ずつ理解していく手法。

このサイトのこの部分どうやってやってるんだろう?
なんでわざわざここにborder 1px rgba(0,0,0,0.3)入れてるんだろう?
何故CSSのフォントサイズ指定がpxじゃなくemを使っているんだろう?とか

こんな好奇心が学んでいくに当たって大事な部分。

例えばこのブログのタイトルロゴのアニメーションなんかもどうやっているのか?(簡単なCSS3とjQueryを使っています。)これもソースを見れば分かります。ソースを見て分からない部分があれば一行ごと、もしくは単語区切りで調べたり、メソッドやプロパティ毎に調べる。

そして真似してコードを書いてサンプルを作る。
【あ~なるほど、ここがこうなってこういう風になるんだな!】
こうして理解して行く事でひとつひとつのテクニックやコードの書き方・意味などを確実に覚えていく事ができます。

サイト丸ごとをトレースして、コードを手打ちで打っていくのも良く知られた学習方法。

サイトを表示した状態でキーボードの【CTRL】+【U】か【F12】キーを押してみてください。
【F12】キーはどのブラウザでもデペロッパーツール(開発者向けツール)の機能があり、ページのソースやCSSを見たり、弄ったり、PC、スマホ、ipad等の端末別の表示や、ディスプレイ解像度別の表示確認、javascriptの実行やデバッグなど様々な事が出来る。

使いやすいのはgoogle chromeのデペロッパーツール。

ソースを見れば、どんなHTML構造でどんなjava script(jQueryプラグインとか)を使っているのか丸分かりです。

ここまでで【ソース】や【メソッド】【プロパティ】【java script】や【jQuery】等の、色々な単語が出てきましたが、初心者の方なら何のこっちゃかわからないはずです。そんな本当にこれから学んで行こうという方には以下のサイトをオススメします。

ほんっとにはじめてのHTML5:INDEX

このサイト(ブログですが)ほんっとに右も左も分からない初心者向けに丁寧に解説されている記事ばかりで、順を追って読んでコードを読み、書いていくとWEBサイトを作る基本の力が身につきます。

HTML・CSSを綺麗に書く癖をつける

次に読みやすく綺麗なコードを書く為の癖をつけておくといいでしょう。
(意外と重要)

コーディングのルールを決めておくと、読みやすく美しくメンテナンス性のいいコードを書きやすくなります。(クソコード書きやがってとも言われなくなります)

コーディング規約については下記サイトを参考にしてみてください。

あなたのコーディング、大丈夫? コーディング規約 HTML+CSS編 | Web制作会社スタイル
こんなHTMLとCSSのコーディング規約で書きたい – Qiita

java script(jQuery)を使い動きのあるサイトを作る

HTML・CSSから学んだ、初心者の方にはjava scriptから入るよりもjQueryライブラリを使って、jQueryから学んでいった方がよりHTMLとCSSの理解が深まり、更にはjQueryの習得にも繋がると思ったのでお勧めします。

最初は自分が実装したい用途のサンプルコードをググるなりして、見つけ、コードを見て分らない所があればリファレンスサイトを見るなりして勉強する。

jQuery API Documentation
■Qrefy – jQuery日本語リファレンス
semooh plugin sample site

jQueryの使い方に関してある程度の知識が出来たらjQueryPluginを使ってみよう。
以下はjQueryPluginを大量に紹介しているサイトです。

WEBデザインについて学ぶ

ここまででHTML、CSS、java script(jQueryだけど)の基礎力は身についたと思います。

但しここまではWEB制作においては基本中の基本。
ここからデザインについての理論や知識を学んでおくことをオススメします。

WEBデザインという物は【センス】だ!と思われている方が多いですが、それは1割正解で9割間違っています。

WEBデザインは蓄積された様々な理論と経験、知識によって作られるものである。

例えば、WEBページでよく見かける【はい】【いいえ】のボタン。
これは何故?【はい】が左に配置され、【いいえ】が右に配置されているのか?
もしくは【はい】が必ず上で【いいえ】が下なのか?

このことについて考えた事があるでしょうか?

もし【はい】が下で【いいえ】が上に配置されていると、訪問者は違和感を感じるでしょう。

この小さな事ですら科学的な根拠と統計に基づいて、今の形に収まっているのです。
そういったデザインに関する知識を身につけるのに役立つ記事を紹介します。

・色について
WEBマーケティングにおける色彩心理学―使って便利なサイト4選大公開
デザイナーだから考える。青色が与える27の効果と7つの活用例
配色の基本。メイン・サブ・アクセントカラーを極める!

・デザインの基本
What’s Design
ウェブデザインの8つの法則 | SEO Japan
【追記あり】【初心者】デザインってなんだ?「デザイン」の概念と、4つの基本原則を知ろう | EXP – クリエイティブな事をはじめた(い)全ての人達へ
新人デザイナーに教えたいWebデザインの基本原則【整列】
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | Web制作ならWebNAUT
ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ

・ページ・バナーレイアウトなど
勝てるバナーレイアウト20選!│レイアウトに悩んだ時の虎の巻
良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと | 秋田県webデザイナー【weblog】|秋田HP制作・webサイト制作
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ

・覚えておくと良い知識
【絶対に知っておかなきゃいけない】紙媒体とWEBデザインにおけるデザイン作法の違いについて #デザイン#web | 名古屋@WEBデザイナーの憂鬱
脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法 | 株式会社LIG
神は細部に宿る | SEO Japan
WEBマーケティングに役立つ認知・行動心理学 – NAVER まとめ
アナタはどの部分に目がいきますか?デザインの基本:視線誘導や視認性について。(エロいようで真面目な話) / Maka-Veli .com
写真がもっと上手くなる!構図の基本テクニック12選 | 株式会社LIG
ズルいデザイン(1):少ない手間と知識でそれなりに見せる、ズルいデザインテクニック (1/2) – @IT
WEBサイト心理学|視線解析|designaholic -Creative Column-

結構膨大な数になりましたが、全部読めばWEBデザインについての基本知識は身につくかと思います。

ユーザビリティとアクセシビリティを学ぶ

・ユーザビリティとは

ソフトウェアやWebサイトの「使いやすさ」のこと。様々な機能になるべく簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じないことなどが、優れたユーザビリティにつながる。

引用~ユーザビリティとは 【 usability 】 〔 ユーザビリティー 〕 – 意味/解説/説明/定義 : IT用語辞典

・アクセシビリティとは

情報やサービス、ソフトウェアなどが、どの程度広汎な人に利用可能であるかをあらわす語。特に、高齢者や障害者などハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多い。”accessibility” とは「近づきやすさ」「接近容易性」といった意味の英単語である。

特に、Webページについての「利用のしやすさ」を「Webアクセシビリティ」という。これについては「WCAG」(Web Content Accessibility Guidelines)という指針がW3Cによって提唱されている。画像や音声などには代替テキストによる注釈をつける、すべての要素をキーボードで指定できるようにする、情報内容と構造、および表現を分離できるようにするなどの方針が定められている。

引用~アクセシビリティとは 【 accessibility 】 – 意味/解説/説明/定義 : IT用語辞典

特にWEBデザインを学んだばかりの人に軽視されがちなのがこの二つ。目的のページへのアクセス方法が分かりにくかったり、フォントサイズが小さすぎたり、画像にalt属性を入れていなかったり、サイトを開いた瞬間に動画が自動再生されるor音楽がいきなり鳴る、文字色と背景色が非常に見づらい組み合わせになっていたりするページがまだ生存している。

SEOを学ぶ

SEOとは検索エンジン最適化( Search Engine Optimization)の略で、WEBを良く見ている人ならなんとなく聴いたことや見たことがあると思います。簡単に言うと検索サイト(googleやyahoo等)で、特定のキーワードで検索結果の上位に表示させサイトへの訪問者を増やそうっていう概念です。

アフィリエイト目的でも趣味目的でも何でもいいですが、アクセス数を増やして多くの人に見てもらいたいという考えがあるのなら、学んでおくべき。

SEOについては結構色々な方がサイトやブログ等に書いているのですが、間違った情報やスパム紛いの手法を書いてある所も多いので注意が必要です。信頼できる情報源として以下のサイトを紹介します。ここさえしっかりチェックしておけば正しい知識が身につくと思います。

Moz Blog – SEO and Inbound Marketing Blog – Moz
日本語で読みたい場合は↓
Moz – SEOとインバウンドマーケティングの実践情報 コーナーの記事一覧 | Web担当者Forum

第一線で活躍中のプロから学ぶ

WEB業界の第一線で活躍するプロの動画や生放送での講座を受けられるサイト。
初心者から上級者まで幅広い層まで満足いく納得の講座がたくさんあります。

また他のサイトでは中々得られない情報として、注目なのが【未経験からWebデザイナーに!先輩たちが教える現場のハナシ】の企画。実際のプロが経験している体験談なども交えての仕事の話もあるので、業界未体験の人の不安や疑問に対しても答えが見つかるかと思います。

無料で学べるshcoo
無料で学べるshcoo

デザイン学部とプログラミング学部等複数ありますが、どれも観覧可能です。

プログラミング学部
プログラミング学部

また、過去の生放送を録画したもの等を見る際は、月額980円のプレミアム会員(学生)になるとすべての録画授業が見放題になります。
リアルタイムで生放送を見れる方であれば、無料でも十分かと。

但しこのShcoo、うまい事やっていて、どうしても見たい生放送の講座を同時間帯に被らせてきたりするんですよね。TVのゴールデンタイムみたいな感じ。

動画が嫌いor動画を見る時間が無い場合

私もなんですが、学習系のコンテンツで動画講座とかじ~っとしてじっくり見ることが中々出来ないんですよね。そんな時に役立つのがWEB制作関連のブログやサイトをチェックすることです。

以前にデザイン関係のブックマークを整理した記事があるのでご参考に。。。(数が多すぎて紹介文等を書いていないので、どんな内容を書いてあるサイトか分かりにくいですが、どのブログもWEB制作関連の事を書かれています。)

WEBサイトを公開する方法を知る

ここまでで身につけた知識でサイトを制作すれば、綺麗なWEBサイトが構築出来ると思います。(外観もコード的にも)但しまだ学習する事はあります。

初心者の方に結構ありがちなのがこのWEB上に公開する際に躓くことが多々あります。

カレント・・・?・・・ディレクトリってなに?
独自ドメイン?設定方法?
.htaccessファイル?
レンタルサーバー?共用サーバー?VPSサーバー?専用サーバー?何がいいの?
FTPソフト?

こういった事が壁がある為に、【サーバー契約していざ公開!】となった時に、躓く方が多いようです。そういう自分も初めての時は、躓いて検索しまくった思い出がある。大抵はレンタルサーバーのマニュアルをちゃんと読めば、問題は無い・・はず。

壁にぶち当たったときは、下記サイトを見れば大体解決されると思う。

個人的にオススメのFTPソフトはFileZilla プロジェクト日本語トップページ – SourceForge.JP、サーバーはさくらインターネット|サーバーホスティングサービスがオススメです。

wordpressをメインに使っていきたいならAWS + Nginx + WordPress | 超高速 WordPress AMI 網元がオススメ。

他にもレンタルサーバーはいっぱいあるので調べて予算と相談し用途別にあったところを選ぶのがいいかも。(但しロリポップはオススメしない)

wordpressを学ぶ

wordpressでサイト制作に取り掛かるなら、ネタワンさんのサイトを見る事をオススメする。初心者向けに丁寧に解説されているのでこれから始める人は必読。

WordPress使い方ガイド – 超初心者向け – ネタワン

ちなみにwordpressの凄いところは、HTML・CSSが全く分からなくても、検索力がある人ならテーマの選定とコピペだけでも結構良い感じのWEBサイトが作れたりする。

wordpressを使うメリットとしては
・仕事の幅が広がる(既存サイトのwordpress化とかの案件も多かったりする)
・管理・更新が楽
・新規サイトの開発が楽に行える
・カスタマイズしている内にHTML、CSS、PHP等の知識が身についてくる。
・WEB上に情報があふれているので、疑問も問題も検索すれば直ちに解決しやすい。
・公式フォーラムのサポートが充実している。

但し危惧すべき点は、pluginやテーマ頼りで居ると全然自分の学習にはならない。自作プラグインや自作テーマなどを作ることを目標に使っていけば、かなりの学習になると思う。

いい文章の書き方・ライティング・キャッチコピーを学ぶ

WEBサイトを構成する要素の大部分は文章。

という訳で、言葉・文章は非常に重要になってきます。

とても斬新で無駄の無い洗練されたショッピングサイトで、【うんこしたい】とデカデカと書いてあったら、どうします?どう思います?私ならうんこしたくなります。いや、折角のデザインが台無しですね。今の例はわかりにくいと思いますが、高齢者向けのサイトで、書かれている文章が2ちゃん用語やギャル文字だった時の場合を想定してみたら分かりやすいでしょう。

一言に文章と言っても、デザインと調和する文章の文字列、余白、読みやすい文章。テキストのサイズ。最適な見出し。分かりやすい表現方法。選定したターゲット層に対する文章表現。色々とあるわけです。

SEO対策・ユーザーの離脱率・再訪問率・シェア率・滞在時間などにも大きく絡んでくる部分なので、WEBデザインと関係無いと思われがちですが、しっかり学んでおくといいでしょう。

文章を学ぶのに最適な記事をまとめてみました。

一流ライターが知っている、文章を相手に読ませる4つのコツ | ライフハッカー[日本版]
Webライティングで誰でも簡単に読みやすい文章を書く為の3つのコツ
わかりやすい文章を書くために参考にした本10冊 – 読書で本から学ぶブログ【書評・感想】
文章の書き方をプロ並みにする話題の文章作成無料ツール10選
文章の書き方で4つのポイントを守ったら、1記事で1日500人以上の方に読まれるようになった

デザインに関係する文章と文字について
文章の作り方|伝わるデザイン
ウェブで美しい文字組みを表現する。-ウェブフォントの文字詰め・文字組み- | das. – 株式会社デジタル・アド・サービス

初心者からその先へ

デザインの原則や基本知識を身につけ、wordpressの自作プラグインや自作テーマ作成、jQueryプラグインの作成等が出来るようになってきた頃には、初心者から卒業する時期だと思います。

これまでには、殆どWEB上で学習できる項目でしたが、初心者から更に上を目指すなら、【本を買え!】です。今は技術系の本もありふれているのでamazonのレビューとか見て購入するのがいいと思います。どの言語にも言える事ですが、これだけは買っとけ!というものがあります。

オライリー本は絶対買っておけ!

結構分厚くて、値段もそれなりに高い、動物が表紙になってる本です。

O’Reilly Japan – Homeでどんな本が出版されているのか調べて、欲しいものがあればamazonで検索してレビュー見て判断すれば良い。

最低限このサイトは毎日チェックしておけ

WEB業界のトレンドとか新技術とか情報とかの流れは速く、3ヶ月も何もしないで居るとあっという間に置いてきぼり、浦島太郎みたいな事になったりします。(jQueryのバージョンがいつの間にか1.3から2.1になっていたとか、スマホからのWEBサイトを見るユーザーがPCユーザーを追い抜いたりとか、グッドノウハウがバッドノウハウになっていたりとか・・・)

サイト制作をするなら必ずチェックしておきたいサイトをご紹介。

はてなブックマーク
WEB関連の最新情報が掴みやすい。いい情報が多数見つかる。
グノシーなんかに掲載されるニュースなんかも、1~2日前にはてぶでホットエントリーに入ったものが多かったりする。

Web担当者Forum
WEB業界にいる人間なら必ず見ておくべし。ここで手に入る情報は宝だ。

Codrops
海外のクリエイターによる高品質なチュートリアルやコラムが多数掲載されている。
ここは英語が分からなくても見るべしっ!凄いからっ!DEMO見るだけでもインスピレーション沸いてくるっ!

あとがき

ここまで書いたけど結構な情報量になってしまったので、抜けているところとかあるかもしれない。(初心者に対してだったらこれは必要だろうがっ!)っていうのが。思い出したり、気がついたら加筆する。

ツッコミどころが色々あるかもしれないが、専門とか学校に行かなくても、色盲でも、センスが無くても、やる気次第では独学でも独立したり、サイト制作の仕事が出来るレベルにはなれるので、努力あるのみ。

PS.本文でうんことか書いてるけど【クソ記事やな】とか言わないでね。

この記事が気に入ったら
『いいね』しよう!


PAGE TOP