2016年06月30日

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

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

No.7:箱は箱の中に並べて敷き詰めて

どうも、思考です。ファミリーゲームフェスティバルも無事に終了しました。感想や反省はあれやこれやとありますが、そこは近日ラジオになるか別のブログで語られるかもしれません。
ちょっとブログ更新をお休みいただいて、おりゃーーーーーーっと書いていた別原稿もどうにか脱稿できました!!
AHCの刺客は一体何名紛れ込んでいるのやら?

 

はい、では本題。

 

箱を並べて敷き詰める?

前回、『大きな箱』の中に『中くらいの箱』を入れて、さらに『小箱』となる<div>タグを入れ子にしました。
ちょっと前回のソースを再度書いてみる事にしましょう(主に自分が思い出すためにですが……)

画面表示

大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)
小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div  style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ) <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:商品タイトル画像)</div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:探索者について) <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(探索者カードの紹介)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(プレイ動画)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(バックナンバー)</div> </div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:当日取扱商品)</div> </div>

今の状態は、少し大きさが違う箱を1つずつ上から詰めている状態です。

右側の画像の形になるよう『小箱』の中を仕切るには、引き続き<div>タグを使って行きます。

現実の箱を思い浮かべてください。仕切りたいのであれば、仕切り板を1つ真ん中に差し込めば完了です。板が無ければ、『小箱』の半分の幅ぐらいの箱2を並べてあげれば良いのです。

では、『小箱』<div>タグの中に追記してみましょう。ついでに、見えやすいように背景色も付けてみます。

教材はこれ
スクリーンショット 2016-05-19 18.36.39.png
画面表示

小箱(バックナンバー)

左側
右側
HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> </div>

◆ width:50%

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="padding:20px;width:50%;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
外側の<div> タグに定義されている幅の50%を、スタイルを記述している<div> の幅と指定する。

ソースを書き足してみましたが、幅は小さくなっても横並びになっていません。どうして、こんな表示になるかというと

div_nakami.jpg

『小箱』の中に書いた<div>タグの横幅は半分として表示されますが、<div>タグは幅いっぱいに透明な領域が広がっています。このままでは、横並びにできません。では、この問題を解決するためにHTMLタグとスタイルを追記してみましょう。

画面表示

小箱(バックナンバー)

左側
右側
HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> <div style="clear:both;" ></div> </div>

◆ float:left

画面表示

小箱(バックナンバー)

左側
HTMLコード
 <div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="clear:both;" ></div> </div>
解説
スタイルを定義した<div> タグを指定されている幅か、中のコンテンツ分の大きさにして「左寄せ」します。それ以外の要素を右側に回り込んで表示させます。

◆ clear:both

解説
このスタイルが定義さいれているHTMLタグより下は、floatの影響を受けません。

文字が横並びになっているかと思います。こうやって箱を並べて仕切りをつくっていくことで、レイアウトの外観を作成していきます。
このHTMLタグの最大の注意点は、「clear:both」を忘れずに記載することです。そうしないとデザインが崩れて、ゲムマブログ自体のレイアウトまで崩す大変な状態を引き起こしてしまいます。
良いですね? 「clear:both」を忘れてはいけません。

 

今回はここまで。そろそろ、他のHTMLタグについての説明をしていこうかと思います。引き続きよろしくお願いいたしますm(_ _)m

posted by AHC at 19:23| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年06月16日

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

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

No.6:divタグは続く

どうもぅ、思考です。ファミリーゲームフェスティバルまで……もう数日!? 6月も半分過ぎてしまったことにビックリです。
マッタリとゲーム制作も再開しておりますが、居眠りの街は「コミックマーケット(C90)」に落選してしまったので着地点をどこにしようかと……。どうしましょうね?

さて、そんなことを悩みながらお知らせを

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

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

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

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

 

はい、では本題。

 

中くらいの箱を入れてみよう

前回は<div>タグについてと、ブログ記事の一番外側にあたる『大きな箱』に対してのCSSを書きました。その結果、どんな風になったかを改めて確認してみましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>

でしたね? では、第4回の最後にお見せしたような形にするため『中くらいの箱』をコレに加えてみましょう。

HTML的には、<div>〜</div>の中へ新たに<div>〜</div>を追加してあげるだけです。それだけだと、視覚的には見えないのでいきなりCSSも書いてしまいましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
<div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;font-size:14px">
中くらいの箱
</div> </div>

落ち着いて、style属性に書かれているCSSを確認してみましょう。大きな箱のスタイルと大きな違いはありません。スタイルも1つずつ分解してみると……

  1. margin-top:20px;
  2. padding:20px;
  3. border:2px solid #3686a0;
  4. color:#3686a0;
  5. font-size:14px;

厳格にレイアウトするためには、『大きい箱』意外にも「width」のスタイルを入れておくと良いでしょう。ここで、初めて見かけるのは「margin-top:20px」だと思いますが、何の命令かはピンと来るかと思います

しかし、「margin」と「padding」はスタイルを見て行く中で最初に混乱しやすい場所でもあるので、ちょっと図にしてみようと思います

◆ margin-top:20px

paddingとmargin.jpg
HTMLコード
<div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;font-size:14px"> 
中くらいの箱
</div>
解説
<div> タグの外側の上部に「20px」の空白を設けます。

「margin」は外側の余白、「padding」は内側の余白です。これを忘れなければ大丈夫です!

とはいえ、ゲムマブログの中では一カ所だけその概念が通じない箇所があります。

これは、この連載の最終回付近で触れることになるかと思います。

 

ここまで理解できたら、『中くらいの箱』の中に小『小箱』を入れるのは簡単です。スタイルは『中くらいの箱』の色や文字サイズを変えるだけです。

是非、チャレンジしてみてください。

画面表示

大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)
小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div  style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ) <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:商品タイトル画像)</div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:探索者について) <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(探索者カードの紹介)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(プレイ動画)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(バックナンバー)</div> </div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:当日取扱商品)</div> </div>

今回はここまで。ここまでの内容がステップ1となります。

次回からは右の教材のように、<div>タグが横並びにするための命令から、他のHTMLタグも踏まえて、『小箱』の中を詳細に詰め込んで行こうと思います。

引き続き、よろしくお願いしますm(_ _)m

教材はこれ
スクリーンショット 2016-05-19 18.36.39.png
posted by AHC at 20:14| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年06月15日

つくりたいゲーム

あまおち顔アイコン_小.jpg いままで5作のオリジナルTRPGルール(ひとつはサイコロ・フィクションだが)を作ってきたわけだが、作れば作るほど、新しいゲームを作りたくなってしまうのは、いったいどういう前世の業だろうか。
 なんて書いたら他のクリエイターさんに怒られるかもしれないが、ルールを作っている時も、作り終えた後も、どんどん新しいゲームを作りたくなってしまうのだ。
 もちろん、一作を完成させるのはかなりの労力を必要とするので、ぽんぽんと作れないのがつらいところだが、とりあえずいま作りたいと思っているゲームを、ストレス解消として一部公開してしまう。
 
・ハードボイルドスペースオペラ
・異世界転生モノ
・平安時代を生活するゲーム
・幕末モノ
・クトゥルフ神話モノ(もっとCoCに近い感じで)
・本格ファンタジーモノ
・短時間モノ

 
 などなど、挙げだしたらキリがない。
 ハードボイルドスペースオペラは、『コブラ』や『カウボーイビバップ』のような世界、異世界転生モノは現代の知恵だけで異世界を生き抜くゲーム、平安はリアルな平安時代を、幕末は新選組大好き、クトゥルフは『邂逅』でやれなかったことを、ファンタジーはオレの原点、短時間モノは最近の流行だし、裁判モノは最近『逆転裁判』をやりなおしている影響で。
 あれ?いつの間にか増えている気がするが、まぁそんな感じの業の深い前世です。
 
 とりあえず、もしこれを読んで新しいゲームが思いついても、オレより先には出さないでくだちぃ。
 
posted by AHC at 22:28| Comment(0) | TrackBack(0) | あまおち総統エッセイ

2016年06月09日

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

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

No.5:CSSなんて怖くない

どうも、最近作業をするときはもっぱら「かもめ食堂」やら「マザーウォーター」をループ再生させている思考です。気付けばもうすぐファミリゲームフェスティバルです。
他のサークルさんの出展情報も増えてきましたねぇ〜。

ハイボールとビーフカツレツサンドイッチに想いをやや馳せながら(笑)、本題に入る前にお知らせを。

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

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

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

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

 

はい、では本題。

 

いよいよ登場、CSS

前回、ざっくりと解説させていただいた<div>タグ。今回は、いよいよCSSを合体させていこうと思います。
説明が抜けていましたが、CSSは「Cascading Style Sheets」の略で、HTMLと組み合わせて使うことを前提とした言語です。
HTMLだけでは、ホームページを綺麗に見せるように設定(文字装飾やレイアウト整備、最近だとグラデーションなど)ができないので、CSSでそこを補って行きます。

前回記述したHTMLを再び書いてみることにしましょう。実際にCSSが入っていない状態だと、どういう風に表示されるかと言うと……。

画面表示

cssの無いhtml.png

HTMLコード
<div> 大きな箱(ブログ記事の外側と同じサイズ)
    <div> 中くらいの箱(章立て:商品タイトル画像)</div> 
    <div> 中くらいの箱(章立て:探索者について)
         <div> 小箱(探索者カードの紹介)</div> 
         <div> 小箱(プレイ動画)</div> 
         <div> 小箱(バックナンバー)</div> 
     </div> 
    <div> 中くらいの箱(章立て:当日取扱商品)</div> 
</div> 

ご覧の通り、<div>タグだけだと画面に表示される際は何の影響も及ぼしません。HTMLはあくまでも文章の構造を定義するものだから、ブラウザを通してもこのようになります。

では、ちゃんと可視できるようにしていきましょう。

HTMLタグには元となる効果(<div>タグの場合はグループ化)の他に、もっと詳細に設定を施すための「属性」というパラメーター群が存在します。例えば、フォントの大きさや背景の色を変更したり……。

属性の詳しい種類は、是非Google先生か書籍でご確認ください。

ゲムマブログで記事を書く&今回のお題であるHTMLとCSSを合体させるのに必要な属性は、ズバリ「style」です。

使い方は至って簡単<div>とタグを書いていたところを<div style="">と書きます。「""」の中にCSSを書くことで、HTMLとCSSは無事に合体します。

前回の表記を一部、合体した状態で記述してみるとしましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;width:500px;padding:20px;
border:2px solid #f00;color:#f00;font-size:18px;" > 大きな箱(ブログ記事の外側と同じサイズ)</div>

HTMLコードを見て、後ずさってしまった人がいるかもしれません。落ち着いてください! 深呼吸です!!
………
……

大丈夫ですね? では、これを分解してみましょう。
プログラムと思わずに、英単語を使った命令だと思ってください。そしたら、こんなのまったく怖くありません。
「大きな箱(ブログ記事の外側と同じサイズ)」は以下の6つの命令により成り立ってます。

  1. margin-left:auto;とmargin-right:auto;
  2. width:500px;
  3. padding:20px;
  4. border:2px solid #f00;
  5. color:#f00;
  6. font-size:18px;

順不同になってしまいますが、1つずつCSSを追加しながら解説していきます。

◆ border:2px solid #f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div> 
解説
「2px」の太さで線種「solid」の線を、「#f00」色で<div> タグに沿って表示する。

◆ width:500px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="width:500px;border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div> 
解説
<div> タグの幅を「500px」と定義する

◆ padding:20px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部、上下左右を「20px」空ける

◆ font-size:18px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の大きさを「18px」にする

◆ color:#f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style=" color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の色を「#f00」とする

◆ margin-left:auto;とmargin-right:auto;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの外側にある左右の空白を「auto」自動調節とし、<div> 要素を中央に表示する

CSSを書く際に優先順序はありません。なので、一番最初に書いた例題と違う順序で書いても効果を再現できます。

解説の「」部分は変更できる箇所です。線種などはブラウザ(Google chromeなど)によっては表現しないものがあります。ひとまずは、Google先生か書物を参考にしてみてください。

HTMLやCSSで指定できるカラーコード

HTMLやCSSではコーデ色を指定します。今回出てきている「#f00」がそれです。これはCSS専用に省略した形となっていて、実際は「#ff0000」となります。どちらの形式で記述しても表示される色は一緒ですので、ご安心を。
このコードはPCでイラストを描く人やオンデマンドなどの印刷サービスを活用されている人なら見覚えなる「RGB形式」と呼ばれるカラーコードです。

R(赤)G(緑)B(青)の色を16進数形式で指定して、3色が混ぜ合わさった色を表現します。

色に関しては、RGBではなく色名(「red」など)を指定することで表現できる色がHTMLの方で140色設定されています。また、どんなディスプレイでも見える色が変わらない「セーフティカラー」というのが216色存在します。

まぁ、まずはそんな事気にせずに試してみるのが良いかと思います。下記のURLは色名が定義されている140色の紹介ページとAdobeがウェブ上で公開しているカラーパレットサービスです。

さて、今回はここまで。次回も引き続き<div> タグに定義するCSSを中心に書いていこうと思います。

posted by AHC at 17:56| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年06月08日

1泊2日のJGC

あまおち顔アイコン_小.jpg ニコニコ動画で「AHCラジオ」の第11回を配信した。
 「あまおち総統のファンタジーとして許せる境界線はどこだ」ということで、ずばっと「ファンタジーにバイクなんていらんだろ」と自論をぶってるので、ぜひ聞いてみて欲しい
 ニコニコ動画のアカウントがないって人は、ここから聞いてみてほしい
 
 ちょうどいま、年一回のTRPGの大祭典JGCの申込期間なので、ちょっと言っておこうと思う。
 
 
 なんで1泊2日やねん?
 
 そりゃ理由はあるんだと思うよ。
 いろんな企業やら何やらが合同でイベント開くんだから、日程調整とか含めて大変なんだと思うよ。
 理由があるのは分かるし、企業には企業の理屈があるのも分かる。
 でも、ただの消費者からしたら、やっぱり1泊2日って魅力が半減以下になっているっていうのは言っておきたいと思うのよ。
 イベントとは企業と消費者である参加者がいて成り立つのだから、消費者には消費者の理屈があるし、それを表明するのも当然の権利だと思う。
 だから、何があったか知らないけど、とにかくちょっとそれはどうなのよ、とは言っておきたいのだ。
 
 よく考えてもらいたいのが、参加者というのはなぜJGCに参加するのかの理由だ。
 それは決してホテルに泊まるのが目的なのではなく、時間を気にせず遊べるというのが、JGCに参加する最大の理由なのである。
 決して横浜プリンスホテルに泊まりたいから参加しているわけではない
 結果的に横浜プリンスホテルが最適だから会場がそうなっているので、まぁその理由は理解は出来るのでそれなりの出費を我慢できていたわけだけど、でも1泊2日だと、「一日中遊び倒す」ことができないのよ、次の日はもう帰るんだから。
 そうなった時、果たして「横浜プリンス並みの料金」というのは、費用対効果に合うかどうか。
 
 もちろん合うって人はJGCに宿泊参加するだろう。
 そしてそういう人たちの価値観を否定するわけではない。
 むしろそういう人がいなければJGCがつぶれてしまうので、ぜひ多くの人に宿泊参加してもらいたいとは思う。
 でも正直、オレらのまわりでは躊躇している人間がほとんどだ。
 横浜プリンスホテルに泊まり、何部屋か会場を使用するのだから、それぐらいの料金がかかるのは分かる。
 頭で理解することはできる。
 ただし、消費者が求めているのは、「プリンスホテルに泊まる」ことではなく、「ゲーム三昧の日々を味わう」ことにあるっていう点だ。
 つまりは、消費者は何に対してお金を払うのかと言えば「ゲーム三昧の日々を味わう」ことにお金を払うのだから、それに見合う値段かどうかで消費行動が決定されるのだ。
 ここを見誤って欲しくないのである。
 
 果たして今年のJGCはどうなるか。
 我々もどうするかすら決めてないが、ちょっとその辺が今年はかなり気になるのである。
 
posted by AHC at 20:45| Comment(0) | TrackBack(0) | あまおち総統エッセイ

2016年06月03日

第9回「マタドーン」byEJIN研究所

なおぶ顔アイコン_小.jpg
こんばんわ、なおぶです。

先日、イエローサブマリンの試遊会に参加し「邪神がこの中にいる!」を遊んで頂きました。
結果は、6戦して人類1勝、邪神5勝と例の如く邪神にやられてしまうケースが多かったですが、試遊は若干短めに終わるようにカード枚数を調整しているため、邪神有利ではあります。にもかかわらず、ゲーム後、あの時こうしておけば勝てたかも、と思えたプレイが多かったです。

驚いたのが、なんと、アザトースを1名で呼び出すことに成功した方がいらっしゃいました。最終ターンで、私の次の手番のエンジニアが一番怪しいと思っていたため、次に怪しいと思っていた精神科医にセットされていた「輝くトラペゾヘドロン」を破壊することが出来ずに(エンジニアのスキル”修理力”は、破壊されたアイテムを手札に加えます)、一番怪しくないと思っていた刑事に「アイテム移動」でつけかえた所、なんと狂気度が80もあり、隠しセットされていたネクロノミコンと合わせ、運命札にも恵まれて最強の邪神様が、ご降臨されました。
そうです。私が悪いです。深読みした挙句、読みが完全に外れるという大失態・・・。狂気度を開けた瞬間、頭を抱えた後悔も含めて、とても楽しかったです(笑)
DSC_0014.JPG
本ゲームを知らない方にはチンプンカンプンな話を導入に持ってきてしまいました。申し訳ありません。本題に入ります。

今回紹介するゲームは、そのイエサブの試遊会で合間に運よく遊ぶことの出来た「マタドーン」byEJIN研究所です。
mata_top_07.jpg
実は、EJIN研究所さんは、私が最初に制作したカードゲーム「犯人はこの中にいる!」と同時期に「犯人は探偵の中にイる」というタイトルもろ被りのゲームを出されていたので、ぷちライバル視していたのですが、その後の拡張版の発想もやや被り(拡張版入れるとちょっと違ったゲーム性で遊べる)、さらにムムっと思っていたところ、「ヌシも悪よのう」そして今回紹介する「マタドーン」とハイペースで良質のゲームを出されていたので、さらにさらにムムムっと思ってました(笑)

出されるゲームのフレーバーのバリエーションの広さオリジナルなメカニクス売り方(コラボ戦術、イベントブースの使い方、委託店舗での販売工夫)、製造時のコスト削減の配慮等、随所に行き届いたデザイナーだと密かに感心しておりました。

と作り手を持ち上げるのはこれくらいにしておいて(笑)、肝心のゲームを簡単に紹介します。
DSC_0016.JPG
暴れ牛の進路を決めるタイルを裏向きにしてプレイヤーが順番に1枚ずつ設置し(最初にランダムに4枚引き、そのうち3枚をプレイします)、闘技場に置かれた他のプレイヤーの闘牛士コマを暴れ牛に引かせて殺すというゲームです。
タイルは基本的に牛の進路を設定するものなのですが、足あとタイルを使用して、自分のキャラを動かしたりも出来ます。

牛は壁にぶつかると逆に走り始めますが、2回ぶつかると反対を向いてストップします。ゲームの名前の由来が、2回ドーンとなるということでマタドーンだとのことですが、そもそも、パッと見で、その説明を受けるまではゲーム名がマタドール(闘牛士)だと思っていました。
何そのダジャレというリアクションに、デザイナーは、関西人だからと意味の分からない発言をしていました(笑)

それでは、プレイヤー視点でのゲームの面白さをまとめます。
・他プレイヤーの置く進路タイルを予想して、自分に被害が来ないで、他プレイヤーに被害が発生するように考えてタイルを置く悩ましさ。
・限られたタイルの中で、どういう順番で置くか?が悩ましい。
・思考過程で他プレイヤーに置かれたら嫌な所が分かるので、置かれてヤバいとハラハラしたり、置かれなくて良かったとほっとしたり、小さな一喜一憂を楽しめる。
・最後にタイルを一枚ずつ開いていく時のドキドキ感。
・結果として牛の進路が決まって、「うぎゃー」とか「やったー」とか楽しめる。
・予想が上手くハマってくれた時が、かなり嬉しい。違った時のフォロータイルがハマってくれると、それも嬉しい。


続いてデザイナー視点で優れていると感じられる点をまとめます。

・観客席がタイルを隠すスクリーンになっている工夫が、素晴らしい。闘技場の雰囲気を表すと同時にゲームで必要な機能を提供しているというのは、心憎い気遣い。
・最初に死んでしまったプレイヤーがつまらないといけないので、次に死んだプレイヤーが出来た場合、3位と4位を決定する小さいステージで豚に引かれるゲームで遊ぶことが出来るという心憎い気遣い。
・非常にシンプルなルールでインスト時間も非常に短く、小学生でもすぐに遊べる。

ちなみにインストとルールのシンプルさについては、デザイナーは、「一見簡単で小学生もすぐに遊べるが、思考が浅いので、大人の知恵でボコボコにして、現実を教えてやるゲームだ」とヒドイことを言っていました(笑)

ということで、大人の思考力を試され(笑)、牛に引かれて悔しい、牛で引いて嬉しい素敵なゲームです! 是非遊んでみて下さい!

2016年06月02日

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

しんく顔アイコン_小.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>タグの属性に関しての説明をしていけたらと思います。

posted by AHC at 18:36| Comment(0) | TrackBack(0) | 自己紹介