最近はてなブログのカスタマイズ記事ばかり投稿しているゆきひーです。
４月ぐらいまでは「HTMLって何？」ってレベルだったのですが、この数ヶ月でいろいろと学んできて、素人ではあるもののレスポンシブデザインぐらいまでなら作れるようになりました。
実際に集中して学んだのは１ヶ月ぐらいですが、趣味程度には十分だと思うので、どのようにして学んだのかをまとめてみたいと思います！
Webデザインをある程度できるようになるためのステップ
実際には右往左往しながらやったのですが、とりあえず行ったことを４つのステップにまとめてみます。
Step1 「Progate」で作りながら学ぶ
完全なる初心者は、書籍を参考にしていくよりもパソコン上で無料で学べる「Progate」を利用することをオススメします。
東大の大学生が作っているそうで、現在も少しずつ更新がされています。最初はこれの「HTML&CSS」の基礎編・応用編をクリアしてしまいましょう。
こいつをやるだけでコードを書く基本的なことは体にスッと入ります。
よく「ドットインストール」と比較されるので、それぞれのメリット・デメリットなんかを簡単に書くと
Progate
- 自分で実際にコードを打ちながら練習していく（最終的には上に貼ったProgateの画面に近いものができる）
- サポートは充実している
- 一回一回は短いが、全部やるとそれなりに時間はかかる
ドットインストール
- ３分程度の動画を見るだけ
- 端的にまとめてくれているため、短時間で一気に学べる
- 基本見ているのみ
これらが大まかな特徴となります。
で、結論からいうと両方やると良いです。ただ先にProgateから行った方が慎重に進められますし、コードの基本構造などを嫌でも体に染み付かせることができます。
言われるがままにコードを書いていくだけですが、綺麗なデザインが完成されていくのを見て「ああ、こうやって作っていくんだ…」と感動しましょう。
Step2 「ドットインストール」で総復習&補完
先ほども言ったように、ドットインストールもやった方が良いです。
こちらもHTMLとCSSのみで良いです。
素晴らしいサイトでいろいろと使い方はあると思いますが、一回「Progate」でやった後としては、
- コードの総復習
- 「Progate」で出てこないコードの確認
がメインの目的になります。ドットインストールは３分動画で内容も非常に簡潔にまとめてくれているため、初めて学んでいくというよりは総復習という使い方のが効率が良いように思います。
実際Progateだけで定着できていなかった部分も思い出すことができます。
また、Progateは実際に作りながらのスタイルなので、使われていないタグがあったりします。そういったタグをこちらで確認でき、どんなふうに使うのかも解説があるので、両方見て学んでおく方が良いと思います。
Step3 書籍を数冊読んでできることを確認する
このステップは飛ばしても良いですが、やっておくと応用力が高まります。
Webデザインに関する書籍は良書が多いのですが、十分な説明がなかったりするので、この段階まで買わない方が無難です。
また厚いものが多いので、流し読みしてできることを確認するという使い方をメインにしています。
で、僕自身いろいろと買ったので紹介してみます。
結論から言うとこれが超オススメです。内容も信頼できますし、ステップアップ方式で実際に作りながら進めていきます。
上までのを終了するならこの本の解説で十分読むことができ、ストレスなく進められます。
厚いので全てを行う必要はないです。僕は半分くらい実践した後、あとは何ができるのかを確認するために読みました。何ができて何ができないかを把握しておくことは重要で、後でつまづいたときも良く見返します。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (3件) を見る
こちらは上のより応用的で実践的です。ガチでやる人はこちらに繋げて学ぶが正統派なのだと思いますが、趣味でやる分にはいいかなと。レスポンシブデザインなんかも詳しく書いてます。
たまに読んでフムフムといった使い方。
WordPressをちょっと前まで運営してたんです。そうするとPHPの知識も含めて必要だったので購入しました。ただそちらのPVが全く上がらなかったので閉鎖すると同時にこれらの本も不要に…。良書ですよ。
友人にホームページ作ってよと言われたときに、サンプル集があると楽だなと思って購入しました。
非常に参考になるデザインばかりで、コードも載っているのでわりと重宝しています。
![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](https://images-fe.ssl-images-amazon.com/images/I/41nvddaG9BL._SL160_.jpg "ノンデザイナーズ・デザインブック [フルカラー新装増補版]")
- 作者: Robin Williams,吉川典秀
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2008/11/19
- メディア: 単行本（ソフトカバー）
- 購入: 58人 クリック: 1,019回
- この商品を含むブログ (105件) を見る
この本はデザイナーでない人が、最低限のデザインを学ぶための本です。漠然としたデザインのルールを言語化して体系化してくれているため、この本を読み実践すればデザインが悪くなることはないです。
かなり売れている本で、実際読んでかなり手ごたえを感じることができました。
Step4 実際に自分のブログに応用してみる
ここまでくれば、かなりのカスタマイズができるようになっています。
なんでもそうですが、目的があるのと無いのとでは大きくモチベーションが違います。僕も急ピッチで学べたのは「自分のブログをデザインしたい！」という思いがあったからで、ブログが無かったら普通にやってないです。
なのでいじっていじっていじり倒します。いろんなサイトや本を参考にしながらいじいじ。改良点が見つかったらいじいじ。毎日いじいじ。
思う存分、ブログを改造していきます！
その他Webデザインを効率よく学ぶコツ
その他効率よく学べるコツのようなものを書いていきます。
Webデザイン系ブログをFeedlyで定期購読する
結構多くのブログがあり、記事だけでなくそのブログ自体のデザインが非常に参考になります。いくつかオススメを紹介します。
いきなり投げやりですが、上の記事の中の10個は参考になる可能性大なので購読しておいた方が良いです。
それプラス
LIG
と
ferret
は登録しておくことをおすすめします。
クロームの拡張ツール
本業の方はもっと本格的なものを使っているのでしょう。僕自身が使っているクロームのツールを紹介します。
クロームのディベロッパーツール
拡張ツールではないですが、これが使えるのと使えないのではかなり作業効率が変わってきます。非常にやっかいですが、まとまった時間をつくって使い方をマスターすることをオススメします。
クロームの右クリックで一番下に「要素の検証」とあるのでそこを押すとこんな感じになります。
一見するとかなり難しそうですが、頑張って使えるようにした方が良いです。
これが分かると、デザインの崩れの原因や改良点などがすぐに見つけられますし、スマホ画面の確認もできます。
人のブログのも見れるので、「あ、この文字の書体いいな！」とか「この構造、どうやってるんだろう？」といったのも簡単に暴くことができます。
で、ドヤ顔でカスタマイズ記事にすれば良いわけですよw。
Color Pick Eyedropper
この色って何色なんだろ？と思ったときに使えるクロームの拡張ツールです。
例えば、「Yukihyのヘッダーの色イカす！何色なんだ？」と思ったら下の図のようにマウスを合わせるだけで色のコードがわかります。
マウスが写ってないので変に見えますが…。
これを使えば「ソーシャルボタンの影、何色にすればいいんだろう？」とかいちいち悩まなくても、要は他のサイトからパクってしまえばいいんです。
Resolution Test
ブラウザのサイズを一瞬で変えてくれる拡張機能。
「このブラウザ幅だとどうみえるんだろう？」って悩まなくともワンタッチでいけます。
押せば一瞬でそのブラウザ幅に
Chrome UA Spoofer
僕は正直あんまり気にしていないのですが、ブラウザによって見え方が違ったりします。CSSも反影されるブラウザとされないのがあるので、どのブラウザでどのように見えるのかを確認する必要があります。
ただいちいち全部のでやるのは面倒なので、この拡張機能で一気に確認しましょう。
以下のようにさまざまなブラウザで見ることができます。
過去のものにも対応しているので本当便利です。
以上が拡張機能になります。画像編集とかも本格的になるとAdobeを使うのだと思いますが、お金がかかりますからね汗。「Skitch」で十分足りてますしどうしようか悩み中です…。
気になるデザインを見つけたらEvernoteに！
上までに長々と書きましたが、気になるデザインを見つけたらとにかくevernoteでクリップしてそのまま保存してます。で、落ち着いたら上にあげたディベロッパーツールでフムフムと見るか、そのまま放置してしまうか。
とにかく蓄積が大事だと思うので、気になるものを見つけたらガンガンクリップしていきます。
ドヤ顔でいろいろ記事書いていますが９割がパクリですからね。
力を一気に伸ばしたいならCodeCamp
上に書いたものは独学による勉強法なのですが、あくまで０を１にするための方法。
最初からプロの技を身に付けようと考えている方は、スクールに行くよりオンラインで学ぶことができるCodeCampをオススメします（無料部分でもかなり学べます）。何より安く、効率は段違いです。
まとめ
僕のはじめのころのカスタマイズ記事を見ていただけると分かりますが、最初は全く分かりませんでした（下に貼ったリンクから過去記事を辿ると、成長過程が分かります笑）。
ですがちょっとでも分かると芋ずる式に見えてきて、かなりのカスタマイズが出来るようになります。
なのでちょっとでもかじってみることをオススメします！良いツールもありますし。
jQueryの勉強法(続き)
Web制作に関する記事
