ブログネタ：ブログデザインコンテストに参加しよう！ 参加中今回のコラボ（敬称略）
・左イラスト marin
・右イラスト ひいこ@過充電
・CSS＆記事文 阿檀
◆marinさんとひいこ@過充電さん
marinさんと私(阿檀)は、とあるグルっぽで出会いました。
marinさんのイラストと私のCSSという分担で、何作かスキンデザインを配布させていただいてます。
marinさんの《Ameba》IDは「Grotesque Design」、ゴシック系のデザインを得意とする方です。
ひいこさんは、いったいどこのグルっぽで見かけてくださったやら、私の運営するグルっぽに忽然と現れた方。
なんかすごい質感を出す方がいらっしゃった、と目を丸くしていまして。
新しいグルっぽを解説したとき、ぜひに、と、参加をお誘いするメールをお出ししたたりから、交流が始まりました。
その後、しばらくして、ひいこさんのほうからmarinさんに共作を申し込まれて、そのコラボ作品を私のサイトで配布させていただけることになりました。ところが、私は大変に欲深なのでｗ、「お二人の絵がなるべく大きく入るデザイン」とか言い出しまして。言い出しっぺの法則で、CSS担当させていただくことになりました。
◆要望の多かった「左右対称」レイアウト
実をいうと、左右対称のCSSを配布してほしい、というリクエストはいくつもいただいていました。
今年7月から配布になった「CSS編集用デザイン」は、左右非対称です。これまで左右対称のデザインに慣れている方が多く、また、安定感が出しやすいということもあり、要望が高いのだと思います。
ただ、私個人は左右非対称が別に嫌いではなかったのと、現在の「CSS編集用デザイン」は、カラム幅の変更にともなう変更点が多く、
「めんどくさいから後回し、そのうち配布するかもね」
を、もうちょっとオブラートに包んだ言い方で、まとめて棚上げにしていました。
ところが、お二人のコラボが前提になったとたん、ひいこさんに「すごいスピード」と言っていただける速度で、さくさくCSSが書けてしまいました。
ミ^。^彡っまぁ、現金。
脇カラム広告が入るサイズの脇カラムを両側に置く、というレイアウトを前提に、お二人が描き上げてくださったのが、幅310px・高さ600pxの２枚のイラストです。
テーマは、「和」。
◆右・ひいこ@過充電さんのイラスト
右側が、ひいこ@過充電さんのイラストです。
ひいこさんのブログ（http://ameblo.jp/fakeholic/）のヘッダーの女の子に似たタッチで女の子が描かれ、目元と頬と唇にさされた紅が、祭り化粧のようにも見えます。こっくりと塗りこまれた暖かそうな質感の着物に、あえて違う質感のモチーフが加えられています。光沢のある雲型やフラミンゴのような鳥、金属箔で作ったような植物、立体感のある玉飾り、思い切りポップに書割のように処理された富士山、など。
質感は違い、鮮やかな色も多用されているにもかかわらず、全体としては「にぎやかな統一感」がある絵だと思います。
お正月、成人式、卒業式と、「おめでとう」の言葉を交わすイベントが続く季節の「和」でしょうか。
◆左・marinさんのイラスト
左側が、marinさんのイラストです。
こちらも、marinさんのブログ（http://ameblo.jp/grotesquedesign/）のヘッダーの人物（と、うさぎ＾＾）を連想させますが、こぶりの角をつけた鬼の子です。
「寒いって何？」
とか言いそうな、両手両足を大きく出した衣装、けれどたしかに「和」のテイストです。
こちらのイラストも鮮やかな色を多用しているのに、統一感のあるもの。二色の髪にあわせて、左右の目の色もわずかに違います。
うさぎは、marinさんのデザインに繰り返し登場するモチーフ。今回は大小二人づれ。耳を下げられて痛くないのかな？という疑問に答えるかのように、ニヤリと笑った小ウサギの口元が印象的。
◆「改造系グル」（ブログカスタマイズを主題にしたグルっぽ）の流行「アイフレ」
ブログカスタマイズを主題にしたグルっぽをけっこう覗いているのですが。なぜか、小・中・高校生ユーザーが多いのですよね。カスタマイズTIPS系のブログのコメント欄には、大人ユーザーも多いのに。「グルっぽ」が大人に向かないということも、ないだろうと思うんですが。
その若手系グルっぽでいま流行しているのが、「アイフレ」と称して、小さなスクロールボックスをposition:absoluteで幾つも配置するレイアウト。
冒頭に書いたとおり「左右対称」レイアウトのリクエストがあるのも、「記事の両側に『アイフレ』をつけたい」という前提があってのもの。
……なのですが。
ブログを開いた瞬間、小さく区切られた画面に文字があちこちあると、「どこから読むの？」と目が迷子になるような気がします。
今回のレイアウトでは、画面を開いた瞬間に見える文字は、記事だけ。もちろん、こんなレイアウトができるのは、画面のデザインを支える強力なイラストあってこそ、なんですが。
「こんなのも、たまにはいいでしょ」
そんな気持ちもこもったレイアウトなのです。
◆このデザインは配布の予定です。
現状、IE８とGoogleChromeで、画面を小さくしても下スクロールバーが出ないという問題がありますが。なんとか、この点を解決したら
http://adan.noor.jp/ameba_new
にて配布させていただく予定です。