Before

after

変えたとこ

• 白っぽくなります
• 横幅100%になります
• ボタン類のスタイルが変わります（Twitter Bootstrapをパクってベースにしています）
• メッセージ投稿画面などにTextile記法のヘルプが表示されます
• カレンダーのスタイルがGoogle Calendarとだいたい同じになります

インストール方法

1. Stylishをインストールする。（Firefox版／Chrome版）。
2. userstyles.orgでコードをインストールする。 http://userstyles.org/styles/60151/minimal-basecamp
3. ※Chromeでしか見てないのでfirefoxで見え方がおかしいかもしれません

どうぞご利用ください

例によって自分のために書いたので最低限の部分しか作ってませんが、ご自由にお使いください。

Basecampを良い感じにするuserstyle書いた is a post from: SANOGRAPHIX.NET

ふぉぶさんからの依頼で、タイバニ再録本の装幀を担当しました。

大きい画像はpixivにあります。
http://www.pixiv.net/member_illust.php?mode=medium&illust_id=24767091

2/12のオンリーで頒布予定です。よろしくどうぞー。

タイバニ再録本の装幀を担当しました is a post from: SANOGRAPHIX.NET

で、そのチャットワークなんですが、もう少し配色を自分好みにしようと思ってCSSを書きました。

before

after

変えたとこ

• 全体的にモノトーンになります
• 広告が消えます
• フッタの存在感を薄くします
• ロゴが変わります
• エモーティコン入力するボタンは非表示になります（使わないし）
• アイコンが一部変わります

インストール方法

1. Stylishをインストールする。（Firefox版／Chrome版）。
2. userstyles.orgでコードをインストールする。 http://userstyles.org/styles/59988/chatwork

どうぞご利用ください

自分のために書いたので最低限の部分しか作ってませんが、ご自由にお使いください。

ChatworkをモノトーンにするCSS書いた is a post from: SANOGRAPHIX.NET

メール書くのだるい

僕はメールを書くのがものすごい苦手で、できるだけ書かずに仕事したいと思っています。なんでかというと、ある程度まとまった文章を書く必要があるので非常に時間がかかるのと、割と仲良い人と仕事するとき「いつもお世話になっております」とか書いたりするのがバカバカしいし、妙に敬語っぽくなったり署名つけたりする必要があるのが本当に時間と労力の無駄だと思うからです。そんなわけで、なんとかメールを使わずに仕事ができないものかと色々試してみたら、メール全然書かなくても普通に仕事ができる、っていうか捗りまくったので幸せになれました。ちなみに、規模的には2～3人の少人数で1～2ヶ月間くらい一緒に何か作る、というのを前提にした話です。

なに使ったか

• グループウェア：チャットワーク
• ファイル送受信：Dropboxの共有フォルダ
• MTG：Skype

グループウェアは色々ありますが、少人数・短期間ならチャットワークが一番良いかなと思っています。チャットワークはタスク管理ができるBelugaみたいなウェブアプリケーションで、ブラウザから使えるうえにiPhone/Androidアプリもあります。タスクを相手に依頼できるのが便利だし、使い方が簡単なので導入しやすいです。メール通知をONにしておけばチャットが更新されたときに通知メールが届くので便利です。推奨ブラウザがChromeなのも個人的に◎。

ファイルの送受信は基本的に全部Dropboxの共有フォルダで行います。これも導入が楽だし、間違えて消しちゃったり上書きしちゃったファイルも復元できるのが安心感あります。

打ち合わせはSkypeです。デザインのコンセプトとかは文章より喋る方が伝わりやすいし、定期的にクライアントと話した方がモチベーション維持できるので、同人の案件だと1週間に1回くらいボイスチャットで進捗を共有したりします。あと画面共有をよく使います。

メールいらなかった

というわけで、最近やってた案件は、最初の「これとこれとこれ導入してくださいね」っていう案内だけメールで送って、そのあとは上記のツールだけを使って作業してました。非常に捗るのでおすすめです。

仕事でメール書くのをやめたら捗りまくった件について is a post from: SANOGRAPHIX.NET

もうすぐ年末ですが、今年何があったか既に思い出せないので、今年作った主な制作物を並べて思い出すことにしました。

2011.02　ブラスターテッカマン ブレード／エビル

CL:飛山商店
なんか2011年に作ったとは信じがたいというか、よくわからないけどはるか昔に作ったような気がします…。
制作物とはまったく関係ないですが、ワンフェス当日に飛山君が自宅のカーペットをストーブか何かで焦がしてしまい本気で凹んでいたのが印象的でした。

2011.02　STALEMATE

CL:かづき・塩子
イベントのロゴ。このときは作り終わったらすぐ別の案件、みたいな感じになって、結局いつイベントが開催されたのかも把握できてなかったので、ロゴが実際どう使われたかもよく分かってないです。そういうのはとても良くないですね。

2011.03　オオカミさんに恋しちゃった赤ずきん

CL:みちょこ
映像作品のためのロゴは多分これが初めてだったと思います。本編では確か白抜きで使われたような気がしますが記憶が定かではありません（やっぱりよく分かってない）。

2011.03　名刺デザイン

CL:ひでつう
同人じゃない案件もやってるんですよ！

2011.05　Love Letter

CL:ちづ
厚さが35mmもあって、背を作るとき興奮しました。こんなに厚い本は滅多に作れないです。実は表紙に誤植があり申し訳ない気分になります。

2011.05　Calling

CL:t-03
イラストが良いと大抵白い表紙になってしまいます。これは特に髪の毛の部分がすごく好きです。ここを活かすなら背景は白しか考えられない気がしました。白に逃げてるわけじゃないンよ…。

2011.08　NARITA AIRPORT WARS

CL:白桜悠都
白い表紙が続くのでちゃんと仕事してるのか疑われそうですね（ちゃんとやってますよ）！この案件はカジュアルなミリタリー感がコンセプトだった気がします。ちなみにロゴ作ってるとき気付いたんですがヘルベチカでミリタリー風にするとストパンっぽくなります。

2011.08　花束とプリズム

CL:シノアサ
部数たくさん出るのいいことに、無理を言ってカバー全面箔押しにしました…。すみませんでした…。けど仕上がりはすごく良くて、細い文字の部分も綺麗に出ていて、やっぱり箔押しにして良かったと思いました。自分の文章力の無さに泣けてきました。

2011.08　jadda vol.01

CL:なし
所属してるサークルの会誌です。あまりにもつらいスケジュールだったので、この本は絶対に世に出さないとダメだ、みたいな謎の責務感を自分に植え付けることで乗り切りました。 USTやったり告知サイト作ったりしたら自分の観測範囲外の人も反応してくれていて、頑張って何か作ればちゃんと届くんだ、と実感できたのでそれなりに手応えを感じました。
http://www.jadda.info/jaddavol01.html

2011.09　Strawberry Magic

CL:柴犬
ロゴを作るのは本当に難しいしストレスが溜まります。特に良い案が浮かばないときの「このまま何も浮かばなかったらどうしよう」的な焦りは寿命と精神力が削られる感じがします。けどアイデアが浮かんだときの快感が麻薬的なのでやめられないです。

2011.10　SANOGRAPHIX.NETリニューアル

CL:なし
全然クライアントワークではなく個人的な話ですが、サイトを作り替えたのは今年特に頑張った感があります。WordPressを使っていますが既存のテーマとかに頼らず、テンプレート自分で全部書いたので誰か褒めてください。

2011.10　白い弾丸列車

CL:白桜悠都
僕はプロダクトポエトリーを積極的に使っていますが、このジャケットは特に自重せず使っており、あらゆる面にプロダクトポエトリーをべたべた貼り付けました。そしたら思いのほか格好よくなったのでやっぱりプロダクトポエトリーは良いなあと思いました。

2011.10　Grim Kreuz

CL:A.m.u
トールケース、手軽に商業感が出せて結構面白いですね。一番頑張った部分はオモテ面ではなく、ジャケット裏面の権利表記とかディスク取り扱い注意とかの細かい文字組です。ここの文字組をいかにキチッとするかに命をかけるデザイナは割と多い気がします。

2011.10　Working Alacarte!!

CL:ほなみ
大抵、テーマやコンセプトが明確だと、ゴールが見えるから作っていて楽しいし、良いものになる確率が上がります。これは「贋作（フェイク）をそれっぽく見せる」を個人的なテーマにしていて、それに向かって作れば良かったのですごく楽しかったです。楽しいと心に余裕が生まれるので、ここはこうしたいんですけど！って提案を自信持って出来るし、それを受けたクライアント側もじゃあそこにはこんなネタはどうですか、みたいになって良いサイクルが廻るから良いものができる感じがします。

2011.10　Neue Vielfalt

CL:蛍灯翔
実はデザイン自体は3月にほぼ終わっていましたが、諸事情で頒布が遅れて10月になりました。なので、CDジャケットを制作するのはこの案件が初めてでした。しかしCDって判型といいケースの素材感といい、どんなことやっても大体かっこよくなってずるいと思いました。正方形なのがずるい。B5サイズの本とか最高に難しくていつも苦労しています。

2011.12　3rd Marriage

CL:三野
この案件の話ではないんですが、女性向け同人は暗黙のルールとかマナーみたいのが色々あって、それを逸脱すると叩かれやすくなるので注意が必要です。しかも叩かれるのが僕ではなく主催の方だったりするので、気にせずやっちゃえ、というわけにもいかず、どうしたものかと思っています。未だにその界隈のルールとか空気がよく分かっていないので大抵おっかなびっくり作っています。
http://www.k5.dion.ne.jp/~onim/3rdmarriage/

2011.12　くちびるセンチメンタル

CL:影人
これはC81頒布なのでまだ出てない、というか先日告知したやつです。まだ実物を見ていません。こういう、良いイラストを使える案件は気持ちが乗ってくるし、絵描きさんはすごいなァと常々思います。

このほかにも非公開の案件とか細々したやつとかポシャった案件が幾つかありました。今年はCDジャケットを幾つか作れたのと、jaddaを出せたのがよかったです。

2011年のSANOGRAPHIX.NETを振り返る is a post from: SANOGRAPHIX.NET

影人さんの冬コミ新刊の装幀を担当しました。

カバーイラストはGEOGRAPHICでもおなじみの爽々さん。大きめにトリミングしたので繊細なタッチがよくわかるようになってます。カバーめくっても美しいです。コミケ2日目頒布なのでよろしくどうぞ。

詳細は以下のURLから。
http://eito.ehoh.net/info/info.html

アスカ×レイ小説本の装幀を担当しました is a post from: SANOGRAPHIX.NET

シズイザアンソロの告知ページを制作しました。

http://www.k5.dion.ne.jp/~onim/3rdmarriage/

あとロゴ・冬コミ頒布のフライヤーも僕が担当しています。

解説

制作期間1.5日くらいで、サクッと作りました。遊べそうな部分は、（あまりあざとくない程度に）jQueryとかで遊んでみました。

HTML5+CSS3

最近のサイトはHTML5が多くなっているので、このページもHTML5+CSS3で作っています。ただし、アクセスするユーザーの殆どが女性なのでIEユーザーの比率がかなり高くなるだろうと予想されます。IE対策をしっかり行わないと悲惨なことになる予感がします…。

IEはHTML5（とMedia Queries）に対応していないので、別途jsを読み込んで対応する必要があります。

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

認証ページ

認証ページ（「ENTER」と出てるページ）を作るのが面倒だったので、位置固定のボックスをサイト全体にかぶせて、ボタンをクリックしたら上にスルスルッと隠れる、みたいにしました。

HTML

<div class="enterbox">
  <p>当サイトは、2012年5月13日「この因縁、立ち入り禁止×３」にて発行予定の<br/>
     デュラララ!!平和島静雄×折原臨也 結婚アンソロジー告知サイトです。<br/>
     当企画は個人が主催するものであり、全ての企業・関係者とは一切関係ありません。 
  </p>
  <p class="enterbutton"><span>ENTER</span></p>
</div>
<div class="main">
  <!--ここから本文-->
</div>

jQuery

$(function(){
$(".enterbutton").click(function () {
      $(".enterbox").slideUp("slow","easeInBack");
     });
});

CSS

.enterbox{
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#f75395;
	padding:20px;
	color:#fff;
	z-index:9999;
}

星とか散らしてヘヴン状態っぽくする

テキストと背景イラストの間に1枚divを挟んで、手書きの星やハートをたくさん散らしました。手前のテキストとスクロールする速度を変える処理を行っているので、サイトに奥行きが出てヘヴン状態っぽい感じが出ます。

コードはほとんどここのコピーです。
jQueryで奥行きのある背景スクロールを作ってみる

HTML

<div class="star">
  <div class="main">
    <!--ここに本文-->
  </div>
</div>

jQuery

$(document).ready(function() {
  $(window).scroll(function(){
    var y = jQuery(this).scrollTop();
    $('.star').css('background-position', '50% ' + parseInt( -y / 3 ) + 'px');
  });
});

CSS

.star{
   background: url(../images/star.png);
}

そのほか何箇所か仕込みを入れた部分があるので探してみてください。
執筆者も近日公開されるのでDRRRクラスタの方はよろしくどうぞ。

アンソロの告知ページを制作しました is a post from: SANOGRAPHIX.NET

SANOGRAPHIX.NETのFacebookページを作りました。
http://www.facebook.com/sanographix.net

ブログの更新通知と、普段の活動に関することをウォールにpostします。というかfacebookページを作ってみたかったから作ったので大した目的はありません。

わりとめんどかった

最初に表示されるWelcomeページはiframeになってて、中のページはWordPressテンプレートで作ったのですが、SSLに対応させないといけなくてその設定をするのが妙にややこしく苦労しました。

いいね押してくれると僕が喜びます

いいね乞食なので押してくだしあ！！１１

SANOGRAPHIXのFacebookページを作りました is a post from: SANOGRAPHIX.NET

AutoPagerizeは、複数ページをスクロールで次々と表示できる便利機能です。
ダウンロードは以下のURLから。
http://autopagerize.net/

AutoPagerizeに対応しました is a post from: SANOGRAPHIX.NET

概要

IEで閲覧したユーザーだけに、メッセージボックスをページ上部に表示させます。IE対応がほんとめんどくさいっていうか古いバージョンのIEとかオワコンなので作りました。

サンプル

こういう感じで出ます。

使い方

表示させたいバージョンを選んでコードをコピーし、あなたのサイトの<body>タグ直下に貼り付けてください。 7行目background-color、8行目color、9行目borderはそれぞれボックス背景色、文字色、ボックス下枠線色です。お好みで変えてください。デフォルトでは薄いグレーです。

ボックスはIE用条件分岐コメントで出し分けているだけです。複雑なコード書けないです…。

IE8以下で閲覧したときメッセージを出す

<!--[if lte IE 8.0]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

IE7以下で閲覧したときメッセージを出す

<!--[if lte IE 7.0]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

バージョンにかかわらずIEで閲覧したときメッセージを出す（IEホビロンな人向け）

<!--[if IE]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

キャラクター

オワコンちゃん（暫定）は、みちょこさん（@michocolate）に描いてもらいました。かわいいですね！

どうぞご利用ください

自由に利用・改変してください。なお利用することによって生じた不利益については一切責任を負いません。IEユーザー減らそう！

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました is a post from: SANOGRAPHIX.NET