Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “Other“ の検索結果

はじめに

自己紹介

はじめまして。Lobiチーム意匠部のばっこです。

カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。

去年の8月頃に社内の受託チームからLobiチームに異動をして、
半年ほどLobiの周辺サービス(Lobi REC SDK、Lobi Play)を担当したり、
少しだけ新規サービス(RANKERS)のお手伝いをしたりしていましたが、
最近、Lobi本体のアプリに携わるようになりました。

世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、
今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。

Lobi(ゲームコミュニティ事業) | 面白法人カヤック

Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。
同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテムを披露し合ったりしながら、ゲームを通じて新しい仲間を見つけることができます。

続きを読む

2015年のゲームUI/UXを振り返る

今年は大袈裟な見出しを考えたところで8割方燃え尽きました。
お久しぶりです。デザイナーの きの です。
 

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

 
今年も僕はゲームのUI制作の現場で働いています。
サービスではなくコンテンツの制作となるゲームの現場では、UIもUX一緒に考える機会ばかりです。
(そんな現場の様子は去年のブログをごらんください)

なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。

今年はいろんなゲームを遊んでいく中で、おっと思ったポイントを紹介します。
 
果たしてそれが来年のトレンドなのか、それとも・・・。

年越しには少し早いですが、一緒に振り返ってみましょう。 
 

続きを読む

mainimg.png

みなさん、アニメーションの参考を探すとき、どこを見てますか?

こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。


みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか?
ぼくは、Hoverstates というサイトをよく参考にしています!
実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました!

続きを読む

1.png

楽しい新規アプリ開発!そのスタート部分のお話です。

こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。

昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、皆さんご存知でしょうか?
"みんなでフィルターをつくる" 全く新しいカメラアプリ、それが "FILTERS" なのです!

pressrelease2_filters.png
FILTERS が気になるかたはこちら!


今回は、その新規アプリ制作において非常にキーになった
「ユーザーを最短でゴールまで導くマインドマップ遷移図のススメ」のお話をします!

続きを読む

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

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

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

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

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

続きを読む

ゼロから始める!tumblrカスタマイズ超入門!

こんにちは!はじめまして!
カヤック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の両方で募集しています!
お好きな方からどうぞ!

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

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

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

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

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

fig1.jpg
(Fig. 1: 街中で撮影した案内表示板や広告)

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

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

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

続きを読む

御社を志願します!!

portforio_03.jpg

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

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

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

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

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

続きを読む

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

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

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

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

201340314_1.png

続きを読む

未来をつくるサービスのブランディング術

img_01.jpg
コミュニティサービスLobiのリードデザイナーを担当しているshiihoです。
2013年5月にナカマップからLobiへとサービス名称を変更しました。
今回はその変更時に行ったリブランディングの手法を公開しようと思います。
(本記事で公開されてるリサーチ画像は2013年5月以前に制作されたものです。)

続きを読む

これで一撃!簡単にOGP画像をつくれる2つの秘密道具!

こんにちは!デザイナーのわりえもんです!
ドラえもんみたいな見た目の、のび太みたいななにかです。
デザイン制作に役立つ秘密道具を紹介します!

さて今回はサイト・アプリ制作に必需品な
Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします!

facebook-ogpsd.png

続きを読む

「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた

平日は割りと仕事しているんですが、
さっきふとこんな技術相談を、エンジニアに投げてみました。

お題を投げてみた

hayashi.png barimi
ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする?
私ならオートリロードとiframeだと思うんだけど。

tanaka-hirotaka.pngtaiyoh
iframeで自分を開くようにするだけで、1回表示しただけで待ってれば相当数のPV数稼げそう。。。
(ブラウザがクラッシュするまで放置)
 
tanaka-hirotaka.pngtaiyoh
秒は無理だと思うので、あとは物量勝負ですね
 
hayashi.png barimi
なるほど。まあぶっちゃけ1億人集めればいいんだもんね
 
tanaka-hirotaka.pngtaiyoh
一人200タブ×複数ブラウザくらい開いておいて、
スクリプトで全部一斉にリロードできるようにすれば、
1億人もいらなくてもいけそう
 
hayashi.png barimi
10000×10000ピクセルのサイトで1×1ピクセルのiframe作れば、、、

そして話はサーバーへ

 
hayashi.png barimi
サーバースペックはどれくらいになるの
秒速で1億PVのサーバーっていくら位?
 
tanaka-hirotaka.pngtaiyoh
とりあえずgoogle並か、場合によってはそれ以上の力が必要な気がします!
 
hayashi.png barimi
聞いてみようかな。見積もり。
誰かサーバー屋さんの友だちでこのくだらない質問答えてくれそうなヒトいないかな、、、
 
tanaka-hirotaka.pngtaiyoh
Fさんに聞いてみようかな
 
hayashi.png barimi
wwww
椅子投げられる
 
tanaka-hirotaka.pngtaiyoh
サーバどころか、そもそもネットワークがそこまでの流量に耐えられるかもあるなぁ
 
hayashi.png barimi
さ○○さーばーじゃだめなの?
 
tanaka-hirotaka.pngtaiyoh
間違いなく無理ですね
 

そのころIRCでは…

<taiyoh> fu****a: barimiさんからのお題で、与沢翼へのオマージュで、秒間1億PVのサイトを作るにはどれくらいのサーバスペックにすればいいだろう、と聞かれています
<fu****a>秒間1億ってgoogleでも作るつもりですか
<taiyoh> 僕もそう思います
<fu****a> Mobageで一日35億だっけ
<fu****a> という数値をお伝えください
<taiyoh> はい。ありがとうございます〜
<ke****rg_> モバゲーの2500倍!!
<S****u_> 計算早い
<taiyoh> http://game.watch.impress.co.jp/docs/news/20120426_529521.html これによるとサーバは700台くらいか
<ke****rg_> その量のサーバーは東京ドーム何個分の敷地なら入るんだ?
<ke****rg_> 175万台...
<ke****rg_> 46,755平米 が東京ドームだから 1平米のラックに10台サーバーが入るとすると東京ドーム4個分の敷地でまかなえるのか
<ke****rg_> なんとなく琴線に触れてしまった
<fu****a> 発電所作らないと…
<fu****a> マジレスするといろんなところの回線が持ちませんねきっと
<aci****n> さくらの石狩データセンターの完全形態(8棟?)でどのぐらいなんだっけ
<m***py> 今が
<m***py> 東京ドーム1.1倍?
<m***py> 11,392m^2
<fu****a> PVあたり10KBとすると、1TB/sec
<m***py> 延床面積
<typester> 与沢翼ってあの電車に広告でてるやつか
<fu****a> 全国の基幹線を8Tbps(現状の5倍)まで引き上げる目処が付いた
<fu****a> って
<m***py> バックボーンが足りない
<fu****a> 日本国内のインフラを全部置き換えるぐらい出ないと無理ですね
<fu****a> 1TB/secってことは1TBのハードディスクにデータ詰めて毎秒に放り投げる
<fu****a> 必要がある
<fu****a> 物理攻撃に近いな…
<taiyoh> 175万台の内訳を仮にEC2のインスタンスで換算してみて、
<taiyoh> ざっくりと「アプリ(c1.xlarge)6:DB(m2.4xlarge)3:ログ(hi1.4xlarge)1」と振り分けてみた時
<taiyoh> 重度使用リザーブドインスタンスでも月間713億円はかかるという試算が出たことだけお伝えいたします
<fu****a> そもそもawsに175万台あるのかなw
<aci****n> まずIPv4のアドレスそんなに揃うのかっていう
<aci****n> DNSラウンドロビンして分散するにしても/24を1個まるまる使う勢いが必要そうな
<aci****n> 255個でたりないかもしれないけd
<m***py> 東京ドームの値ぜんぜん違う……
<taiyoh> o
<m***py> 1.1倍だけあってて
<m***py> 延べ床面積が上の値で、敷地面積が51,448m^2でこっちで考えると東京ドーム1.1個分
<aci****n> なるほどね
<aci****n> たしか8棟ぶんの敷地があってまだ2棟しかできてなかったはずなので
<aci****n> さくら(完全体)が4個必要ってことね
<m***py> みたいです、二棟で11,392m^2
<aci****n> 道民としては北海道経済がうるおうならウェルカムやで!
<m***py> 全然関係ないけれど洞窟データセンターってどっかやってるんだろうか
<ken****walker>ヨルムンガンド発動できそうやん
<taiyoh> wikileaksっぽい>洞窟データセンター
<ken****walker> 完全国内仕様じゃなければ海底ケーブルとかIXの増設とか必須っぽい
<m***py> 洞窟にデータセンター突っ込めば年中通して気温が一定だから冷却系楽になるねという北海道と同じ発想で
<m***py> どっかで提案していたような
<aci****n> 洞窟は湿度的な問題があるからなー
<m***py> 確かに
<ken****walker> Googleがつくってた海流利用したデーセンまだ全然できないのかな
<m***py> IBM Blackboxでも置いとけば
<m***py> 何とかなりそうな気も
<aci****n> ジオフロントさがしてそこにサーバおきましょう
<m***py> この規模だと一箇所にまとめるのがつらい
<m***py> 秒間1億PVならリージョンごとに分散させてやれば、個々のPVは分散される説

秒速で1億PV稼ぐサーバーは一体いくらなのか!?

hayashi.png barimi
えーいくら掛かるのか知りたいw

tanaka-hirotaka.pngtaiyoh
(今計算中ですが、超めんどい!)
去年時点で700台くらいと考えると、
<ke****rg_> モバゲーの2500倍!!
単純計算で
700 * 2500 = 1,750,000
のサーバが必要で、仮にEC2で換算してみると、(あくまで試算です)
DeNAでは超ハイスペックのマシンは確か使ってないので
重度使用リザーブドインスタンスで1年使用するとして、
 
<アプリケーション用:ハイ CPU エクストララージ インスタンス>
1台あたり年間:$2000(前払い)+($0.16*24*365=$1401.6)
(2000 + 1401.6) * 1050000(台) = $3,571,680,000
 
<DB用:ハイメモリ クアドラプル エクストララージ インスタンス>
1台あたり年間: $4120(前払い)+($0.352*24*365=$3083.52)
(4120 + 3083.52) * 525000(台) = $3,781,848,000
 
<ログ保持用:ハイ I/O クワドラプルエクストララージインスタンス>
1台あたり年間: $7280(前払い)+($0.621*24*365=$5439.96)
(7280 + 5439.96) * 175000(台) = $2,225,993,000
合計で$9,579,521,000 (今のレートで8 554.67137 億円)となります。
 
でも、これは年間のサーバ費の超概算というだけで、
他にやることはあって、
  1. 国内のネットワークインフラをすべて劇的にスペックアップさせないとそもそアクセスすらできない
  2. サーバをすべて置くために東京ドーム4個分くらいの敷地とサーバを設置するための施設
  3. サーバの電力量が無茶苦茶高いので、それを賄うための発電所の建設費用
辺りが別途含まれます
 
> 合計で$9,579,521,000 (今のレートで8 554.67137 億円)となります。
この数字だと年間なので実感わかないですが、
月間に直すと713億円弱くらいです
 

秒速で1億PVはお金がかかる!

ということで、構成とか色々工夫すれば金額変わると思いますが、秒速1億PVもお金がかかるんですね~。
くだらない相談に乗ってくれた、ステキなエンジニアの皆さんありがとうございました!
 
※この話題はIRCでまだ続いているようなので追記あると思います。笑

続きを読む

めっきり涼しくなってきました。

急に気温が下がったので鼻水が止まらない意匠子です。
 
さて秋といえば、運動会やハロウィンなど面白い行事が目白押しですが、
私が学生時代、なにより楽しみだったのは「学園祭」です。
美大の場合は、様々な作品があって、卒業した今でも機会があれば参加して
良い刺激をいただいております!
 
今回はそんな芸術祭のサイトをまとめてみました。
もう終わってしまっている芸術祭もありますが、
みなさん機会があれば参加してみてはいかがでしょうか?
 
それでは続きをどうぞ!

続きを読む

Pinterestをデコレーションできる素材集できました!

最近も楽天の出資があり、さらに注目を浴びている画像ストックサイト「Pinterest」。

そのPinterestをもっと楽しむための、素材集を作りました!

使い方は簡単。好きな画像を投稿した後に、飾りのように投稿するだけ!

あなたのボードがもっと楽しくなりますよ。

理論的にポートフォリオを作ろう!

はじめまして。
4月から面白法人カヤックで働くことになりました、デザイナー内定者のツカダです。

ハットリさんのポートフォリオ記事
カヤック内定者が本気で作った!面接に効く「おいしいポートフォリオ
に引き続き、実際にカヤックに送ったポートフォリオについて、
僕のポートフォリオを例に、そのポイントを紹介したいと思います!
ところでハットリさんの記事500近くもはてブついてるんですけど...。なんというプレッシャー。

今回はポイントごとの特徴から、

  1. 方針
  2. 形態
  3. 内容
  4. 遊び
  5. 話題

の5+αのポイントで見ていきたいと思います!
ポートフォリオは作品集で間違いありません。
ですが、就活用の用途といえば自分のアピールです。
その辺りを考慮し、理論的に考えていきたいと思います。

ちなみに僕はこんなポートフォリオを送りました。

portfolio_t001.jpg

バッラバラ。ちなみにコレ本当は全部で11冊あります。
なぜこの形に落ち着いたのか。5つのポイントで伝わるとありがたいです。

それでは続きからどうぞ!

続きを読む

おいしいポートフォリオを作ろう!

どうも、はじめまして!!
縁あって面白法人カヤックで働くことになりました、デザイナー内定者のハットリです。

ところでみなさん!ポートフォリオ、作ってますか?
ポートフォリオって作るの難しいですよね…。

今回はそんなポートフォリオのことを
ちょっとでも楽しく、料理に例えつつ紹介したいと思います。
自己流レシピですが、皆さんの参考になれば嬉しいです!

ちなみにカヤックにはこんなポートフォリオを送りました。

portofolio01.jpg

続きを読む

パス軽量化クイズ これ何ポイントでしょう?

連休明けの頭の運動にいかがですか?

ルールは簡単

問題も少なめ

引っかけにはご用心。

 

GWは有意義に過ごせたでしょうか。

人間考えていることで頭が活性化し、思わぬアイデアが湧き出たりするものです.

ということで頭の運動用に、

イラストレータでのパス軽量化クイズをご用意いたしました。

SVGはもちろん、モバイルのFLASHなどでもまだまだパスの軽量化は無くならないポイントです。

 

簡単なように見えますが、人によっては倍ぐらいの差がついたりしますよ。

あなたの答えを教えてください!

続きを読む

販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました!
本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。

ちなみに出した企画はこちら。

final_rakugaki.jpg

ただいまWeb投票もしているので、企画見てオモロイ!と思った方は、ぜひ投票お願いしまーす!

続きを読む

国内クーポンサイト、24サイトのデザインまとめ!

去年から盛り上がっているクーポンサイト、そのデザインをまとめてみました!

クーポンサイトのデザインの見るべきポイントは、3つ。

  1. ユーザ登録せずに、トップページにアクセスした場合どのように見えるか
  2. カラムの切り方
  3. オリジナリティ

続きを読む

文字BOOK!日本語オススメ書籍3選

日本語って面白いんです。
漢字とカタカナとひらがな。さらにはAlphabetまでごちゃ混ぜにして使ってしまう。
そんな不思議な日本語について、もっと知りたい!

というデザイナーにオススメ書籍のご紹介です。

続きを読む

今年ありがとうを言いたい「イベント3つ+おまけ」

2010年もあと僅か!

みなさま、こんにちは。
残り数十分で年越しとなりました!あっという間の1年でしたねー。

今回はありがとうを言いたい○○シリーズということで
2010年で刺激を受けたイベント3つを振り返ってみます。

続きを読む

今熱い!無料オーディオ系サービスのUI 7選+α

昨日、2010年12月1日、ついに
IPサイマルラジオ「radiko」がついに本格サービススタート!
ワッショイワッショーイ!

てなこともあり、無料音声配信コンテンツが今最高にアツイ!と信じて疑わないgunjiです。

映像系サービスが大人気の今、なぜあえて音声だけがイイのか?

それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが
ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、
別のことをしながら利用出来るということが挙げられると思います。

まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど
作業用BGMなら仕事の効率がアップすることもありますしね。
移動中も眠りながらも聞いていられますしね。

というわけで今回は国内外の、特にプレイヤー部分のUIが面白い
無料オーディオ系サービスをご紹介したいと思います。
ながら利用」を加速させるプレイリストなどの機能にも注目です。

radiko

冒頭でもご紹介した日本のIPサイマルラジオ、つまり
インターネット上で地上波ラジオの放送が聞けちゃうという夢のようなサービスです。

テスト運用時は関東で聞けるのは首都圏だけでしたが昨日から北関東でも聞けるようになりました。
今後エリアが拡大していって、どこでもネット越しにラジオを楽しめる時代が来ると
思うとwktkが止まりません!

radiko

メインのページには番組表や特集のビジュアルがあって、再生開始すると
細長いプレイヤーウィンドウが立ち上がります。
今放送中の局のロゴと番組の情報が上3分の1に収められています。

iphoneアプリもこのプレイヤーウィンドウとほぼ同じUIになっていますが
スマートフォンのインターフェースが先にあって、PCのプレイヤーもそれに
あわせたのではないかという気がします。

続きを読む

今話題!Kinectの情報についてまとめてみた

みなさん、こんにちわ!

いつも元気なbarimiです。
本社のある鎌倉は紅葉真っ盛り!真っ赤なもみじや、黄色のイチョウがかわいいなー♪とホンワカ見とれてしまう日々を送っています!

Kinect (キネクト)がキテル!

さてさて、11月20日にMicrosoftから発売されたKinect センサーがヤバい!
と盛り上がっているのですが、ここで簡単にKinectについてまとめてみました!

続きを読む

文字の大きさも書体も変わることがあるよ

縦の長さは可変だよ

横の長さも可変だよ(ウィンドウサイズなど)

そこだけ背景をしくのは無理だよ

どこからどこまでリピートするか教えてね

ポインタが乗ったりクリックしたときどうなるか指定してね

旅する支社でベトナムに行き、現地で1日に1回何かしら食べ物をこぼすかひっくり返すかして、
ついにドジっ子の称号をもらいました、くにーです。シンチャーオ!
 

今回は、ベトナムのインスタント麺のパッケージデザインをご紹介します。

ちなみに撮影場所はハノイ空港です。

続きを読む

いま読むべき、クリエイティブWEBマガジン10選

カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。
いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう!

続きを読む

これだけは遊んでおきたいソーシャルゲーム10選

 

モバゲー。

女性向け

■ぼくらのワールドリーグ

フラッシュゲームが秀逸

■ポッピン

フラッシュ

■英雄になりたい

■怪盗ロワイヤル

■戦国ロワイヤル

 

 

 

 

男性向け

ログイン画面の離脱率を下げる!ECサイト各社の工夫

こたつにみかんはじめました。nonakaです。
週に1度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました!
ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。

続きを読む

無料で高機能なfacebookのアクセス解析を試す

 

シンチャーオ!(こんにちは)
現在、旅する支社でベトナムのダナンという所にきています。ニシです。
 
今回はベトナムで見かけたデザインをいくつかご紹介したいと思います。
 
まず驚いたことは、現地の方にお話をきいたところ、
こちらにはデザイナーという職種の人はほとんどいないという事でした!
 
とはいえ、街にあるポスターや看板などはあるので、
そこはどうしているのかと聞くと、
印刷業者が制作も担っているという事でした。
大きな企業はデザイナーがやっているそうです。

続きを読む

おはこんばんちは、イコヤマです。

「おはこんばんちは」とは、「おはよう」「こんにちは」「こんばんは」を合体させた、超便利な挨拶です。
確か鳥山明先生がアラレちゃんの中で言ってたような気がするんですが、違ってたらごめんなさい。
はい、どうでもいいですね!

それでは、今日も元気にKAYACサービスを擬人化します!
level0ちゃんでございます。↓↓

続きを読む

今回はスパイクスアジア広告祭 デジタル部門のグランプリを検証!

受賞作品はどんなキャンペーンを
どんな切り口で紹介しているのかチェック!
そのテクニックを探ります。

続きを読む

購買意欲を刺激する!印象的なHTMLメルマガ10選

マラソンに夢中! nonakaです。
毎週通販サイトのhtmlメルマガを作っているので、他の通販サイトのメルマガも多数購読してます。
今回は、通販サイトのhtmlメルマガを集めてみました。

続きを読む

背景なのに、目立ち過ぎ!

 
ユーザを迷わせるのも、思い通りのアクションにつなげるのも、
背景の扱いかた次第!?
コンテンツを引き立てる、効果的な背景の条件とはなんでしょうか?
 
 

AとB、どちらが背景としてふさわしいでしょうか

vol3_question.png

それははなぜですか?理由をおしえてください。

 
答えはスクロールして見てくださいね!↓↓↓

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

続きを読む

Facebook使ってますか?

こんにちわ、ME課の渕上です。
ミーハーなぼくはもうすっかりFacebook中毒です。

Facebookといえば、「いいね!」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。
この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。

今回は、いつものhtmlに一手間加えて「いいね!」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。

それでは続きからどうぞ!

続きを読む

クリエティブのヒントはいろいろなところにありますよね。
そういうわけで今回は、アイデアが秀逸なムービー集めてみました。
意外なオチにビックリなものもありますよ〜。

続きを読む

2000年代中盤のweb2.0登場以来、ユーザーが参加出来る・貢献出来るWEBサービスって本当に増えましたね。

その中で今回デザイナーが参加・貢献出来る、そしてお小遣い稼ぎまで出来ちゃう
WEBサービスをいくつかピックアップしました。

とは言っても、デザイナーが何かを作って・売るというサイトは以外と多いので、
今回はTシャツのWEBサイトに絞りました。

続きを読む

ちょっとしたココが可愛いサイト 5つ

ちょっとしたところに遊びのあるサイトっていいですよね。
ワクワクしますよね。

そんな楽しい気分になれるサイトを少しだけご紹介。
続きからどうぞ!

続きを読む

可愛くって美味しそう!お菓子系ウェブサイト10個

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

そんな可愛くってお腹の減るお菓子系サイトを10個ご紹介です。
 
では続きからどうぞー

続きを読む

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

コンチには~!

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

言われるときありますよね?(え?ない?)

 

単調なバナーを、アクセントカラーを上手に使って強調してみましょう。
 
 
db_ogura_banner.png
 
 

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

 

A:オレンジ

B:水色

C:緑

 

その色を使う利点はなんですか?

 

答えを見てみる!↓↓↓

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

続きを読む

【連載】KAYACサービスを擬人化してみた【01_bowls篇】

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

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

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

bowlsちゃん

続きを読む

意外と使える!?Adobe Bridgeでサクサク画像選び!

11.png

大量の画像管理にはBridge

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

 

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

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

Adobe Bridge

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

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

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

 

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

それではどうぞ〜

続きを読む

何でもすぐにやってみる!ということ。

百式さんで紹介されていた、この記事

記事の冒頭に『読むための所要時間』を表示させておけばいいんじゃね?」と思いつきます。

これを、このブログでも早速実装してもらったのですが、その検証結果を発表したいと思います。
(【7分で読めるよ!】ってところです。)

01.gif

続きを読む

 

突然ですが、フォーム使い分けてますか?

ネットでお買いものするとき、ブログを書くとき、なんとな~く使っているフォーム。

デザインするときには、その特性にあわせて使い分けることが大事です。
利点と欠点、どんなときに使うかを、説明できますか?
 

【問題】ユーザに下記を入力してほしい場合に、どのフォームをえらぶ?

==
<お好きな野菜どれでも5種類 1500円で宅配します!>
下記から、お好きなものを5種類を選んで注文してください。
 
なす/ピーマン/おくら/かぼちゃ/トマト/きゅうり/小松菜/
にんじん/じゃがいも/玉ねぎ/レタス/とうもろこし
==
 

次のうちどのフォームを使いますか?

A:ラジオボタン
B:チェックボックス
C:ドロップダウン
D:トグルボタン
 

各フォームを使う利点と欠点を説明してください。

A:ラジオボタン
B:チェックボックス
C:ドロップダウン
D:トグルボタン
 
こたえは続きで!

続きを読む

夏の炎天下でも自転車通勤のhashimotoです。

通勤中に音楽を聞いたりすることもあるのですが、
デザイン作業中にも音楽を聞いたりします。
 
ということで、突然ですが

作業用BGMにデザインは影響されるのか!?

を検証してみたいと思います。
作業中は無音だぜって方も遠慮せずに続きをどうぞ!

続きを読む

早起きしてIAについてみんなで勉強してみた その1

ia_090511.jpg

おはようございます!新人デザイナーのくにーです。

今回は、毎週木曜の朝に開催される
意匠部 ユーザビリティ勉強会のフィードバックをお届けします。
おやつ(通称マピ)を囲みながら、もっと使いやすい、何度も使いたくなる、
みんなに便利なサービスをデザインすべく、取り組んでます!

続きを読む

カヤックデザイナーブログのURLが変わりました

当カヤックデザイナーブログのURLが変わりました!
RSS含めリダイレクトされるよう設定されているので
大丈夫だと思いますが、リンク切れなど不具合がありましたら
カヤックのお問い合わせからお知らせくださいませ。

旧URL:http: //design.cuppy.co.jp
新URL:http://design.kayac.com/

ついでにMTのバージョンを上げたり
テンプレートの構造を変えたり各メンバーのページに
手を加えたりしました。MTが楽しくなってきた今日この頃。
これを機に、滞りがちだった更新も活発になる はず!

絶賛稼働中!カヤックの5つの職種ブログ

年末ですね!

時の流れがいつもよりだいぶ加速しているように感じられる季節ですが、それにもめげず今弊社ではブログ熱が謎の急上昇を見せています。ということで、突然ですが当デザイナーブログ以外の、4つのカヤック職種ブログを紹介させてください。

続きを読む

WEBデザインから生まれたCD

FICCさんがCDを発売されたそうです。
ファッションショーやWEBデザインの為に制作された楽曲が集まってCDになるという、
今までにない形なため、上記のブログパーツで
全曲フルコーラスが試聴できるようになってます。うれしいですね!

ブログパーツも相変わらず美しく、見入ってしまいますね〜

ブログ公開しました

web制作会社クーピーと面白法人カヤックのデザイナー陣がウェブサイトを紹介するwebデザインポータル(サイトリンク集)DB、本日公開されました。

ブックマークやトピックスなど、随時更新していきますので、お楽しみに!