ブログを始めたんですけど、なんだかデザインがイマイチで…
でもお金はそんなにかけたくないんですけど、どうしたらいいですか？
それなら自分で出来るようになるのが一番良いかな。
とりあえず挑戦あるのみだよ！
ブログのサイトデザインが自分でも分かるくらいイマイチ…
でも何から手をつければ良いのか分からない…
こんなモヤモヤを抱えたブロガーさんは多いのではないでしょうか。
そこで今回は自分のブログサイトをデザインするためのデザインデータの作り方を解説します。
サイトのデザインデータについて
デザインデータって何？面倒だしいきなりサイトを変えていけばいいじゃん！
という意見もあると思うので、デザインデータを作るメリットからお話しします。
デザインデータを作るメリット
結論から言うと、デザインデータを作る１番の理由は「サイトデザインの質が高くなるから」です。
デザインデータを作れば必ず素晴らしいサイトになるとは言い切れませんが、逆にデザインデータを作らなければ必ずイマイチなサイトになります。
なので面倒でも良いサイトにしたいのであれば作成しておきましょう。
デザインデータの具体的なメリットは以下のようなことが挙げられます。
- 全体的なデザインの統一感を出せる
- 変えるのが簡単なのでデザインを考えるのに便利
- デザインの見本ができるのでサイトへの実装作業が楽になる
全体的なデザインの統一感を出せる
サイトのデザインは１ページではなく、トップページ・記事ページ・一覧ページなど複数のページで考えなくてはいけません。
１ページでもヘッダーとフッター、メインコンテンツとサイドバーなどあらゆるパーツで構成されていますよね。
デザインデータはそれらのデザインを並べて同時に見ることができるので、全体的に統一感を出しやすいです。
変えるのが簡単なのでデザインを考えるのに便利
実際のサイトを変える場合はブログサイトのコードを編集しなければいけないので大変ですが、デザインデータであれば文字や配置、色などを簡単に変えることができるので考えるのに向いています。
いくつかのパターンを作って見比べてみるなんてこともできるので、じっくりと良いものを考えていきたい場合にも役立ちます。
デザインの見本ができるのでサイトへの実装作業が楽になる
デザインデータは完成させれば、サイトの変更後の見本になります。
特にCSSをよく知らない方は調べてコピペで実装していくことになりますが、見本があると具体的に調べることができるので、実装作業がとても楽になること間違いなしです。
ブログサイトデザインデータ作成の準備
デザインデータの必要性が分かったところで作成の体制を整えていきましょう。
デザインが必要なページ
先ほども言ったようにブログは１ページではないので、複数ページで考える必要があります。
サイトによっても変わりますが、基本的なページを記載しておくので自分のブログで必要なページを調べておきましょう。
ブログの基本的なページ
- トップページ
- 記事ページ
- 記事一覧ページ
- 固定ページ
ヘッダーやフッター、サイドバーなど共通パーツがあるので、複数ページといってもそこまで大変ではないと思います。
ブログで一番重要な記事ページを中心にトップページや一覧ページ、必要に応じて固定ページもデザインしていくと良いでしょう。
WordPressブログの場合、ファイル構成を知っておくと便利なので下記の記事も興味があれば読んでみてください。
デザインデータ作成のオススメソフト
デザインソフトなんて使えない！という方は最悪手書きでも良いですが、デザインイメージの段階で具体的にすればするほどサイトへの実装作業が楽になります。
無料で使えるソフトなので、この機会にぜひ挑戦してみてください。
Figma
Webデザインをするためのソフトということもあり、一番オススメです。
CSSを教えてくれたり、サイトのようにプレビューできたりと魅力的な機能が多いので迷ったらFigmaで良いでしょう。
Canva
ポスターやYouTubeのサムネイルなんかがメインなのでWebデザインには使い勝手はイマイチですが、ブログのアイキャッチを作成するのにも使えるので他のメリットがある点が魅力です。
細かいところまで作って検討したいのであれば「Figma」を使った方が良いですが、ザックリと簡単に作りたいだけなら「Canva」でも良いでしょう。
デザインデータの作成サイズ
Webサイトは他のデザインと違い、モニターなど見る人の環境でサイズが変わります。
全てのサイズで美しいデザインは不可能なので、使う人が多い定番サイズで作成しておきましょう。
| デバイス | 推奨サイズ（幅） |
|---|---|
| パソコン | 1920px |
| タブレット | 834px |
| スマホ | 480px |
デザインの高さは決まってないので、パーツを積み重ねてできた合計のサイズになります。
タブレットとスマホの幅は僕が使っているWordPressテーマ「Cocoon」で元々設定されているサイズです。
違うテーマを使っている方はテーマのCSSの一番下の方を見て「＠media screen and ○○px」と記載されている所を見れば分かるので、自分が使っているテーマに合わせてサイズを変えてください。
ブログサイトデザインのコツ
それでは、実際にデザインをしていくときのポイントをお話ししていきます。
これらのポイントを押さえておけば、いわゆるダサいサイトにはならないでしょう。
サイト全体でデザインを統一させる
トップページは赤でカッコよく、記事ページはピンクで可愛らしく…
といったように、ページ毎にデザインを変えずにサイト全体でデザインを統一させるようにしましょう。
このサイトを例にすると、記事タイトルや見出し、サイドバーを吹き出し風のデザインで統一感を出しています。
配色は2〜3色にモノトーンで行う
色を多用すると上記のようにサイト全体でデザインを統一させることが難しくなるので、サイトに使用する色は2〜3色にモノトーン（白黒）で行いましょう。
このサイトを例にすると、緑とオレンジ、たまーに青で配色しています。
また、少し専門的になりますがモノトーンは完全な白黒（#ffffff・#000000）ではなく、少し変えた白黒（#fffff8・＃222222など）方がオシャレに見えてオススメです。
PCでもスマホでも見やすいデザインにする
Webサイトのデザインは一番大きいPCサイズで考えていくのが基本ですが、それだけだとタブレットやスマホでデザインが崩れてしまいます。
幅が狭くなる分、横並びを縦並びに変えるなどPCとスマホ両方で見やすいデザインにしましょう。
このサイトを例にすると、ヘッダーを無くしボタンメニューに変更。
サイドバーをメインコンテンツの横から下に移動などでデザインを整えています。
まとめ
Webサイトのデザインデータの作り方についてお話ししました。
実際やってみると結構面倒な作業ですが、魅力的なサイトにするためには一番大事な作業なのでぜひ挑戦してみてください！
- Webサイトデザインデータの作り方
- デザインの質を高めたいならデザインデータは必須！
- ソフトは迷ったら「Figma」を使ってみよう
- 2〜３色+モノトーンでサイト全体で統一感を出す
- タブレット、スマホでデザインを整えることも忘れずに！