もうすっかり春！ランニングの季節ですね！

こんにちは！デザイナーのわりえもんです！ランニングは来週から始めます。
もうすっかり春で、来週には新入りデザイナーが活躍しはじめると思います！
気持ちもアイテムも色々整理したり新調してわくわくしますよね！

さて今回はこれからデザイナーになる人も多いと思うので、
気になるデザイナーのスマホの中（ホーム画面）を見てみましょう！

1 : フレッシュCLデザイナー 福澤（ミルク）

CL（クライアントワーク）に去年11月にジョイン後、
最前線でさらりとかけまわる 福澤 こと 「ミルク」さんのホーム画面！
自分の関わった "エコめがね" や、"HIGE LIFE" 、メインでデザインされた"HiChee"
など実際に自分が関わったアプリをホーム画面にも置いて愛情を注いでいるようです！

イチオシアプリは "Remember the Milk"！
ミルク（牛乳）大好きだからという理由だけでなく、今年10周年の本格老舗ToDoサービス。
こだわりを感じますね！味わい深いアイコンです。

2 : 職人デザイナー 越後（えちご）

鉄人 / 職人なデザイナー えちごさんの ホーム画面は、仕事（デザイン）と、プライベート（それ以外）を
明確に分けているよう。こちらは、プライベートの方ですね。
連絡系統や、Twitterなどをdocにまとめているようです！

オススメアプリは "AUDYSSEY Music Player"。
ヘッドホン毎によく聞こえるようにチューニングされた設定で音楽をきくことができるアプリ。
ぼくも先ほど試してみたのですが、段違いに音がよくなりました！

3 : お母さんデザイナー 小倉（おぐら）

みんなのお母さん的存在のおぐらさんのホーム画面。
sumikaで理想の家を思い描きつつ、移動中はB!KUMAガールズ見て過ごす。
メール以外のいろんな手段で連絡とっています。
カメラはよく使うので右下に配置したり、操作しやすさにも配慮しているようです。

オススメアプリは "B!KUMAガールズ"。
上でも書いているように移動中のお供だそうです。
鎌倉から横浜までの時間も有効活用ですね！

4 : 面白法人の中の面白デザイナー 佐藤（ねじ）

カヤックの先輩デザイナー的立場のねじさんのホーム画面は、
自分が本当に必要なものをまとめたという印象。
DAY ONE と simplenote という2つのメモアプリを使った整理術だったり、
独自の整理術、アイデア発想術をもつねじさんのホーム画面は、コツがいっぱい隠されているのかも！

オススメアプリは "DAY ONE"。
日々のタスクなどの整理と、自分に対してのメモを使い分けているようですね。
詳しくはねじさんのブログかここで語られるかもしれません！

5 : 中国出身のゲームデザイナー馮（ひょうちゃん）

中国からはるばるやってきたひょうちゃんのホーム画面はこちら。
デザインはアプリではないですが、Dribbbleをかかさずチェックしているよう。
SNSは"Facebook"の他に、中国の "Weibo" や、"Wechat" を愛用。
ゲームはジャンル関係なくとにかく試してみるスタンスのようです！

オススメは上でも書いてある "Dribbble"。
もはや老舗ポートフォリオサイトとして不動の地位を得ているDribbble。
最新のデザインは常に追い続けたいものですね。

6 : 即戦力系新卒ゲームデザイナー 高橋（はるみん）

13年新卒で入社して以来、甲子園チームで頑張っているはるみんのホーム画面はこちら。
会社の検証機でiOS7のものがあるので、あえて自分のiPhoneはiOS6という渋さがいいですね。
基本的に元からはいっているアプリから大きく配置をかえずに使っているようですが、。
画面をスライドしたときに、女の子の目がちらっと見えるという絶妙な配置が楽しみのひとつだそうです。
楽しみをつくりだしていますね！


オススメはTwitterクライアントの "The World"。
ジョジョ好きのはるみんは中身のUIだけでなく名前で気に入って以来使い続けているそう。
ちなみにぼくはジョジョを2部までよみました。毎日 "ジョジョハラ に震える日々です。

7 : スーパーHTML5エンジニア兼デザイナー 小原（T.Smallfield）

元閃光部、現在デザイナーとしてバリバリ仕事をこなすおばらさんのホーム画面。
コミュニケーション / SNS のアプリを上部に固め、デザイン・情報収集のツールを下半分にまとめているようです。
COBUILDの辞書アプリは、英語の文章や情報を見るときに非常に役立つそうです。
背景もアプリもおしゃれな雰囲気が漂いますね。

こだわりのあるなおばらさんは今一推しゲームの、"LYNE" が楽しいようです。
綺麗なグラフィックがいいですね。

8 : ぼくらの甲子園リードデザイナー 喜納（きのう）

もとCLから、ゲームチームに移動してプロジェクトをリードするきのうさんのホーム画面。
2画面にわたり、自分がチェック / リサーチしたアプリのまとめでひしめいています！
新卒で入ったときに「多くのものを見ろ」と言われたものです！
甲子園だから野球系のアプリのリサーチだけではなく、

デザインにまっすぐなきのうさんは、"LINE" が楽しいようです。
息抜きは大事ですね。ゲームが楽しくなるチャットアプリ "Lobi もお勧めです。

9 : カヤック一推しゲーム姫ヒャクデザイナー 長峰（みねお）

みねおというニックネームですが女の子です。
美しいグラフィックのゲームも、所々に並びつつ、全体的にフラットなアイコンが並ぶTHE FLAT
な印象をうける画面ですね。　連絡系統も、自分の趣味も、情報収集もこの画面だけで終わる
洗練されたチョイス！

オススメアプリは "RISE"。
ゲームデザイナーの朝は早い。でもその目覚めも美しくいきたいですよね！
RISEは公開されてから根強いファンの多い、実用性も高いアラームアプリです！

10 : Lobi UI デザイナー 割石（わりえもん）

基本的に自分のひつようなものにだけアクセスできるようにホーム画面には、
docのアプリ含めて6つくらいまでしかアプリを置かないようにしています。
2画面目にも必要最低限にまとめています！色んなアプリは触っても、ごちゃつくと混乱のもとなので、
本当にいいと思ったものだけを残す様にしています！

オススメアプリは "Sumally"！
息抜きはこれひとつ！見てるだけで幸せになります。結構ここから人のプレゼントを考えたり、
いいものを買ったり、広がりがありますね。

新生活に（iPhoneの）中身も新しくして挑もう！

デザインに絡むアプリばかりではなく、実際の生活や通勤だったり、
生の人間感あふれるまとめになりました！
基本的に多くのアプリに触れるデザイナーですが、実際に触れるものと、それ以外をちゃんと切り分けするのも大事ですね。　
来週は入社式！みなさん胸はって、中身を外身も新しくして挑みましょう！


わりえもん

このイラスト......もうちょっと立体的にしてもらえませんか？

(> Д < )　「......ぐふっ。つっこまれた。ど、どうしよう。」

このキャラ......立体感足りないです

そんな風にお悩みのあなた！その絵も ひと筆で立体的にできるんです！


そう、反射光！！！

反射光で絵の見栄えが変わるビフォーアフターは続きからどうぞ！

光源と「反射光」を使おう！

シンプルなアイテム編

まず1枚目の、ボーリングピンから見てみましょう。
光源は上からまっすぐ当たっています。

ということは、
反射光は床面からきていると考えられます。

（´v`）「光源の反対から、跳ね返ってきてる光を描けば良いんだ！」
（´▽`）「よーし、写真を見ながら描いてみよー♪」

（´v`）「・・・・・・・(コレジャナイ感)」

反射光を入れる際は、
絵のタッチ、テイストに合った反射光をいれましょう。

特に、こういったデフォルメしたイラストは
スッキリした図形で構成した方が見栄えが良いです。

（´▽`）「こんなかんじ！」

どうですかね？
ボーリングピンらしい、
つるっとした、丸みが出たのではないでしょうか！

拡大してみてみましょう。
反射光として足したのは、このシンプルな3つの形。

これだけで充分、反射光の役目を果たしています。

厚塗りキャラクター編

続いて厚塗りキャラクターの反射光を考えてみます。

光源は左上です。
床や壁が描いてあるわけではありませんが、
光源の反対から反射光が
きていることを想定し

思い切って色をのせてみます。



どうでしょうか！

並べてみてみます。

右方向からの反射光を入れた事で
より立体感が伝わり、
キャラクターが映えて見えるとおもいます。

また、上図の青丸部分のように

各所の凹凸にあわせて、
・反射光が当たるところ
・当たりにくいところ
に緩急をつけると
さらに絵の説得力が増すかとおもいます！

絵の仕上げにちょこっと、反射光を試してみてください！

それではこのへんで！

(ちなみにこのキャラクターは、
姫ヒャク に出てきます！
遊んでみて下さいね♪)

まとめサイトでデザインを眺めてるだけで終わってませんか？

こんにちは、佐藤ねじと申します。仕事でも個人でもいろいろWEBつくってます。

最近だと個人では 

 

今日は2011年3月10日かもしれない

しゃべる名刺

すごいWEB 

などを作っていました。

 

さて突然ですが質問です。

 

「１０秒以内に、あなたがここ１年で見てきた素敵なデザインが出せますか？」

 

このときサッとすぐ取り出せるように脳内やPCの中が、整理されていない方は、

ぜひとも続きをご覧ください。

 

「情報は10秒以内に取り出せなければいけない」という

トヨタ式の考えを応用した、デザイン収集術です。

私が愛用する画像収集アプリ「Ember」の活用法をまとめました。

 

 

 

Emberとは？

Emberは、画像をまとめるのに便利なデジタルスクラップアプリ

【１：収集の巻】集める時間を決めて習慣化！

〜毎日、昼飯のあとにデザイン収集〜

【２：分類の巻】

画像の収集と分類は同時にやるのが鉄則！

【３：整理の巻】

あらかじめ「自分らしい言葉」でタグを用意せよ！

【４：分析の巻】

良いと思ったことを要素分解せよ！

【５：活用の巻】

リラックスした自分を戻すスイッチとして活かせ！

【６：番外編】

失敗にセンサーを働かせよ！

【まとめ】

●１：集める時間を決めて習慣化

●２：画像の収集と同時にタグ付けする

●３：自分らしい名前でタグ付け

●４：収集画像の良い部分を「要素分解」せよ

●５：デザインするとき、リラックスした自分を呼び戻すスイッチとしてスクラップを活用せよ

●６：失敗にセンサーを働かせよ

御社を志願します！！

はじめまして、突然の初々しい写真ですが、
4月から社会人2年目になった、はるみんと申します！
一昨年の今頃、就職活動にいそしんでいたのが少し懐かしいです。

突然ですが、
みなさんは面接のとき堂々と話せますか？
てんぱらずにしっかりと伝えられますか？

わたしはとんでもなく緊張しいでいわゆるあがり症です。
過去の発表などのときに、顔が赤くなりすぎて体調を心配されたり、首が赤すぎてやばいよなどと言われてきました。
そんなとき、近くで助けてくれるパートナーがいてくれたらなぁと何度も思いました。

でも、デザイナーの面接のときは生身で話すのではなく、ポートフォリオを使いながら話すことも度々あるはず！
そんなとき、ポートフォリオが最高のパートナーになってくれたら心強いですよね。

今回は
面接時で実際使った！"ポートフォリオ＝パートナー"の紹介をします！

カヤックに実際持っていった2人のパートナー！

1.電話帳系ポートフォリオ(1次面接時持参)

正面から見ると普通のポートフォリオですが、横にすると

やたら分厚いです笑
↓厚さの秘密は？？↓

心強いパートナーポイント：実物がそのまますっぽり入っている！

厚さの秘密は作品がすっぽりそのまま入っているからでした！
この作品は本なので、実物があったおかげで作品の説明がとてもしやすかったです。

2.ぱっと見ノーマル型ポートフォリオ(2次面接・3次面接)

こちらのポートフォリオはやたら背が厚いこともなく、一見本当に普通です。
↓そんなパートナーポイントは？？↓

真ん中の切れ込みを開くと

パートナーポイント：作品と連動したしかけで大きく見せる！

例えばこのページは見開きのしかけがあります。
これはパッケージの作品なのですが、実際の作品も開くという行程があるのでそれをより印象づけています。
また、真ん中の画像は実寸サイズなので、サイズ感も伝えています。
ぐっと引きつけられるしかけで人の目線を集められます。
他ページにも多数このようなしかけあり！

その他共通部分：しかけだけじゃない部分にも

パートナーポイント：見出しは相手にも自分にも分かりやすく

なにがどうおもしろいのかポイントを抜粋。また5W1Hをのせました。
忘れそうなときもここを見れば自分が安心できる！
文章に関しては、面接時はほぼ見てもらえないと考えたほうがいいです。
相手のために文章を書くことも大切ですが、自分のために（話すために）書くということを私は心がけました。

ところで1と2で何で分けたの？

それは面接形式が違ったから！

事前にどういう面接か知らされていたので、それを見て形式を決めました。
1次面接と2次面接に空き時間は少なかったですが爆速で制作しました笑

1次面接はグループ面接

グループ面接の場合、みんなに広げて見せる形になる可能性が非常に高い！
そうなるとポートフォリオをその場で細かく見てもらえることはほぼないですよね。
発表時間も限りなく少ないと言えることが多いでしょう（実際1人５分程度でした）。
そして冒頭で言いましたが、私はあがり症で話すのが特別得意ではないので、
普通に勝負をしても印象に残れない自信がありました。
そこで、そういう状況でもぱっと見て印象に残る！＝実物をポートフォリオに入れてくる・印象の強さで勝負しました。
実際、あの厚さのポートフォリオを持ってきた方はおらず、印象に残ったのではと思っています。
※1次面接の面接官Tシャツ部代表・柴田さんおよび他の志望者の子からどよめきの声があがったときは
内心"もらった！"と思いました笑

2次面接は面接官1人に志望者2人の少人数面接

1次面接と同様複数人数のため、広げて説明する可能性は高いです。
でも、少人数のため手に触れられる可能性もある・じっくり近くで見てもらえる可能性もある
そういうところから、ノーマルの形にしかけを施す見せ方にしました。
実物は無理にポートフォリオに入れずに別で持ってきて見せました。

＋α 3次面接は面接官3人に私1人！ 

2つめのポートフォリオだけでは3人に対して見ていだくものが少ないと感じたので
先月わーりーさんがブログに書いていた追い名刺ならぬ追いファイル2・3点に加え、追いWEBなど持っていきました。

つくりだすまえに押さえたい3つ

そもそも話しやすい状況はいろんな条件で変わってきます。
わたしが意識したのは自分のためにつくる・相手のためにつくるの2点です。

作品の1番いい魅せ方を探せ！

わたしが学生で作ってきた作品は、本やパッケージなど手に触れるもの近くで見るものが多く、
圧倒的に実物があったほうが説明がしやすいものが多かったです。
でも例えばWEBだったら平面のほうが見やすいですし、
企画だったらいっそ分けて別のファイルにしたほうが…？ともなりますよね。
作品に対して適切な見せ方を選べば、説明もぐんとしやすいです

自分の分析

しつこいですが、わたしはあがり症で緊張しやすく、話すのが得意じゃないと思っています。
→じゃあどうしたら話しやすくなるか？自分の魅力を伝えられるか？ と私は考えました。
考えた末、実物を入れこんだり・しかけを入れて楽しませる方向にしました。
話が上手でイメージを膨らませることのできる人は私みたいに実物を入れなくてもいいかもしれません。
自分の特性を考えることで、またひとつ見せ方が決まってきます。

どういう状況でみられる可能性がある？

上で触れましたが面接方法によって適切な状態が変わります。

• グループ面接
• 少人数面接
• 複数面接官に対し1人の面接 などなど

あとはポートフォリオの提出があるのか、ないのかもありますね。
提出がある場合は、丁寧に見やすくつくることはもちろん、開きやすさなども重要になってきます。
誰に見せるのか、どういう状況で見られるのかを考えるとおのずと形が決まってきそうです。
たくさんの想定をしておけばてんぱらずに対応もできます。

いざつくるとき

相手の顔を想像して楽しんでつくる

やっぱり楽しんでつくっていると作品にも伝わるはずです。
作らないといけない ではなく作るの自体が楽しいほうがいいですよね
ちなみにわたしはポートフォリオづくりめちゃくちゃ楽しかったです。
しかけを入れて、驚いてもらいたいポイントをつくることで見せることにわくわくしました。

こだわる部分をつくる

これはおまけで、おまじないに近い部分ですが、
ここは！というこだわりの部分をつくること。非常にポイントだと思っています。

例えば2つめのポートフォリオの表紙は、板に直接手で文字をレタリング！さらに4隅を画鋲で留めて固定していました！
表紙でも、中身でもどこでもいいですが、そういう部分をつくることで愛着がわきます。
愛着がわくと自信にもなってきます。
 

まとめ

・作品を見つめる
・自分を知る
・相手を知る

ある方は、ポートフォリオは生き物と例えました。
つまり最高のパートナーが場合によっては最弱のパートナーになっちゃうかも？？？
状況に応じて見せ方や演出を工夫して、その都度自分の最高のパートナーを連れて万全に挑んでください！
カヤックではあなたとあなたの最高のパートナーをいつでもお待ちしております！

デフォルメキャラって作ったりします？

こんにちは、ゲーム事業部デザイナーのみねおです。
最近は「姫騎士と最後の百竜戦争」チームで
ある時はUI、ある時はキャラクターなど、いろいろごにょごにょ作ってます。

今回はスマホアプリでは良く使われるデフォルメされた動物やキャラクターを作る際に、
自分が考えたりすることなんかを書きます。

どのくらいデフォルメする？等身テンプレを決める

これは最初に決めておいた方がいいと思うことなんですが、
ひとくちにデフォルメといっても、どの程度にするのかで幅がありますよね。
ゲームにしろ、何かアプリのナビキャラにしろ、あらかじめひな型となる等身を決めておくと
複数体のシリーズとして作る時に楽になります。

等身の決め方はいろいろあると思いますが、
私はそのまんま、はじめに描いたマルを頭の大きさとして
それがいくつ縦に並ぶかでだいたいのアタリを取ります。
原始的ですね。

デフォルメキャラは小さいだけに、わずかな差が大きな影響を及ぼすこともあるので、
同じキャラでも検討してみたりするといいと思います。

それはどんなキャラクターですか？特徴を誇張する

デフォルメといえばまずはこれですよね。
作ろうとしているキャラがどんなキャラなのか、ひとめで分かるような部分があれば
それをことさらに強調してあげることで特徴を伝えることができます。
例えば、ワニで強力な噛み付き攻撃をしてくる敵キャラだとしたらアゴかな、とか。

また、逆に特徴以外の部分は通常よりも小さくすると、より大きな差が出ます。

全体のフォルムに関しては特にルールとかはありませんが、
元々でっぱってる部分（肩幅とか太股とか）は大きく、
へこんでる部分（腰とか足首とか）は小さくすると、
比較的簡単にそれっぽくなるような気がします。

どのパーツをどんなバランスで変化させるのかというのが
オリジナリティの発揮しどころなわけですが、
もしどうしたらいいのかイマイチ分からなかったら、
とりあえずピクサーの映画を見るといいと思います笑

いずれにしろ、意外と極端なくらいにしてもそれほど破綻したりしないので
思い切りが肝心のようです。

偶然に頼ってシルエットで考える

複数のキャラを登場させる時にはキャラごとの差異が明確になるよう
シルエットでも判別がつくことが望ましいです。
そのあたりは先日のちびキャラの記事にもありますので、そちらも読んでみてください。
シルエットからキャラを作る時は、適当に描いた偶然の形から考えたりすると
自分の意識に縛られないものが生まれたりします。

できるだけシンプルなアウトラインで考える

リアルな人物や動物は細かい曲線の連続で出来ています。
それらをできるだけ単純な線の構成に置き換えてしまうことによって
考えてみるのはどうでしょうか。

漫画で起こった表情を三角形の目で表現するような感じです。

これはキャラクターを作る時だけでなく、モチーフや動物を使ったロゴや紋章などのデザインを
考える際にも同じような方法で考えたりしています。
この時もできるだけモチーフの特徴的な部分を抽出して強調すると
モチーフを伝えやすくなります。

改めて文章にすると新鮮な感じがします。
何かのヒントになるものがあれば幸いです！ではまたー

え！？そういう意味だったの？？？

みなさんこんにちは。意匠部クライアントワークチーム デザイナーの tsmallfield です。
今回はデザインするときに知っていると、ちょっと得するかもしれない！？豆知識のお話です。

U.S.A. は U.S.A でなく U.S.A. なのだ！？

一体何を言っているのかよくわからないタイトルですが、まずは以下の写真（Fig. 1）をよ〜く御覧ください！

（Fig. 1: 街中で撮影した案内表示板や広告）

街中の案内表示板や広告の文字。
デザイナーのみなさんはやっぱり気になりますよね！

その中でよく見る
謎のピリオド "."
これ不思議に思ったことありませんか？

日本語の読点「。」にあたる "." かなと思いきや、文中に突然現れたりもするし。。。
これは一体なんなのでしょう！？

↓
↓
↓
↓
↓
↓

気になる正解は。。。。

「略している」

という意味の "." なのです！！！
（Ref. http://en.wikipedia.org/wiki/Full_stop）

例えば...
"Exp." の "." は "Express" を「略している」という意味

"Sta." の "." は "Station" を「略している」という意味

"Ave." の "." は "Avenue" を「略している」という意味

...
といった具合！
これ、以外と今まで知らなかった人多いのでは。。。！？

ちなみに、略した時に "." を付ける付けないの話題はちょっとややこしいので割愛しますね。
Ref.
http://www.oxforddictionaries.com/words/punctuation-in-abbreviations
http://www.oxforddictionaries.com/us/words/punctuation-in-abbreviations-american

だから U.S.A. は U.S.A でなく U.S.A. なのだ！

ここでようやくこの記事のタイトルに話を戻しましょう。
以下の写真（Fig. 2）を御覧ください。

（Fig. 2: バックパックのタグ）

U.S.A.とあります。ピリオドが３つもついてます。
この３つのピリオドの意味、もうみなさんは説明できますね！

"U." の "." は "United" を「略している」という意味

"S." の "." は "States"　を「略している」という意味

"A." の "." は "America" を「略している」という意味

これらの "." は、文末の "." とも www.kayac.com の "." とも違います。
「略している」という意味の "." 。

そう、だから

U.S.A. は U.S.A でなく U.S.A. なのです！

最後のピリオドを忘れずに！

U.S.A.のような略語をデザインする機会はよくあると思います。

V.I.P.
L.O.
U.F.O.
A.M.
P.M.
C.T.O.
R.S.V.P.
E.T.
A.K.A.
S.H.I.E.L.D.
...
etc.

そんなとき最後のピリオドをうっかり忘れてしまったことはありませんか？
"U.S.A." と書くべきところを "U.S.A" と打ってしまったりしたことあったりませんか？

でもピリオドの意味をしっかりと理解できていればもうそんな間違いをする心配はありませんね！

まとめ

街中にはいろんな謎の記号や文字があふれているはず。
そんなときはちょっと調べてみると面白いですよー！！

P.S. カヤックでは略語大好きデザイナーを絶賛募集中です！
ぜひぜひ 弊社 H.P. から A.S.A.P. でご応募ください！！

皆さんはお気に入りデザインの管理をどうやっていますか？

はじめまして！
14新卒デザイナーとして面白法人カヤックに入社しました、トダエミです。
ソーシャルゲームチームでデザイン修行しながら、写真撮ったり絵を描いたりしています。

今回は、新卒デザイナーにとって関門の一つデザインの引き出しを増やせ！
を攻略するための方法として、
デザインスクラップツールの紹介をします！

1.デスクトップ系ツール

バナーもボタンもキャプチャも、これ一つ！「Spark Box」

>> http://www.icyblaze.com/sparkbox/
（対応：mac）

UIやバナーなど単体のものをストックするのに大活躍！
私はソーシャルゲームのバナーをストックするのに使っています。

サイトに使われている画像が一覧で表示され、一つずつまたはすべてライブラリに読み込めます。
魅力的なのはソート機能！
なんと自動でカラーソートしてくれます。

画像の選択した領域にコメントつけることもできます。
しかもそのコメントが検索結果に含まれる！すごい！
DropBoxをライブラリに指定すれば、複数のパソコンでも管理出来ます。

ペライチサイトを一覧に！「INBORD」

>> http://inboardapp.com/
（対応：mac）

縦長のサイトは、そのままの比率でサムネイル表示されるのが嬉しいところ！
好きな部分をキャプチャすることもモチロン可能。
ブラウザからストックすれば、URLも連携されるので、ブックマーク代わりにもなりますね。

惜しいのは、クラウド対応していないこと。
いつかアップデートして対応されることに期待！

様々な画像形式に対応！「Pixa」

>> http://www.pixa-app.com/
（対応：mac）

Illustratorやgifアニメなど、様々な画像が変換無しで管理できるPixa。
画像はサイズや色で自動的にソートしてくれます。

Dropboxへのアップロード、URLの取得が可能なのがポイント！
タグと共に常に同期してくれます。
チーム共有に使えそうなストックツールです。

プライベートでも仕事でも使える定番アプリ！「Evernote」

>> http://evernote.com/intl/jp/
（対応：win／mac）

言わずと知れたストックツール。
画像だけでなく、テキストも保存可能。 なので、使い回すコードの保存にも役立ちます！

私は読んだ本の、気になった部分をストックして、時々読み返したりしています。
こちらもスマホで同期出来るのが嬉しいところ！

とにかく使いやすいテッパンツール「Ember」

>> http://realmacsoftware.com/ember/
（対応：mac）

ねじさんの記事でも紹介されていましたEmber。
社内でも使用しているデザイナーをよく見かけます！

2.クラウド系ツール

動画もテキストもストック出来ちゃう「DRAGDIS」

>> http://dragdis.com/

ブラウザ上で、サイドバーへつかんで投げまくる気軽さ楽しさがハマる！
動画もテキストも画像もストック可能なので、とりあえず気になった情報をポイポイ入れられます。
動画ストックツールのなかでも使いやすいのでオススメ。
あとで見ようと思ったコンテンツを、保存しておくツールにもなりますね。

簡単キャプチャストック「Clipular」

>> http://www.clipular.com/

FacebookアカウントやGoogleアカウントで使用出来る、キャプチャストックのサービス。
ツールバーにある、ハサミのアイコンかカメラのアイコンでキャプチャを撮るだけの簡単機能です。

5つ以上サイトをクリップすると、グループ分け機能が使えるのが、一押しポイント。
キャプチャにメモを残すことも出来ちゃう！
Facebookへのシェアも可能です。

レシピも映画もメモ！「springpad」

>> http://springpad.com/

Evernoteの競合と言われるspringpad。
本、映画、レシピ、タスク、写真などなどたくさんの種類のものをストックできます！

テンプレートがいくつか用意されており、気軽に使い始めやすいです。
ノートが並んだような、シンプルなデザインが素敵！

涼しげなオシャレツール「Icebergs」

>> http://icebergs.com/

画像もテキストもストック出来るサービス。
Pinterest風のグリッドレイアウトを自動でしてくれるので、一覧にした時に楽しい！
氷をイメージしたデザインが可愛いです。

複数人でストックを管理するコラボレーションツールがあります。
プロジェクトのイメージを共有し合うのに便利かも。

3.SNS

スキなモノ収集「SVPPLY」

>> http://svpply.com/

購入出来るモノだけをコレクション出来るキュレーションサイト、SVPPLY。
男性、女性のアイテムに限らずアートやファブリックなモノも揃っています。
iPhoneアプリも展開！UIが洗練されています。

インテリアデザイン特化のSNS「olioboard」

>> http://olioboard.com/

インテリアやデザイン商品をシュミレーションレイアウト出来るSNS。
ショールームを体験出来るようなワクワク感があります！
デザインコンセプトを視覚的に表現でき、他のユーザが作ったボードを見られるので、インスピレーションを湧かせるにはもってこいのサービス。
サイト上で商品を購入出来るECサービスもあります。

ファッション、アート業界をストック！「Styloko」

>> http://www.styloko.com/

印象としてはPinterestのファッション・アート特化版。
自由に作るフィードの中でお気に入りのブランド、ユーザの最新情報をフォローすることが出来ます。
ブランドセールの情報もゲット出来ちゃう！

世界中のデザインが集結「Pinterest」

>> http://jp.pinterest.com/

おなじみのデザインストックSNS。
Webに限らずファッションや写真など、世界中のデザインが常にチェック出来るので飽きません。

UI/UXのボードやWebデザインのボードなど、カテゴリごとにフォローすると、ストックの幅が広がります。

女子のスキ！をチェック「We heart it」

>> http://weheartit.com/

世界中のCawaiiが集まるSNS。
Pinterestと比べると個人的・女子向け・ティーン向けと狭いターゲット層。
他のユーザがハートした画像がばんばん流れるので、眺めているだけでも癒されます。

いかがでしたでしょうか。
上記以外にも

などなど、デザインスクラップの方法はまだまだあります！
自分に合うものを試してカスタマイズしていくと、
デザインの引き出し倍増になると思います！

私はまだまだデザインの勉強中の身なので、他にもこんなサービスあるよ！っていうものがあったら、是非教えてください！

POPは実機でのモックアップを手軽に行うためのアプリです。

自動置換のやり方

1. プロジェクトのdropbox連携をONにする
2. dropboxフォルダ以下のアプリ/popを参照する
3. 連携したプロジェクトの名前のフォルダをつくる
4. フォルダの中に画像をいれる

1. プロジェクトのdropbox連携をONにする

  

2. dropboxフォルダ以下のアプリ/popを参照する

3. 連携したプロジェクトの名前のフォルダに画像をいれる

アプリ

ーpop

ーー[プロジェクト名]

4. 画像を表示させる

各フォントの♥マーク全21種類比べてみた

はじめまして、カヤック新人デザイナーのきんこと申します。
アイコンマークに起用したり、グラフィックの一部に使ったりと、
デザインをしていてなにかと登場することが多いハートマーク。
みなさんは普段どのように制作していますか？
フリーの素材をダウンロードして使う人やオリジナルのマークを作る人が多いかと思いますが、
今回は自分がよく使う、フォントに含まれるハートマークについてお話しします。

フォントに含まれるハートマークをリストにしてみた

はじめに、ハートマークがシンボル登録されているものを表にしてみました。

こうして並べてみると、よく見る形のものから個性的な造形のものまで様々です。
見たことのないハートもあるのではないでしょうか？
特に欧文フォントは、シンボル登録されている書体も少なく、「ハート→変換」では入力出来ないので、
見つけるのに苦労しました...。
(他言語のハートマークを入力したい場合は、字形パレットから入力することができます。)
※このリストはあくまでぼくの持っているフォントでの結果なので、みなさん自身のフォントでハートマークを洗い出してみると、また違う結果になってくると思います。お試しあれ！

さて、これほど選択肢があると、つい感覚で選んでしまいそうですが、ハートマークも他のフォントと同様、特性を理解すればそれぞれに合った使い道が見えてきます。

和文のハートと欧文のハートを比較。

和文と欧文のハートを比較してみました！図は、和文欧文それぞれのハートを透過して重ねたものです。ご覧の通り、和文と欧文とで形が大分違います。

欧文のハート下部に向かう曲線が内側にカーブしています。和文に比べて、線に抑揚があり、スリムでセクシーな印象を受けます。また、お尻の部分が鋭角にとがっているものが多いため、どことなくキューピットの矢を連想させます。大人っぽい雰囲気を出したいときや、色恋ごとを表現したいときは、欧文のハートマークが合いそうです。

和文のハート欧文とは対照的に、下部へ続くカーブは外側へ膨らんでいます。全体的に丸み帯びているものが多く、ポップで親しみやすい印象を受けます。欧文のような強いクセはないため、いろいろなトーンのデザインにマッチしそうです。日本人になじみがある形といえばやはりこっちなんじゃないでしょうか？

この違いはどこから来るのでしょう？

考察１ハートマークの起源は、女性の体の象徴として作られた説、心臓の形を元に作られた説、聖職者を象徴として作られた説など、さまざまで、はっきりとは定義されていません。そのため、国や宗教ごとにハートマークに対するイメージに違いがあり、その違いが形にも影響していると考えられます。ちなみに、欧米では、キューピットの矢の形や、トランプで使われるハートの形が主な由来とされてるそうです。(wiki参照)そう考えると、欧文のハートの独特な形状にも合点が行きますね。興味がある人は、他の言語のハートマークも調べてみると面白い発見があるかもしれませんよ！
考察２フォントに含まれるハートマークは、文字と並べて使うことを前提に作られるため、所属するフォントの造形がハートマークの形状に大きく影響すると考えられます。よって、全角の和文と半角の欧文とでは、必然的に縦横比が変わってくるようです。ハートマークをテキスト一緒に扱うときは、おとなしく同じ書体に登録されているものを使うのがよさそうですね。使いたいフォントにハートマークが登録されていない場合は、形の似ているフォントのハートマークで代用すると良いかもしれません。

和文同士でも比較

次に、和文のハート同士を比較してみました。
今回は、和文書体の代表格、ヒラギノ書体と小塚書体、先日Googleから発表されたオープンソースの書体の源ノゴシックの三つを比べてみます。

ぱっと見どれも同じようですが、細かく見ると線の抑揚や縦横比が微妙に違うのがわかります。

ヒラギノのハートマーク三つの中で一番背が高く、山から谷に向かうカーブが急で、谷の部分が少し丸み帯びています。
そのため、やや肩に力が入っているような印象で、すこしゴツめです。

小塚のハートマークヒラギノのハートに比べ、谷の曲線が緩やかで品のある印象を受けます。
下部へ向かうの曲線はフラットで、縦横比も偏りがなくちょうどいい感じです。
三つのハート中で、もっともバランスが良くベーシックな形状といえます。

源ノゴシックのハートマーク字幅は広めで、曲線の抑揚が大きく、下部へ向かう曲線は欧文のハートマークのように内側にカーブしています。
三つのなかで一番柔らい印象で、女性っぽさを感じます。
和文と欧文を複合したような珍しいタイプのハートマークです。

ハートマークは微妙な差で印象が変わる！

比較をしてみてわかる通り、ほんのわずかな造形の違いで与える印象に大分差がでてきます。ハートマークは、形がシンプルな分ちょっとしたラインの曲がり具合や縦横比の差で印象が大きく左右してくるようです。良ーく見ないとわからない微妙な違いですが、知っておくと、迷わずにトンマナに合ったハートマークを選択できたり、オリジナルのハートマークを作成するときに参考になったりと、いいことずくめなので、時間があるときに、手持ちのハートを観察してみて下さい！

書体ハートマークのすすめ

最後に、個人的に思う、使えそうな書体のハートマークを紹介します！

【スタンダード系ハートマーク】

小塚書体、Menio のハート

丸みを帯びすぎず、鋭角になりすぎずと言った感じで、最もスタンダードな形状のハートです。シンプルな分、余計な印象与えることがないので、フラットなデザインをはじめ様々な用途で活躍しそうです。

【ラウンド系ハートマーク】

likeやfavoriteのアイコンでよく見る形状のハート。ポップで軽い印象があり、恋愛感情というよりは、家族間や友人の間の繋がりを表現するのに向いていそうです。また、円に近い形をしているため陰影や光沢をつけやすく、ゲームのライフポイントのアイコンなどでも活用できそうです。

【ワイド系ハートマーク】

zapf dingbats、源ノゴシック

まとめ

ハートマークと一概にいっても、その形によってイメージも用途も全然変わってきます。この差異を一からパスで表現しようとすると、とても難しいし、時間がかかってしまいます。そんな問題を解決してくれるのが、フォントに含まれるハートマークです。
フォントに含まれるハートマークは、他の文字と同様に長い時間をかけてつくられているため、完成度は非常高く、単体でそのまま使用しても何の問題もありません、形を変えたいときは、アウトライン化で簡単に調整することもできます。これらのハートマークをうまく扱えるようになれば、作業の効率化やデザインのクオリティ向上にきっと繋がります！
書体を使い分けている感覚で、ハートマークも取捨選択できるようなれたら、最高ですね！以上、フォントに含まれるハートマークについて話でした。

（追記 140919 11:00)iPhone 6 Plusを入手しました
特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど）

みなのもの落ち着け！

iPhone6/6+の発売がいよいよ明日となりました！

二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、
慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。

• 画面解像度
• アイコン・スプラッシュ
• レイアウト対応について

ひとまず気にするのはこの辺りの情報！
あとはおまけで便利そうなリンクも載せました

これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。

それにしても時代はレスポンシブです。
やれやれだぜ。

基本的な情報

画面解像度はこうなってます

アイコン

アイコンはいつもtemplateを公開されているPixelResortから早速iOS8版として公開されています

App Icon Template (PixelResort)

また、それぞれのアイコンやスプラッシュのサイズはiOS Human Interface Guidelineでみることもできます。

iOS Human Interface Guideline - Icon and Image Sizes
＊iOS8版日本語訳はまだ公開されていません。

スプラッシュ（調査中）

今までのスプラッシュはPNG画像１枚でしたが、Xcode6からオプションが増えました。

iOS Human Interface Guideline - Launch Images
＊日本語版はまだ公開されていません。

デバイスのモデル画像

いつもアプリ作った後とかに宣伝で使いますよね。

appleさんから公式の素材が既に出ています。
利用する用途などの制限もありますので、ページに書かれている用途も合わせて読んだ上で使ってください。

Apple Product Images

理想レイアウトと対応策と現実策

Appleの意向

今回のiPhone6について、Keynoteでこんなことを言っています。

「iPhone6や6+については単純な拡大ではなく、それぞれに適したレイアウトをつくるといい」（超意訳）

例えば今のiPhone6のページを見るとわかりますが、ホームスクリーンではアイコンを大きくせず、アイコン間のスペースが広くなっています。

iPhone 6
 

iPhone 6 Plusについては単独でUIのセットもできるようです。

つまるところ、iPadとは違う第三・第四のレイアウトセットが必要ということですね。
しかしiPadと違い、ユーザーとの身体的距離・利用シーンは変わらないですから、iPadと同じというわけにもいきません。

時代はレスポンシブです。
やれやれだぜ。

対応策とひとまずの現実策

いずれそういった枷を逆手に取った面白いものがでるかもしれないんですが、
まずは今手元にあるものをどうするかということで考えてみました。

３択ー１つだけ選びなさい

• 答え①ハンサムなデザイナーは突如全て対応できるアイデアがひらめく
• 答え②チーム一丸となってそれぞれのレイアウトの実装を行う
• 答え③まだ対応はしない。　現実は非情である。

余談ですが僕がやっているゲーム開発について

Unityの対応もまだなので、いまできることは少ないです。

またゲームはスクロールさせないことを前提に作られている部分も多く、
いろいろなサイズに対応させるには四苦八苦させられます。
もういっそコンシューマーのように、複数サイズ前提で考える時が来たのかもしれませんね。

役立ちリンク

最後に関係ありそうな資料や記事のリンクを。
時々追加していきます。

画面サイズでまよったら
（まだiPhone6が入ってないのですが）

•   【iPhone×iOS別】Safariの表示領域まとめ
• いつも手元に置いておきたい！iPhone/Android画面解像度早見表

テンプレート系素材

• アイコン：App Icon Template
• UI素材：速報：iOS 8を完全再現したIllustrator用無料ベクターUIコンポーネント素材

iOS8関係

• Xcodeで簡単に動かせるサンプラー：iOS 8 の新機能のサンプルコード集『iOS8-Sampler』を公開しました

• iOS 8から導入されたWebGLで動いているサイト： WebGLのサイトつくりませんか？

情報が間違っていたり、ここに書かれていること以外で知りたいことなどあればぜひコメントなどでお知らせください！

（140918 23:58 ）スプラッシュと書くべきところスクショと書いてましたので直しました。
（140919 15:30 ）PixelResortと書くべきところの一部がPixelEesortとなっていたのを直しました。

ちなみにこんなタイミングでアプリ開発終盤に差し掛かっている僕のゲームはこちらです（- - )
Android先行リリースしてます。

ぼくらの甲子園！ポケット
 

iPhone 6 plusを買ってみて遊んでいます。

android勢からすれば当たり前かもしれませんが、
やっぱりこのサイズは画面上半分触るの厳しいです。

実はついこの間リリースしたゲームは、
ユーザーにタップしてもらう領域をなるべく下半分に寄せてました。

作り始めたのは１年前なんですが、6+でも快適に遊べそうなので、そこでやったことの話をします。

こういった話はあまり見ないので、チームやデザイナー同士の話のたたき台にでもしてもらえると嬉しいです。

ゲームの説明と特性

今日の話のネタになるのは「ぼくらの甲子園！ポケット」というゲームです。

ぼくらの甲子園！ポケット 公式サイト

今日の話に必要な情報はこんなとこです

• iPhone&Androidの両対応
• アイテム課金型のいわゆるソーシャルゲーム
• 画面サイズは640x1136、縦横比9:16（つまりiPhoneの4inchi）を基準
• ゲームはギルドバトル方式。複数人のユーザーでチームを組んで甲子園大会優勝を目指す

どんなところがでかい画面サイズの端末でも遊べるポイントだったのかと言う話をしていきます。

こんにちは！はじめまして！
カヤックHTMLファイ部に来年度新卒で入社予定のもときです。
現在はインターンとしてカヤックに来ています。

今回はtumblrについての記事です。
tumblrに関する記事はググればいくらでも出てきますが、
このデザイナーズブログではまだ扱っていないようなので、
tumblrの魅力と、tumblrサイトのカスタマイズのはじめかたを、
僕なりに紹介してみたいと思います！

・tumblrってなんとなくは知ってるけど、一体どんないいことがあるの？という方
・いまtumblrを使ってて、もうちょっとカスタマイズしてみたい方
・これからtumblrでサイトを作ってみようと思ってる方
そんな方に向けた記事です。

tumblrの魅力

tumblrとは

このブログを見ているような方々なら、今や知らない人のほうが少ないのではないでしょうか。
それほどにすでに有名なサービスですね。

一言で説明すると、
tumblrとはSNSやブログなどの機能を持ち合わせた非常に多機能なwebサービスです。

・・・合ってるかな？
僕はそう捉えてます。

そしてその多機能さ故に、さまざまな使い方が出来るのも特徴です。

twitterやfacebookのようにsnsとして他人の投稿をダッシュボードで見たり、フォローしたり、リブログしたり、お気に入りしたりすることも出来れば、
自分の投稿を公開する専用のページがあるため、いわゆるブログとして日記的に情報を発信することも出来ます。

そんなsnsやブログなど複数の機能を融合させたtumblrの、
今回は主にブログ部分の魅力に注目してみます！

tumblrブログの魅力

そんなtumblrブログの魅力の１つに、そのカスタマイズの自由度の高さがあります。

ブログのカスタマイズの画面に行くと、たくさんのテーマの中から好きなデザインを選ぶことができます。さらに、テーマごとにオプションが設定されていることが多いため、何の知識もなくともそこそこ柔軟な設定が可能です。

また、htmlを直接編集することもできるため、ある程度のhtmlやcssの知識があれば、
自分のブログを制限なく自由にカスタマイズすることが出来るのです。

その自由度の高さから、tumblrブログは様々な使い方が出来ます。

snsとして気に入った他人の投稿をリブログやお気に入りして貯めていったり、気になったページを投稿してソーシャルブックマークのように使ったり、
または自分のつくった作品を投稿してポートフォリオとして使ってもいいでしょう。
あるいはその名前の通りいわゆるブログとして、日々情報を発信していくのもよし。
その他には企業サイトやアーティストサイトのようなものにも多く使われています。

「ブログ」の概念に縛られず、自由にサイトを作ることが出来るのです！

tumblrで作るのに向いているサイト

上に挙げたように、tumblrでは様々な用途のサイトを実現することができます。

画像やcssファイルやjsファイルなどの静的ファイルをアップロードすることも出来るため、
極論を言えば、tumblrの特徴を全く使わずにhtmlを書いて、サイトを作ることさえ出来てしまいます。

ただし、サーバー側のプログラムを動かすことは出来ないので、そういったことが必要な場合には向いていません。

逆に言えば、サーバー側のプログラムが必要ないサイト、小規模なサイトにはもってこいです。
自分でサーバーを立ててwordpressを入れて、、、とするよりも、
その開発コスト運用コストは大きく削減できるでしょう。

また、ブログはもちろんのこと、
「投稿」を1単位として利用できるような、コンテンツを並べるようなサイトなど、
tumblrを投稿システムとして、CMS（コンテンツマネジメントシステム）として利用できるようなサイトには非常に向いていると思います。
CMS全般に言えることかもしれませんが、
「投稿者にweb開発の知識が必要ない」というのは大きなメリットじゃないでしょうか。

tumblrサイト事例

挙げればきりがありませんが、少しだけ紹介

・キュウソネコカミ グッズでんたく

こちらはカヤックで制作したサイトです！

・ユニクロ銀座


・ニコン


・twitterステータス

tumblrサイトのカスタマイズのはじめかた

tumblrブログのカスタマイズ

テーマを変更したことがある方はすでにご存知だと思いますが、
まずは基本的なカスタマイズの流れについて説明します。

ダッシュボードの画面から"カスタマイズ"を押して、カスタマイズ画面に移ります。


ここで"テーマを見る"から好きなテーマを選んだり、


下のオプションでそのテーマを自分好みに設定したりすることができます。


テーマにもよりますが、ここのオプションだけでもなかなか柔軟なカスタマイズができたりします。

しかし今回は、その一歩先を解説しちゃいます！

ちょっとだけ"HTMLを編集"してみよう

カスタマイズ画面の"HTMLを編集"を押すと、
現在のテーマのhtmlやcssがだーっと書いてあると思います。

先ほど「極論を言えば、tumblrの特徴を全く使わずにhtmlを書いて、サイトを作ることさえ出来てしまいます。」と言いましたが、それを確認してみましょう。
書いてあるコードを全て消して、以下のコードをコピペしてみてください。

<html>
    <head></head>
    <body>
        hello world!
    </body>
</html>

"プレビューの更新"を押してみると、、、
hello world!と表示されたでしょうか？


htmlを少しでも触ったことがあればわかると思いますが、これは基礎中の基礎ですね。基礎のキですね。キのkですね。

このように、基本はhtmlです。
恐れることはありません。

そこに、tumblrの特徴を利用するためのtumblr独自のタグ（と呼びます）を追加していきます。
サーバー側のスクリプトの入ったhtmlを触ったことのある人なら、イメージはそれに似ています。

<html>
    <head></head>
    <body>
        {Title}
    </body>
</html>

自分のブログのタイトルが表示されたかと思います。


お分かりの通り、{Title}がtumblr独自のタグになります。

ちなみにcommand+zとかで元に戻れます。

tumblr独自タグ

すでに出てきたように、tumblrにはその特徴を利用するためのtumblr独自のタグがあります。

tumblrの独自タグには主に変数(Variables)とブロック(Blocks)の2種類があります。

先ほどの{Title}は自分のブログのタイトルを持っている変数です。
ブロックはこんな雰囲気です↓
{block:Posts} {/block:Posts}

ほんとうはこの独自タグを詳しく解説しようかとも思ったのですが、
長くなるし今回の趣旨ではないので省きます。

独自タグについては、公式ドキュメントが最も参考になります。（英語ですが）
公式ドキュメントを見れば独自タグの全てが書いてあります。（英語ですが）
日本語に訳しているものもあります。こちらとこちら。

tumblrカスタマイズのポイント

しかしいきなりドキュメントを見たって、何がなんだかわかりません。
（少なくとも僕はそうでした。）
なので、以下では僕がつまずいたポイントを2つお教えします。

tumblrの投稿の種類を理解しよう

tumblrの投稿には色々な種類があります。

僕は最初、投稿の種類とかをよく知らないままにtumblrサイトを作ろうとして、
リファレンスを見て、独自タグ多すぎ！わかんねえ！
と、なかなかに苦戦をしました。
そんな状況で全ての種類の投稿とその要素をかっこよく表示させようったって、そりゃ無茶でした。

実際にtumblrで投稿したことがあれば大体ご存知かと思いますが、
tumblrの投稿の種類は、以下の7つがあります。
・テキスト投稿
・画像投稿
・引用投稿
・リンク投稿
・チャット投稿
・音声投稿
・動画投稿



まずは投稿の種類と、それぞれにどんな要素があるのか、ということをしっかり理解するようにしましょう！

--
この記事を書いている途中で気づいたのですが、この内容はドキュメントのIntroductionに書いてありました。。。
ドキュメントはしっかり読みましょう、ということですね。。。
Introductionとか読み飛ばしていました。。。
--

ちなみに、とりあえず全ての投稿に対応させたいのなら、htmlは公式ドキュメントのGet Startedの下部にある
「Here's an example of the complete markup for a theme:」の部分のソースや、
こちらで紹介されているテーマスターターを使うのもいいでしょう

IndexPageとPermalinkPage

また、僕が最初に理解できずにつまずいた部分のひとつに、
IndexPageとPermalinkPageがあります。

こちらはタグとしては書いてありますが、あまりしっかりとは説明が書いていないかと思います。

IndexPageはその名の通り自分のブログのトップページで、
PermalinkPageはそれぞれの投稿の個別のページです。

独自タグのブロックのタイプのもので、
{block:IndexPage} {/block:IndexPage}で囲った部分はインデックスページでのみ表示され、
{block:PermalinkPage} {/block:PermalinkPage}で囲った部分は個別のページでのみ表示されます。

そしてtumblrでは、基本的にこれらを同じソースの中に記述する必要があるので、1つのソースが煩雑になってなかなか大変です。
こればっかりは慣れるしかないかも知れませんが、IndexPageとPermalinkPageについてはしっかり意識しながらカスタマイズをするようにしましょう。

最後に

いかがでしたでしょうか。
少しでもこれからtumblrサイトを始めようと思っている方々の参考になれば幸いです。

HTML5飯！

そして最後に、宣伝です！

きたる2014/10/11 (土)に、
【HTML5飯】第3回 Webフロントエンジニア交流会@横浜
が開催されます！

おいしくてためになる！
WebフロントエンジニアがLTをききながらみんなでご飯を食べる会です。

興味のある方はぜひ！
Facebookと peatixの両方で募集しています！
お好きな方からどうぞ！

はじめに

便利な時代になりました。
いまや情報はキュレーションされて、自分に合った情報だけが簡単に手に入ります。

ですが。
そんなに簡単に情報を手に入れて良いのでしょうか？
這いつくばって、泥臭く得た情報（以下、キラキラした情報）の方が
喜びや価値は大きいのでは？

私、カヤックデザイナーのTumblrフリーク、ゲンです。
私のTumblrブログの数は41です。

今回ご紹介するのは、私も実践する〝深く良く効く、Tumblrを最高に使う方法〟
このブログをお読みのようなハイスペックな皆様には
Tumblrってなに？という説明は抜きでいきたいと思いますのでよろしくお願いします。

全ユーザーをフォローし尽くす勢いでフォロー

「大量フォロー？俺、フォローは厳選してるし」
「見たい情報が流れるじゃん」
「変なポストが入ってきたらいやだな...」
そう考える気持ち、よく分かります。
ですが、冒頭にも述べたように、キラキラした情報はそう簡単に手に入りません。

自分の興味のなかった情報が予期せぬ収穫となる事もあります。
すべてを享受していく気持ちでフォローを増やしましょう。

小手始めに、自分に近いユーザーからフォローしていくと良いでしょう。
以下におすすめのフォロー基準を紹介しますので実践してみてください。

センスのいいリブログ先に[+]があったら即、押そう

Tumblrではポストの中にリブログ元が表示されています。
尚且つ、そのリブログ先が未フォローだと[+]ボタンが表示されます。
「なんてセンスの良いリブログだ！」と思った時にはこのボタンを押し終えてると良いでしょう。

ライク／リブログされたらフォロー

「私のポストをリブログするとは、気が合うな」と感じる時は無いですか？
自分の気に入ったポストをライク／リブログするということは、
自分に近い人間に違いない、そう思い込んでフォローしましょう。

1つのポストから一気にフォロー

Tumblrをしているとたまに、他とは違う「これぞ！」というポストを発見することがあります。
そういうポストをライク／リブログしている人、これもまた自分に近い人間であるに違いありません。
片っ端からフォローしましょう。

細分化したサブブログを作る

自分の内面がそのままブログに反映されるのがTumblrの素晴らしい点です。
見返した時の一覧性を上げるためにサブブログを作りましょう。
好きなようにサブブログを作っていただいて結構ですが
こういったサブブログの作り方もおすすめします。

ちなみに、
サブブログはいくつでも作ることができます。日本語のドキュメントには

最大で10件のサブブログを作成できます。
https://www.tumblr.com/docs/ja/blog_management

とありますが、正しくは一日最大10件までです。

You can create up to 10 of these per day.
https://www.tumblr.com/docs/en/blog_management

「好き」を具体化してみる

カッコイイ、カワイイ、自分の好きなものはすぐに判断できます。
では、なぜ好きだと思ったのでしょう？
グラフィックが？モデルが？意図せずに写ったものが？自分の気分的に？投稿された日が？
その答えをサブブログにしてみましょう。

綺麗だな〜と思っていたものを細分化したらこういう色が好きなんだと行き着いたブログ

http://9olor.tumblr.com/

密林感やデジタル感のある植物を集めたブログ

http://paradisecore.tumblr.com/

「とりあえず置き場」を作る

なんとなく良い！けど何が良いのか分からない。
サブブログにするほど好きでもないけど見逃すのも癪。
そういうポストは、「とりあえず置き場」ブログへリブログしましょう。

良いと思ったものを寄せ集めたブログ

http://nice9enn.tumblr.com/

時間と体力のDIG

ここまでやりきった人はおそらく秒速数10ポストが入ってくるようになったと思います。
土台が整ったところであとはDIGしてリブログするだけです。
そこで、アツいTumblrの使い方にピッタリなオススメ最強ツール1選をご紹介します。

Tumblr Tornado

https://github.com/poochin/tumblrscript/wiki/Tumblr-Tornado
Web版Tumblrの使い勝手を向上させるChrome拡張。

中でもチャンネルダイアログのショートカット機能が便利です。
サブブログへ一瞬でリブログできる機能です。
「リブログボタンを押して、リブログ先を選んで、リブログ......遅っせえ〜！」
なんてことはもう無くなります。

この機能は自分のブログ一覧の順番を上から1〜9キーに割り当てています。
よく使うブログを9つ(メインブログを抜いて8つ)選んで並び替えておきましょう。

さいごに

深く良く効く、Tumblrを最高に使う方法をご紹介しました。
どれもすぐに実践できるものばかりですね。

今回取り上げたのはTumblrですが、TwitterやPinterest、Soundcloudなど、
様々なSNSにも応用できますので是非ともご活用ください。

楽しいTumblrライフを満喫できるように願っております。

今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。

既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。

わかりやすいより、ワクワク

当たり前なんですけど、ゲームではワクワクすること・面白いこと・感動すること等が価値になってきます。
コンテンツや仕組みでそれらを実現できた時代もありましたが、それは今は昔。*3

UIを含めた構成要素全体でそこを目指すのが今の流れです。

誰かが必ずやらないといけません。

結局ストーリーがないとUIがろくに作れないってことがわかったし、なによりゲームが面白くなる保証がない。
僕の今までの手戻りの時間に比べればストーリー作る時間の方がはるかに短かったです。
なので、UIを作るよりストーリーを作ることを優先しようという話でした。*6

あまり意味の無い補足

*2
または生暖かい目を。
ちなみにこのブログのH1はでかくて読みづらいのでH2から使うことがしばしばあります。
IA的にめちゃくちゃですみません。

*3
僕も含めブラウザゲームしか経験してないUIデザイナーは今（たぶん）苦労しています。
表示する機器の制約が大きく、ゲームシステムもヒットした某かの流用となると必然的にUIに求められることは少なかった環境では、多少のわかりやすさと、バナーやヘッダーなどパーツとしてのグラフィックへ力をかけることぐらいしかできませんでした。
その段階ではここで話すストーリーの力などは身に付くはずもなく、チームにそれをやる人が不在の場合、デザイナーができてないという話になりますが、しかし辛い。

と言っていますが、それは携帯電話ゲームの話であり、それまでの家庭用・携帯ゲーム機などがだいぶ昔に通り過ぎた場所であります。なのでデザイナーが今学ぶべきはAppstoreのランキングに並ぶライバルではなく任天堂だと思ったり。

*4
以前は(1)からダイレクトに(4)をつくっていたり、
場合によってはいきなり(6)からなんてこともありました。
その結果としては、わかりやすい（＝読める）けどなんか楽しくない・思っていたのと違うという画面になり、やり直すことが多くチームに苦労をかけました。
その場合はみんなの頭の中にあるモデルがバラバラのまま話をするわけで、まぁいい意見もあれば見当違いの意見もあると。。

*5
無念。落とし穴に落ちる。あなたはスタートに戻る

*6
もちろんチームにストーリーをつくる人が他にいれば、UIにフルコミットします。
個人的にはストーリーをつくる仕事もやれた方が結果的にUIの自由度もあがるのでUIデザイナーは進んでやった方がよいと思っています。

*7
今回の記事はデザインのラフをテーマにしたものだったので、あまり表に出せるものがなく寂しくなってしまいました。
LTや勉強会みたいなその場限りのスライドでなら見せられるものもありますので、
もしよければいつでもお声がけください。

また、こんなことしている僕におすすめのアプローチや書籍などの情報がありましたら、
ツイッターでもはてぶコメントでもなんでも構いませんのでご紹介いただけると助かります。

*8
サイトウ先生のゲームニクス理論についてはとりあえずこちらを見るとよいです。

はじめに

はじめまして！

今年デザイナーとして面白法人カヤックに入社しました、さーやです。

クライアントチームにてデザインの勉強、絵を描いたり、写真撮ったり、美味しいもの食べてます。 デザインに関わっていると、毎日のように画像の送りあいをします。確認のためだったり、マークアップエンジニアにpsdデータを渡したりなど。送り合う時間をなるべく短縮すべく、色々なツール使っています。また友達間でも、大量の写真を送り合ったり、画像を見せ合ったりしているのにもこういったツールを使っています。

そこで今回は、速度が5倍くらい早くなる画像＋ファイル転送術を色々なツールを通じて紹介致します。

方法① Skype

http://www.skype.com/ja/download-skype/skype-for-computer/

昔からある不動の便利SNS。チャットもビデオ通話ももちろんできる、リアルタイム制重視ツール。

メリット

-画像をドラッグ&ドロップでするだけで送れるので楽！
画像を受け取ったか確認することができ、さらにスカイプログインさえしていれば、自動的に受け取る設定もできます。
送信速度も早いので、重宝してます。

デメリット

-送信時に、相手がスカイプにログインしていないと、受け取れない。 psdなどの重いファイルは受け取りが苦手です。

方法② 無料ファイルアップロードWEBサービスを使う

ウェブ上にファイルをアップロードするだけで、URLを吐き出してくれる一般向け便利サービス。 無数にサービスが存在しますが、有名なのは以下です。
http://firestorage.jp/
http://gigafile.nu/

メリット

-パスワードもログインも必要ないし、アップロードとダウンロード時間が基本的に早いです。 URLにアクセスし, ダウンロードリンクを押すだけなので、スムーズで楽。
-大きい容量のデータも送れる (gigafile などは1ファイル５ギガまで)

デメリット

-生成されたURLをメモしないと、再アクセスが難しい。
-サービスによってはダウンロードURLが期間限定。(※firestorageなど)

方法③ Gmailに直接添付　

ファイルが一枚など、軽い場合はとても便利。 ただし、重いとメールボックスの容量が危険。

メリット

スマフォのUIデザインの時に特に便利です。スマフォで画像を受け取ると画面100%で見れるので、サイズ感等のデザインチェックができます。 よくあるのが、自分宛に画像を送り、Gmailで開き、デザインチェックすることです。

デメリット

重いファイルを添付すると、Gmailの容量を使ってしまうので、気をつけなければならない。
また、クライアントに画像を送るときも、画像を小さくして送るなどが必要なので一手間がかかる。

方法④ Google Driveにアップロードして　そのURLをシェアする

Gmail アカウントを持っている人であったら誰でも15ギガまで無料で使えるサービス。

メリット

WEBにアップロードした画像を、ダウンロードなしでそのまま見られる。 スマフォからも見られるのですぐにレスポンスができて便利。
また、前の画像を消さずに改訂管理ができる。前のデザイン案など振り返る事ができる。

デメリット

重いファイルはアップロードに時間がかかる。

方法⑤ AirDrop送り合う(Macユーザーのみ)

Macデフォルトでついている機能。シチュエーションが揃ってないと、滅多に使わない機能なのですが、すごく便利。

メリット

USBいらず。同じMacユーザーで目の前に送る相手、もしくは同じWi-Fi内に画像を送りたい相手がいる場合は最速の方法。 Wi-Fiがなくても、Bluetoothで10m以内のMacを検知してくれるので、ネットワークがないときは便利。

デメリット

やはり、重いファイルは時間がかかる上、ネットワークが切れた場合は途中で中断してしまうこともある。 さらに、相手も受け取りのボタンを押す必要があるので、面と向かってやりとりができる場合のみ有効。

方法⑥ GYAZO

https://gyazo.com/ja

画面に映るものなら何でもスクリーンショットでき、URLを生成してくれる。 GIFなどの動画も撮ることができます。

メリット

アップロード＋ダウンロードが一切なく、ファイルではなくURLを送るので、一番早い共有方法です。

デメリット

ダウンロードができないので、URLをメモしないと、画像元への再アクセスが困難。ただ、一時的な共有にはとても便利です。

方法⑦ Dropbox

https://www.dropbox.com/

メリット

言わずと知れた、オンラインドライブ。2GBまで無料で使える上に、URLを共有することができる。 PC版をインストールすると、PCとDropboxのファイルをcloudで共有できるので、ログインでアクセスしなくても使える。

デメリット

psdなど重いファイルを扱う場合は、2GBだとすぐに使ってしまうので、大量のデータを扱う場合は有効ではないかもしれません。

方法⑧ Facebook

Facebookでグループを作ってしまえば、その中でファイルを共有できる。

メリット

SNSを使うついでに、ファイルなども確認できるので、以外と確認のタイムラグが少ない。タイトル、メールアドレスなどは記入しなくても良いので、メールより手軽。

デメリット

facebookにアカウントを持っている、かつ、送りたい人と繋がっていなければいけないので、知り合いの間のみででしか共有ができない。

その他SNS

無料SNSサービスは基本的に、知り合い同士で画像をシェアできるが、以下のサービスは公開が必須なので、 使い道が限定的になるかもしれません。

方法⑩ Pinterest

http://www.pinterest.com/

気に入った画像を集め、URLをシェアできる。

方法⑪ flickr

https://www.flickr.com/

写真などをアップロードし、大きく見る事ができる。

方法⑫ tumblr

https://www.tumblr.com/

ブログ形式で画像をアップロードし、そのURLをシェアできる。

いかがでしたでしょうか？？
どのサービスが一番良い、というよりは、色々なサービスを知っておいて、
TPOによって使いわけたりするのがベストですね。
また、案件か友達間であるか、という場合によってもサービスを使い分けた方がプロの使い方ですね。