1ヶ月である程度のWebデザインができるようになった独学勉強法を書いてみる2015-06-231ヶ月である程度のWebデザインができるようになった独学勉強法を書いてみるWeb制作スポンサーリンク最近はてなブログのカスタマイズ記事ばかり投稿しているゆきひーです。4月ぐらいまでは「HTMLって何?」ってレベルだったのですが、この数ヶ月でいろいろと学んできて、素人ではあるもののレスポンシブデザインぐらいまでなら作れるようになりました。Spoofer気になるデザインを見つけたらEvernoteに!力を一気に伸ばしたいならCodeCampまとめjQueryの勉強法(続き)Web制作に関する記事カスタマイズまとめ記事Webデザインをある程度できるようになるためのステップ実際には右往左往しながらやったのですが、とりあえず行ったことを4つのステップにまとめてみます。「Progate」で作りながら学ぶ完全なる初心者は、書籍を参考にしていくよりもパソコン上で無料で学べる「Progate」を利用することをオススメします。Progate東大の大学生が作っているそうで、現在も少しずつ更新がされています。最初はこれの「HTML&CSS」の基礎編・応用編をクリアしてしまいましょう。こいつをやるだけでコードを書く基本的なことは体にスッと入ります。「ドットインストール」と比較されるので、それぞれのメリット・デメリットなんかを簡単に書くとProgate自分で実際にコードを打ちながら練習していく(最終的には上に貼ったProgateの画面に近いものができる)サポートは充実している一回一回は短いが、全部やるとそれなりに時間はかかるドットインストール3分程度の動画を見るだけ端的にまとめてくれているため、短時間で一気に学べる基本見ているのみこれらが大まかな特徴となります。結論からいうと両方やると良いです。先にProgateから行った方が慎重に進められますし、コードの基本構造などを嫌でも体に染み付かせることができます。言われるがままにコードを書いていくだけですが、綺麗なデザインが完成されていくのを見て「ああ、こうやって作っていくんだ...」と感動しましょう。先ほども言ったように、ドットインストールもやった方が良いです。ドットインストールこちらもHTMLとCSSのみで良いです。「Progate」で出てこないコードの確認がメインの目的になります。ドットインストールは3分動画で内容も非常に簡潔にまとめてくれているため、初めて学んでいくというよりは総復習という使い方のが効率が良いように思います。実際Progateだけで定着できていなかった部分も思い出すことができます。Progateは実際に作りながらのスタイルなので、使われていないタグがあったりします。いったタグをこちらで確認でき、どんなふうに使うのかも解説があるので、両方見て学んでおく方が良いと思います。書籍を数冊読んでできることを確認するこのステップは飛ばしても良いですが、やっておくと応用力が高まります。Webデザインに関する書籍は良書が多いのですが、十分な説明がなかったりするので、この段階まで買わない方が無難です。厚いものが多いので、流し読みしてできることを確認するという使い方をメインにしています。僕自身いろいろと買ったので紹介してみます。見る結論から言うとこれが超オススメです。内容も信頼できますし、ステップアップ方式で実際に作りながら進めていきます。上までのを終了するならこの本の解説で十分読むことができ、ストレスなく進められます。厚いので全てを行う必要はないです。僕は半分くらい実践した後、あとは何ができるのかを確認するために読みました。何ができて何ができないかを把握しておくことは重要で、後でつまづいたときも良く見返します。見るこちらは上のより応用的で実践的です。ガチでやる人はこちらに繋げて学ぶが正統派なのだと思いますが、趣味でやる分にはいいかなと。レスポンシブデザインなんかも詳しく書いてます。読んでフムフムといった使い方。見るWordPressをちょっと前まで運営してたんです。するとPHPの知識も含めて必要だったので購入しました。そちらのPVが全く上がらなかったので閉鎖すると同時にこれらの本も不要に...。48回この商品を含むブログを見る友人にホームページ作ってよと言われたときに、サンプル集があると楽だなと思って購入しました。非常に参考になるデザインばかりで、コードも載っているのでわりと重宝しています。見るこの本はデザイナーでない人が、最低限のデザインを学ぶための本です。漠然としたデザインのルールを言語化して体系化してくれているため、この本を読み実践すればデザインが悪くなることはないです。売れている本で、実際読んでかなり手ごたえを感じることができました。実際に自分のブログに応用してみるここまでくれば、かなりのカスタマイズができるようになっています。なんでもそうですが、目的があるのと無いのとでは大きくモチベーションが違います。僕も急ピッチで学べたのは「自分のブログをデザインしたい!」という思いがあったからで、ブログが無かったら普通にやってないです。いじっていじっていじり倒します。いろんなサイトや本を参考にしながらいじいじ。改良点が見つかったらいじいじ。思う存分、ブログを改造していきます!その他Webデザインを効率よく学ぶコツその他効率よく学べるコツのようなものを書いていきます。Webデザイン系ブログをFeedlyで定期購読する結構多くのブログがあり、記事だけでなくそのブログ自体のデザインが非常に参考になります。いくつかオススメを紹介します。liginc.co.jpいきなり投げやりですが、上の記事の中の10個は参考になる可能性大なので購読しておいた方が良いです。ferret-plus.comは登録しておくことをおすすめします。クロームの拡張ツール本業の方はもっと本格的なものを使っているのでしょう。僕自身が使っているクロームのツールを紹介します。クロームのディベロッパーツール拡張ツールではないですが、これが使えるのと使えないのではかなり作業効率が変わってきます。非常にやっかいですが、まとまった時間をつくって使い方をマスターすることをオススメします。クロームの右クリックで一番下に「要素の検証」とあるのでそこを押すとこんな感じになります。一見するとかなり難しそうですが、頑張って使えるようにした方が良いです。これが分かると、デザインの崩れの原因や改良点などがすぐに見つけられますし、スマホ画面の確認もできます。人のブログのも見れるので、「あ、この文字の書体いいな!」とか「この構造、どうやってるんだろう?」といったのも簡単に暴くことができます。ドヤ顔でカスタマイズ記事にすれば良いわけですよw。Eyedropperこの色って何色なんだろ?と思ったときに使えるクロームの拡張ツールです。「Yukihyのヘッダーの色イカす!何色なんだ?」と思ったら下の図のようにマウスを合わせるだけで色のコードがわかります。マウスが写ってないので変に見えますが...。これを使えば「ソーシャルボタンの影、何色にすればいいんだろう?」とかいちいち悩まなくても、要は他のサイトからパクってしまえばいいんです。Testブラウザのサイズを一瞬で変えてくれる拡張機能。「このブラウザ幅だとどうみえるんだろう?」って悩まなくともワンタッチでいけます。Spoofer僕は正直あんまり気にしていないのですが、ブラウザによって見え方が違ったりします。CSSも反影されるブラウザとされないのがあるので、どのブラウザでどのように見えるのかを確認する必要があります。いちいち全部のでやるのは面倒なので、この拡張機能で一気に確認しましょう。以下のようにさまざまなブラウザで見ることができます。過去のものにも対応しているので本当便利です。以上が拡張機能になります。画像編集とかも本格的になるとAdobeを使うのだと思いますが、お金がかかりますからね汗。「Skitch」で十分足りてますしどうしようか悩み中です...。気になるデザインを見つけたらEvernoteに!上までに長々と書きましたが、気になるデザインを見つけたらとにかくevernoteでクリップしてそのまま保存してます。落ち着いたら上にあげたディベロッパーツールでフムフムと見るか、そのまま放置してしまうか。蓄積が大事だと思うので、気になるものを見つけたらガンガンクリップしていきます。ドヤ顔でいろいろ記事書いていますが9割がパクリですからね。力を一気に伸ばしたいならCodeCampCodeCamp上に書いたものは独学による勉強法なのですが、あくまで0を1にするための方法。最初からプロの技を身に付けようと考えている方は、スクールに行くよりオンラインで学ぶことができるCodeCampをオススメします(無料部分でもかなり学べます)。何より安く、効率は段違いです。まとめ僕のはじめのころのカスタマイズ記事を見ていただけると分かりますが、最初は全く分かりませんでした(下に貼ったリンクから過去記事を辿ると、成長過程が分かります笑)。分かると芋ずる式に見えてきて、かなりのカスタマイズが出来るようになります。かじってみることをオススメします!良いツールもありますし。14:20関連記事2015-10-08短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみるHTML、CSSの勉強法を以前書きました。この記事...2015-08-04当ブログで行ってきたはてなブログデザインカスタマイズまとめ!PR:はてなブログのテーマ「Naked」を作成しました!デフォルト...2015-07-20Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました関連記事の表記に再びMilliardの関連記事プラグインを使い始め...2015-06-28はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です7/7追記:重大な不具合を修正しました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Life引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。