サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
design.kayac.com
はじめに 自己紹介 はじめまして。Lobiチーム意匠部のばっこです。 カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。 去年の8月頃に社内の受託チームからLobiチームに異動をして、 半年ほどLobiの周辺サービス（Lobi REC SDK、Lobi Play）を担当したり、 少しだけ新規サービス（RANKERS）のお手伝いをしたりしていましたが、 最近、Lobi本体のアプリに携わるようになりました。 世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、 今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。 Lobi（ゲームコミュニティ事業） | 面白法人カヤック Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。 同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテ
iPhone SEは4inchi画面となり、5系と同じ画面サイズになりました。 ピクセル数的にも[1,136 x 640ピクセル解像度、326ppi]と同等のものになっていますので、 今回に関しては珍しく 新たな画面サイズ対応は不要です！ そもそも画面サイズってどう対応したらいいの？とお悩みの場合にはiPhone6発売時に書いたこちらの記事をご覧ください。 デザイナー向け！iPhone6対応について iPhone SE 仕様
なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。
今年は大袈裟な見出しを考えたところで８割方燃え尽きました。 お久しぶりです。デザイナーの きの です。 今回は【UX Tokyo Advent Calendar 2015】 の7日目としてお送りします。 今年も僕はゲームのUI制作の現場で働いています。 サービスではなくコンテンツの制作となるゲームの現場では、UIもUX一緒に考える機会ばかりです。 （そんな現場の様子は去年のブログをごらんください） なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。 今年はいろんなゲームを遊んでいく中で、おっと思ったポイントを紹介します。 果たしてそれが来年のトレンドなのか、それとも・・・。 年越しには少し早いですが、一緒に振り返ってみましょう。 1. ユーザーはデータ容量に敏感 [画像：アイドルマスターシンデレラガールズ スターライトステージ]
こんにちは、インターン中のファイ部の田口です。 突然ですが、美女に落書きできたら楽しいと思いませんか？ グラビアなどの女の子の水着写真を黒く落書きすると、まるで裸のように見えてエロくなるってのは、ネット上でひそかに流行ってます。 今回は美女に落書きしたいという男性の潜在的欲望にのっとって、jQueryのAjaxで美女の画像をネット上から取得しながら、HTMLのCanvasで落書きしたいと思います。大きな流れはこんな感じ。 [STEP1] AjaxでBjin.Meから美人の画像を取得 [STEP2] 美人の画像にCanvasでお絵描き [STEP1] AjaxでBjin.Meから美人の画像を取得 美人の画像を取得します。美人の画像はbjin.MeでAPIとして提供しています。 このAPIを使ってAjaxを用いて、画像を取得して行きます。 とりあえずサンプルコード [html] <!docty
今日は UI部 が3月のよいアプリをお届けします 今年の目標は10キロダイエット、進捗は+1キロです。わりえもんです。 ３月も今日で終わり...ということは今年も1/4がもう過ぎたということですね！ UI部では、毎週あるテーマに基づいてアプリの事例を集めて知見を共有しています！ ゲームチーム・自社サ−ビス・クライアントワークのメンバーがいる分、いろんな方向のアプリ の話があがって、面白いものです！ それでは、3月 KAYAC の UI部のメンバーが気になったアプリ10点をご紹介します！ 3月を振り返って気持ちよく4月を迎えましょう！ ゲームアプリ Dark Echo http://www.darkechogame.com これまたおしゃれミニマル系ゲームです！ 音の反響をビジュアル化、それを手掛かりに進む迷路ゲームです。 発想にもびっくり。是非みなさん自分のiPhoneで体験してみてくださ
みなさん、アニメーションの参考を探すとき、どこを見てますか？ こんにちは！ わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。 去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。 みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか？ ぼくは、Hoverstates というサイトをよく参考にしています！ 実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました！ ぼくがよくこの Hoverstates を使う理由としては以下の4点があります！ なめらかなアニメーションでわかりやすい！ サイトだけにとどまらず、ロゴだったり多種多様なアニメーションが集まっている 実際に制作されている素晴らしい例の選りすぐり わかりやすいジャンル分け という点で非常に
カメラアプリをつくる上で避けて通れない 撮影画面のお話。 こんにちは！ わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。 去年から OH (http://wariemon.com) という名前でも活動中です。 昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、もう触りましたか？ FILTERS が気になるかたはこちら！ 今回は、フィルターカメラアプリの制作時に役立つ 「カメラフィルターアプリの撮影画面UIまとめ」のお話をします！ あなたのつくりたいカメラアプリはどのパターン？ カメラフィルターアプリにはまず大きくこの2パターンが存在します！ この2パターンに分類して、UIの参考になりそうなアプリをまとめていきます。 1. フィルターをかけながら撮影できるアプリ 2. 撮影後にフィルター（編集）をかけるアプリ あなたのつくりたいカメラアプリはどち
楽しい新規アプリ開発！そのスタート部分のお話です。 こんにちは！ わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。 去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。 昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、皆さんご存知でしょうか？ "みんなでフィルターをつくる" 全く新しいカメラアプリ、それが "FILTERS" なのです！ FILTERS が気になるかたはこちら！ 今回は、その新規アプリ制作において非常にキーになった 「ユーザーを最短でゴールまで導くマインドマップ遷移図のススメ」のお話をします！ デザイナーがマインドマップで遷移図を書くメリット 遷移を自分で責任もって引くということは、すべての画面に理由がなければつくれません。 そこで出てくる理由とは開発陣のスキルや、納期など、色々制約
はじめに はじめまして！ 今年デザイナーとして面白法人カヤックに入社しました、さーやです。 クライアントチームにてデザインの勉強、絵を描いたり、写真撮ったり、美味しいもの食べてます。 デザインに関わっていると、毎日のように画像の送りあいをします。確認のためだったり、マークアップエンジニアにpsdデータを渡したりなど。送り合う時間をなるべく短縮すべく、色々なツール使っています。また友達間でも、大量の写真を送り合ったり、画像を見せ合ったりしているのにもこういったツールを使っています。 そこで今回は、速度が5倍くらい早くなる画像＋ファイル転送術を色々なツールを通じて紹介致します。 方法① Skype http://www.skype.com/ja/download-skype/skype-for-computer/ 昔からある不動の便利SNS。チャットもビデオ通話ももちろんできる、リアルタイム制
既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。
とりあえずかっこよさげな見出しを考えたところで８割方燃え尽きました。 デザイナーの きのです。 今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。 現在、僕はゲームのUI制作の現場で働いています。*0 半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。 既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。 用語について不慣れなところがあるので、「ああ、あれはきっとあのことだな」みたいな所が散見されると思いますが暖かい目*2でみてくださいませ。 わかりやすいより、ワクワク 今まではわかりやすいが正義！だったのですが、 それだとにっちもさっちもいかなくなってきました。 なぜなら、わかりやすいはゲーム
はじめに 便利な時代になりました。 いまや情報はキュレーションされて、自分に合った情報だけが簡単に手に入ります。 ですが。 そんなに簡単に情報を手に入れて良いのでしょうか？ 這いつくばって、泥臭く得た情報（以下、キラキラした情報）の方が 喜びや価値は大きいのでは？ 私、カヤックデザイナーのTumblrフリーク、ゲンです。 私のTumblrブログの数は41です。 今回ご紹介するのは、私も実践する〝深く良く効く、Tumblrを最高に使う方法〟 このブログをお読みのようなハイスペックな皆様には Tumblrってなに？という説明は抜きでいきたいと思いますのでよろしくお願いします。 全ユーザーをフォローし尽くす勢いでフォロー 「大量フォロー？俺、フォローは厳選してるし」 「見たい情報が流れるじゃん」 「変なポストが入ってきたらいやだな...」 そう考える気持ち、よく分かります。 ですが、冒頭にも述べ
こんにちは！はじめまして！ カヤックHTMLファイ部に来年度新卒で入社予定のもときです。 現在はインターンとしてカヤックに来ています。 今回はtumblrについての記事です。 tumblrに関する記事はググればいくらでも出てきますが、 このデザイナーズブログではまだ扱っていないようなので、 tumblrの魅力と、tumblrサイトのカスタマイズのはじめかたを、 僕なりに紹介してみたいと思います！ ・tumblrってなんとなくは知ってるけど、一体どんないいことがあるの？という方 ・いまtumblrを使ってて、もうちょっとカスタマイズしてみたい方 ・これからtumblrでサイトを作ってみようと思ってる方 そんな方に向けた記事です。 tumblrの魅力 tumblrとは このブログを見ているような方々なら、今や知らない人のほうが少ないのではないでしょうか。 それほどにすでに有名なサービスですね。
iPhone 6 plusを買ってみて遊んでいます。 android勢からすれば当たり前かもしれませんが、 やっぱりこのサイズは画面上半分触るの厳しいです。 実はついこの間リリースしたゲームは、 ユーザーにタップしてもらう領域をなるべく下半分に寄せてました。 作り始めたのは１年前なんですが、6+でも快適に遊べそうなので、そこでやったことの話をします。 こういった話はあまり見ないので、チームやデザイナー同士の話のたたき台にでもしてもらえると嬉しいです。 ゲームの説明と特性 今日の話のネタになるのは「ぼくらの甲子園！ポケット」というゲームです。 ぼくらの甲子園！ポケット 公式サイト 今日の話に必要な情報はこんなとこです iPhone&Androidの両対応 アイテム課金型のいわゆるソーシャルゲーム 画面サイズは640x1136、縦横比9:16（つまりiPhoneの4inchi）を基準 ゲームは
（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます
（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます 端末 解像度 インチ 書
はじめまして、カヤック新人デザイナーのきんこと申します。 アイコンマークに起用したり、グラフィックの一部に使ったりと、 デザインをしていてなにかと登場することが多いハートマーク。 みなさんは普段どのように制作していますか？ フリーの素材をダウンロードして使う人やオリジナルのマークを作る人が多いかと思いますが、 今回は自分がよく使う、フォントに含まれるハートマークについてお話しします。 フォントに含まれるハートマークをリストにしてみた はじめに、ハートマークがシンボル登録されているものを表にしてみました。 こうして並べてみると、よく見る形のものから個性的な造形のものまで様々です。 見たことのないハートもあるのではないでしょうか？ 特に欧文フォントは、シンボル登録されている書体も少なく、「ハート→変換」では入力出来ないので、 見つけるのに苦労しました...。 (他言語のハートマークを入力したい
あなたのハートを射抜く！フォントに含まれる♥マークについて はじめまして、カヤック新人デザイナーのきんこと申します。 アイコンマークに起用したり、グラフィックの一部に使ったりと、 デザインをしていてなにかと登場することが多いハートマーク。 みなさんは普段どのように制作していますか？ フリーの素材をダウンロードして使う人やオリジナルのマークを作る人が多いかと思いますが、 今回は自分がよく使う、フォントに含まれるハートマークについてお話しします。 フォントに含まれるハートマークをリストにしてみた はじめに、ハートマークがシンボル登録されているものを表にしてみました。 こうして並べてみると、よく見る形のものから個性的な造形のものまで様々です。 見たことのないハートもあるのではないでしょうか？ 特に欧文フォントは、シンボル登録されている書体も少なく、「ハート→変換」では入力出来ないので、 見つけ
自動置換のやり方 プロジェクトのdropbox連携をONにする dropboxフォルダ以下のアプリ/popを参照する 連携したプロジェクトの名前のフォルダをつくる フォルダの中に画像をいれる
皆さんはお気に入りデザインの管理をどうやっていますか？ はじめまして！ 14新卒デザイナーとして面白法人カヤックに入社しました、トダエミです。 ソーシャルゲームチームでデザイン修行しながら、写真撮ったり絵を描いたりしています。 今回は、新卒デザイナーにとって関門の一つデザインの引き出しを増やせ！ を攻略するための方法として、 デザインスクラップツールの紹介をします！ 1.デスクトップ系ツール バナーもボタンもキャプチャも、これ一つ！「Spark Box」 >> http://www.icyblaze.com/sparkbox/ （対応：mac） UIやバナーなど単体のものをストックするのに大活躍！ 私はソーシャルゲームのバナーをストックするのに使っています。 サイトに使われている画像が一覧で表示され、一つずつまたはすべてライブラリに読み込めます。 魅力的なのはソート機能！ なんと自動でカラ
え！？そういう意味だったの？？？ みなさんこんにちは。意匠部クライアントワークチーム デザイナーの tsmallfield です。 今回はデザインするときに知っていると、ちょっと得するかもしれない！？豆知識のお話です。 U.S.A. は U.S.A でなく U.S.A. なのだ！？ 一体何を言っているのかよくわからないタイトルですが、まずは以下の写真（Fig. 1）をよ〜く御覧ください！ （Fig. 1: 街中で撮影した案内表示板や広告） 街中の案内表示板や広告の文字。 デザイナーのみなさんはやっぱり気になりますよね！ その中でよく見る 謎のピリオド "." これ不思議に思ったことありませんか？ 日本語の読点「。」にあたる "." かなと思いきや、文中に突然現れたりもするし。。。 これは一体なんなのでしょう！？ ↓ ↓ ↓ ↓ ↓ ↓ 気になる正解は。。。。 「略している」 という意味の
デフォルメキャラって作ったりします？ こんにちは、ゲーム事業部デザイナーのみねおです。 最近は「姫騎士と最後の百竜戦争」チームで ある時はUI、ある時はキャラクターなど、いろいろごにょごにょ作ってます。 今回はスマホアプリでは良く使われるデフォルメされた動物やキャラクターを作る際に、 自分が考えたりすることなんかを書きます。 どのくらいデフォルメする？等身テンプレを決める これは最初に決めておいた方がいいと思うことなんですが、 ひとくちにデフォルメといっても、どの程度にするのかで幅がありますよね。 ゲームにしろ、何かアプリのナビキャラにしろ、あらかじめひな型となる等身を決めておくと 複数体のシリーズとして作る時に楽になります。 等身の決め方はいろいろあると思いますが、 私はそのまんま、はじめに描いたマルを頭の大きさとして それがいくつ縦に並ぶかでだいたいのアタリを取ります。 原始的ですね。
御社を志願します！！ はじめまして、突然の初々しい写真ですが、 4月から社会人2年目になった、はるみんと申します！ 一昨年の今頃、就職活動にいそしんでいたのが少し懐かしいです。 突然ですが、 みなさんは面接のとき堂々と話せますか？ てんぱらずにしっかりと伝えられますか？ わたしはとんでもなく緊張しいでいわゆるあがり症です。 過去の発表などのときに、顔が赤くなりすぎて体調を心配されたり、首が赤すぎてやばいよなどと言われてきました。 そんなとき、近くで助けてくれるパートナーがいてくれたらなぁと何度も思いました。 でも、デザイナーの面接のときは生身で話すのではなく、ポートフォリオを使いながら話すことも度々あるはず！ そんなとき、ポートフォリオが最高のパートナーになってくれたら心強いですよね。 今回は 面接時で実際使った！"ポートフォリオ＝パートナー"の紹介をします！ カヤックに実際持っていった2
●１：集める時間を決めて習慣化 ●２：画像の収集と同時にタグ付けする ●３：自分らしい名前でタグ付け ●４：収集画像の良い部分を「要素分解」せよ ●５：デザインするとき、リラックスした自分を呼び戻すスイッチとしてスクラップを活用せよ ●６：失敗にセンサーを働かせよ
次のページ
このページを最初にブックマークしてみませんか？
『KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
