こんにちは！はまちょうです。
ブログを運営するにあたって1番大変なのは、記事を書くことです。そして、個人的にそれと同じくらい苦戦しているのがブログのデザインでした。
デザインが自分の思い通りにいかないせいでどんどん時間を消費してしまうのは、なかなかグッとくるものがありますよね。。。
そこで、GWというチャンスを利用して、がっつりブログのデザイン方法について勉強して、自分のブログにその成果を発揮してみました！
ブログを始めたての方であれば、僕と同じくデザインが思い通りにいかなくて悩んでいる人も多いのではないでしょうか。
この記事では、ブログのデザイン方法について全くの初心者である僕が、1週間勉強してどこまで出来るようになったのかをご紹介します！
「初心者でも1週間勉強すればこれくらいできるようになるのかー」くらいの軽い気持ちでご覧ください！
逆に「1週間がっつり勉強してこの程度かー」と思うかもしれません。。笑
ブログデザインの勉強方法と勉強時間
ブログデザインといっても、今回学んだのは仕組みの部分です。いわゆるHTMLやCSS、JavaScript等を勉強しました。
学ぶために使用したのは、ProgateというWEBサービス。ここでは、様々なプログラミング言語を幅広く学習することが出来ます。
プログラミング言語は、初心者が挫折しやすいと言われていますが、このProgateというサイトではイラストを使いながらかなり易しく教えてくれるのでおすすめです。
基本的な部分については無料で学習出来るので、興味があればググってお試しください。
肝心の勉強時間ですが、全部で50時間程度です。GWだったので、かなり集中して時間を取ることが出来ました。
仕事をやりながら同じボリュームをこなすには、1ヵ月くらいはかかっていたと思います。
劇的？！Bifore & After
まずはヘッダーの部分からです。Biforeから紹介します。
Bifore
この部分で改善したかったところは以下の通り。
- ブログタイトル（ぎりぎり…）が変なところで改行されている
- グローバルメニューにAdSenceの広告がめり込んでいる
- 中央部の「おすすめの記事」が左に寄っている
- デザインが致命的にダサい
上記を改善したAfterがこちら
After
改善したところ
- ブログタイトルをキリのいいところで改行
- グローバルメニューと広告を分けた
- 中央部の「おすすめの記事」を中央にもってきて、文字を大きめにした
- 黒ばかりで重たい印象だったデザインを改善
また、完全に自己満足ですが下記の画像のように、おすすめ記事にカーソルを合わせると色が変わるようにしてみました。
ページが重くなるだけかもしれませんが、勉強したことを無駄に生かしたくなってついついやってしましました。。笑
※画像クリックで動きます
続いて、サイドバーです。サイドバーのデザインについては、もともとそこまでこだわりがありませんでした。唯一改善したいと思っていたのがSNSのボタン部分です。
左がBiforeで右がAfterです。
下記のように改善してみました。
- 各ボタンの説明が文字が小さかったので、文字サイズを拡大
- 角を取って丸みを帯びた“ボタン風”のデザインに変更
- ボタンの影を付けて立体感を出す
こちらも自己満足で下記のようなアニメーションを付けています。
※画像クリックで動きます
1週間勉強して感じたこと
ブログのデザイン方法を勉強する前までは、いかにデザインを紹介しているサイトからコピペで持ってくるかを考えていました。
実際に、僕のサイトのデザインのほとんどが、他のサイトで紹介されていたものをコピペで持ってきたものです。
ご覧のとおり、状況はあまり変わっていません。
しかし、デザインの方法を勉強することにより、今までのような「まるまるコピペ」ではなく、少しずつ自分の色を出せるようになってきたことは確かです。
“勉強”というとなかなか手がつきにくいですが、このように自分のブログにすぐに生かすことが出来るのでとてもやりがいがありました。
蛇足ではありますが、ここで紹介したブログのデザイン以外でも、記事の中でも今回勉強した内容が生きていたりします。
例えば、サイドバーのデザインを紹介するために、写真を左右に並べて配置して説明した部分などです。
また、自分で1から作るのが難しいものでも、概念さえ勉強していれば、意外と簡単に導入できたりします。
こちらも例を挙げると、説明の途中で出てきたGIF画像の動きをクリックで開始/停止を切り替える部分などがそれにあたります。
GIF画像は容量が軽いまま動画のように説明できて便利であるものの、通常のままだとページを開いている間は動きっぱなしになって、かなりうっとうしくなってしまいます。
この動作自体は単純ですが、裏で記述されているコードはまだまだ僕にとっては難しいものです。それでも今回勉強した基礎知識で導入することが出来ました。
おわりに
今回はGWというチャンスがあったのでかなり集中して時間を取ることが出来ました。時間の関係上、まだ活かしきれていない部分が多分にあるので、今後がとても楽しみです！
もっともっと勉強して、ゆくゆくは人様のブログデザインの相談にのれるレベルまで到達出来たらいいなーと思っています。
「ゆくゆくは」といったものの、今回の記事で紹介した程度の内容であれば簡単に出来るので、もし困っている方がいれば、お力になれるかもしません。twitterのDMなりコメントなりで連絡ください！
「時間がないけど、最低限の知識だけは身に付けたい」という方であれば、先ほど紹介したサイトの無料版を5時間程度やるだけで、はてなブログの記事編集に初めから備わっている機能については理解できると思います。
デザインとは関係ありませんが、記事作成を効率化したいという方であれば、以下の記事もお勧めです！
以上です！ここまで読んでいただきありがとうございました！