Are you the publisher? Claim or contact us about this channel


Embed this content in your HTML

Search

Report adult content:

click to rate:

Account: (login)

More Channels


Showcase


Channel Catalog


older | 1 | .... | 10 | 11 | (Page 12)

    0 0

    突然ですが、テストです

    (1)以下の用語を、()内の単語を全て使って説明しなさい。全45点

    ①間隔 (ブラシシェイプ)  5点

    ②散布 (位置・ストローク・軸)  10点

    ③ジッター (揺らぎ・ブラシシェイプ)  10点

    ④流量 (インク・かすれ・テクスチャ)  20点

     

    (2)以下のショートカットのコマンドを答えろ(初期設定に準ずる) 全55点

    ①硬さを上げる/下げる  5点

    ②直径を上げる/下げる  5点

    ③①と②と一度に変化させる  20点

    ④ブラシウィンドウを開く  5点

    ⑤ブラシの不透明度を29にする  10点

    ⑥前のブラシを選ぶ、次のブラシを選ぶ   10点

     

    [    /100点 ]

     
     

    回答と解説

    (1)

    ①間隔

    ブラシシェイプとブラシシェイプの間の距離。
    :ブラシの線は、1つのブラシシェイプの連続で出来ています。
    鉛筆で言うと、トンっと打った1つ点を密に並べて(連続して描いて)ラインにしています。
    それとおなじで、どのくらいの間隔でその点を打つか、という設定ができます。
    ブラシシェイプの間隔

     

     

    ②散布

    ストロークをに、ブラシシェイプ位置をずらして、インクをまき散らすこと。
    :そのままの通り。両軸にチェックを入れると、上下だけでなく、左右にも位置のずれを起こしてくれます。
    散布

     

     

    ③ジッター

    揺らぎのこと。ストロークを基準に、ブラシシェイプに対しおこるズレ。
    :様々な要素に対して、揺らぎ(ズレ)が設定できます。この値をほんの少しだけつけることで、手振れ感・アナログ感が表現出来たり、ランダム性が出せます。
    ジッター
     

     

     

    ④流量

    インクの量をシミュレーションする値で、この値が低いほどインクの量が少なく、かすれたテクスチャが再現される。
    :不透明度を低くするのとは違い、1ストロークの間に重ね塗りをすることが出来る。もともとどのくらいの透明度のインクを使うのかが不透明度。どのくらいドバっと出すかが流量。
    流量と不透明度
     
     
     
     
    (2)

    ①硬さを上げる/下げる

     { / }  

     

    ②直径を大きく/小さく

     [ / ]  

     

    ③①と②と一度に変化させる

    [ Win ] ALT+右クリック上下左右
    [ Mac ] Ctrl+Alt上下左右

    ブラシの調整

     

    ④ブラシウィンドウをひらく

    F5  
     

     

     

    ⑤ブラシの不当明度を29にする

    29  
    :何も指定していない状態で、半角で2ケタの数値を入力すると変化します。
    数字のみ[ 1 ]の場合、10倍された値(1→10, 2→20....)を設定することができます。
    また、Shiftを押しながら入力すると、流量を指定することができます。

     

     

    ⑥前のブラシを選ぶ、次のブラシを選ぶ

     , / . 
     
     
    ①.②.⑤はかなり基本なので覚えておきましょう!
     
    いかがだったでしょうか?60点を超えていない人は、ブラシを使いきれていないかも・・・?もったいないですよー!
    ほかにもデュアルブラシなど、使いこなせばずいぶん幅が広がると思います。一度使ってみてくださいね。

    0 0

    どうも、マッキーです。 好きなレスラーはサブゥーとタイガースマスクです。
    弊社のクイズゲームアプリ、冒険クイズキングダムでは700体以上のちびキャラがいます。
    今回は、そのちびキャラたちを制作する上で気をつけていることを、さっくりお話し致します。
    キャラクター制作以外にも言える超基本的なことですが・・どうぞお付き合いください。

    ポイントはたったの2つ!

    ・はっきりとした形にすること
    ・はっきりとした色合いにすること

    この二つをふまえれば、縮小しても見やすい魅力的なちびキャラがつくれます!
    blog00.png
    実際、クイキンのゲーム表示はこんなに小さい・・・!

    1.はっきりとした形にしよう

    シルエットに変化をつけよう

    ●キャラを個性的に見せるためには、キャラを並べて見たとき時にパッと見で違いがわかるべきでしょう。
    そのためには大きい形の見え方が大切。シルエットの形で差をつけることが効果的だと思います。
    blog01.png
    同じシリーズのキャラクターでも、髪型・角などでシルエットに変化を出すことで差別化できる!

     

    ●シルエットでキャラの性質を直感的に伝えることもできます。
    オンラインゲームのチームフォートレス2でもこの工夫がなされています。それぞれの職業をゲームをプレイ中でも瞬時に判別できるように、まずシルエットを決定した後にディテールのデザインしていったそうです。パワーが強いキャラのシルエットは大きく、移動スピードが速い分HPが低いキャラは細身に設計されています。
    チームフォートレス2公式サイトへ>

    ●また、シルエットが大きい・複雑なほうが見ごたえのある見た目となります。レアリティの高いキャラとそうでないキャラの差別化をする上でも、シルエットの変化は大切でしょう。

    blog02.png
    翼を足して、角を伸ばすだけでレア度が上がって見える!

    ●また、単調な形の繰り返しではなく大小で大きさに差をつけたり、細かすぎる形は単純化するなど・・当たり前ですね。

    2.はっきりとした色にしよう

    大きな陰影をつけよう

    ●今度はシルエットの中身の描写の話です。小さいキャラクターだからこそ、ざっくりとした大きい陰影をつけることが大切でしょう。明るい面と影の面、そして反射光を大きく入れてあげることで全体にまとまりがうまれて見やすくなります。なるべく形を単純化するといいです。デッサンの基本ですね。

    ●何が手前で、何が奥か・・・立体を意識して、形状を説明するような陰影も奥行きが生まれて効果的です。
    blog04.png
    単純にしすぎ?くらいが、縮小した時に見やすかったりします。

    彩度のある色合いで鮮やかに

    ●小さくしても色鮮やかに見えるように、彩度がにぶくならないようにする工夫をご紹介します。
    影の色を紫色にして乗算!単純に黒をかぶせるよりも、自然と温かみのある影色に仕上がります。これはピクサーでも用いられている手法です。

    ●ハイライトに白を足して、しらっちゃけた印象にはなったことはないでしょうか。おすすめは、地の色をスクリーンにして上からかぶせる!これだけで彩度を保ったままハイライトを表現できます。
    blog05.png
    要は、絵の具の白と黒だけを混ぜるな!ということです。

    ●黒・灰・白などの無彩色をそのまま入れると浮いてしまってよろしくありません。黒でも青よりの黒、赤よりの黒などの設定をして彩度をもたせましょう。 白は素材を意識すれば表現が変わると思います。画用紙のような漂白されたような白色か、ナチュラルな布の白色か・・・イメージにあわせて色を変えてみるのもいいですよ。blog06.png
    わずかではありますが、彩度のある黒の方がしっくりくる。blog07.png

    ●金色表現はオレンジ寄りの黄色にすることをお勧めします。
    緑よりの黄色や、影色が黄土色になってしまうと、鈍い金属色に・・あまり綺麗じゃない気がします。 オレンジよりの色合いにすることで、彩度の高い綺麗な金属が表現できます。
    blog08.png
    表現したい金属の種類にもよりますが、豪華にしたいならこれ!

     

    ・・・なんか基本的なことばかりですね。 でも案外わすれがちだったりしますのでどうぞ少しのご参考までに~

    今回ご紹介したクイキンのDLまだの方は→ iosはこちら! androidはこちら!

    また、一緒にちびキャラ作りたいデザイナー募集してますー!


    0 0

    ポートフォリオの季節ですね!

    こんにちは!デザイナーのわりえもんです!
    春の今頃というと、大学4年生は就職活動に大忙し!
    大学3年生はその先輩の背中をみて大焦り!

    さて今回はポートフォリオづくりに役立つ
    たった1つのコツと秘密道具を用意しました!

    201340314_1.png


    ポートフォリオは何のためにつくるの?


    ずばり「自分を覚えてもらう」ためです。

    なぜ、「覚えてもらう」ことが大事なのか?

    就活生ってすごく人数いますよね。面接官の人もいっぱいの人と顔を合わせます。
    そんな「その他大勢」のなかで突出する方法として、「デザイン力」だけで勝負するのは割にあわないからです。
    「あの、良さそうな作品つくってた子って誰だっけ?」とはなっても、
    「その他大勢」の枠からは出られないんです!
    ※もちろん超優秀な子はそれだけで覚えられます!

    ここでミソなのが、
    「覚えてもらう」だけで、「その他大勢の中の一人」ではなくなる
    ということなんです!

    「デザインいい感じだった子がいたんだけど誰だっけな...」 と 「○○○さんっていう子、よかったよね」
    後者が聞いてる身にも、ぐっと好評価に聞こえますよね。


    どうやっておぼえてもらうの?

    ぼくが就活をしてた時のポートフォリオの例を紹介します!

    kay_06.png

    ぼくが工夫したのは自分の写真をポートフォリオ内につかいまくるということでした。
    単純に、接点を増やすだけで、覚えてもらえる確率がぐっとあがると考えたからです。
    デザイン自体で工夫する、見せ方を工夫するというより
    「覚えてもらうための施策」 x 「ちゃんとみてもらえるデザイン」をする
    というシンプルな考えのもとに作りました。
    ミニポートフォリオなる10Pくらいのお勧め作品だけをのせたポートフォリオも作成しましたが、
    こちらはもう表紙にぼくがドーンです。「もういいよ!」というくらいに主張してます。
    kay_07.png 中身は作品自体を見てもらうため、シンプルな構成です!
    あとここで秘密道具を一つ用意しました!


    これ一枚でとどめを刺す!追い名刺!

    ポートフォリオであなたのことを覚えてもらったあとに、追いオリーブならぬ、
    「追い名刺」で最後の一押しをしましょう!

    kay_10.png

    たとえば、ぼくの場合は、ポートフォリオでメインのモチーフが「自分自身」だったので、
    名刺も「自分自身」がドーンな名刺を用意しました!
    印象的なモチーフが繰り返されると、人の記憶に残る可能性はぐっとあがりますね!

    是非、みなさんも、ポートフォリオと連動した「追い名刺」をつくってみてください!


    もっと詳しく知りたい方は、vivivitさんにインタビューしていただいた記事をご覧ください!

    kay_banner_s.png

    vivivitさん、ありがとうございます!


    効果的なポートフォリオをつくろう!

    comic-3.png

    学生のみなさんとお話させていただく機会もあるのですが、
    「どうポートフォリオをつくればいいか?」という「how」の部分に目が向きがちです。
    「なぜポートフォリオをつくるのか?」という「why」を考えるだけで、「how」は解決するんですよね。

    この記事が少しでも就活生のみなさんに役立ちますように!


    また、カヤックではデザイナー、エンジニアを募集中です! 一緒に面白法人を盛り上げましょうー! デザイナーはこちらから!


    わりえもん


    0 0

    「計算通り…」人がハマるには仕掛けがあるの巻

    こんにちは、デザイナーのみそです。
    突然ですが!自分の作ったもので誰かを夢中にさせているでしょうか?
    もし、狙ったとおりに人を夢中にさせることが出来たら、素晴らしいですよね!

    今回は「人を夢中にさせる仕掛けの話」
    現在リリース中の弊社ゲーム
    『姫騎士と最後の百竜戦争』(姫ヒャク)の1シーンを例にご紹介したいと思います。

    姫騎士と最後の百竜戦争

    ※今回の記事は、サイトウアキヒロ氏のゲームニクス理論を大いに参考にしております。
    本記事でご興味をもたれたら是非、書籍などを読んでみてください。

    1.まずは、フロー図を描いてみるの巻

    大きな3ステップを描こう

    姫ヒャクは、大きく↓のフローでゲームが進んでいきます。

    姫騎士と最後の百竜戦争

    基本はこの3ステップです!
    この3ステップに、ユーザーに体験してもらいたい感情のテンポをプラスしてみます。

    姫騎士と最後の百竜戦争

    動!
    になります。
    ホップ、ステップ、ジャンプ!で大ジャンプを飛ぶように
    の部分で助走をつけて、動!で、感情の大ジャンプをしてもらいたい、という狙いです。

    この大きなステップをブラさないように、はじめにハッキリさせておくことが大切です。

    2.変化のルールを決めるの巻

    子要素が追加されたら?

    さて、↑で、大きな3つのフローが描けました。
    ただ実際のところ、その3つには更に細かいフローがありまして
    全部で6つのステップになります。

    姫騎士と最後の百竜戦争

    ここで大切になるのは、はじめに描いた大きな3ステップの流れです。
    はじめに大きなステップを確認していない場合に起こる失敗例として、
    ↓のようなものが考えられます。

    姫騎士と最後の百竜戦争

    この場合だと、2ステップで大ジャンプが完了してしまっているので、
    最後に「なんか尻すぼみだな〜」という感じになってしまいます。
    はじめに大きなステップを確認しておけば、こうした矛盾にも、はやく気がつくことができます。

    大機能の変化=大きな画面の変化、小機能の変化=小さな画面の変化

    さて、子要素も含めたフローを描けたところで、次にやるべきもの…それは
    変化のルールを決めることです。
    この、変化のルールを決めるにもコツがありまして、

    大機能の変化=大きな画面の変化、小機能の変化=小さな画面の変化

    にするということがあります、実際に見てみましょう。

    姫騎士と最後の百竜戦争

    とても単純なことですが、こうしたルールを決めます。
    それぞれの変化の項目については

    大きい変化

    • 動き(フェードアウト・イン)
    • デザイン(背景・操作情報など)
    • 音(BGM、SEなど)

    小さい変化

    • 動き(イーズアウト・イン)
    • 音(SE)

    とこうしたルールをはじめに決めておくことで、
    感情がチグハグに動くことを防ぎます。

    3.現実のモチーフを使ってみるの巻

    モチーフと感情が沿うとテンションMAX

    さて、この辺りで実際の姫ヒャクの画面スクリーンショットを見てみましょう。
    この大きな3ステップでは全て、現実のモチーフを利用しています。

    姫騎士と最後の百竜戦争

    • 1ステップ:(お城)→建物の中にいる→安全な場所→静
    • 2ステップ:(マップ)→地図上の地点を指で指す→準備→動
    • 3ステップ:(扉)→内から外へ、出発する→動!

    このように、3つのステップに沿ったモチーフを背景に入れています。

    4.おさらいをするの巻

    さて、おさらいです。
    人がハマる仕掛けをつくるために、今回は3つのテクニックをご紹介しました。

    1. 大きなステップのフローに、感情のテンポをプラスして描く
    2. 1.に沿って、画面変化のルールを大、小で分ける
    3. 1.に沿った、現実のモチーフを入れる

    これで、テンションMAXで冒険に出発できること、まちがいなしです!(のはずです…)
    今回は3つご紹介しましたが、実はまだまだ沢山のハマる仕掛けがあったります。

    その仕掛けは是非、ゲームを実際に遊びながら、考えてみてください!
    それではまた〜

     

     


    0 0

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

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

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

    秘密道具-fb.png


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


    fukuzawa.PNG

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

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


    2 : 職人デザイナー 越後(えちご)


    echigo.PNG

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

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


    3 : お母さんデザイナー 小倉(おぐら)


    ogura.PNG

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

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


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


    neji.PNG

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

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


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


    hyou1.png

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

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


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


    はるみん1.png

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


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


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


    obara.png

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

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


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


    きの2.png

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

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


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


    mineo.png

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

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


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


    Image.png


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

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


    新生活に(iPhoneの)中身も新しくして挑もう!

    comic-3.png

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


    わりえもん


    0 0

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

    1.png

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

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

    e1.jpg

    (;v;)「......うっ、うっ。光源は意識して描いたのにナゼ!」

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


    そう、反射光!!!

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

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

    シンプルなアイテム編


    1.png

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

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

    3.png

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

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

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

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

    2.png(´▽`)「こんなかんじ!」

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

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

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

    厚塗りキャラクター編


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

    e1.jpg

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

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


    e2.jpg
    どうでしょうか!

    並べてみてみます。
    e1.jpge2.jpg

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

    e3.jpg

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

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

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

    それではこのへんで!

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


    0 0

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

    こんにちは、佐藤ねじと申します。仕事でも個人でもいろいろWEBつくってます。
    最近だと個人では 
     
    などを作っていました。
     
    さて突然ですが質問です。
     

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

     
    このときサッとすぐ取り出せるように脳内やPCの中が、整理されていない方は、
    ぜひとも続きをご覧ください。
     
    「情報は10秒以内に取り出せなければいけない」という
    トヨタ式の考えを応用した、デザイン収集術です。
    私が愛用する画像収集アプリ「Ember」の活用法をまとめました。
     
     
    ember.jpg
     

    Emberとは?

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

    Webサイトのスクショをクロム拡張で落とせたり、
    RSSで集めてきた画像を一気にスクラップできたり、
    iCloud同期でiPhoneや複数のMacで閲覧できたりできます。
     
    詳しい使い方は以下のサイトなどをご覧ください。
     
     
     

    【1:収集の巻】集める時間を決めて習慣化!

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

    googleCalender.jpg

     
    忙しくなるとデザイン収集ができなくなるので、見る時間は決めておくのがよいです。
     
    そして見るべきジャンルも様々です。
    私の場合、昼飯のあとの眠くなる時間を活用して
     
    月曜:デザイン素材
    火曜:WEBサイト
    水曜:アプリ(UI)
    木曜:ピンタレスト
    金曜:雑誌
    と決めて、Googleカレンダーに予定を入れています。
     
    朝の出社後に収集するパターンもありますが、朝はなるべく一番大切な作業にあてる方が効率的です。
     

    【2:分類の巻】

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

    ember2.jpg
     
     
    集めるときのポイントは「その場でタグ付け」を徹底することです。
     
    例えば高級ペライチの素敵なイラストのサイトがあった場合
    「scroll」「illust」「LP」といった具合に。
    あとからやろうと思っても、常に収集は発生するし、他に山ほどやることがあるし、
    整理をする時間は永久にやってきません。
     
    ちなみに情報の分類は、まとめて休日に1週間の情報を整理する「休日整理型」もおすすめです。
     

    【3:整理の巻】

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

    tag.png
     
     
    タグ付けするに辺り、一度ゆっくり時間をとって、
    ルールを明確に決めておくことをおすすめします。
     
    ポイントは正しいカテゴリに分類するのでなく、
    「自分の血が通った自分言葉で分類すること」です。
     
    私でいうとアイアンマンなどの未来っぽいUIのトンマナのデザインは「spacy」(ださいタグ名…)、
    言葉にはしづらいけど心にぐっとくるものに対しては「sence」、
    とんちの効いたものや面白画像はひっくるめて「idea」といった具合です。
     
    このルールを決めておくと、最初の質問であったように
    「10秒以内に、あなたがここ1年で見てきた素敵なデザインが出せますか?」を実現することができます。
     

    【4:分析の巻】

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

    UNITED.jpg
     
     
    もう1つ重要なのは、収集したあとの「分析」です。
     
    会社の若いメンバーを見ていても、これができてない人が多いです。
    自分のセンサーが反応した「良い」の要素を分解し、何が良かったのかをキーワード化していくと、
    自分のデザインに活かせることができます。
    デザインの表層的な意匠をパクるのではなく、「考え方」をパクるのです。
     
    例えば上記の図でいえば
    「日常の風景はタイポグラフィになる」
    「プロダクトをタイポグラフィの一部にする」
    といった具合です。
     
    意匠はパクリになってしまいますが、考え方は応用することができます。
     
    そのため、私は収集の際には紙とペンも用意しておき、その場でインスピレーションをスケッチします。
    収集はただ集めるのでなく、考える時間でもあるのです。
     

    【5:活用の巻】

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

    matome.jpg
     
     
    例えば何かアイデアのあるデザインが必要だとします。
     
    普通にスケッチしながら発想するのが基本ですが、
    どうも煮詰まったりするとき私は、Emberを開いて「idea」タグを入力し、
    ザーッとそのヒントになるデザインを出します。上記はその一部です。
     
    ボケての画像と、2chまとめの画像と、アーティストの作品と、海外のタイポグラフィが混在して現れます。
    その一覧をぼんやり流しながら、また考えます。
     
    いざ「仕事の本番」のときって焦ってたり緊張もあったりして、記憶が狭まることが多い気がします。
    スクラップブックを眺めることは、
    リラックスした自分を呼び戻すことができる「スイッチ」にもなります。
     

    【6:番外編】

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

    fugu.jpg
    最後になりますが、「デザインの途中で発生したエラー」を収集する、という考えも面白いです。
     
    間違えてすごく大きな画像を配置してしまったり、変な数値を設定してしまったり。
    焦って⌘Zを押すのではなく、それもスクショとってEmberに残しておくことで、何かで活きることもあるかもしれません。
     
    UNICORN「イーガジャケジョロ」:でっかい顔が出てくる演出
    世界で最も小さなサイト:文字の級数ミスが面白く感じた
     

    【まとめ】

    ポイントをまとめます。

    ●1:集める時間を決めて習慣化

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

    ●3:自分らしい名前でタグ付け

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

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

    ●6:失敗にセンサーを働かせよ

     
    たくさんの自分の好きなものが集めることは、自分の再発見にもつながりますね。
    皆さんもぜひやってみてください。
    それでは、また!

    0 0

    御社を志願します!!

    portforio_03.jpg

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

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

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

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

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

     

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

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

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

    portforio_02.jpg
    やたら分厚いです笑
    ↓厚さの秘密は??↓

     

    portforio_06.jpg

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

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

     

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

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

     

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

    portforio_011.jpg

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

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

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

    portforio_09.jpgportforio_10.jpg

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

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

     

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

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

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

    1次面接はグループ面接

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

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

    sasie_03.png

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

    +α 3次面接は面接官3人に私1人! 

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

     

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

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

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

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

    自分の分析

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

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

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

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

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

     

    いざつくるとき

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

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

    こだわる部分をつくる

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

    まとめ

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

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


    0 0

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

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


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

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

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

    1393f180.png

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

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

    cf25088553b356654cd525f24059a4f6.png

     

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

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

    ddc49e160148380d320987655cb40ed2.png

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

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

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

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

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

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

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

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

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

    ff486d35e5fd5aa54187fb53be06ecf9.png


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

     

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


    0 0

    え!?そういう意味だったの???

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

    U.S.A. は U.S.A でなく U.S.A. なのだ!?

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

    fig1.jpg
    (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)を御覧ください。

    usa.jpg
    (Fig. 2: バックパックのタグ)

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

    "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. でご応募ください!!


    0 0

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

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

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

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

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

    >> http://www.icyblaze.com/sparkbox/
    (対応:mac)

    1.png

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

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

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

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

    >> http://inboardapp.com/
    (対応:mac)

    stocktool_2.png

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

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

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

    >> http://www.pixa-app.com/
    (対応:mac)

    stocktool_3.jpg

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

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

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

    >> http://evernote.com/intl/jp/
    (対応:win/mac)

    stocktool_4.png

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

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

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

    >> http://realmacsoftware.com/ember/
    (対応:mac)

    stocktool_5.jpg

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



    2.クラウド系ツール

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

    >> http://dragdis.com/

    stocktool_6.png

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

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

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

    stocktool_7.png

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

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

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

    >> http://springpad.com/

    stocktool_8.png

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

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

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

    >> http://icebergs.com/

    stocktool_9.png

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

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



    3.SNS

    スキなモノ収集「SVPPLY」

    >> http://svpply.com/

    stocktool_10.png

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

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

    >> http://olioboard.com/

    stocktool_11.png

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

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

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

    stocktool_12.png

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

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

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

    stocktool_13.png

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

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

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

    >> http://weheartit.com/

    stocktool_14.png

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

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

  • >> Buysphere
  • >> Flipboard
  • >> Fancy
  • >> 9cool
  • >> Indulgy
  • >> Lover.ly
  • >> Sumally
  • などなど、デザインスクラップの方法はまだまだあります!
    自分に合うものを試してカスタマイズしていくと、
    デザインの引き出し倍増になると思います!

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


    0 0

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

    知っている方も多いと思いますが、気軽にモックをつくって試すには便利なアプリです。
    そんなPOPで待望の!画像をdropbox経由で自動置換する方法が追加されたのですが、
    ちょっとやり方がわかりにくかったので画像つきで紹介します。
     

    自動置換のやり方

    1. プロジェクトのdropbox連携をONにする
    2. dropboxフォルダ以下のアプリ/popを参照する
    3. 連携したプロジェクトの名前のフォルダをつくる
    4. フォルダの中に画像をいれる
    それぞれスクリーンショットと共に説明します
     

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

    プロジェクトの情報画面を開き、dropboxとの連携を行います。
    事前にdropboxのアプリも入れておきましょう。
     
    2014-07-08 12.15.57.png  2014-07-08 12.16.04.png
    [左画像:プロジェクト作成画  /  右画像:プロジェクト内の設定画面]
     
     

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

    連携が終わると、dropboxのトップフォルダに「アプリ」というフォルダが追加されます。(英語では"app"らしい)
     
     
    2014-07-08 12.17.10.png
    [画像:dropboxアプリのトップ階層画面]
     

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

    Dropboxのアプリフォルダの中にはこのようなフォルダが用意されています
    アプリ
    ーpop
    ーー[プロジェクト名]
    この[プロジェクト名]のフォルダの中に画像を入れましょう。
     
    2014-07-08 12.17.17.png2014-07-08 12.17.49.png
     
    [左画像:POPフォルダの中にできたプロジェクトフォルダ / 右画像:そこに画像をいれる]
     
    今回はAと書かれた画面とBと書かれた画面を入れてみました。
    これで準備は完了です。
    それではPOPのアプリに戻りましょう。
     

    4. 画像を表示させる

    プロジェクトを読み込むタイミングや、画像のインポートタイミングなどでdropboxとの連携が始まります。
    そうすると、、、、
     
    2014-07-08 12.21.22.png
     
    [画像:連携が始まった画面]
     
    フォルダに入れた画像が自動で出るようになりました。
     
    そしてフォルダ内の画像を書き換えると、、、
     
     
    2014-07-08 12.18.35.png
    [画像:Aを赤の画像に変えました]
     
     
     
    2014-07-08 12.18.54.png
    [画像:POP上でAが自動更新されました]
     
    替わる!!!!
     
    リンクやコメント・ノートなどの画像以外の情報は差し代わりませんので、安心して使えます。
     
     
    これのおかげで、ちょっとした変更もすぐにテストすることができます。
    最新版のアプデで使える機能なので、みなさんもぜひPOPを使ってみてください。
     
    あと、同じアップデートでの機能に含まれるスクロール対応のやり方がさっぱりわからないので、
    知ってるかたいましたら、コメントででも教えてください。。。
     
    POP
     
     
     
    ではでは

    0 0

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

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

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

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


    haert_ichiran.png


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

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

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

    oubunwabun.png

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

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

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

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

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

    和文同士でも比較

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


    wabun.png

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

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

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

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

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

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

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

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

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

    小塚書体、Menio のハート
    stan.png

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


    stan.jpg

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

    FontFace 73 Free IconFont
    round.png

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


    round.jpg

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

    zapf dingbats、源ノゴシック
    wide.png


    横に広く、包容感のあるハートマーク。小さくしたときにも視認しやすいので、ポイントで小さく表記する場面にもってこいです。ワイドな分、ハートマークの中にテキストを入れたい時にも使えます。

    wide.jpg

    まとめ

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


    0 0

    screen-size.png

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

    みなのもの落ち着け!

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

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

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

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

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


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

    基本的な情報

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

    端末 解像度 インチ 書き出し 画面サイズ 制作サイズ
    iPhone 4 326ppi 3.5inchi @2x 640 x 960 640 x 960
    iPhone 5 326ppi 4inchi @2x 640 x 1136 640 x 1136
    iPhone 6 326ppi 4.7inchi @2x 750 x 1334 750 x 1334
    iPhone 6 Plus 401ppi 5.5inchi @3x 1080 x 1920 1242 x 2208

     

    画面サイズ(あまり適切な言葉では無いかもしれない)は、
    実際のディスプレイの大きさと考えてください。
     
    制作サイズは僕たちがデザインする時に使うものです。
    今まではiPhoneシリーズでは制作サイズと画面サイズは一致していたため、iPhone 6 plusの登場により話題になりました。
    ダウンサンプリングといい、1242x2008でつくったものを画面では1080x1920にキュキュっと縮めて表示されるのです。
     
    残念ながらその縮小は1.15と整数値ではないため、iPhone 6 PlusではPixelPerfectで画面をつくるのが難しくなります。
    この影響を受けないネイティブのUIパーツなどをうまく使うことがますます必要になってくるでしょう。
     
    また、6 Plusでは新しく@3xの画像が必要になります。
    きっとslicyとかが遅かれ早かれ対応してくれるでしょう :)
     
    上記の画面サイズと制作サイズの関係については
    こちらの記事が参考になります。
     
     
    (追記 140918 21:15)
    日本語でわかりやすい記事もありました。
     
     

    アイコン

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

    template4.jpg

    App Icon Template (PixelResort)

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

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

    画面レイアウトについての対応は後述しますが、
    ひとまずアイコンだけは用意をしておくのをオススメします。
     
     
     

    スプラッシュ(調査中)

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

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

    XIB または storyboard といった形で例えば画像1枚でのマルチレイアウト対応などができるようになるようです。
    スプラッシュを各画面サイズごとにつくる必要がなくなるのは助かりますね。
     
    今までどおりのスプラッシュも並行して使うことができます。
    こちらのサイズは画面解像度の項で話しました実制作サイズと同じです。
     
    端末 画面サイズ 制作サイズ
    iPhone 4 640 x 960 640 x 960
    iPhone 5 640 x 1136 640 x 1136
    iPhone 6 750 x 1334 750 x 1334
    iPhone 6 Plus 1080 x 1920 1242 x 2208
     
    XIB または storyboard はもっといろいろできそうなんですが、これは追記します。

     

    デバイスのモデル画像

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

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

    Apple Product Images

     

     

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

    Appleの意向

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

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

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

    iPhone 6
     

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

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

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

     

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

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

     

    3択ー1つだけ選びなさい

    • 答え①ハンサムなデザイナーは突如全て対応できるアイデアがひらめく
    • 答え②チーム一丸となってそれぞれのレイアウトの実装を行う
    • 答え③まだ対応はしない。 現実は非情である。
    僕がマルをつけたいのは答え②ですが期待は出来ないですね
    まずは③でしょう。
    しかし仲間の尊い犠牲によって②が実現されてしまうのだった!
     

    以前Retinaディスプレイ搭載のiPhone4が出た時と同じで、
    何も対応がされない場合は今の画像が画面サイズに合わせて引き延ばされる表示されるようです。
    何もやってないからといって、iPhone6で表示されないということはなさそうですね。
     
    ひとまずの現実策としては@2xで制作して、拡大して表示するってことに落ち着くんじゃないでしょうか。
     
    Androidも並行してつくっているとそういう対応も経験があります。
    確かにボケはしますが、困るレベルではないという感じです。
     
    画像が@2xから@3xへ1.5倍されることによる圧迫を考えると止むを得ないところ。
    これからのシェアによりますが、4sもiOS8の対象に入っている今は仕方ないでしょう。

    さらに踏み込んだマルチレイアウト対応については、また別記事を書きます!

     

    (追記 140918 21:15)
    こちらの記事のスケーリングモードという項目でわかりやすいサンプルが取り上げられています
    iPhone6/iPhone6 Plus画面サイズ対応

     

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

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

    またゲームはスクロールさせないことを前提に作られている部分も多く、
    いろいろなサイズに対応させるには四苦八苦させられます。

    もういっそコンシューマーのように、複数サイズ前提で考える時が来たのかもしれませんね。

     

     

     

    役立ちリンク

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

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

     

    テンプレート系素材

     

    iOS8関係

     


     

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

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

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

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


    0 0

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

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

     

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

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

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

    ゲームの説明と特性

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

    iOSリリース.png

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

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

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

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

     

     

    バックボタンを下に

    2014-09-20 13.06.03.png

    制作を始めた時点ではiPhone5が出ていたのですが、
    わりと手の大きい僕でも、あの画面左上にある戻るボタンが片手持ちでは押しにくいなと思っていました。

    • iPhone6+のことは知る由もなかったのですが、Androidの大型化は進んでいました
    • 画面も2013年のリリースの端末の大半が16:9になっており、今後3:2に戻ることは無いだろうとも思えました
    • そして、なんだかんだ戻るボタンはよく使います

    この辺りの理由から、開発のかなり初期から戻るボタンは下に移しました

    ソーシャルゲームでは戻るボタンを下に置いたものが当時あまりなかったのですが、「まぞくのじかん」で採用されており参考になりました。

    まぞくのじかん 公式サイト
    ちなみにですが、ゲーム内のお知らせやらなんやらを全部掛け合い漫才でやっているノリが好きです :)

    もどるボタンの仕様としてはiOS標準のドリルダウンのような階層構造に準じたものではなく、
    Android標準のバックキーのように直前の画面に戻るに近い形にしています。

    時々階層をくだるだけじゃなく、横に飛ぶことがあるので、その時もユーザーが歩いてきたところを戻れることを優先した感じです。

    おかげでAndroidでのバックキー対応は楽にすみました。

    よかったこと

    • グロナビと合わせてページ移動系のボタンがまとまったので片手でも使いやすくなったと思う
    • 画面上部にボタンがなくなったので重さがなくなった(押させるボタンは重く見える

    困ったこと:

    • 上に置く時は見出しとセットで置けば良かったのだが、下では置き場所にこまった。結果的にはグロナビに含める形に

     

     

    画面の上半分を情報エリア、下半分を操作エリアに

    情報エリアというのはユーザーが今の状況が判断できるようなものを置くエリアで、
    操作エリアというのはユーザーが次に行いたいアクションのためのUIのエリアという設定です

    2014-09-20 13.04.31.png  2014-09-20 13.08.37.png

    クエストのゲーム部分では(例えばパズドラのように)やってるタイトルは多いです。

    上のもどるボタンの後に、ゲーム全体でもユーザーがタップするのは画面下の方にまとめたいと思うようになりました。

    何を上に出して何を下に出すかという切り分けが難しいところは、DSのゲームを参考にしてました。
    DSは下がタッチパネルであることや持ち方の特性上、上に情報を出して下で操作をさせることが一般的です。

    (余談ですが最近出たスマブラ3DSはこの関係が上下逆なんですよね。

    これをやろうとした結果、ポケットでは情報の伝え方をキャラにしゃべらせてみました。
    おかげで無味乾燥になりがちなリスト画面とかも画面が楽しげになっています。

    この形の難しいところは、たくさんのリストやサムネイルを出せないところと画面が2分割されてみえやすいところです。

    状況と結果がはっきりとしていて、たくさんのものから選ぶ場合は無理にこの形式にしないほうが良さそうです。
    ポケットでは例えばアイテムを売却する画面などでは、画面全体にサムネイルを並べています。

    また、画面全体での1つの風景を作りたいところではやはり採用していません。
    ただその場合でも重要度の高いものからできる限り、下の方にボタンを集めるようにはしています。

    よかったこと:

    • 下半分に操作が集中し、片手でもやりやすい
    • ユーザーは画面全体からボタンを探さずに下半分をみれば済むようになる
    • 画面の上にキャラや風景のイラストが入り、楽しみやすい

    困ったこと:

    • たくさんの情報は扱えない
    • キャラや風景のバリエーションが無いと、逆に見た目が単調になる恐れがある

     

    このレイアウト対応と戻るボタンについては同じようなことは「白猫プロジェクト」でもやられています。

    白猫のリリースが制作終盤だったので参考にはできませんでしたが、
    戻るボタンは固定にせず必要な画面にだけ出すという対応は、今後試してみたいです。

    白猫プロジェクト 公式サイト

     
     

    できなかったこと

    最後に、こうすればよかったかなと思いつつ、できなかったことの話です。
    有効性がはっきりしていないことなので、雑談程度に受け止めてください。

    戻るボタンが必要無いゲーム

    戻るって押してるところでもユーザーの操作的には前に進んでいることも多く、
    そもそも戻るってこと自体が二度手間感があるので、ユーザーが行いたい次の動作が戻るボタンではない形で示されるといいなーと思いました。

    ほら、もどるより進んでる方が気持ちいいじゃないですか。

    back-1.png
    左が従来の一度操作を終えた後に一度「戻る」を押して戻ってから新しい操作に進むイメージ。
    右が操作が終えた後に「進む」を押して新しい操作に進むイメージ。
    画面の遷移は変えていません。

    もちろん右の場合には、常に新しい画面に進んでいるデメリットとして今の位置がわかりにくくなるということも予想されますが、
    それはツアー型パターンで解決ができそうです。

    これは小さいところではボタンの文言を変えれば済むところであり、大きいところではゲームサイクルに通じる話かも知れません。

    マリオで面白いなーと思った仕掛けがありました。

    確かWiiのマリオでユーザーのアクションスキル向上の為に、1-5ぐらいまで進んだ時に1-1をもう一度やらせるんです。
    それを単に戻ってやってくれというのではなくキノピオがでてきて、アイテムが盗まれたから僕と一緒にあのステージにいって取り返してくれというように新しいミッションって形で提示していたことです。

    ユーザーの操作は一緒なんですが、これは1-1ではなく1-1'をやっていることになるので、戻っている感じがあまりしませんでした。

     

    縦画面/横画面両対応のゲーム

    iPhone6+ 横の方が使いやすいよな、って思ってます。
    iPadもそうでしたが、ツール系のアプリでは縦横両対応のものも既に存在しています。

    その場合大事なのが、利用シーンの想定を変えること。

    実は既にKleeというゲームで試みられています。
    縦持ちはイージー操作モードで、横持ちはじっくり操作モードと言った具合です。
    (まだ遊んでないので詳しいことが言えません。ごめんなさい)

    Klee 公式サイト

     

    また、Sword & Sworceryでは基本は横持ちですが、敵と戦う時に縦持ちにするという変則的な扱いが入っていました。
    これは画面内のボタンではなくデバイスをボタンとして扱うという意味でも面白いかったです。

    Sword & Swocery
    FEZと並んで当時大はまりしたドット絵ゲームです。サントラも買いました

     

    レイアウトの手間が倍とまではいかなくてもかなり増えることと、
    ゲーム性への影響もあるので、簡単にはできないでしょう。

    ですが、装備選択画面だけは横持ちでじっくりできるとか、限定的な対応は面白いかもしれません。

     


     

    以上です。

    今後のアプリ開発の参考になれば嬉しいです。


    0 0

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

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

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

    tumblrの魅力

    tumblrとは

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

    tumblr_logotype_white_blue_128.png

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

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

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

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

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

    tumblrブログの魅力

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

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

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

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

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

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

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

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

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

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

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

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

    tumblrサイト事例

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

    キュウソネコカミ グッズでんたく
    kyuso.png

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

    ユニクロ銀座
    UNIQLO_GINZA___ユニクロ銀座店.png


    ニコン
    Nikon_Brand_Story_


    twitterステータス
    Twitter_ステータス.png

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

    tumblrブログのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    tumblr独自タグ

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

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

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

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

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

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

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

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

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

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

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

    posts_kinds2.png

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

    --
    この記事を書いている途中で気づいたのですが、この内容はドキュメントの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フロントエンジニア交流会@横浜
    が開催されます!
    cover-KKQi0FFsF7sUpuotoiVkvj4dDlDhWlcJ.jpeg
    おいしくてためになる!
    WebフロントエンジニアがLTをききながらみんなでご飯を食べる会です。

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


    0 0

    title.gif

    はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    subblog.gif 自分の内面がそのままブログに反映されるのが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

    dig.gif ここまでやりきった人はおそらく秒速数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ライフを満喫できるように願っております。


    0 0

    とりあえずかっこよさげな見出しを考えたところで8割方燃え尽きました。
    デザイナーの きのです。
     

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

     
     
    現在、僕はゲームのUI制作の現場で働いています。*0
    半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。

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

    用語について不慣れなところがあるので、「ああ、あれはきっとあのことだな」みたいな所が散見されると思いますが暖かい目*2でみてくださいませ。

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

    今まではわかりやすいが正義!だったのですが、
    それだとにっちもさっちもいかなくなってきました。
    なぜなら、わかりやすいはゲームに取っての最終ゴール(価値)ではなかったからです。

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

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

     

    そうなると、制作初期で確認すべきことはわかりやすいことよりもワクワクできることが大事になってきます。
    わかりやすくすることはUIデザイナーの仕事ではありますが、その前にチームの仕事としてワクワクするためのストーリーをつくります。
    別にこれはUIデザイナーだけができる仕事ではないので、どんな職能の人がやってもいいものなんですけど

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

     

    この目指すべきユーザー体験を一つのストーリーにまとめるというのは、ストーリーボードみたいな手法がいいんでしょうか。
    僕は簡単なサイトマップにコメントを書いていっています。
     

    ワクワクするラフをつくる手順

    ラフをつくること自体は以前からやっていましたが、ポイントが変わりました。
    今の流れはこんな感じです。
     
    1. ディレクターから企画とその狙い・訴求ポイントなどをもらう
    2. どこが楽しいのか自分で咀嚼する。自分以外のユーザー層からも考える。
    3. どう伝えればユーザーが楽しんでくれるかストーリーを考える
    4. それを画面構成として手書きラフにする
    5. ラフをディレクターやプロデューサーにチェックしてもらい、修正
    6. Photoshopでの制作を始める。あとはそれなりに
    今は(2)どこでユーザーをワクワクさせるか、それをまずテキストで書き出して、
    (3)それらをビジュアルでどう表現するか考えるところから始めます。
    ストーリーの時点から絵で考えます。
    僕は絵が下手なので、絵で伝えきれなさそうなときは「嬉しい顔」とか絵の横に書き添えます。
     
    肝は(3)ですね。それが無いと、UIとユーザー体験を繋ぐ橋が無くなりコントロールができなくなります。*4
     
    その時にはなるべくUIという意識をせずに、ゲーム内の世界の設定として考えていきます。
    ただのボーダーではなくこれは棚板とか、これは背景画像ではなく部室だとか。*5
    (4)最後にそれらをユーザーが迷わないように組み立ててラフをつくります。
     
    ここまできちんとやったラフをみんなに見てもらうと、建設的な意見をもらえます。
    これは○○にいる設定の方が面白いのではないかとか、このキャラのセリフはこうするのがいいとか、はたまた仕様を見直すべきかみたいな話になることまであります。
    これって一回つくった後のテスト時の会話みたいですよね。
    きちんとラフがつくれた時は簡単なシミュレーションがチームでできました。
     
     

    ワクワクするには感情に訴えかけよう

     
    そもそもワクワクさせるにはどうすればと考えて、
    なんかしらの感情を動かすことが必要だなと今は思っています。
    だいたいのゲームは繰り返し遊ぶことが前提になっているので、もう一度遊んでもらうためにどうユーザーに感じてもらうか、そのために何をいつ伝えるかを考えます。
     
    今までは感情をコントロールすることなんて考えもしませんでしたが、
    よくできてるゲームはそこをやっています。
    そしてその特定の感情の連続が一つの体験となってユーザーに残っていくのです。
     
    全体としてはこんな流れでしょうか。

    体験>それを構成する感情のストーリー>それぞれの感情を想起させる構成要素

    この流れで開発にみんなが臨めば、開発初期段階の手書きのワイヤーでも良し悪しの話がしやすいのではないでしょうか。
    流れは下流にいけば行くほど個々人の違いが出てくるものなので、
    これを逆にやった場合はチームが目指すべきものが崩壊していきます。
     
    僕がストーリーを考える時はこんなことを気にしています。

    声に出して誰かに話す(つもりで)

    絵に描くと散漫になることも、声に出すと時間軸に乗るので言いたいことが自ずとはっきりしてきます。
    本当に声には出さなくても、頭の中にユーザーを置いてその人につくっているゲームをアピールすると想定したら、どんな風にしゃべればいいでしょうか。
     

    メンバーがちょっとでも笑うようなストーリーやラフを作る

    やりすぎると怒られますが、突き抜けたものを戻すのは割と簡単なので、
    まずは気心のしれたチームメンバーぐらい楽しませられるラフを作れるように心がけています。
    (もちろんメンバーを笑わせるためだけのものを入れるのは無しで)
    笑わせるかわりに驚かせるのもアリです
    でもそれらは絵の作り込みじゃなくて設定でやることをお忘れなく。
     
     

    デザイナーがUIをつくる前に

    最後にタイトルに繋げますが、
    デザイナーがUIをつくる前にきちんとここまでの流れが踏まえられているか振り返った方がいいでしょう。
    それは紙でもアプリでもウェブでもなんでもいいのですが、
    少なくともストーリーレベルまではチームの合意を得られるようにすべきです。

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

    僕もがんばります。*7
     
     

    おまけ:わくわくできる小ネタ

    こういうのをラフの時点から入れると楽しい画面ができるよという小ネタをいくつか。
    ゲームニクス*8から引用したものや、先輩から教えてもらったものなど。

    • 画面の上では常に何かを動かしておく
    • 「はい・いいえ」などのコマンドめいたボタンのテキストをやめ、その場面に合わせたものにする
    • UIパーツや機能をその世界観の中にある何かに例える
    • ユーザーをほめる時は大げさに
    • 今の画面は世界の中のどこにいるかユーザーに知らせる
    • メッセージはなるべく相手の顔を出す
    • 四角より丸。均等より不均等
     
     

    あまり意味の無い補足

    *0
    ぼくらの甲子園!ポケットというゲームを開発初期から現在の運用まで手がけています。
    開発秘話・苦労話はまた別記事で。
     
    *1
    ぴよぴよ。
    うちの会社では最近UI部なるものが発足したり、ゲームニクス理論を打ち立てたサイトウ先生に顧問になってもらったり。
    近しい分野での活動が盛んです。
    それらとは関係なく僕は1人でUXの勉強をしたり社内勉強会を開いて布教したりしています。
     

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

     

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

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

     

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

     

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

     

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

     

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

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

     

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


    0 0

    はじめに

    はじめまして!

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

    クライアントチームにてデザインの勉強、絵を描いたり、写真撮ったり、美味しいもの食べてます。 デザインに関わっていると、毎日のように画像の送りあいをします。確認のためだったり、マークアップエンジニアに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ファイル5ギガまで)

    デメリット

    -生成された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によって使いわけたりするのがベストですね。
    また、案件か友達間であるか、という場合によってもサービスを使い分けた方がプロの使い方ですね。


older | 1 | .... | 10 | 11 | (Page 12)