奥が深い1カラムのブログデザインと悪戦苦闘の日々！！

投稿日2015.01.27

はい。
今回は、ブログデザインのお話。

昨年末の目標でレスポンシブデザインも触ってみたいと書きましたが、今年に入ってからコチョコチョと新しいテーマの作成を始めていました。

レスポンシブデザインとは、PC・スマホ・タブレット等の各端末に合わせてブログの表示を切り替え、それぞれのデバイスに最適化された画面を表示させる事ですが、ブログにアクセスした端末を判別し出し分ける方法と、表示されている画面サイズによって変更する方法があります。

現在のところ、このブログはアクセス端末を判別して、パソコンからのアクセスならパソコン用の表示、スマホからのアクセスならスマホ用を表示。といった具合に、端末別に内容を出し分ける条件分岐を使って運営しています。

なので、デバイスの画面サイズによって、表示されるデザインを出し分ける。という方法を扱ってみたかった訳です。

Media Queriesは簡単でしたが…

画面サイズによってレイアウトを変更するには、Media Queriesを利用してサイズ毎に書き分けてあげれば良いだけなので、簡単なベースを作り、ブラウザの幅を変更しながら試してみると、思い通りの事が出来ました。

後は、画面サイズが小さい時に、サイドバーのfloatを解除してメインコンテンツ下に移動。更に、横幅をフィットさせてあげればサクッと完成。

ただ、ブラウザによってはMedia Queriesに対応していないものも有り、CSSファイル自体が読み込まれない事例もある様子。全てに対応させようとすると、余分な外部ファイルを読み込まなくてはいけない事になり、無駄なリクエストが増えてしまうのは宜しくない。

jQueryを使って、ウィンドウサイズの取得と判定を処理してもいいんですが、気分的にjQueryの1.xバージョンは使いたくない。

そうなってくると、現在と同じように外部ファイルの読み込みは最低限に留めておいて、PHPの条件分岐を使って判定させ、デバイス毎に出し分けるのが一番無難ぽいですね。

今までは、PC用のテーマとスマホ用のテーマ、更にスマホ用のテーマを条件分岐させ、タブレットにも対応出来るようにしていましたが、テーマを複数作るのは時間が掛かるので、ベースとなるテーマを作りつつ、変更ポイントだけを条件分岐させる方法で進めると思います。

サイドバーは不要？？

前置きが長くなりましたが、ここからが本題です。次に向けて作っているテーマも、今までと同様にPhotoshopでベースとなるデザインを作っていたんですが、Media Queriesを試していて思い出したのが、以前から言われている「サイドバー不要論」について。

現在は、メインコンテンツに対してサイドバーが1つ付いている2カラムが主流。次に、サイドバーが2つ付いている3カラム。サイドバーが付いていない1カラムは、まだまだ少ない状況にありますが、スマホやタブレットの普及によって、今後は増えてくると思います。

代表的な1カラムのメリットとしては、記事を読む事だけに集中できるという事。記事本文を読んでいる際に、サイドバーから余計な写真や情報が入ってこない為、じっくりと本文を読んでもらえるという事。

一方、デメリットとしては、サイドバーに関連記事等がなければ、訪問して下さった方が他のページを読まずに帰ってしまう率が高くなってしまう(かもしれない)という事。

1カラムでも良いかも？！

今までの感覚では、直帰率が高くなると言われていた1カラムですが、よくよく考えてみるとスマホは1カラムですし、PCからの閲覧でも余程興味が湧いたサイトでない限りは、記事本文を読み終えた後に、スクロールで戻ってサイドバーを確認する事って少ないです。

更には、自分のブログのクリック率を確認しても、サイドバーよりは記事下の文字だけしか表示していない関連リンクの方が圧倒的に高い。

そうなってくると、サイドバーに表示している項目はメインコンテンツの下に移動して、1カラムでも良いのでは？という具合に考えて、試しに1カラムで骨組みを組んでみましたが、これがこれが…。思ってた以上に大苦戦です。

奥が深い1カラムのブログデザイン

2カラムや3カラムのデザインは、メインコンテンツとのバランスを取りつつ調整すれば、何となく答えが見えてくるんですが、1カラムのデザインを試してみると、これが本当に難しい。

1カラムにする目的としては、何と言っても記事本文の読みやすさにあると思うので、不要な表示を削って、デザインを引き算で考えていたんですが、引き算しすぎると凄く質素なペラサイトになってしまい、一昔前の情報商材の販売サイトみたいなデザインのような感じに。

更には、操作性も悪くなり…。

かといって、ナビゲーションや装飾を増やすと、1カラムのシンプル加減がスポイルされて、本文を読んでいる際にチラチラと気になってしまう。

現在のところ…

あれやこれやと試しては元に戻すの繰り返しで、3週間前にザクッと作った骨格のまま作業が進みません。ヘッダー分部はイメージ出来ていますし、フッター分部も現在と変わらない仕様で大丈夫なんですが…。

問題になってくるのがメインコンテンツの余白で、本文を読みやすい程度の幅に設定すると、両サイドの余白が目立ってスカスカな印象になりますし、ポジションを固定、またはスクロールに追従する小さなナビゲーションを入れてやると、バランスは取れるんですが、記事の読みやすさが消えてしまう。

こんな感じで、「足し算・引き算」のせめぎ合いが凄くて、最終的な着地点が未だに見つかりません。1カラムって、本当に奥が深いですね。

1カラムブログのデザイン・まとめ

本来なら数日の間に新しいテーマを完成させて、新年は新テーマで始めようかと思っていたんですが、どうやら時間が掛かりそうなので、現在のテーマのコードを修正して、流れを多少スッキリとさせておきました。※見た目は変わりませんが。

このまま1カラムで製作を続けるなら、上記の写真に簡単なナビゲーションを設置して、見た目と読みやすさのバランスが合うポイントを探す事になると思いますが、「やっぱり無理！」となれば2カラムでサクッと仕上げてしまいます(笑)

とにもかくにも、メインコンテンツ分部の余白処理が難しい1カラムですが、もうしばらく頑張って試してみます。

最後まで読んで頂き、ありがとうございます！！

今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！

また、11月1日現在「 ガジェット 」には「 174 件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

次回記事CSS:max-widthとfloatをセットで使う時の注意点

はい。今回は、max-widthを指定する際の注意点につい…

前回記事アクセス減少はペンギンの影響？パンギンで確認と検証！

2014年の秋に実施されたという、ペンギンアップデート3.0…

シェア＆フォローして頂けると嬉しいです！

タグ:『WordPress』｜Posted By MACO

お気軽にコメント下さい

Cancel Reply

※コメント欄の『利用規約』を読み、本規約の内容を承諾してから送信下さい。
※書き込んだコメント内容は、管理者の認証を受けた後にブログへ表示されます。