インターン生だけど書いちゃいます。

jsdo.itってご存知？

せーの！jsdo.it！

 

Webブラウザで簡単JS！HTML5！CSS3！

jsdo.itではInternetExplorerやFirefoxなどのWebブラウザだけでコードが書けちゃいます。

コーディング画面のすぐ隣に実行結果が表示されるので、とてもわかりやすい！

時々普通にHTML書くよりも便利なんじゃないかって思います。

 

話題のHTML5やCSS3を使った作品も多いとか。

 

ブラウザの違いを気にする必要はなし？

実務でWebサイトを制作している方は、

閲覧者側の環境の違いにやきもきしてる人がほとんどではないでしょうか。

jsdo.itでコードを書く時にはWebブラウザの違いなど、閲覧者側の環境を気にする必要がありません！

 

HTML5やCSS3を使った作品も多いって所にもつながってくるのですが、

閲覧するユーザのほとんどがWebに興味を持つ人たちだからです。

 

実務ではまだまだ使えないHTML5やCSS3を先取りで遊んじゃおう！

ジャストドゥーイットゥ！

 

ヘビーJSerの技を盗め！Fork機能！

jsdo.itでは多くのJSer（JS技術者）によって

「えっFlashじゃないの？」と思うほどハイレベルな作品がたくさん投稿されています。

しかもそれらのコードはForkという機能を使うことで、編集が可能になるのです。

 

Forkとは

他のユーザのつくったコードをコピーし、編集して自分の作品に利用できること。

元々あるコードを改変することで自身のスキルアップを目指しましょう！

 

 

いきなりハイレベルなコードのForkに挑戦して一気にスキルアップを狙うもよし、

自分のレベルよりちょっと上くらいのコードをForkして手堅くスキルアップするもよしです！

jsdo.itのFlash版！「wonderfl」もあります。

 

 

Forkしてみました。

「Fork機能ったってJSできないから意味ないもん。」

 

そんなことないです。

実はJSの知識0でも簡単にForkで遊べます！

 

しかも、ちょっとコードをイジるだけで、

あたかも自分がプログラミングをしたかのような優越感を味わえるのです！（どーん）

 

コードを選ぶ

jsdo.itには様々なランキングが用意されています。

デイリーランキングなんかは、簡単にランクインできるので楽しいですよ！

今回はお気に入りコードランキング1位のこちら作品をForkして遊んでみます。

（以下にコードを貼り付けます。右下の「PLAY」ボタンを押してコードを実行してみて下さい！）

Particle 3000 - jsdo.it - share JavaScript, HTML5 and CSS

 

無数のパーティクル（微小なもの）がカーソルに集まってきます。

このコードをどうForkしよう、えへへ

 

clockmakerさんはwonderflでも活躍している凄腕クリエイターです。

今回のコードをつくっているclockmakerさんはjsdo.itのだけでなく、wonderflでも活躍なさっている方です。

wonderflの美しい作品を集めたサイト「Beautifl」の運営もして下さっています！

いつもありがとうございます！ソースコードお借りします！！

 

数値を変えれば何かが起こる！

コードを見てみると数値がたくさん使われているのが分かると思います。

このように数値がたくさん使われているJSコードがForkで遊ぶための狙い目だったりします。

 

• 数値を適当に変えてみる
• 実行結果がおかしくなったり、何も変わらなかったら元の値に戻す
• 実行結果が上手く変化したら、他の値も試してみる

これらを繰り返すと、

「あっココを変えるとソコが変わるのか！」

と気付くと思います。

 

ここを（改変前）

 

こうしたり（改変後）

 

ここを（改変前）

 

こうしたりします。（改変後）

 

数値をイジった箇所には【変えたよ！(`・ω・)】をつけてあります。

 

 

そうした手順でForkコードを完成させたのがこちらです。

forked from: Particle 3000 - jsdo.it - share JavaScript, HTML5 and CSS

 

【変えたよ！(`・ω・)】はあと2箇所あるので、探してみて下さい！

 

これだけであたかもJSerです！

こんな風にForkしてコードを変えていくと、それだけでJSの勉強になります。

僕なんてすでに自分でJSプログラミングした気でいます！（ばーん）

 

このようにJSできないのに優越感に浸れることを「あたかもJSer」と名付けてみました。

 

さいごに(`・ω・)

カヤックではjsdo.itの他にもたくさんの面白いサービスを運営、制作しています。

次のあたかもJSerは君だ！面白法人のインターンシップ！

 

特に学生のかた！インターンシップに参加してみませんか？

家で一人もっそりつくるのと、実務としてみんなでつくるのには大きな違いがありますよ！

 

ジャストドゥーイットゥ！

大量の画像管理にはBridge

いきなりですが、お勧めします。

初めまして、新米のKinoです。

みなさんのアプリケーションフォルダにはきっと収まっているはずなのになかなか陽の目を見ない、このソフト。

Adobe Bridge

僕はたくさんの画像を管理するのに重宝しているんです。

今回は、ちょっと覚えるだけで画像管理にBridgeを使いたくなる機能を紹介しますよ〜

1. サブフォルダ表示＋ラベリングでラクラク画像セレクト！
2. 複数ファイルの細部を同時に確認！

画像セレクトをする人にオススメです

それではどうぞ〜

Bridgeってそもそもなんですか？

そういえば、知らない人も多いはず。。

BridgeはAdobe社製のマネージメントアプリです。
単体で加工や編集はできませんが、Creative Suitesの全アプリケーションの仲介役として、ファイルの閲覧や管理を行うことができます
その性質から単体での販売はしておらず、他ソフトを購入すると付属としてついてきます。

Bridgeって何がいいの？

そもそも管理ソフトってフリー・シェア問わずたくさんありますよね。

Bridgeの良いところは

1. 買わなくていい！（イラレやフォトショ、フラッシュについてくる）
2. Adobe純正ならではの連携機能あり
3. サブフォルダ表示＋ラベリングでラクラク画像セレクト！
4. 複数ファイルの細部を同時に確認！

1番は文字通りです。あるなら使わなきゃ損ってことで僕は使い始めました。

2番はそれこそたくさんの機能があるので、今回は割愛します。RAWファイルの一括編集とか、サブフォルダ＋バッチ処理とかも便利ですよ〜

今回は３、４番を紹介します

サブフォルダ表示＋ラベリングでラクラク画像セレクト！

サブフォルダの中身を一括表示

地味だけど、一番重宝する機能。CS4から搭載されています。

だいたい写真はモデルごとやシーンごとに分かれていますが、まとめてみたい時もありますよね。

そんな時は上位のフォルダを選んで

表示＞サブフォルダー内の項目を表示

で一発解決。

ずらずらーっとサブフォルダのファイルを一気に書き出してくれます。

これだけでもかなり使いやすくなりました。

ちなみにBridgeは画面のレイアウトが複数あります。

これは「初期設定」。

いろいろ見れて便利ですけど、写真を選ぶだけならいらないですよね。

そこで

セレクト作業はライトテーブル

すっきりした画面で、セレクト作業に集中できます。

ここで写真をざっと見ながら、いいなって思うやつには

Command + F6でラベリング

Bridge独自のラベルは６種類、加えてレーティングも★0~★5まで付けられるので、

あとから、データを掘り返すときにとても便利です。

複数ファイルの細部を同時に確認！

同じような構図の写真から一枚を選ぶとき、

まずはピンぼけを確認したいですよね。

そんな時に重宝します。

画面をフィルムストリップに

この画面で確認したい画像をまとめて選択します。

はい。これだけでも比較するのに便利ですが、

さらに拡大画像をクリックすると・・・・

個別にルーペが表示されます。

これだけじゃないですよ。

さらにMacならcommand、WinならControlを押しながらどれか一つのルーペをドラッグしましょう。

全部の拡大鏡が一緒に移動します

便利！ほんと便利！

細部の比較がとってもやりやすいです。

ということで

画面の使い分けが分かれ道！

今回はこんな流れでした。

1. 「ライトテーブル」でさくさくラベルをつけて、
2. 「フィルムストリップ」で細部まで確認して
3. 迷ったら複数選択でさらに細部を拡大して確認

はい、とりあえずこれだけ使えれば、どんなに画像がたくさん来ても、慌てず処理できますよ！

カヤックでは、写真をたくさん扱うビッグなサイトから、アイデア勝負の面白サービスまで、

多方面のデザインに携わることができます

ちょっとでも、アンテナに引っかかったら

コチラをのぞいてみてください！

ちっちゃいころはミニ四駆をカスタムして肉抜きしまくりだったhashimotoです！

そんなカスタム大好きな子供は、大人になってもカスタムが大好き!

ということで、Flashでカスタムができるサイトをまとめてみました！
あんなものやこんなものまで自分の好きなようにカスタム出来ちゃいます。
他人と同じものを持っているのがいやだ！って人も、続きでどうぞ！

FREITAG

バッグのカスタムサイトです。説明の必要はないかもしれませんが、バッグの素材は、トラックに使われていた幌で、肩にかける帯はシートベルトだったりする、リサイクルドなバッグです。自分の好みにカスタムすることで、さらに愛着がわいて長く使えそうですね！

Champion Hoodie Remix

パーカーのカスタムサイトです。かなり細かく色を設定できます。色の他に柄パターンも豊富にそろっています。シンプルなパーカーをド派手にして遊びましょう。

さいごに

kayacでは他と同じはいやだ！世の中をカスタムしてやる！ナナメ上行きたい！…とまじめに考えているようなデザイナーを募集しております。気になったらどうぞ！

ちょっとのぞいてみる

毎日はたらくかあさん、のなかです

日本には何万ものECサイトがあります。サイトで購入する側のみなさんもいれば、サイトを運営、毎日必死に新商品をアップしているみなさんも同じ数だけいますよね。

そんな、ECサイト運営・更新担当者に、ちょっとだけ画像管理の小技をご紹介しま～す

大量の画像を簡単に“お安く”管理

ECサイト運営は、毎日多くの新商品の写真(画像)を撮影、それを加工、サイトにアップ。
そうして日々増えていく写真の管理には、googleが無料で提供している多機能な画像管理ソフト「Picasa」がオススメです。

Picasa

「Picasa」のいいところ

無料。そしてすぐに使える。

画像の整理、追加がカンタン

画像の加工もできる

画像をWEBやメールにも送れる

と、Picasaは、無料で多機能で、かつ操作もシンプルで、個人レベルでの使用だけでなく、会社でも使えるソフトです。
Picasaの多機能ぶりは、Picasaサイトに詳しく説明があるのでそこに譲ります。今回は、画像の管理にフューチャーした機能を紹介します。

自分のPC以外に保管されている画像を「Picasa」で管理

Picasaをインストールすると、自分のPC上の画像(マイピクチャやマイドキュメント上のある)は簡単に管理ができます。
けれど、ECサイト運営において、大量の画像を自分のPC上に保管するには多すぎるので、多くは会社の他の場所(画像を入れるようのハードディスクなど)にあることでしょう。
Picasaでは、そうした、他のPCの画像も簡単に管理できます。

他のPCの画像をPicasaで管理するまでのフロー

自分のPCから、他のPCに接続できるように[ネットワークドライブの割り当て]設定をします。(ここではWindowsXPの場合です。)

[スタート]→[マイコンピューター]→[ツール]→[ネットワークドライブの割り当て]をクリック。

[ドライブ]には割り当てられたものが表示されております。

[フォルダ]には、他のPC(画像管理してあるPCなど）を直接記述するか、[参照]ボタンなどで探します。
[ログオン時に再接続する]をチェックしておいてください。

Picasaを起動。[Picasaにフォルダを追加]をクリック。

すると、[フォルダリスト]がでてきます。ここに先ほど[ネットワークドライブの割り当て]で追加したものがでてきます。(ここでは、Zで割り当てたのでZがでてきております）

この[フォルダリスト]をクリックして、Picasaでの管理対象にするかどうかをフォルダやドライブごとに好きに設定できます。

これで、自分のPC以外の場所に保管されている画像も簡単にPicasaで管理することができます！
さらにPicasaは大量の画像から特定の文字や数字での検索のスピードも早いです。Picasa右上の[検索窓]からためしにお目当ての画像を探してみてください。私は会社では、画像に番号をふって管理しているので、検索もとても簡単でノーソトレスで画像を探してます

「Picasa」の便利な使い方一例

Picasaはとても多機能です。その中でも、毎日といっていいほど使うのが[エクスポート]しながらのリサイズ。

これは、ECサイト運営者の皆さんはよくなさっている作業だと思いますが、商品画像をアップした後日、その同じ画像を別のサイズで別の場所にアップしてください（例：商品一覧用の画像がアップされていなかったなど）という経験があると思います。

その際に、わざわざ画像加工ソフトやリサイズソフトを起動せずとも、Picasaなら画像を検索してそのままリサイズができます。

該当画像を検索→画像を選択→Picasa下部にある[エクスポート]をクリック。（エクスポートは、任意の場所に選択した画像をコピーしてくれる機能です。）

[エクスポート場所]画像をもってくる場所を任意で決めることができます(参照ボタンなどで)

[エクスポートフォルダの名前]場所の次に、もってくるフォルダを任意で決めることができます。
（私は毎日画像の加工をしているので、作業した日がわかりやすいように、フォルダ名を日付にしていることが多いです。）

そして、特筆すべきはここです！

[画像サイズ]画像をもってくる際に、画像サイズをここで指定できます。
(サムネイルに使う画像の多くは画像サイズも大きいものではないことが多く、ここでピクセル指定までできるので便利です）

などなどを設定・チェックしたあとに[エクスポート]をクリック。
任意のフォルダにリサイズされた画像が現れるので、それをアップするだけです！

リサイズもお手軽に

先ほどふれたように、ECサイトでは同じ画像を何種類かの画像サイズに加工する作業がしばしばあります。
Photoshopなどのソフトでバッチやアクションで簡単にリサイズもできますが、フリーや安価なソフトで[リサイズ]できるソフトも多くあります。
ちょっとした少ない枚数をリサイズしたいときなどには、そういったソフトを使用することで時間短縮につなげることができます。

リネームもお手軽に

ECサイト運営をしている際に、画像管理や画像処理についで頭を悩ませるのは、画像の命名規則ではないでしょうか。
毎日大量の画像を撮影・加工しているので、同じ名前をつけないように気をつけなくてはなりません。
そんな際にオススメなのが「リネーム」ソフトです。
こちらもリサイズ同様、フリーや安価なソフトで[リネーム]できるソフトがあります。
私がよくやっているのは、1つの画像を、3種類のサイズ・3種類の名前に加工。しかもそれが大量にあっていますぐに加工して販売というケース。

以下、あくまで、コスト・時間が限られている場合にそれをかけずやっているフローで

1つの画像を3回コピー

リサイズソフトで、3種類にリサイズ

リサイズされた画像をそれぞれリネーマーで命名

1つの画像を3種類にするだけならば、時間はかかりませんが、100枚の画像をそれぞれ3種類のサイズ・3種類の名前に加工となると、いかに作業時間を短縮できるかが大事になってきますので、手軽なソフトを組み合わせることで、時間の効率化が図れますよ！

こんな風にまいにちはたらくかあさんですが、家でも時間短縮に余念がありません。
いかに早く洗濯・料理・掃除をするかなどなどw

そんな毎日はたらくかあさんも、募集しておりま～す

新卒のIKOYAMAですコンニチワ！

みなさん、擬人化って好きですよねっ？
OS、ポケ○ン、最近は国を擬人化して楽しんでいる方も沢山いるそうで。

私はといえば、大好きなKAYACサービスを擬人化して遊んでいます。
イラストは続きから。それっ！

bowlsちゃん

彼女はbowlsちゃん。
KAYAC鎌倉本社1Fで絶賛経営中のどんぶりカフェbowlsの擬人化キャラでございます。

ファッションはbowlsのオリジナルどんぶりカラー、
いくらのビーズがポイントです。
手にはbowls自慢の「鮭とイクラの親子丼　アボガドクリーム [￥980]」

アボガド丼の他にも、bowlsにはオイシイ創作どんぶりがいっぱい！
鎌倉にお越しの際は是非、お越し下さいね！

実はグラフィックを作るのも大好き! shiihoです。
今回はちょっと前から実験的に使っているツールを紹介したいと思います。
それがカオス図形を作ることができるソフト Chaoscope (Windowsのみ) です。
これを使用すると上のような画像を作ることができます。
今回はこのソフトをサブグラフィックツールとして使用する方法を提案したいと思います。

インストール編

ダウンロード

公式サイトのこちらのページからダウンロードができます。
http://www.chaoscope.org/download.htm
Choose your installation method:という項目のリンクからダウンロードしましょう

インストール

あとはexeファイルをダウンロードして任意の場所にインストールしましょう
これでインストール終了です。
ちなみにインストールするとこんな感じのアイコンが出てきます。

操作編

次は簡単に使い方をみてみましょう。

新規作成画面

まずはファイルを作成します。
File → New で新規作成のダイアログを出します。

↓


Typeは選択したものにより制作できるカオス図形がかわってきます。
WidthとHeightは横と縦の長さですね。
Renderも選んだものにより微妙に図形のニュアンスが変わります。今回はLightでいきましょう。

データ描画

(クリックで画像を拡大)
新規作成が終わるとこのような画面が出てきます。
左がグラフィックが表示されるカンバスで
右側がカオス図形を計算する数式のバーやカラー設定ができます。
数式を計算するバーはマニアックなので右側はTypeを変更する時くらいにしかいじりません

↓

(クリックで画像を拡大)
右側に数式のバーがあって難しそうなイメージがありますがそんなことはありません
キーボードのF3を押してみましょう。
すると早速カオス図形が描画されます。F3を押すとプレビューがランダムに変わります。
この操作を繰り返して気に入った図形が出るまで繰り返しましょう。
ちなみに描画された図形はX,Y,Z軸に対応しており
角度をかえたり拡大したりもできます。(Google Earthのような感覚で操作ができます。)

レンダリング

気に入った画像ができたら次にレンダリングをしましょう
角度を変えたりすると上記画像のようなプレビューになります。
ここでF4を押すと・・・

↓

なんということでしょう
レンダリングが完了するとこのような美しい画像に生まれ変わります。
大きめな画像を作ると応用が効くのでおすすめですが
画像が大きいほど、レンダリングスピードは遅くなるので注意が必要です。

画像書き出し

File → Save Image As... でBMP画像に書き出すことができます。
(MacのPhotoshopでもBMP画像が編集できます。)

カオス図形の種類

操作編のTypeという項目がありましたが、ここの値を変えると
様々なカオス画像が作れるようになります。
それをいくつか抜粋して紹介しましょう。

julia

同じ図形を二つ反転させたようなものが特徴。

lorenz

なんだか波動のような形をしています。

icon

壷状の図形が特徴。

ifs

他のに比べて波っぽくなく全体的に鋭いです。

pickover

一番波っぽくうねうねしています。

応用編

様々なカオス図形が作れるChaoscopeですが、この画像を応用すると以下のようなものが作れるようになります。


一般人の戦闘力でもカメ○メ波がうてます。

魂を抜くことができます。

モノクロにすると墨絵っぽいもの作れます。

公式のユーザーギャラリーにも様々な画像があって参考になります。

他にも面白い使い方ができそうですね
3Dツールも使わずに簡単にカオス図形が作れるので
サブグラフィックツールとしてはもってこいのソフトでした。

「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」に登壇することになりました。

はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。

今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。

話の内容は、最近なにかと目にする「HTML5」について。
その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。
HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。
これを利用して、マークアップエンジニア(だけ)でも作れる、ちょっとしたwebアプリを紹介しながら、HTML5の可能性について話そうと思います。

HTML5ってなにがすごいの？

さて、みなさんはHTML5をご存知ですか？
最近はweb系の記事を見ているとよく目にするようになってきました。
とはいえ、中には「なにがそんなにすごいの？」という人もいるでしょう。

そもそも、タグがバージョンアップしたって対して意味ないじゃん、みたいに思う人もいるかもしれません。
しかし、現在のHTML5は、ただのタグの定義だけにとどまりません。
記事などで「HTML5」と言う場合には、大体の場合において"HTML5とその関連API(アプリケーションプログラムインターフェイス)、場合によってはCSS3やSVGなどの仕様をまとめて"そう呼んでいることがほとんどでしょう。

つまり、webプラットフォームとして格段に表現力を増した技術仕様をまとめて「HTML5」と呼んでいるわけです。

HTML5(や関連API)を使ったデモ

簡単なデモを見てみましょう。
例えば、canvas。ピクセル操作ができる新しい要素です。
Flashであったようなお絵かきソフトなんかも実装できてしまいます。
これの面白い利用例を見てみましょう。

1. HTML5 Video Destruction
2. Ambilight for video tag

これらはcanvasで作られています。
クリックすると散らばる断片や、映画館の演出など、Flashを使っているかのような演出が確認できます。

CSS3を使ったデモ

さらに表現つながりでCSS3も見てみましょう。
CSS3というと、角丸やグラデーション、半透明といったグラフィカルな部分に目が行きがちですが、それ以外にもたくさんのすばらしいプロパティが定義されています。

例えばこんな例。⇒Adobe社が提供する、HTML5/CSS3特設サイトです。
こちらの案件は自分が制作を担当しました。

一見すると、今までのサイトと大きく違うところは見あたりません。
しかし、WebKit系ブラウザ(SafariやGoogle Chrome)やFirefox、Opera、そして先日公開されたばかりのIE9βでこのサイトを表示してブラウザの幅を拡大・縮小してみると、ブラウザの表示領域に応じてコンテンツのレイアウトが変わるのが分かると思います。

PCで見たキャプチャ

iPadで見たキャプチャ

iPhoneで見たキャプチャ

こうした一連の技術を、マークアップエンジニアはもちろん、デザイナー(やその他の職能)の方でも知っておくことで、格段に表現の幅が広がります。

スケーラブルな画像、インタラクションを持ったAPI、表現力を増したCSS3。
"webでできること"を把握しておくことは、デザインする上で必ずプラスになります。
とある記事に、それをうまく例えた言葉が載っていたので引用したいと思います。

指揮者がオーケストラの楽器の素質を理解していなければいけないのと同じように、デザイナーはウェブの言語を理解しておく必要があるのだ。

出典：なぜデザイナーが HTML5 に関心を持つべきなのか - HTML5.jp

これはデザイナーに限ったことではありませんが、webに携わる以上、webでできることを把握・追っていくことはとても大事なことです。ぜひ、この機会にHTML5に触れてそのすごさを体験してみてください。

作ったwebアプリを先行公開

また、このセミナーのために「マークアップエンジニアが作るwebアプリ」と題して、サーバを使わなくてもできるwebアプリを作成しました。

ToDo管理アプリ - jsdo.it - share JavaScript, HTML5 and CSS

↑赤い「Play」ボタンを押すと、ToDoリストアプリが表示されます。

作成したアプリはToDo管理アプリです。 完全にオレオレ仕様ですが、個人的に自分の見積もった時間と、実作業時間を計りたい、という思惑があったので、最初に見積もり時間を記入し、そこからカウントダウンしていく、という仕様にしました。

このアプリはHTML5の機能を使って作成しています。
(セミナーではこのアプリの作り方もご紹介します)

今後はこうした関連APIなどを利用したサービスも増えていくでしょう。
そうしたサービスが増えてきたとき、マークアップエンジニアはマークアップだけではなく、自分自身である程度プログラムを組めることが求められることも出てくると思います。

今回紹介したアプリのように「自分向け」ということであればセキュリティや動作テストなどもそこまで必要ありません。
ちょっとだけ楽をするために、こうしたツールを自作してみることはとても勉強になると思います。

今回作成したアプリは、jsdo.it上で公開しています。
jsdo.itでは「Fork」という機能を使って、公開されているスクリプトをコピーし、自分の好きなように編集することができます。

この指定を変更したらどうなるのかな？というのを想像しながら変化していくプログラムを見るのはきっと楽しいと思います。まだプログラムを体験したことがない人もぜひ、興味を持ってJavaScriptに挑戦してみてください。

↓セミナーに興味がある方はこちらをチェック！

カヤックのMEに興味ある？

そして今カヤックではHTML5に興味のあるマークアップエンジニアを絶賛募集中です！

面白法人カヤックのMEの条件とは・・？

こんにちはパパ２年生デザイナーniccyです。

iPhone4 Retina Display対応のデザインのコツ

まずはじめにおさらい。

iPhone3Gではこんな風に見えていても、

iPhone4ではこんなことに。

こんなことにならないために！

はじめに

前述の通り、4用の640×960pxのデザインをしていきます。

 

その時、すべての矩形や、文字サイズ、そして配置する座標を偶数で制作します。

 

奇数で制作してはいけません！！

というのも、このデザインを、320×480pxに縮小して、3G/3GS用の画像を作成するため、

奇数で制作すると、縦横それぞれ2分の1にしたときに、画像の幅や座標位置が小数点以下になってしまい、

ぼやけてしまう為です。

 

こんなかんじで。

Aの画像の縦のラインは横幅は2pxで作ってありますが、X座標の位置が109pxです。

 

この画像をこのまま縦横2分の1にした画像がBです。

 

Bの画像の縦のラインは、横のラインとは異なり1pxではなく2pxのままです。

これは縮小がされていないのではなく、座標が、54.5pxと小数点以下になってしまい、ぼやけてしまっているのです。

 

 

 

文字サイズ

文字サイズも一緒で、iPhoneアプリ実装時は12pxで指定する部分もデザイン時は24pxで作成します。

 

解像度は大きくなっているとはいえ、

表示上は一緒のサイズで表示される為、文字サイズを小さくしてもいいわけではありません。

きっちり、3G/3GS上で12pxで表示したいのではあれば、24pxでデザインしましょう。

 

 

 

 

中央揃えの時の注意！

ただこの際に1点注意しなければならないのが、画像を中央揃えにしなければならない場合です。

 

例えば、

横幅640pxの中央に画像を中央揃えで表示したい時に、

250pxの画像を中央揃えにしたい画像として用意したとします。

これはNGです！

 

横幅640pxの画面に対して、横幅250pxの画像を中央配置するのですから、問題ないと思いがちですが、

センター揃えの場合、画像の幅を抜いた数値を2で割ったときに、奇数になってしまう、画像はNGなのです。

 

この場合、

 

640px-250px=390px

なので、

x座標が、195pxになってしまうので、センター揃えとはいえ、画像はぼやけてしまうことになるので、NGなのです。

 

 

デザイン確認の時用に。

画像や座標、文字サイズを徹底的に偶数にして、デザインデータを作ったとしましょう。

さて、デザインを確認に出すときに640×960pxで作ったデザインデータに参考用にiPhoneの枠をつけてーと。

よくある話ですが、出来れば、この時に、バカでかいサイズのままデザインを確認に出すのではなく、

320×480pxにしてデザイン確認にだした方が見る方にも優しいですし、実際の表示の間隔はそちらの方が近いです。

 

なので、その際に今までつくってきた640×960pxのデザインデータをスマートオブジェクトにして、

320×480pxのサイズのiPhoneの枠にはめ込んだ形でデザインデータを作っておくと、作るときは、

640×960pxでつくって、書き出すときは320×480px版で。となって、すっきりとします。

（もちろん書き出したものを小さくしても良いんですが、僕はこの手法をとっています。）

 

画像の書き出し

デザインのOKも出て、

iPhoneアプリを実際に制作する人にパーツごとに画像を切り出していいくわけですが、

先程、デザインを徹底的に偶数で制作したので、640×960pxで画像を書き出したあと、

そのデザインを320×480pxに縮小して、画像を書き出していきます。

 

その際、画像のファイル名を

320×480px用のものが

 

nav_home.png

 

だとしたら、

640×960px用のモノのファイル名を

 

nav_home@2x.png

 

と画像名と拡張子の間に、

 

@2x

 

という文字列を追加します。

 

この文字列を追加することで、アプリ側に設定がしてあれば、iPhone3Gや3GSでは320×480px用の画像が、

4では640×960px用の画像が表示されるようになります。

 

これで、3G/3GSと4に対応したデザインと、画像の作成に成功したわけです。

 

 

画像にした文字は注意！

このやり方で注意した方がいいのが、

画像化された文字や小さなオブジェクトです。

640px×960pxで表示したときは綺麗に見えていた文字やオブジェクトも、

320px×480pxに縮小すると、文字は潰れてしまったり、オブジェクトも、グチャっとしてしまったり、

綺麗に表示されない時があります。

 

こんな感じで、文字が潰れます。

 

その時は、適宜文字サイズやアンチエイリアスの種類を調整してから画像を書き出すようにしましょう。

 

 

iPhoneアプリをデザインしようとしているそこのアナタ！

Retina Display対応はデザイナーとして必須ですよー！！！

ちょっと、このバナーもうちょい目立たせて！

コンチには～！

バナーをデザインするとき、目立たせてください！って

言われるときありますよね？（え？ない？）

「建築家」という文字にアクセントカラーを使います。目立つ順に並べてみましょう。

A：オレンジ

B：水色

C：緑

順位の発表です！

※今回は背景色との関連性で順位をつけました。

【１位】B:水色

背景の薄い黄色（ベージュ）が暖色系なので

寒色系のブルーを使用することで引き立たせる効果があります。

【2位】A：オレンジ

オレンジは、暖色系で高彩度なので、

興奮色、進出色として使うことができます。

△背景のベージュに対して、オレンジは同じ色みなのでなじんでしまいます。なので、この場合は2位にしました。

【3位】C：緑

背景の黄色に対して、緑は隣り合った色相なのでなじみます。

写真の植物とも近いので調和がとれています。

△きれいにまとまりますが、インパクトは弱まるかも。

デザイナーが陥りがちな色彩のワナ

• 目立たせたいとき、ワンパターンに、赤やオレンジをつい使ってしまう
• 目立たせたいのに、きれいにまとめてしまう

【目立たせルール！】反対色を試してみよう！

暖色の背景には寒色の文字、

寒色の背景には暖色の文字を使うと引き立ちます。

それ以外の中性色の場合は隣接していない色を選んでみましょう。

【目立たせルール！】グレースケールでコントラストを確認！

ここで注意したいのは、反対色を使うだけでは色がけんかしてしまいます。

濃い背景には薄い文字、

薄い背景には濃い文字と

明るさでコントラストをつけましょう。

明度の差は、グレースケールにして可読性を確認しましょう。

白黒にしても読めるか、読みやすいかをチェック★

ルールを知ると、色を選ぶときの判断がすばやくなります。

「なんとなく」ではなく、理由も合わせて説明すると

お客さんやディレクターに安心感、納得感をもってもらえますよね！

スピードアップ＆説明上手なデザイナーになっちゃいましょう！

バナーも目立たせたいけど、、、

カヤックでは、目立ちたがりやなデザイナー、マークアップエンジニアも活躍できます。

一流のアートディレクターの頭の中を見てみたい！

発想法、仕事術、デザインへの姿勢、クリエイティブへのこだわり、、、

個性的なアートディレクターの思考やクリエイティブワークに触れてみませんか？

数あるアートディレクター本のなかでも、特に印象深いおすすめ本をピックアップしてみました。

デザインのデザイン 「デザイン」とはいったい何なのか？ 無印良品のディレクターであり、世界の第一線に立つ原研哉さんが デザインについて真摯に書かれている必携の書！

デザインするな―ドラフト代表・宮田 ひたむきに「物事の本質に迫る」、「社会とつながる」という 共通の思いを持った宮田識さん率いるデザイン集団ドラフト。 モスバーガー、キリン、ウンナナクール、などを手掛けています。 デザインの力、デザインの面白さが伝わる思わず涙目の良書です。

今日から始める思考のダイエット にゃんまげ、LISMO!やTブー!S、資生堂ザ・コラーゲンなど、 手がけた商品を必ずヒットさせるアートディレクター佐野研二郎さんが 初めて明かす、今日からできるアイデア発想法と時間管理術。 非常にシンプルで骨太な一冊です。

うたう作品集―MORIMOTO CHIE Works 1999‐2010 日産自動車「NOTE」、Mr.Childrenやゆずなどアーティストの アートワークも手がける森本千絵さんの初の作品集。 企画書、ラフなどのメイキング素材や本人による解説、 一緒に仕事した方のインタビューも。 ハッピーなクリエイティブの数々にじーんとしちゃいます。

佐藤可士和の超整理術 SMAP、ユニクロ、携帯電話から幼稚園まで手掛ける 佐藤可士和さんの仕事術。 アイデアは対象を整理し、相手から見つけ出すもの。整理という切り口で、クリエイティブを成功に導くプロセスがシンプルに解説されています。

おまんのモノサシ持ちや! 土佐を舞台に活躍するグラフィックデザイナー、梅原真さん。 一次産業、地域にこだわり、弱点を最強の武器に変えて ヒット商品に仕立て上げていく。 寝る前に読むと眠れなくなっちゃうスゴ本！

サラリーマン合気道―「流される」から遠くに行ける アートディレクター本でご紹介するかは迷いましたが、タワーレコード、UNOなどのCMや、風とロックの出版を手がける気鋭のクリエイター箭内道彦さんの仕事術。 失敗や挫折から編み出した、具体的かつ目からうろこのアドバイス。 逆転の発想の数々が刺激的です。

大貫卓也全仕事 (広告批評の別冊 7) カップヌードル「hungry?」やとしまえん「史上最低の遊園地」など、 インパクトある広告を生み出した大貫卓也さん。 アイデアあふれる数々のクリエイティブを一度に眺めることのできる迫力ある作品集。絶対に外せない一冊。

グッドデザインカンパニーの仕事―1998‐2008 ドコモのお財布ケータイ「iD」、トゥモローランド、東京ミッドタウンなどを手がける水野学さん。彼が率いるグッドデザインカンパニーの設立から10年分の仕事とその考え方。ブランドづくり、コンセプトの重要さなど、丁寧な表現でまとめられています。 何度も読んで咀嚼したくなる一冊です。

葛西薫1968―図録 葛西薫さんは、サントリーウーロン茶、サントリーモルツなどで知られる、もっとも有名なアートディレクターのひとり。デザイナーとして歩みだした1968年から四十数年の作品が収録されている集大成ともいえる内容です。モノづくりに携わるクリエイターの必読書！

クジラは潮を吹いていた。 ロッテのクールミントガム、カルピス、おいしい牛乳など誰もが目にしたことのある商品デザインから、NHK教育TV「にほんごであそぼ」のアートディレクションなど幅広く活躍されている佐藤卓さん。一見デザインされているとは感じないけれど、誰にとってもわかりやすく使いやすい、本来のあるべきかたち。大切なことに気づかされる一冊です。

 

 

 

おもわず、幸せな気分になってしまうもの、うんうんと深く考えさせられるもの、

頭をなぐられたような衝撃的なものまで！ご紹介してみました。

みなさまのおすすめもぜひ教えてくださいねー。

 

カヤックではクリエイティブにアツい想いを抱いた

デザイナー、FLASHデベロッパー、マークアップエンジニアを募集しています！

 

インターンシップにきています。

こんにちわ。(・`д・ノ)ノ
面白法人カヤックでインターンシップ中のどうもぽんたです。

先週、鎌倉本社から自由が丘支社に移りました。
自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。

そしてこちらはインターン研修で、書いているエントリーです。
どうか柔らかいまなざしで見守って下さいませ！

今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。
といっても僕自身つくったことがないので、一緒に挑戦しましょう！！

つづきからどうぞ！

すごいよ！CSS3

≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。

ラムネのようなテイストのボタンですな。
これを画像なしでつくってるっていうからスゴイ！

ここまでレベルの高いボタンはつくれないので、
基本重視のシンプルなCSSボタンをつくろうと思います。

まずはCSS3で追加されたプロパティの中から代表的なものをピックアップして復習します。

影をつける！

こんな感じでボックスにシャドウをつけたい角をつけたい時に使いましょう！

これは一番シンプルな指定方法です。
複雑な指定方法もあるみたいですが、それはまたの機会に！

ブラウザによって実装状況が色々なので、
それぞれのブラウザに合わせた指定が必要な点に注意です！

#box_shadow {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  box-shadow: 7px 7px 10px #000;
  -webkit-box-shadow: 7px 7px 10px #000;
  -moz-box-shadow: 7px 7px 10px #000;
}

角を丸くする！

こんな感じでボックスの角をつけたい時に使いましょう！

これは一番シンプルな指定方法です。
複雑な指定方法はまたの機会に～

#border_radius {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

変化に推移を与える！

なんかわかりにくい見出しですが、要はアニメーションです。
CSS3ではマウスオーバーなどのエフェクトにアニメーションを設定できるんです！

CSS3でアニメーションを実現する方法として「animation」プロパティを使う方法も
あるみたいですが、今回は「transition」プロパティを使う方法を解説します！

例えばこんな感じで、マウスオーバーで色をゆっくりむわっと変化させたい時

こんな感じのコードで実現できます！

バージョン3.6まで「transition」に対応してなかったFirefoxも
バージョン4から対応するみたいです！やったね！

#transition {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  transition: background-color 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s ease-in-out;
  -moz-transition: background-color 0.5s ease-in-out;
}
#transition:hover {
  background-color: #5E0;
}

対応のブラウザは？

Web標準としての勧告がなされていないことなどが理由で、
CSS3のブラウザ実装状況には大分ムラがあります。

InternetExplorerはほとんど対応していません。
CSS3に挑戦するなら Google Chrome や Safariなどがオススメですよ！

CSS3対応ブラウザ

Firefox、Google Chrome、Safariなどのモダンブラウザ（Web標準に準拠したブラウザ）。
モダンブラウザでもバージョンが古いと実装していないので注意！
InternetExplorerはバージョン9から対応予定みたい。
Operaは実装しているものと、していないもののムラが激しいです。

簡単3ステップでWebボタンをつくる！どんどんどん！

今回は上で紹介したプロパティのみでWebボタンづくりに挑戦しようと思います！
制作はカヤックのサービスであるjsdo.itを使います！

≫ jsdo.itがどんなサイトなのかはこちらの記事で簡単に解説してますのでどうぞ！

面白法人カヤックの経営理念は「つくる人を増やす」。
このエントリーも「つくる人を増やす」につながればいいなぁと願っております。

それではさっそくつくりましょう！
各ステップでjsdo.itのコードを貼り付けています。
右下の「PLAY」ボタンでコードを実行できますー

まずはCSS3を適用する前の準備！

第1プロセスです！
ホップステップジャンプでいうとホップの部分、
ホイコーローでいうとホイの所ですよ！

ボタンレイアウトにするためのaタグをつくる。
こんな感じ！ divタグとかでも大丈夫です。
（こちらのコードからコピペできます！）

そして、これらの要素に位置やサイズなど、従来のCSSを適用！

マウスオーバー時とクリック時の指定もしておきます。

正しく指定ができればこんな感じになります！「CSSでボタンをつくる！（ホップ）」

以下にコードを貼付けます。右下の「PLAY」ボタンを押してください！

CSS3でボタンをつくる！（ホップ） - jsdo.it - share JavaScript, HTML5 and CSS

ボックスシャドウと角丸をつけよう！

第2プロセスです！ ホップステップジャンプでいうとステップの部分、
ドンタコスでいうとタコの所ですよ！

ボックスシャドウを指定！
こんな感じ！これを#btnの指定の中に入れます。
（こちらのコードからコピペできます！）

activeの方にも！

角丸を指定！こんな感じ！同じく#btnの指定の中に入れます。

正しく指定ができればこんな感じになります！「CSSでボタンをつくる！（ステップ）」

以下にコードを貼付けます。右下の「PLAY」ボタンを押してください！

CSS3でボタンをつくる！（ステップ） - jsdo.it - share JavaScript, HTML5 and CSS

マウスオーバーでむわっとするアニメーション！

第3プロセスです！
ホップステップジャンプでいうとジャンプの部分、
消臭力でいうと力の所ですよ！

こんな感じで指定！
この指定をすることでマウスオーバー状態にむわっと変化するようになります。
これを#btnの指定の中に記述します。
（こちらのコードからコピペできます！）

正しく指定ができればこんな感じになります！「CSSでボタンをつくる！（ジャンプ）」

以下にコードを貼付けます。右下の「PLAY」ボタンを押してください！

CSS3でボタンをつくる！（ジャンプ） - jsdo.it - share JavaScript, HTML5 and CSS

JSer（JavaScript技術者）にこのボタンを素晴らしくしてもらいました！

なんとかボタンが完成したものの、
記事冒頭で紹介したラムネボタンには、ほど遠いクオリティです。

ということで、このコードをカヤックのJSerあごうさんにお願いして、
Forkで素晴らしくしてもらいました！

Forkとは

jsdo.itで他のユーザのコードをコピーして編集して自分の作品に利用できること。
元々あるコードを自分好みに改変していくことでスキルアップを目指せるのです！

Forkで素晴らしくしてもらったコードはこちら！

以下にコードを貼付けます。右下の「PLAY」ボタンを押してください！

【color】 forked from: CSS3でボタンをつくる！（ジャンプ） - jsdo.it - share JavaScript, HTML5 and CSS

クリックするたびにボタンの色がランダムに変わります。
この他にもいくつかつくってもらいました！

≫ クリックするたびボタンが大きくなる！？

【zoom】forked from: CSS3でボタンをつくる！（ジャンプ） - jsdo.it - share JavaScript, HTML5 and CSS

≫ クリックするとボタンが動き出す！？

【jump】forked from: CSS3でボタンをつくる！（ジャンプ） - jsdo.it - share JavaScript, HTML5 and CSS

JavaScriptの力は偉大なり！ ありがとうございました！

さいごに(・`д・ノ)ノ

イマナラ！ jsdo.itにて熱いクリエイティブイベントが開催されています。
ボタンの魔力にとりつかれたあなた！ 簡単に参加できて優勝賞品はペンタブ！ うほー

≫ 今ボタンがアツい！ 思わず押したくなるボタンをつくって下さい！

カヤックではたくさんの面白いサービスを運営、制作しています。
カヤックのインターンシップに参加してみませんか？

≫ 押したければ押せばいいじゃない！ 面白法人のインターンシップ！

どんどんどん！

CSS3のアニメーションってスゴい！

先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。

ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。

• コピペで使えるCSS3アニメーション - jsdo.it

※PLAYボタンをクリックすると表示されますよ

見れない人のために動画も撮ってみました。

どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。

今回はこのCSSのアニメーションのチュートリアルをご紹介します。

「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。

上記のdemoでいうと二つ目の動きです。

HTML

<p class="animetionNew arrange02 group"><span class="letter01">N</span><span class="letter02">e</span><span class="letter03">w</span><span class="letter04">!</span></p>

ちょっと分かりにくくなってますが、一文字ずつspanで囲って、全体をpタグで囲っています。
それぞれにclassをふって、一文字ずつアニメーションをつけていきます。

CSS

アニメーションを定義して使いまわそう

一文字ずつアニメーションをつけるのって、ちょっと大変そう…と思いました？
大丈夫です。実際はそこまで大変じゃないんです。
なぜなら、アニメーションを定義して使いまわせるから！
では実際のコードを見てみましょう。

@-webkit-keyframes letterAnimation2 {
	0%{
			bottom: 0;
		}
	70% {
			bottom: 0;
	
	}
	85% {
			bottom: 7px;
	
	}
	100% {
			bottom: 0;
	}
}

これが「跳ねる」アニメーションです。

注目！

1行目に注目してください。「letterAnimation2」とあるのがわかりますか？
これがこのアニメーションの名前です。
この名前でアニメーションを呼び出して使うことができるんですね。

そして、以下につづく0%、70%、、、、という記述。
これはタイムラインのようなものだと考えてください。

10秒のアニメーションだったら、0秒のときは「bottom: 0;」、7秒の時は「bottom: 0;」、8.5秒の時は「bottom: 7px」（ジャンプ！）、10秒のときに「bottom: 0;」（着地！）、といった具合です。

ちょっと面倒くさいですが、これはチマチマと手作業で調整するしかないので頑張ってください。

定義したアニメーションを使おう

jsdo.itのdemoに記述したCSSからアニメーションに関係ある部分だけを抜き出してみました。

p.animetionNew.arrange02 span{
	position: relative;
	bottom: 0;
	-webkit-animation-name: letterAnimation2; /*定義したアニメーションの名前*/
	-webkit-animation-duration: 1.5s; /*1ループの時間*/
	-webkit-animation-timing-function: ease-out; /*アニメーションの変化の度合い*/
	-webkit-animation-iteration-count: infinite; /*無限にループさせる*/
}

span要素は、「NEW!」を一文字ずつマークアップしてあるやつですね。

注目！

まず、今回はジャンプさせるアニメーションなので、
あらかじめ position: relative; と bottom: 0; を設定しておきます。

続く4行でアニメーションを呼び出し、アニメーションに関する設定をしています。

• -webkit-animation-name は定義したアニメーションの名前を指定します。今回は「letterAnimation2」ですね。
  • animation-name－CSS3リファレンス
• -webkit-animation-duration はアニメーションが1ループするのにかかる時間です。「1.5s」つまり1.5秒としてみました。
  • animation-duration－CSS3リファレンス
• -webkit-animation-timing-function はアニメーションの緩急のつけかたに関する設定です。この指定をうまく使うと、気持ちのいいアニメーションをつくることができます。
  • animation-timing-function－CSS3リファレンス
• -webkit-iteration-count はアニメーションする回数の指定です。「infinite」で無限にループさせています。
  • animation-iteration-count－CSS3リファレンス

ここまでの指定で、跳ねる動きを1.5秒で無限回ループさせることができました。

アニメーションの開始時間を１文字ごとにずらそう

これが最後のステップです。

先程span要素にアニメーションを設定しましたが、いまのままでは全部の文字が同時に飛び跳ねてしまいます。

アニメーションの開始時間をずらす指定をしていきましょう。

p.animetionNew.arrange02 span.letter02{
	-webkit-animation-delay: 0.2s;
}

p.animetionNew.arrange02 span.letter03{
	-webkit-animation-delay: 0.4s;
}

p.animetionNew.arrange02 span.letter04{
	-webkit-animation-delay: 0.6s;
}

注目！

• -webkit-animation-delay はアニメーションの開始時間を遅らせる指定です。今回は0.2秒ずつ開始時間を遅らせています。
  • animation-delay－CSS3リファレンス

完成です！

以上を踏まえた上で、もう一度demoを見ていただくと理解が深まるかと思います。

もし「こんな動きもできるんじゃない？」と思った方は、ぜひぜひこのdemoをフォークして、自分なりのアニメーションを作ってみてください！

でも、まだ実務で使えないよね？

たしかに、CSS3のアニメーションはブラウザの対応状況もまちまちだったりで、
すべてのユーザーに同じ体験を提供するのは難しいかもしれません。

でもどうでしょう、今回のデモのような、
NEW!のアイコンがちょっと主張しているような表現の場合を考えてみてください。

たとえNEW!のアイコンが止まっていてもユーザーにまったく意味が通じなくなる、なんてことはないですよね。

対応しているブラウザを使っている人にだけ、ちょっとリッチな体験を提供する。
それくらいおおらかな気持ちでCSSアニメーションを取り入れていけばいいのかな、なんて思っています。
（プログレッシブ・エンハンスメントってやつですね）

最後にお得なお知らせです

業務拡大につき、マークアップエンジニア（コーダー）の採用エントリー受付中ですー！

たくさんのご応募ありがとうございます。まだまだエントリー受け付けているので、ぜひぜひよろしくお願いします！

• 募集要項、エントリーはこちらです！

しかも今なら！

ぼくが個人的に引越しを全力でお手伝いするキャンペーン中です！！！！！

すっかり秋ですね☆

夏が終わっても元気です！barimiです。

(先に謝ります！ごめんなさい！)

今回のエントリーは100%自分の趣味ですので、漫画好きな方におすすめいたします！

実在する美大・芸大の校舎や授業風景などが出てくる漫画を集めてみました。
というのも、10月11月といえば文化祭シーズン。
秋の夜長に実在する美大・芸大が出てくる漫画を読んで、聖地巡礼してはいかがでしょうか！？

実在する美大・芸大が出てくる漫画まとめっ！

おひっこし / 沙村広明：多摩美術大学

無限の住人でおなじみの、沙村広明さんの作品。
多摩美術大学の校舎と思われるシーンがところどころに散りばめられています。
青春あま辛すっぱーい、ミドルアッパー系なストーリー。

ブラックジャックによろしく / 佐藤 秀峰：武蔵野美術大学

ドラマにもなったこの漫画。医療系学校かとお思いきや、武蔵野美術大学の校舎が出てきますよー。

ハチミツとクローバー / 羽海野 チカ：武蔵野美術大学

美大を舞台にしているだけあり、武蔵野美術大学が出てきます。

奇的 / 大久保 亜夜子：東京芸術大学

芸大出身の作者。
ゼミでの出来事など描かれています。
普通の漫画と違って、アート作品のようになっているのも特徴。
また、この漫画は作者が卒業制作でつくったもの。しかも、主席卒業。すごいですね～。

美大デビュー / 小林 裕美子：東京造形大

東京造形大学に通っていた作者が描くコミックエッセイ。
個性豊かな登場人物が特徴です。

京都ゲイタン物語 / 大原 由軌子：京都芸術短期大学

エッセイといえば、京都芸術短期大学を描いている京都ゲイタン物語もあります。

他にもあるよ！

こちらは、実際の舞台がどこかはわからないのですが、美大・芸大が舞台の漫画です。
(というかどこか知りたい！のでタレコミお願いします。)

夏の前日 - 吉田基已

これは、日吉ヶ丘高校なのでしょうか。それともどこかの美大でしょうか…？
別の登場人物が主人公の、水と銀 も同じ大学が舞台となっています。
ちなみちょっと知って意外だったのが、作者の吉田 基已さんは女性です。

Water. - 魚喃 キリコ

専門学校の話ですが、この教室やら廊下やらは魚喃 キリコさんの出身校、日本デザイン専門学校でしょうか。
日本デザイン専門学校といえば、山田花子さんの作品にも出てきますよ。

イエスタデイをうたって- 冬目 景

登場人物が美大を目指して、美術系予備校に通っています。
冬目 景さんの漫画はいつも暗めなストーリーなのですが、この漫画はライトな暗さ。
独特な恋愛関係が淡々と描かれています。

Juicy - 斉藤 倫

作者自身が、美大に取材に行ったそうです。どこでしょうね？

意外と女性漫画家が多かった

というわけで、今回は個人的な趣味満載のエントリーでした。
(一度まとめておきたかったので…w)

他にも、西原理恵子さんの漫画や、くらもちふさこさんの漫画にも出てきた気がします。

今回知ってる限りでまとめてみましたが、全体的に、女性の方が過去の思い出や、出身校を描きやすい傾向にあるのでは？と思いました。
逆に男性は乗り越えられないトラウマが多いのか…(あくまで個人的な見解です)

次は、鎌倉を舞台とする漫画を集めてみたいと思います！

• 面白法人カヤックでは、何かと役に立たないムダ知識も、
  最新Web制作の技術も愛するデザイナー&マークアップエンジニアを募集中です！

採用強化はじまりました！

そしてそして、ただいま面白法人カヤックでは、Webエンジニア敷金・礼金全額負担キャンペーン実施中！

• 面白法人カヤックと鎌倉の住宅事情が気になったら、クリック！

鎌倉移住の際には、個人的に、おいしいどんぶり屋さんや、カレー屋さん、パン屋さん、フレンチ、イタリアン、和食、寿司などなど、全力で情報提供させていただきます！

カヤック意匠部新米イラストレーターのウシキです！

今回は前回の続きグラデーションメッシュの使い方その2です！

前回を読んでラッシャラナイ方こちら　→　http://design.kayac.com/topics/2010/08/mesh-1.php

というわけで、今回は下のイラストの体部分を作っていきましょう。

このキャラクターの体の様にグニャグニャして複雑な形の面にグラデーションメッシュを思い通りに施すの正直はかなりしんどい！です。

下の図は体の形のオブジェクトを作ったあとその上に[メッシュツール]で2点アンカーポイントを追加したものです。

複雑なメッシュラインです。これでは思い通りのグラデーションは作れないでしょう！

このような場合はまず下書きをして、その上に適当な形のグラデーションメッシュオブジェクトを置きます。

オブジェクトの形を作っている一番外のパスで、下書きをなぞるように同じ形を作っていきます。

こうしてできたメッシュは、ラインとラインの間にメッシュを後から追加しても複雑なラインになることはありません。

このやりかたならどんな複雑な形も難なくクリアー！

で、でも万が一、最初に失敗例としてあげたグニャグニャメッシュになっちゃった場合でも、諦めないでください！！

時間はかかりますが上手くいく方法お教えします！

それは

隠れているアンカーポイントを見つけて　地道に消していくです。

「アンカーポイント追加ツール 」か「アンカーポイント削除ツール 」を使えば隠れているやつらが見える様になります！

あとは、「アンカーポイント削除ツール 」で一個一個消していけばOK!

こうやってグラデーションメッシュをマスターしていけば、超リアルなイラストも簡単にできちゃいますよ！

今回紹介した2つのテクニックを使って ushikima.com のマスコットキャラクターの足をリアルにしてみました。

右足が元のイラストで左がメッシュをつかったものです！これイラレなんでいくらでも大きくできます。

海外のリアルでかっこいいサイトのデザインもマネできちゃうカモ

超簡単なんでやってみてくださ〜い！

今回紹介したイラストなどはこちらでも展開中

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

http://ushikima.com/

webデザイナーにおれはなる！

すっかり秋ですね！
食べ物がすごーーく美味しい季節になりました。鍋と白子とちくわぶの好きなbarimiです！

すごく大切なお知らせです！

さて、今月から面白法人カヤックで始まっている、
入社すると敷金・礼金全額負担!  Webエンジニア鎌倉移住キャンペーン。

本日、弊社代表にとり合って、な、な、なんと
デザイナー(Webデザイナー&マークアップエンジニア)も応募可能になりました！

オリジナルWebサービスのデザイン、UI設計はもちろん、クライアントワーク(キャンペーン、大型CGMサイト)、iPhone、iPadをはじめとする、新しいデバイスを使ったアプリケーションデザイン、またモバイルサービスのデザインなどなど、Webデザインにおけるすべてをこの鎌倉でデザインできます。

…とざっくりとした説明ですが、カヤックのデザイナーの領域は多岐に渡っているので、少し解説させていただきます。

カヤックのデザイナーとは？

カヤックのデザイナーの所属する意匠部には、大きくデザイン担当の DE(Design)課、マークアップ担当のME(Markup Engineer)課の2つに分かれています。

技術とデザインが混在するWeb業界の中で、グラフィック、UI、IA、マークアップを担当する部署として活動しています。

オリジナルサービス

カヤックには、声のコミュニティサイト「こえ部」、ブラウザでFlash制作ができるサイト「wonderfl」、また建築家と家づくりができるサービス「HOUSECO」をはじめとする、経営理念である「つくるひとを増やす」 数々のオリジナルサービスがあります。

各サービスごとに2-3人のデザイナーが専任で所属し、運営を含めサービスの改善を日々行っていま す。

全体のアートディレクションはもちろん、インターフェイスデザイン、DM作成、バナー制作、キャンペーン展開等、サービス全体をデザインで盛り上げる役を担っています。

またカヤックでは飲食事業も展開していることから、実際のプロダクト制作にも携わることができます。

• その他自社サービス実績

こんな人が向いている？！

1. 0からサービスを育てるのが好きな人
2. 機能や、運用についての提案が出来る人

モバイルソーシャルゲーム

モバゲーで展開している「英雄になりたい！」 「ぼくらの甲子園」等、今一番あついとされるモバイルソーシャルゲームのデザインチームがあります。

ゲー ム全体のアートディレクションはもちろん、ゲーム設計もできるのでゲーム好きな人にはもってこいのチームです。

また、iPhoneや Android等、新しいモバイルプラットフォームに向けた企画・設計・デザインに参加することが出来ます。

今熱く、そしてこれからさらに盛り上がっていく場所で、自分の力を思う存分発揮してください！

こんな人が向いている？！

1. 元ネトゲー廃人(ゲームに詳しく、自分もはまったことがある人)
2. イラストが描ける人

クライアントワークとは

現 在15人程度のデザイナーが、クライアントワークチームとして所属しています。

最近の実績として、ゼクシィ「いっしょう いっしょの さいしょに、」、花王エッセンシャルPresents「カワイイをつくる.com」、天まで届けこのぷにぷに「にゃらんの肉球なにょだ」、ローソン「エヴァンゲリオンARアプリ」など、大型CGMから、期間限定のキャンペーンサイト、コーポレートサ イトやiPhoneアプリのデザイン等、様々なクライアントワークを体験することができます。

また、カヤックの特徴としては企画アイデアか らデザイナーが関ることができます。ご自身で考えたアイデアが、そのままキャンペーンとして展開することも。さらにカヤックでは、国内外の広告賞を毎年受賞しています。

クライアントワークを通して、企画から設計、サイトデザインまで、トータルでスキルを身につけることができます。

• その他クライアントワーク実績

こんな人が向いている！？

1. 将来Webディレクターを目指す人
2. コミュニケーション能力の高い人

ラボ・新規事業

カヤックには、新規デバイス、新規ユーザー、新規プロダクトを 対象としたラボがあります。過去には面白ラボ「BM11」、今 年はデジタルシニアで高齢化 社会を面白くする「BMSilver」、子どもの世界を面白くする 「BMKids」を展開しています。

テクノロジーが軸となっているWeb業界の中、ユーザーに一番近いところにいる翻訳者として、 デザイナーの仕事はとても重要です。ですので、カヤックのラボには必ずデザイナーが所属しています。

iPhone、iPadをはじめとする、新しいデバイスに向けたアプリケーション、Twitterやmixiなどの新規プラットホームを使ったサービス、Web以外のプロダクト等、様々なも のの企画、設計、デザインを担当します。

過去の実績としては、貧乏揺すりガジェット「YUREX」(東 京インタラクティブ・アド・アワード インタラクティブ広告部門 銅賞 )、アイデアが出る会議室「閃考会議室」(グッドデザイン賞 先駆的、実験的なデザイン活動)、寝言を録音するiPhoneアプリ「Let it Sleep」(iPhone 国内有料アプリ販売チャート ライフスタイル部門1位) などがあります。

またラボに所属していなくても、社風として新しいアイデアは常に誰からも取り入れています。例えば、クライアントワークのメンバーが出したアイデアも、きちんとキャッチアップします。

こんな人が向いている！？

1. アイデアにあふれる人
2. 柔軟性を持っている人

まとめ

敷金礼金全額負担キャンペーンのエンジニアのキャリアプランにも書いてあるとおり、カヤックではキャリアデザイン・カフェテリア制度をとっています。あなたの希望に合わせたキャリアプランがありますし、ない場合でも提案していただけるのであれば歓迎いたします。

カヤックをデザインで高めていただける人、デザインで変えてくれる人を募集しています。
自然あふれる鎌倉と、テクノロジーあふれる面白法人で、
一緒にものづくりしませんか？

食欲の秋ですね。
ごはんもおいしいですがおやつもおいしいです。

Hello Sour Sally!

100％ノンファット・フローズンヨーグルト専門店のサイト。イラストがかわいい。
ゲーム風になっていてトッピングを全部集めると壁紙がもらえます。

PATISSERIE Nachtischkultur

真っ白い空間にずらっと並んだケーキが綺麗。奥行きのあるデザイン。

デコレア｜FamilyMart

自分でトッピングをしてブログパーツが作れます。
キラキラした音がいい感じ。パリ風？女子の好きそうなデザイン。

アンリ・シャルパンティエ - HENRI CHARPENTIER

ぽこぽこはずむケーキたち。動きがかわいい。

La Pâtisserie des rêves

グリッドレイアウトのシンプルなサイト。写真と色合いが綺麗でおいしそう。

The Little Cake Parlour

イギリスのオーダーメイドケーキやさん？のサイト。
紙テクスチャにスタンプっぽいデザインがかわいい。アナログテイスト。
ピンクと水色の組み合わせもかわいらしいです。

Godiva chocolate

チョコレートおいしそう…！高級感のあるデザイン。

Chocolate Editions.

かなりシンプルなチョコレートのサイト。ところどころにあるゆるいイラストが可愛いです。

Picassol | ピカソル

手作りほんわかテイスト。背景の全面写真が綺麗。
ローディングの「チーンッ♪」もかわいい。

Chupa Chups

アメリカン！（イメージ）ポップ！なイメージ。元気なデザインのサイト。

お菓子好き（でもそうでなくても）Webデザイナー・マークアップエンジニア募集中！

こんにちわ！いつも元気なbarimiです。

みなさん、iPhoneユーザーですか？カヤックはiPhoneアプリ制作も多いことから、そのほとんどがiPhoneユーザーです。

そこで、カヤックデザイナー達の意外と個性の出るiPhoneのホーム画面を集めてみました！
どんなアプリが入っているか気になりますよね。

西川編！

パパデザイナー西川のホーム画面！

壁紙もすっきりした印象で見やすいですね！RSSなどの情報系ツールが揃っている感じです。

せきね編

不思議大好きせきねのホーム画面。

強烈な壁紙のせいで、怪しさ満点になっているホーム画面。アプリの少なさも、異様な雰囲気を醸し出しています。

knys編

社内投票で、2009年度彼氏にしたいNo.1に輝いた漢、knysのホーム画面です。

自作壁紙を使って、女の子とのコミュニケーションを取っているのでしょうか。
また、担当サービスのこえ部がつくったアプリをホーム画面に入れれいるところも、さすがだなあと思いますね。

おぐら編

奥さまデザイナー小倉のホーム画面。

担当サービスのThanksをいれているところが堅実な印象。アートと料理の好きな奥さまという感じですね！

ふちがみ編

元ギャル男マークアップエンジニア、渕上のホーム画面。

便利フォルダが、本当に便利なアプリが入っているのかが気になります。

tacamy編

壁紙カワユスなtacamyのホーム画面。

計算機、Evernoteや、Active Moneyが揃っているのをみると、お金を節約をしたい！という思いが感じられます。

岡部編

クールビューティデザイナー、岡部のホーム画面。

デフォルトのアプリばかりと思いきや、好きなバンドのアプリが入っていますね。

shiiho編

ヨーヨー好きなshiihoのホーム画面。

このグリッドの壁紙カッコいいですね！アプリもきちんと整理されている印象です。

ねじ編

大仏と、山と、面白いことを考えるのが好きな、デザイナー、佐藤ねじのホーム画面。

Evernote関連のアプリが目立ちます。自身が制作した驚愕のiPhoneアプリ「安心レーダー」もありますね。
とりあえず、アプリのアップデートしませんか？

えど編

パパマークアップエンジニア、えどさんのホーム画面。

パパお決まりの家族ほっこり壁紙がいいですね！
2列目のフォルダ群が、こだわりを感じます。メール読んで！

barimi編

いつも元気なデザイナー、barimiのホーム画面。

2個づつ同じようなアプリを並べているのが特徴です。

まとめ

ホーム画面ということで、一部奇抜なものもありましたが皆使いやすいようにカスタマイズしているのが特徴ですね。

ただいま、カヤックでは求人キャンペーン中！

ご興味ある方は是非クリック！

敷金・礼金 全額負担 鎌倉移住キャンペーン、
Webデザイナー・マークアップエンジニアも応募可能に！

おはようございます！今日も寝癖がチャーミングなねじです。

夏が終わり、だんだん寒くなってきて、朝起きるのが辛くなってくる時期ですね。
今日はそんな憂鬱な朝を劇的に変化させ、仕事効率を大幅アップさせる朝の習慣ついて、ご提案させていただきます。

朝一でメールは読むな！

突然ですが皆さんは、

朝、会社の席についた瞬間、何をしていますか？

駅のキオスクで買った缶コーヒーで一息？
大量にきているメールBOXを開いて、処理をはじめる？
今日はどのタスク順に仕事をしていこうか、整理？

いろいろな方がいるかと思いますが、私は「席についた瞬間に仕事を始める」ようにしています。PCを起動したその瞬間から、仕事をスタートです。
これは「朝イチでメールは読むな」という本から学んだことですが、この著者の方曰く、「一番能率の上がる『朝』という時間を受動的な作業でつぶすのはもったいない」とのこと。確かに、思い返してみると朝一は頭がスッキリしていて、仕事を進めるには最適な時間だし、メールを一通り読んでその返事を出していると、平気で１時間２時間かかってしまいます。本当に緊急の用事があれば電話がくる訳だし、一番集中できる時間に、一番大事な仕事をもってくることは、とてもよい時間の使い方ではないでしょうか。メールの処理は昼食に行く前にガッとやれば良いと。

朝の電車でツイッターするな！

さらに提唱したいのが、朝の電車の時間の使い方です。朝、会社の席についた瞬間に仕事を始めるためには、それより前に今日のタスクを明確にしておき、その仕事がどうやったらうまくいくのかイメージしておかねばなりません。つまりエンジンをかけて、脳を温めておき、着席した瞬間にスタートダッシュです。マリオカートでも、スタートダッシュがうまい人が試合を制しますよね。
朝の電車では、友達にメールしたり、ツイッターで「むくり」とつぶやいたりしてしまいがちですが、もうそこから闘いは始まっているのです。電車の中では、本を読む人もたくさんいると思いますが、エンジンをかける時間だけは確保したうえでの読書が良いのではないでしょうか。

こちらの著書は、他にもいろいろい仕事や生活の習慣について書かれていて面白いです。
「朝一でメールは読むな」

ただいま、カヤックでは求人キャンペーン中！

ご興味ある方は是非クリック！

敷金・礼金 全額負担 鎌倉移住キャンペーン、
Webデザイナー・マークアップエンジニアも応募可能に！

こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。
最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました
これからiPadのデザインをする方のお役に立てばうれしいです
 

今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです
ePub（電子書籍）の作り方は先月のMDNで特集されていました
 

iPadにしか見られない（WEBにない）仕様

縦横で画面構成が変わる

iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。
縦横２パターンデザインする必要があります
意外とデザインをモニタの中だけで詰めていくと忘れる動きなので
はじめにワイヤーに盛り込まれているか確認した方が良いと思います。
 

PopOver

項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイします
また、２カラム型の場合　縦持ちにすると左カラムがPopOverの中に収まります
PopOverの色、横幅はFixで変えられません（変えられそうだけど難しいのかあまり見ない）
 

これがiPadのサイズ

左カラムと右カラムの間はかならず1pxとらないといけません

左カラム320pxとPopOverの横幅、色は替えられません

文字はヒラギノ固定　WEBよりやや大きめの22ptが見やすい、押しやすいようです（iPad初期メールクライアントアプリ参照）

１枚の繰り返しのないグラフィカルな背景にする場合
壁紙を正方形につくらないと縦横が変形している最中に切れ目が見えてしまいます

iPhoneのパーツってどれくらい使えるの？

今後iPhoneアプリからiPadへ移植、という話はよく出ると思います
iPhoneアプリのデザインからiPadへデザインしなおしたらどうなるかやってみました。

• アプリケーションタイトルバーは横に細く長く。付随してるボタンも小さく
• 左カラムはiPhone320x480と同じ幅の320pxになるのでそのまま使えるかと思いきや縦768px。余白が持たないのでリデザイン　しかも縦横変形。
• 右カラムは正方形のようで正方形じゃない。iPhone640x980が近いようで微妙に違う。しかも縦横変形。
• PopOverはiPhone320x480がそのまま使えそうで違和感。PopOverだと余白が欲しくなるので微妙に縮めないといけない。
• iPhoneのデザイン画面そのままもってくると文字が大きすぎるので各4pt〜文字を小さくしないと実機で見たとき違和感
• iPhone用に画面をつくっていると余白が間延びするので詰める必要あり
• ボタン、フォームはRetinaの縦幅はそのままで横幅だけのびる

…というふうに全体的にこれと言った縮小拡大の法則性がなく歯ぎしりが止まらない仕様です。ジョブスェ…。
Retina、非RetinaのiPhoneパーツがそのまま移行できたのは全体の10%弱でした。

iPhoneのパーツはほとんど使えませんでした（´・ω・｀）がくー
 

テンプレート

デザインに役立つGUIテンプレートのご紹介です。

teehan+lax
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
iPhoneでおなじみのteehan+laxさん。PSD。　PopOverの横幅が300pxになっているので注意。　

Icon Library
http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
Ai　ベクター形式です

どちらもまだ不十分なパーツがあるのでiPhone用GUIと併用する必要がありました。アップデートに期待です！

iPadもガンガンやらせてもらえるカヤックでは仲間を募集中です

いまならお引っ越しの敷金礼金全額負担キャンペーン実施中です。これを機に湘南人〜

応募ページをのぞいてみる

週末は歩いて15分の由比ケ浜で何かを丸焼きにしたりするイベントが発生するよ

食欲の秋ですね！

秋と言えば、あき竹城！いつも元気なbarimiです。

さて、9月も終わったので、人気の記事を今月もまとめてみました！

9月の人気記事 TOP10

永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）

携帯サイトのコーディングの基礎とテンプレートをまとめた記事。
これだけ読めばすぐできる！とあって、本当に分かりやすくまとまっています。

JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方

カヤックのインターン生が書いた記事がランクイン！
JavaScript初心者のデザイナーがjsdo.itを使って、JavaScript入門する内容です。

CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ

こちらも、インターン研修の一環で書いた記事です。なんと書いた記事が2本ともはてなホットエントリー入り！
来年がホント楽しみです！

記事の内容は、CSS3だけでグラフィカルな表現のボタンをつくる基礎的な情報になっています。

今日からCSS3アニメーションを使えるようになるチュートリアル

CSS3のアニメーションを使って、ボタンをアニメーションさせるチュートリアル。
動きの解説ムービーもついてて、とっても分かりやすいです。

iPhone4 Retina Display対応のデザインのコツ！

iPhone4用デザインのコツがうまくまとまっています。
画像は、iPhone4用に@x2という別サイズのものを作ればいいのですが、
手間を省くため1枚の画像でiPhone3、4両方で綺麗に見える方法の解説記事。

【新人Webデザイナー向け】Webドリル vol.2： このバナーもっと目立たせてください！

「Webドリル vol.1： フォームを使い分けてますか？」に続く第2弾。
あなたならどうしますか？！まずはやってみましょう！

HTML5でWebアプリ！マークアップエンジニアがつくるToDo管理アプリ

ME(マークアップエンジニア)課の比留間がまとめた、非エンジニア向けアプリ開発のまとめ記事です。
HTML5でつくるアプリケーションの解説が載っています。

【ケータイ】tableタグを使って表現力アップ！（初心者向け）

イケメンフランス人デザイナーフィリップの記事！
携帯のレイアウトをtableタグを使って、表現する方法がまとまっています。
これから携帯サイトをつくる人向けの内容。

【ケータイ】画像のファイルサイズを50%削減するひと手間

こちらも、携帯制作Tips。ある方法をすると、画像のファイルサイズが50%も減っちゃいます！
携帯サイト制作者、要必見の記事！

9月まとめ

先月と比べ、だいぶランキングが変動しています。

とくに、モバイル、HTML5・CSS3は注目度が高いですね！

採用強化してます！

面白法人カヤックでは、モバイル、HTML5・CSS3に注目しているデザイナー、マークアップエンジニアを募集中！

年内中に採用が決定すると、鎌倉移住支援として、敷金礼金全額負担しますよー！

敷金・礼金 全額負担 鎌倉移住キャンペーン、
Webデザイナー・マークアップエンジニアも応募可能に！