新しいブログのレイアウト設計手順~カラムとテーマカラーを考える

ブログの顔、画面レイアウトの設計手順!

この記事ではサーバーやテーマを決めてWordPressを設置した状態から、新ブログのレイアウトを設計する手順について解説します。ブログ立ち上げの中でも楽しい作業ですね♪
レイアウトへのこだわりによってかける時間がかなり変わると思います。
当ブログはFC2ブログからWordPressへ引っ越したブログであり、立ち上げるのに行った全手順については下記で記事にしていますので、もしまだご覧になっていない方は是非読んでみて頂けると嬉しいです!私がブログ移転した際に実際にかかった作業時間も全て書いてあります。
また、 サーバーやテーマを決めてWordPressを設置する手順については、下記記事を参考にしてください!
レイアウトは、大まかに言って下記のような手順で設計しました。
テーマによって実現できるデザインや細かなパーツは変わるのですが、ステップはそれほど変わらないと思います。
全体レイアウトデザイン
何カラムにするのか、ヘッダーやフッターのデザイン、タイトルロゴのスペースなどを考えます。編集はPCでやることになると思いますが、閲覧者は今やスマホからの閲覧が6割~7割と言われます。
そのため、今回私はスマホのレイアウトをしっかりと考えました。
大まかなレイアウトの調整
用意したテーマの中身を編集してデザインした全体レイアウトにざっくりと合わせていきます。この辺の作業で新しく作るブログのテーマカラーを決めて、ブログ全体の色をテーマカラー(このブログでは緑)に合わせて統一しました。
必要なロゴや画像の準備
タイトルロゴやカテゴリ画像など、必要な素材を準備します。
タイトルやリンク等のテキスト修正
用意されたテーマのままだと、テキストの中身がテーマの宣伝だったりしますので、ブログの中身に合わせて編集します。リンク先もしっかり確認して直します。
以下、順番に見て行きたいと思います。
全体レイアウトデザイン
何カラムにするのか、ヘッダーやフッターのデザイン、タイトルロゴのスペースなどを考えます。どうして良いかわからない場合は、紙に手書きで分割イメージを書いてみても良いと思います。

昨今のWebサイトにおける基本的なレイアウトは上図のようにタイトル、メインカラム、左右にサイドカラム、ヘッダー、フッターと言ったイメージかと思います。タイトルカラムの横までサイドカラムがあったり、若干のバリエーションはあります。また、カラムの中にさらにコンテンツの塊が複数配置されていき、全体のWebサイトが構成されています。
この中から一部のカラムを選択してレイアウトを作っていくのですが、近年の傾向はメインの1カラムかサイドカラムを1つ追加した2カラムかと思います。3カラムだと見た目がゴチャゴチャしてしまうのと、スマホ用レイアウトを考えるとレイアウト設計がややこしくなります。ブログの編集はPCでやる事になり、PCのレイアウトを作り込んでしまってスマホのレイアウト設計を忘れてしまいがちなので注意です。
2021年現在、サイトを見に来る人は7割がスマホ、タブレットからと言われます。スマホのレイアウトはテーマの機能で自動生成されることが多いです。ただ、スマホレイアウトは基本的に1カラムにするしかないので、PC用に3カラムレイアウトを作ってしまうとスマホレイアウトでは縦長になり過ぎてPCサイトからのレイアウト調整が多く発生する可能性が高いです。
ヘッダーとフッターについては、それほどレイアウトに影響しないため入れるかどうかは好みで選んで良いと思います。表示したい情報があれば入れたり、デザインでカラーバーとして使う手もあります。
当ブログではメインと右側サイドカラムの2カラムで、サイドカラムのコンテンツ数は出来るだけ少なくしました。これでスマホレイアウトとの差分が減っています。
また、この時点でデフォルトのテーマに使う予定の無い大きな画像(テーマの宣伝ロゴなど)が入っている場合は、画像を削除するのか他の画像に置き換えるのか考えておきましょう。画像が大きいと変えた時にレイアウトへの影響が大きいからです。
大まかなレイアウトの調整

用意したテーマの中身を編集してデザインした全体レイアウトにざっくりと合わせていきます。私はこの辺の作業で新しく作るブログのテーマカラーを決めて、ブログ全体の色をテーマカラー(このブログでは緑)に合わせて統一しました。タイトル部分はレイアウトに大きく影響するので、この時点で少なくともタイトル部のサイズ感はイメージしながらレイアウトを調整した方が良い思います。
デザインした全体レイアウトを実際に作ってみた結果違和感を感じたら、また全体レイアウトに戻ってみるのも良いと思います。
実際の操作は導入したテーマによって大きく異なると思いますが、ある程度実績のあるWordPressテーマならhtml, cssコードを知らなくてもレイアウトを組めるようなGUIが用意されていると思いますので、安心してください。
必要なロゴや画像の準備

タイトルロゴやカテゴリ画像など、必要な素材を準備します。自分で作るかフリー素材を探してくるのですが、私は下記の3つの方法で作成しました。
Creative Cloud Express (旧 Adobe Spark)
当サイトに出てくる鹿のロゴはこれで作成しています。タイトル、サブタイトル、テーマを入力すると、良い感じのロゴを一瞬で色々と提案してくれます。
さらに、後からブラウザ上で位置や色の調整、文字の追加など、簡易的なAdobeソフトのような編集が可能です。ですのでブログのテーマカラーに合わせたロゴを作成することも可能です。
Creative Cloud Expressは下記から無料で使えます。有料プランもありますが、ロゴ作成は無料です。以前はAdobe Sparkと呼ばれていました。
https://www.adobe.com/jp/express/
自分で写真を撮って編集
過去に自分が撮った写真を加工して何箇所かに配置しました。加工と言ってもフリーソフトで出来るようなトリミング、コントラストを薄くする、背景を透明にする、程度です。ブログに配置する程度の画像なら自分でスマホを使って撮影すれば意外と素材は集まります。
html, cssスタイルで実現
ただの区切り線や文字の装飾などであれば、html, cssスタイルで実現した方が良いです。理由は色の自由度が高い点、文字ならGoogle検索で有利な点です。最近のWebサイトではタイトルロゴ等もよく見るとマウスで選択出来る文字が多いのではないでしょうか?こういったWebサイトは画像に見えてもスタイルで実現されています。画像ではキーワード検索にヒットしないので、タイトルで検索してもページが出てこないような事になります。
html, cssスタイルはプログラム言語なので難しいと感じるかもしれませんが、文字の色、フォント、配置、背景色等、基本的な事であれば決まった箇所を書き換えるだけなので理解出来なくても作成出来ると思います。
Google検索でフリー素材を見つけてくるの方法も、もちろんあります。ですが、フリー素材は利用範囲や素材を編集する際の決まりなど、色々な事を確認しなければいけません。自分だけが見る物を作って楽しむならともかく、作ったブログは半永久的に全世界に公開することになります。フリー素材の利用規約が後から変わった場合も対応が必要となることもあります。
以上のことから、私はブログの母体にはAdobe以外のフリー素材は一切使いませんでした。記事には他サイトのフリー素材を使ったりしていますが、万が一問題となったら問題の記事だけ非公開にしてゆっくり修正対応といったことも可能です。
タイトルやリンク等のテキスト修正

用意されたテーマのままだと、テキストの中身がテーマの宣伝だったりしますので、ブログの中身に合わせて編集します。リンク先もしっかり確認して直します。
画像は見ればわかるので気付きやすいですが、リンク先は見落としやすいので注意しましょう。
特に、ホームへ戻る矢印、SNSボタン、著作権©マークなど、元から設置されている画像に導入したテーマの宣伝サイトへのリンクが貼られていたりするので、作成したサイト内のリンクとリンクが無いと思っている画像も全て一通りクリックしてみるのが一番速いと思います。
おわりに

今回は、WordPressを設置した状態から、新ブログのレイアウトを設計する手順について解説してみました。
私が最初にやった時は、レイアウトがある程度用意されているテーマを使ってブログを作っても、意外とやることがあるなと感じました(^^;
でも、レイアウトを考えるのはとても楽しい作業でした。見やすさももちろん大事ですが、個人ブログの場合には自分で見て楽しくなければブログは続かないと思いますので、是非色々とテーマをカスタマイズしてみてください。
WordPress設置準備以外のステップが見てみたい方は、下記記事も読んで頂けると嬉しいです。全ての作業ステップと私が実際にブログ移転した際の作業時間も全て書いてあります。
長い文章を最後まで読んで頂いてありがとうございましたm(_ _)m
おわり。

この記事が気に入ったら
フォローをお願いします!
この記事を書いた人 Wrote this article
kenshi2009
燻製するフォトグラファー。燻製教室と写真撮影でお仕事したりブログ書いてる電気通信系エンジニア。燻製15年目🍖、写真24年目📷、ブログ24年目📓。EOS R6使用。 燻製も写真も季節を楽しみながらやってます🍂 写真の無断転載は禁止。奈良好き🦌 Twitterにほぼ毎日います!【SNS一覧:https://lit.link/kenshi2009】