ゲムマブログ編集忘備録。

このエントリーを Google ブックマーク に追加
[`evernote` not found]

しんく顔アイコン_小.jpg

No.4:レイアウト、レイアウトって言いますが……


どうも、公私ともに荷物や資料が届かなくて困っている思考です。6月になりましたが……何だか梅雨が訪れそうな気配がありませんねぇ。あれ、そういえば21世紀最大の寒波って話はどうなったのでしょうか?

本題に入る前にお知らせ

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルでの購入事前予約も現在受け付け中です。

 

はい、では本題。

 

ブログ記事のレイアウトデザインってさ?

「デザイン」という言葉に惑わされる事が多いですが、躊躇する必要はどこにもありません。

「デザインって見る人のユーザーの目線を意識したり、綺麗に見せるためのルールや手法を知らない人がやると痛い目をみるでしょう?」

と、思うでしょ? レイアウトデザインという単語を単純にしてしまえば

文章の見栄えを良くする

ただ、これだけという身も蓋もないのが現状です。もう、笑ってしまって大丈夫です(アーワハハハ!!)。
確かに、デザインやレイアウトには理論や手法があります。それは紙面やホームページ全体の話であって、ここではブログ記事……つまりはWebページの一角のみの話です。

ブログを読んでいる自分を思い出してください。

上から下に読む → 面白かったら、アーカイブやカテゴリーでまとまってないか左右を探す

だいたい、こうです。
ゲムマブログのゲーム紹介記事を思い出してください。

パッケージ写真と製品情報→3行でゲーム説明を簡潔表示→その後にブログ記事

と上から下に視線が行く構造になっています。つまり、大まかな視線誘導の準備は運営様の方で実装しています。


テキストの羅列にならないための箱詰めレイアウト

私が実践しているレイアウト方法は自称「箱詰めレイアウト」と言ってます。考え方は……

大きな箱(ブログ記事の外側)の中に中くらい箱(章立て)を入れて仕切をつくり、その中に小さな箱(内容)を詰めて完成させる

こんな感じです。

では、画像も使って解説していきましょう。参考資料はゲムマブログでも公開している「邪神がこの中にいる!ってどんなゲーム?(第3回)」です。ちょっと、縦が長いので一部省略しています。

参考までにリンクをクリックして、記事を表示させておいて頂けると幸いです。

記事全体図(一部省略)

記事全体.jpg

◆ 大きな箱(ブログ記事の外側) ◆

これは、ゲームマーケット様の方でご用意いただいてる記事を表示するエリア(画像の赤枠内)のことです。

大きな箱.jpg

◆ 中くらいの箱(章立て) ◆

ブログ記事のおおざっぱな内容となっていて、参考記事では「商品タイトル画像」「探索者について」「当日取扱商品」が該当します。

中くらいの.jpg

◆ 小さな箱(内容) ◆

章立てした中のさらに細かい内容となります「探索者について」の中を参考にすると、「探索者カードの紹介」「プレイ動画」「バックナンバー」が該当します。

小さい方.jpg

では、【記事全体図】の構造をhtmlタグで表現してみます。

レイアウトを組み立てて行く中で、最初に覚えて頂きたいhtmlタグは文字を装飾するタグではありません。この「大きな箱」「中くらいの箱」「小さな箱」の概念を再現する<div>タグです。

画面表示

大きな箱(ブログ記事の外側と同じサイズ)

中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)

小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div> 大きな箱(ブログ記事の外側と同じサイズ)
<div> 中くらいの箱(章立て:商品タイトル画像)</div>
<div> 中くらいの箱(章立て:探索者について)
<div> 小箱(探索者カードの紹介)</div>
<div> 小箱(プレイ動画)</div>
<div> 小箱(バックナンバー)</div>
</div>
<div> 中くらいの箱(章立て:当日取扱商品)</div>
</div>
HTML
<div></div>
説明
タグで囲んだ内容をグループ化……箱の中に入っていると宣言する


<div></div> の中に、さらに<div></div> を書く事で入れ子状態になるわけです。制作サークルさんにはおなじみの箱詰め状態(笑)

今回は、ここまで。次回は、<div>タグの属性に関しての説明をしていけたらと思います。

コメントを残す

メールアドレスが公開されることはありません。

コメント

お名前

ウェブサイトURL