カラクリサイクル

『輝かしい青春』なんて失かった人の雑記

素人でもできるWebレイアウト

概要: 素人というか自分がやってるWebレイアウトの方法


素人でもできるWebレイアウトの仕方ーどんどんぱふぱふーと始めるとdnbkされるのがオチなのでやりませんが、 デザインとかの素人である自分がやってるWebサイトでのレイアウトの仕方を解説してみるよ!

このエントリを見ればWebサイトのレイアウトがバッチリになるかもね☆

……っていうか俺のキャラじゃねぇ。とりあえずはじめます。

一、配置される要素をすべて書き出す

まず一番初めにレイアウトとか考えずに配置したい要素を考える。

どういうことかというと、例えばBlogなら載せたい要素は、

  • Blogのタイトル
  • Blogの概要
  • グローバルナビゲーション
  • ローカルナビゲーション
  • 広告
  • …etc

みたいに書き出していく。あとBlogパーツを載せたいとか思うんだったら、

  • はてなスター
  • feed meter
  • track feed

という感じでこれも書き出していく。

大体ある程度まで書くと、配置したい要素が思いつかなくなるので、 今度は既存のBlogにある要素を書き出していく。

例えば404 Blog Not Foundだったら

  • Blogのタイトル
  • Blogの概要
  • 広告
  • 検索
  • ブックマークボタン
    • はてな
    • livedoor Clip
  • Blogの記事

みたいな感じ。

一つや二つのBlogじゃあんまり参考にはならないので、幾つかBlogを見てまわって、 そのBlogがどういう要素で構成されているか調べてみる。

ちなみに今現在のこのBlogだとこんな感じ。

  • Blogのタイトル
  • Blogの概要
  • グローバルナビゲーション
  • ローカルナビゲーション
  • 一行広告スペース
  • コンテンツマッチ広告
  • Blogのエントリ
    • 固有リンク
    • カテゴリ
    • 日付け
    • コメント/トラックバックの個数
    • はてなスター
  • プロフィール
  • カテゴリ一覧
  • 過去ログへのリンク
  • バナ-一覧
    • feedburnerの購読者数のカウント
    • livedoor Readerの購読ボタン
    • はてなブックマークのブックマークカウント
    • Webスカウター
    • feed meter
    • track feed
  • powered by
  • コピーライト

あと自分はこの後に要素がどこに配置されやすい要素かって分類をしてる。 まあレイアウトが全然分からないって人はやらないほうがいいかも知れない。

例としてはこんな感じ。

  • ヘッダ系
    • Blogのタイトル
    • Blogの概要
    • グローバルナビゲーション
    • ローカルナビゲーション
  • エントリ系
    • エントリ
      • タイトル
      • 本文
      • 概要
    • メタデータ
      • カテゴリ
      • タグ
      • 作成日時
      • 固有リンク
      • 投稿者
  • サイドバー/フッタ系
    • プロフィール
    • カテゴリ一覧
    • 過去ログ
    • バナ-一覧
      • feedburnerの購読者数のカウント
      • livedoor Readerの購読ボタン
      • はてなブックマークのブックマークカウント
      • Webスカウター
      • feed meter
      • track feed
    • powered by
    • コピーライト

二、画面を大まかに分割する

第二に画面を大まかに分割します。

要するにシングルカラムレイアウトとかツーカラムレイアウトとかスリーカラムレイアウトとか そう言ったことを決める。

シングルカラムとかツーカラムとか言われてもわかんないよって人は要するに、

  • 縦にいくつ分割するか
  • 横にいくつ分割するか

ということを決めるわけです。

このBlogの場合だと

  • 縦に三分割
  • 横に二分割

で、実際のレイアウトはこんな感じ。

  • 一番上 (ヘッダ)
  • 真ん中 (コンテンツ)
    • 右 (記事とか一覧とか)
    • 左 (サイドバー)
  • 一番下 (フッタ)

このとき配置する要素とかのことは考えない。単純にどう分割するかだけを考える。

三、配置したい要素を画面に割り当てていく

最後に分割した画面にしたがって、配置する要素を決めていく。 要するに具体的にどの要素をどこに配置するかっていうのを考えていく。

まあ画面はすでに分割されてるし、配置したい要素は書き出してあるので、それなりにすんなりできると思う。 思うんだけど、どこにどう配置するか全然決まらないって場合は、既存のWebサイトを参考にするとなんとかなるかも知れない。

ちなみに今現在のこのBlogのレイアウトと配置はこんな感じ

  • ヘッダ
    • Blogのタイトル
    • Blogの概要
    • グローバルナビゲーション
    • ローカルナビゲーション or 一行広告スペース
    • 検索ボックス
  • コンテンツ
    • 記事一覧
      • 記事
        • タイトル
        • メタデータ
          • 固有リンク
          • 記事のカテゴリ
          • 作成日時
          • コメント/トラックバックの個数
          • はてなスター
      • コンテンツマッチ広告
      • 記事
      • …続く
    • サイドバー
      • プロファイル
      • 広告
      • カテゴリ一覧
      • 過去ログ一覧
      • バナー一覧
        • feedburnerの購読者数
        • livedoor Readerの購読ボタン
        • はてなブックマークの総ブックマーク数
        • Webスカウター
        • feed meter
        • track feed
      • powered by
  • フッタ
    • コピーライト

まあここは普通のレイアウト作業なので、具体的なアドバイスとかあんまりできない、 というかなんとなくできてるので説明のしようがないんだけど、大体こんな感じ。

まとめ

大体こんな感じです。一番重要なのは配置要素の書き出しかな。

レイアウトが決まらないってのは、どの要素を使えばいいのか分からないとか、 どこにどの要素を配置すればいいのか分からないとかそういったことだと思うので、 一番初めに要素を書き出して、次に画面を分割すれば、 あとは大体できると思う。

というかこれは自分のやってる方法なので、万人がこの方法でできるかって言われると疑問なんだけど、 レイアウトできねーよウワーンな人の参考にはなるんじゃないかと思う。 まあ我流なので参考にするまでにとどめておいたほうがいいんじゃないかな。

まあWebデザインの素人の自分がやってるレイアウトの方法はこんな感じです。何かの参考になれば。

……書き始めの謎のテンションはなんだったんだろう。