to pagetop
:)
spec5zigen Creator's Lab.

はじめまして。
アートディレクター&デザイナーの漆原です。

基本的には本業であるデザインを日々ゴリゴリと作りまくっていますが、
各案件のクオリティチェックや企画、構成にも携わっています。
最近ではCGをグラフィックデザインやUnity等との連携に生かす為、modoというソフトを絶賛習得中です。

さて、関東地方は(長かった?)梅雨も明け、いよいよ夏の到来を感じさせてくれる連日の猛暑。
私の実家から近い館林市では、早速39.2度という訳の分からない数字を叩き出してくれました。
今年は暑くなるんだな…ゴクリと、確かな予感を覚悟していた矢先、
暑さとは何だったのかと言わんばかりの急な寒さ。
前日比マイナス15度て。出鼻挫かれちゃいますよね。

そんな中、弊社では、昨年の暮れ(確か)から密かに練っていたプロジェクト、
「spec5zigen Creator’s Lab.」がついに公開になりました!(前置き長いなおい!)

このブログってなーに?

このブログは、スペック五次元のクリエイター陣が、
多忙な制作業務と並行して半強制的に様々な情報を発信していく場です。

デザインやプログラムに関する技術的なことをはじめ、
これ知っとくと便利だぜ!なネタやTips、社内プロジェクトの近況や開発の裏話、
セミナーや勉強会、美術展のレポート…などなど、
各クリエイターの趣向を織り交ぜた多種多様な情報を社外へアウトプットしていきます。
各個人がまとまった形で書き留めておける備忘録としても大いに活用していく予定です。

業務の合間を見つけては、ちょこちょこっと涙を流しながら更新してまいりますので、
お暇な際は是非、あたたかい眼差しでご覧頂けますと幸いです。

手始めに

最初の記事はご挨拶だけで…と思っていましたが、
それだけではなんか寂しいだろ!という声が聞こえてきそうなので。
このブログ、Creator’s Lab.のデザインについて簡単にご紹介。
私が普段デザインをするにあたって心がけている事や、行っている事も主観的に挟みつつご紹介します。
へーそうなんだーふーん程度にご覧下さいね。

このCreator’s Lab.は、各箇所でノートの処理を施したデザインに仕上げています。見りゃわかる。
インスピレーションはイタリアの手帳ブランド、Moleskine®から。
個人的に物凄い好きなんです。使用しているだけでクリエイティブな感じがして。
正直、機能面で言えば国産メーカーのノートでも無印でも書けりゃ何でもいいんですが、いざ現場でさっとメモやラフを書く時に、モレスキンのノートを取り出した瞬間「デザインやらなきゃ!」みたいな変な緊張感を掻き立たせてくれるのが大きな要因でもあります。

余談ですがレゴとのコラボでこんなのも出てます。私は黒を買いました。
LEGO® Limited Edition Notebooks

それはさておき。

紙で書いたようなアナログな処理や、ノートをモチーフにしたデザインは、Webでも頻繁に用いられるパターンですが(私もデザインどうする?って時によく想定したり使用します)そのようなデザインを作成する時は、「背景画像のループ」に気をつけて作業しています。

そもそもWebのデザインにおいて、背景画像のループを想定するのは当たり前な事なんですが、紙やノートをモチーフとして取り入れたデザインは素材感を出したいがために、背景テクスチャを多様する傾向にあるので、特に気をつけています。

ちなみにこのブログでは、サイドナビ背景の革部分(x,y方向)や、ノートから紙を切り離した境界部分(y方向)にループ処理を施しています。

また、CSSで背景画像をループした上に、更に透過PNG等でオブジェクトを配置する時も注意です。
動作によっては、想定外のエリア上に被ってしまった!なんてこった!なんて悲劇も多々あるので、マークアップエンジニアとは綿密に動作や仕様を打ち合わせる必要があります。

弊社の実績ではワイン厨房 クオーレのサイト等で、背景のループや透過PNGの配置を多様しています。
最背面の木の板、前面に古紙、最前面にフォークや果物等のオブジェクト、ってな構成になっています。

これらをデザインの段階でしっかり作成しておくことで、データサイズの軽量化や、ブラウザやボックス可変領域の広さにも繋がりますし、何よりマークアップが楽になります!←これ重要!

Think with your hands 手を動かして考えよう

このサイトのデザインは結果としてノートという方向性で落ち着きましたが、そこに至るまでに色々な案がありました。

基本的に私は「こんなサイト作るよ!」って話を耳にした日から、業務の合間を見つけてはとにかく手を動かします。
「明らかにこの方向性はないなー」ってのはわざわざ形にしませんが、「結構よさそう」「こんなことやってみたい!」ってのは、とにかく一度形にしてみます。
経験上、実際に作ってみた方がより納得できたり、より良い発想が生まれたりするんです。

故に、私のローカルPCには、事故車の如く乱暴に乗り捨てられた未完成のデザイン達が沢山眠ってます笑

色々なパターンを実際に形にし試行錯誤した事により、例えばその案件に関わるディレクターやクライアントからの質問や思いつきで言われた「こんなんどう?」に対して、「たぶん微妙だと思います」ではなく「〜なので微妙でした」と明確な理由と答えを返すための判断材料になります。

また、第三者だけではなく、デザインの方向性が決まって黙々と手を動かしてる最中の「別のデザイン要素を取り入れてみたらどうかなーいいかもなー…」などといった自身の浮気心を戒める為だったりもします。

俯瞰的かつ否定的に

全体的なトンマナや方向性が決まってからは、今度はスケールを落して、各要素ごとに色々なパターンを想定しておきます。
角丸やエッジ、シャドウやボーダーの持たせ方、グラデーションの割合、色合いや彩度、リストアイコンやマージンの取り方、フォントにとってもゴシックなのか明朝なのか、ジャンプ率を上げるのか…
要素一つ一つのあらゆるパターンを、粘土をこねるように想定したり形にしてみます。

各要素のデザインも大方出来てきたら、次は要素と要素のトンマナやバランスが崩壊してないか、更にそれを囲う親要素との関係性はどうかなど、なるべく俯瞰的に目線は否定的に全体を見ます。
誰のデザインだよコレな…勢いで。

そうやって作っては崩して、遠くから眺めたり談笑したり、席を立ってアイスを食したりなどを繰り返し、答えのない「ベスト」なデザインへ少しずつ近付けるよう作業しています。

もちろん納期キツキツのクライアントワークとかでは、片っ端から形にして〜なんていちいち行えるわけではありませんが、時間が許す限りワンパターンに固執せず極力そうするようにしています。結構泥臭いんです。

ってなわけで!
草案時に生まれたラフデザイン達を大公開。
決して日の目に当たることの無いはずの中途半端な姿を成したボツ達。
まさかこんなトコで公開されるなんて!畜生!と思ってるんでしょうね、ごめんな……笑

まだまだアップデートかかります!

このブログのデザイン編集データには、現状のサイトにまだ反映されていないデザインや機能が多数存在します。
今後のバージョンアップにて、記事一覧をビジュアル重視で表示できる機能や、ヘッダー左部にあるリボンのインタラクティブな機能の追加を考えてます。
スタンダードの変遷が速いこの業界、様々な技術の進化と併せて、このブログも少しずつ形を変えていく予定です!
ボソッ。>>気付いたら実装してくれちゃう素敵なマークアップエンジニアさん

また、このCreator’s Lab.とは別に前々から運営しているディレクター陣によるブログも、現在リニューアル進行中です。
こちら、公開はもう少し先になりますがどうぞご期待下さい。
現在のサイトはこちら。

さて皆さん、初回の記事いかがでしたでしょうか?
凄く、読み疲れたでしょう!どーん
そんな訳でどんな訳で、今後ともCreator’s Lab.をどうぞよろしくお願いします!