サヨナラ、君の為に。

sequelさんとのコラボ三曲目。
犠牲離別の歌。

これは、以前作った特設ページ収録楽曲です。
【ボーマス19】outskirts Official Web（アウトスカーツ公式webサイト）特設ページ作りました
http://tukilog.jugem.jp/?eid=1243

歌詞　「decide」

サヨナラ　君の為に　別れを選ぶしかない
身勝手な優しさ　迷い滲む

貰ったもの全部　持ちきれそうにないよ
お揃いのマグカップ　赤い縁の眼鏡　みんな

毛布に包まり　話していた夢を
叶える為には　隣に私は要らない

サヨナラ　君の為に　独りを選ぶ私
鳥籠壊せば　大きな翼

背中を見ていれば　気付く事もあるよ
私の事で嘘は　ついたことなんかないのにね

欲しいものの無い　身軽な私とは
同じ毎日を　繰り返しても何も無い

サヨナラ　言えないまま　季節が変わろうとする
好きです　嫌です　浅い眠り

忘れて生きられるの　毎晩目を腫らしたの
微熱に溶かした　消えそうな声

サヨナラ　君と未来　解れた小指の祈り
答えは聞けない　足音だけ遠く響く

クレジット、URL

4/1あとで追加します

ボーマス19に向けての名刺も作りました！

イラストは「にぼしさん」です！
イラストかわいい！！
もうイラストだけで持っているといっても過言ではない背面。

しかし、、、
結局ボマス当日は仕事があったため、いけませんでした。。。
なのでこの名刺は一枚も配らず今も手元に・・・。
まぁ100枚くらい、何かのオフ会に参加すれば無くなるし。。。
それか次回ボマスで使います。。。

最近はTwitter経由でwebデザイン系や他のオフ会、勉強会にいくことも増えました。
全く初めての人との出会いも結構多くなってきたので、
ボカロ以外でも使えるように名刺を表裏で作りました。

システム屋さんの名刺とか裏面凄くわかりやすくて、
どんな技術を持ってるかなど一覧になってるんですね。
（自分用のロゴとかないから色々それっぽいだけで適当なのがアレですが…そ、そのうち。）

ボーマス19に向けての特設ページ、今回4+1つ、作りました

5つっていっても1ページものが4つなので、
「webサイト　1個」よりもボリューム小さいんですけどね。
数だけ見るとなんだかすごく沢山作ったような錯覚が。

【ボーマス19】変拍子コンピレーションアルバム2「Nice beat.」特設ページ作りました

【ボーマス19】outskirts Official Web（アウトスカーツ公式webサイト）特設ページ作りました

【ボーマス19】メカクシティアクターズ　じん/自然の敵P 1st ALBUM特設ページ作りました

【ボーマス19】MONSTERS[otherside Recording 1st COMPILATION ALBUM]特設ページ作りました

【ボーマス19の翌週】earnest words（アーネストワーズ） 公式サイト作りました2/11（祝・土）渋谷DESEO　

今後の感じ

作詞を担当したのがいくつかと、
現在依頼されているwebページ的な何かを随時進行中です。
大体Twitterにいますので、そちらを見て頂ければと。
http://twitter.com/YumiSora

その5　（ボーマス19に向けての特設ページ、今回4+1つ、作りました）

インターネット発のライブイベント「earnest words（アーネストワーズ）」の
webサイトを担当しました。
デザインと写真加工、htmlテンプレートの構築を担当。
運営は主催のらっこさんにお任せしています。
iPhoneでの閲覧も一応可能なようになっています。

ナビゲーション部にちょろっとギミックを。
・マウスオーバーでアニメーション（横幅可変、背景画像使用）
・現在ページのデフォルト表示

任意の色や指定画像など色々変更できるんですが、
5パターンくらい作ってらっこさんと確認した所、
結局シンプルにするのが一番カッコよかったです。

「ツイートする」「いいねボタン」がJavaScriptで重い気がします。
最近は外部サービスの埋め込みが多いからなんとかならないものか…。
iPhone対策でFlashじゃなくても動かせるように色々思案中です。

　・earnest words【インターネット発のライブイベント「アーネストワーズ」】
　　http://earnest-words.com/

その4　（ボーマス19に向けての特設ページ、今回4+1つ、作りました）

MONSTERS[otherside Recording 1st COMPILATION ALBUM]
の特設ページを担当しました。
デザインを元にwebページ用微調整ととhtmlコーディングを担当。
iPhoneでの閲覧も一応可能なようになっています。

iPhoneだと背景の大きな画像は自動縮小されてしまう仕様？バグ？？
があるため、PC版と同じように閲覧できるようにちょっと強引に対応しています。
きちんとマウスも反応しないようにとか、できるだけ軽くなるように？とか細々と工夫を。

試聴プレイヤーのFlash部は自作しました。
これで色変えや機能拡張も自由に出来る！
jQueryとSWFObjectで同じプレイヤーをババババっと一括配置できるようにとか。

　・MONSTERS[otherside Recording 1st COMPILATION ALBUM]
　　 http://os-rec.com/02/

ニコニコ動画

その3　（ボーマス19に向けての特設ページ、今回4+1つ、作りました）

カゲロウデイズ、ヘッドフォンアクター、想像フォレストなどの「じん/自然の敵P」
ファーストアルバム「メカクシティアクターズ」の特設ページを担当しました。
デザインを元にwebページ用微調整ととhtmlコーディングを担当。
iPhoneでの閲覧も一応可能なようになっています。

iPhoneだと背景の大きな画像は自動縮小されてしまう仕様？バグ？？
があるため、PC版と同じように閲覧できるようにちょっと強引に対応しています。
きちんとマウスも反応しないようにとか、できるだけ軽くなるように？とか細々と工夫を。

試聴プレイヤーのFlash部は自作しました。
これで色変えや機能拡張も自由に出来る！
jQueryとSWFObjectで同じプレイヤーをババババっと一括配置できるようにとか。

　・メカクシティアクターズ　じん/自然の敵P 1st ALBUM | otherside Recording[OSRCD-0001]
　　 http://os-rec.com/01/

ニコニコ動画

その2　（ボーマス19に向けての特設ページ、今回4+1つ、作りました）

新サークル「outskirts（アウトスカーツ）」の特設ページを担当しました。
イラストを元にwebページデザインとhtmlコーディングを担当。
iPhoneでの閲覧も一応可能なようになっています。

・iPhoneのSafariで見るとスクロールなしでピッタリ！
・埋め込み動画部をYoutubeにすることによりiPhoneでも閲覧可能
・SEO対策（outskirts、アウトスカーツ、あうとすかーつ　などでGoogle 1〜5位くらい）
・他、細部で依頼主の要望にこまごまと対応

　・outskirts Official Web（アウトスカーツ公式webサイト）
　　http://the-outskirts.com/

7曲目「decide」、作詞担当してます

このCDは7曲目の「decide（初音ミク）」にユミソラが作詞担当してます。
そのうちニコニコ動画に投稿されると思うので、
その際はぜひ聞いてみてください。

ニコニコ動画

■2012年2月5日(日) 、THE VOC@LOiD M@STER 19にて頒布しました
1stミニアルバムのクロスフェードデモです。

■サークル名「outskirts(アウトスカーツ)」
会場頒布価格:500円

■メンバー
morlbon(mylist/18641487) / sequel(mylist/4989802) / やしきん(mylist/12644527) /
SaC(mylist/30217416) / ワタル(mylist/13272395)
ジャケットイラスト：KYAN-DOG

■公式サイト
http://the-outskirts.com/

■後日委託販売も予定しております。

その1　（ボーマス19に向けての特設ページ、今回4+1つ、作りました）

ミックスモダンさん主催の「変拍子コンピ2」の特設ページを担当しました。
CD用入稿データを元にwebページのデザインとhtmlコーディングを担当。
iPhoneでも一応閲覧可能なようになっています。

　・変拍子コンピレーションアルバム2「Nice beat.」特設サイト　ボーマス19：B21-22にて頒布
　　http://abnormalps.komusou.jp/

ニコニコ動画

（この）中に、4/4はありませんよ？

2012年2月5日、池袋サンシャインシティ・ワールドインポートマート4F展示ホールA2・3
THE VOC@LOiD M@STER 19にて頒布
ブース：B21-22
サークル名：アブノーマルプロデューサーズ
会場頒布価格：　1,000円
後日通販もします！詳細は特設サイトにて！

http://abnormalps.komusou.jp/

参加メンバー（五十音順）
OSTER project・大丈夫P・たけ（鍵盤無双P）・デスおはぎ・なきゃむりゃ・nana(Sevencolors)・FICUSEL・まももP・ミックスモダン・millstones・もちごめ・uzP・Lemm

マスタリング：シグナルP
イラスト：やじるし
CDデザイン・ロゴ・クロスフェード動画：とりっちょ
Webデザイン：ユミソラ

久々の新曲です！

『「嫌いな私」の中閉じこもってる　「ホントの私」は嫌いじゃないでしょ？』

エレグミさんが何やら7週連続投稿なんてことをやってます。
すごい。。。
それの6曲目を担当させて頂きました。

自己愛埋の歌。
曖昧身囲真陰な感じです。

普通、こういう連続企画って既に完成させてからやりませんか？
何故か作りながら連続投稿しているという無謀っぷり…
しかもこの曲の最中引越しを強行するというドMのエレグミさん・・・
どういうことなのｗｗｗ

今回とにかく時間が無かった訳ですが、なんとかなりました。
エレグミさんの絵は今までかわいい系が多かったんですが、
エレグミさんと「なんかこう、、、曲的に別テイストの絵はどうだろう？」という話になり、
またがんばってPIXIV見まくって見つけた絵師さんが「のう」さん！
カッコイイ！！
いつもの如く突撃しました！！！
（今回はエレグミさんが）

今回は曲→歌詞→絵→動画→絵→歌詞→絵→曲→動画・・・
みたいな感じで、上手く同時平行できたと思います。
絵が来て、動画になって曲が流れてから、
「あ、この感じだとここの歌詞はこうだな・・・」とか調整しました。
「そうなると、首輪と舌が欲しいな・・・」と後付けしてもらったり。
時間が無い中本当にありがとうございます、のうさん。

歌詞　「曖昧セルフィッシュ」

【1番】
「壊れた世界　別に興味なんてないから
　明日に死んでも平気だよ」

錆び付く私が　私のワガママ
聞けずにかまって欲しいだけ


自分に嘘ついて　してる我慢って何？
周りの顔に合わせて息をする

星占いなんか信じてないのに
落ち込んだフリをしてみる


耐え切れなくて　見上げた星空の下に座る
凍えそうな光が嫌い


「嫌いな私」の中閉じこもってる
「ホントの私」は嫌いじゃないでしょ？

もうどうせ普通なんてできっこないのよ
首輪がないの怖かっただけ

ねぇこんな私にも願いくらいある
押し付けられたらやりたくないでしょ

明日からはなんて変われっこないけど
口先だけの子供のままで「痛くない」




【2番】
「元彼だけど別に終わったことだし
　私は一人でも平気だよ」

新しい彼女は　友達だったの
ザラつくキスと二枚の舌


このまま目逸らして　走り転び出口はどこ
期待してがっかりするくらいなら

最初から何もないほうが楽だとか
ふさぎかけの傷跡舐める


大声を上げて泣き叫ぶのも忘れちゃったから
やさしい君の隣が嫌い


嫌いな私のまま愛して欲しいけど
素直じゃない子は可愛くないでしょ

ねぇ本能少しだけ　ガード緩んだなら
シてホしいコと　溢れそうになる

流行に犯され　頭から爪先まで
本当の私はそんなじゃないでしょ？

もうこんなの私じゃない　じゃぁどんなが私なの
私の中にはもう私いないみたい

クレジット、URL

◆作曲、動画：ELEGUMI TOKYO
　・ニコニコマイリスト
　　http://www.nicovideo.jp/mylist/25497827
　・Twitter
　　http://twitter.com/#!/ELEGUMI

◆作詞：ユミソラ
　・ニコニコマイリスト
　　http://www.nicovideo.jp/mylist/14436138
　・Twitter
　　http://twitter.com/YumiSora

◆イラスト：のう
　・PIXIV
　　http://www.pixiv.net/member.php?id=2460057
　・Twitter
　　http://twitter.com/#!/nounoknown

エレグミさん、ボーマス18にも出ます！

ELEGUMI TOKYO 1st ALBUM
[CATALOG/]
ボマス18＠C65委託先
となのあな
メロンブックス
D-STAGE（予約開始）http://d-stage.com/shop/detail.php?seq=24353
ホワイトキャンバス

その他
↓詳細はコチラで↓
http://elegumi.tumblr.com/

コーディングとトップページのFlash作りました

イラストがスタイリッシュなハツ子さんの公式サイトをリニューアルしました。
元デザインやテイスト傾向はハツ子さんの希望があったので、
それを踏襲してHTMLコーディング。
プラスアルファとしてトップのFlashスライド部？アコーディオン部？？を作りました。
ギャラリー部は外部サービスです。
ぴったりウィンドウにフィットさせるためにJavaScriptにて制御、
htmlとCSSもちょっと工夫してあります。

　・hatsuko.com（ハツコドットコム）
　　http://hatsuko.com/

ハツ子：「自分でも更新したい！」

html初心者がちまちま更新できるような仕組みを少し取り入れています。
Flash部の下部を外部読込画像ですが「一枚」のみです。
バナーのリンク先はJavaScriptで設定してるので、
フッタ部はFlashに触らなくても、web運営に不慣れな人でも更新できるように。

外部読み込みは一見楽そうなんですが、
きちんと読み込み完了してないで動かすと変なことになるので、
読み込み完了してからメインのスライドアニメーションがスタートするようにしてあります。

トップのFlashスライドは「キャラクターの絵、人物絵」に使いやすいように配慮

縦に切れた一覧をマウスオーバーしたら全体が見えるっていうのが、
今回イラストレーターさんの見せ方に丁度いいかなと。

ただ、キャラの体制や構図によっては、等分割で区切れない。
しかし毎回ActionScriptオンリーで位置決定するのはめんどくさい。

そこで今回は、
「狙った所を表示できる」という仕組みをActionScriptでの座標制御でなく、
オブジェクト制御でできるように工夫してあります。
Flash内部で半透明の「範囲指定オブジェクト」を作って、それで覆ってあげた部分が表示。

なので、
・全て閉じた状態
・ひとつ開いている状態
・ひとつ開いている時他は狭くなっている状態
を全て狙った位置にかんたんかつ目視で設定できるようにしてあります。
Flash自体をきちんとオーサリング用として作った感じです。

今までは結構統一した分割や位置だったり、
延々プレビューして狙った位置に行くまで数値指定したりしてたんだけど、
これにより更新が楽に！
内容によって見せ方を少し変えたり！
開いた先でまた別画面でUI（ユーザーインターフェイス）を表示して操作させたり！
とかしやすくしました。

他にも、言葉で説明しにくい工夫が

オープン時の位置をマスク同期するためのバリエーションを、
ActionScriptにて多数変更できるように設定を残してあります。
似たような、でもちょっと違うバリエーションをひとつのflaでつくれるように。

初回オープン時のデモスライドを、
・｢一回目のマウスオーバー時｣は無視
・「二回目のマウスオーバー」でスキップ
・「一回クリック」でスキップ
するようにしたり。
これらの待機時間は初期設定の数値で可能にしてあります。

ムダに汎用性ばかり高くして毎回その汎用を使うだけの更新をしないで終わ（ｒｙ

中身はオーソドックスにこんな感じ。

まだ情報が少ないので、将来的にサイドバーを増やすかも。
OFFLINEページではイベント予定などを告知しています。
THE VOC@LOiD M@STER18と冬のコミケにも出るそうです、
そちらもチェックしてみてください。

ハツ子さん情報

　・hatsuko.com（ハツコドットコム）
　　http://hatsuko.com/

　・ブログ
　　http://hatsuko.com/blog/

　・「hatsuko」のプロフィール [pixiv]
　　http://www.pixiv.net/member.php?id=237559

　・Twitter
　　http://twitter.com/#!/typeh2

　・ハツ子めもり ‐ ニコニコ動画(原宿)
　　http://www.nicovideo.jp/mylist/17864616

サークルロゴ作ったよ

ファミマPこと、ルコさんからのご依頼で、
個人サークル「rucoplus+」の公式ロゴデザインを担当させて頂きました。
ロゴとそのバリエーション例の一部。

ルコさんの情報はブログでどうぞ。
・rucoplus+
　http://rucoplus.blog99.fc2.com/

拡大縮小、web用、印刷用、グッズ展開、
視認性とかもろもろ考慮して作ってみました。
Tシャツやポスターとかもいいですね。
形状的に缶バッチがほしいです。

ロゴ専門ではないので色々拙い所もありますが、
ぐぬぬぬぅぅぅと苦労しながら作りました。
でもすごくたのしかった。
ありがとうルコさん。

最近はロゴのお仕事の依頼も増えてきたのでがんばりたいです。

完成に至るまでの試行錯誤の一部をご紹介。

よくわかんないけどふーん工夫してるんだくらいを見たい人は
「ガイドを引いてみた」だけ見ればOK（ページ下部へジャンプ▼）

ロゴは自己流で、専門的に学んだ訳でもなく…
でも、「どうやって作ってるんですか？」って質問も結構頂くので、
自分なりの作り方の一部をご紹介。
美大とかできちんと学んでる人からしたら有り得ない作り方かも…
お、教えてください…！

最初は色々と感覚で「こんなかんじかなー」と方向性をつかんでいきます。
で、どれがいいかなーってのを色んなパターンや用途を考えて…
何より、どれがきもちいいかなーというのを重視で考えてます。
モチーフどうしようかなーとか。
これじゃー線細くて小さいサイズだとつぶれちゃうなーとかっていう理屈面も、
なんとなく考慮しながらラフラフ。
事前にコンセプトや求められている形状などの制約を考慮しつつ、
メインモチーフになるものはないかなぁーと想像を膨らませていきます。

とりあえず、できたのがこれ。

この段階では、最初に依頼にあったものを考慮しつつ、
思いついたものをとにかく量産しています。
上のほうとか普通すぎてアレですね、、、
でも最初これでもOKってなってたんですよルコさんとも。
微調整終わった今となってはボツです。

そのうち、「・・・ん？？」ってひらめきました。
なんか、果実っぽい、、、木っぽい。。。
ここで閃きました。
形状的に小文字の「r」じゃ弱いなぁと思ってたので
大文字の「R」を使おうと思ってたんですがダサい…。
「r」で、こう、、、女性っぽいラインを出して、
「+」をクローバーに見立ててガーリーにできないかと。
ここで、きちんと読める「r」を捨てて、ベジェ曲線で調整を採用。

ボツも入れるともうちょっと作ったよ

フォントはフォント集の中から事前に20くらいまでピックアップして、
全部適応したものを実際に目視して、その中から選んでます。
web用途の場合は特に、
実際に目で見てみないとアンチエイリアスのかかり具合がわからない。
データがベクターでも最終データはラスターなので、
アンチエイリアスを含め目の錯覚との戦いかなぁと。

ラフなのでやっちゃった感満載のものもありますが、
まずは目視できるようにビジュアル化しています。
本来、依頼主にどこまで見せるかは状況次第だけど、
今回はルコさんにはこのブログの掲載しているものは大体見せました。
経過見せた方が安心だろうし。

実際はこれの2倍くらいの手数で作っては消しをしました。
試行錯誤してると結構あっという間です。
いきなり正解を探すよりも、試行錯誤した方が早くて楽だったり。
考えることも大事だけど、手を動かしていくうちに気づくアイデアもある。
ツールに頼るとツールの発想しか出てこないから、
紙に書いたりするのもいいですね。
お風呂のタイルに指で書いたりもしました。

形状がカワイイカッコイイも大事ですが、
形状だけでなく意味や理由も一緒に考えるようにしてます。

ガイドを引いてみたよ

ルコさんの傾向がつかめて、OKが出たので微調整。
この段階で既に喜んでくれてたけど、
ワイヤーフレーム的というか、
「ただ置いただけ」からどう脱却するかを試行錯誤します。
気持ち良いなぁ〜って場所を探していくと、
「なんでここは気持ちいいんだろう」とか、考えるようになります。
逆に、
「なんでここ気持ちよくならないんだろう…」とかも、考えるようになります。

そこで、気持ちいいものは、大体ルールがあることに気づきます。
そのルールは眺めているだけじゃ気づきにくいので、
ガイドを引いてみましょう。

ここの詳細解説は長くなるので省きます。
色々聞きたい人はオフ会とかでご縁があったら質問してください。

どことどこが同心円で、どことどこ交点がとか、延長線がどうとか…。
でも今回は全部が幾何学系じゃないです、
それだと気持ちよくない部分が出てくるので、
感覚のラインも大事に。。。

例えば、四つ葉と三つ葉は微妙に葉の形が違います。
最初三つ葉と同じにしてたんですが、
繋がった部分の重み的にいまいちだったので、
四葉の方がちょっとだけ太いです。

こういうのやってくと、ラフの時は大体あってたのに、
やれここが合わないだとか、やれここがかわいくないだとか、
どっちかをあわせるとどっちかが合わなくなるとか…。

可能な限り合わせたら、そこから目視の重量感や余白感で多少ずらしたり。
ぴったりすぎると気持ち悪いような部分は、
揃える前とほぼピタリだったりします。
感覚の手助けをする理論だといいなぁと思ってます。
最後は感覚で調整。

そして感覚だけで調整していくともうバラバラぐちゃぐちゃになっちゃって、
やっぱり法則性って大事なんだなぁと、
こんな風に落ち着きました。

実際はこれとは別パターンも作ってみました。

形状的にありかなーおもしろいなーとか思ったんですが、
「rucoplus+」と意味を持たせられなかったので却下。
なんかものすごく取って付けた感じになっちゃって。
カタチだけじゃなくて、ルコさんらしくない感じです。

てっきとーに装飾して「こんな風に発展できますよ」の例がこれ。

影のかかりかたとか四角の形状とか、
グラデかけたりテクスチャ付けたりとか。

実際はこっちももっとちゃんと吟味すべきですね、
とりあえずこんな感じに使えるよって例を見せた感じです。
特に色、グラデ、テクスチャでずいぶん変わります。
単一のグラデだと幾何学的に。
複数のグラデを重ねたり水彩系のにじみのテクスチャを入れると有機的に。
ここからのバリエーションが一番たのしいかもしれない。

ルコさん情報

・rucoplus+
　http://rucoplus.blog99.fc2.com/

・Ruco/時雨屋るこ 【ボーパラG08】 (rucoplus_sh) は Twitter を利用しています
　http://twitter.com/#!/rucoplus_sh

・ニコニコ動画マイリスと　箱庭的な感じの
　http://www.nicovideo.jp/mylist/12278902

ボーパラとボーマスにも出るそうなのでそちらもチェック。

Ruco Shigureya 1st mini album
■『Lost,Dear my heart.』
5曲入りCD＋4Pフルカラーブックレット付
イベント頒布価格：500円

2011/10/30　VOCALOID PARADISE 6
→G08 『ファミなんとかマート　ボーパラ支店』
2011/11/19　THE VOC@LOiD M@STER18
→F79・80『sugirl*music』

イベント終了後、とらのあな・ニコニコ本社に委託予定です。
頒布終了後の再販の予定はございません。

※現時点での予定のため、実際の頒布情報と異なる場合がございます。