7月7日に行われる面白法人カヤックのイベントである「777☆カヤックフェスティバル」に向けて、 6月6日〜7月6日までの間、 ディレクター、エンジニア、フロントエンジニア、デザイナー、 全職能のブログを、同じテーマの記事でつなぐ「777ブログウェイ」を実施していました。 23人のカヤック社員が、「つくるための3種の神器」をテーマにブログを書きました。 そのまとめ記事になります。 デザイナーまとめ 新しいPCに入れる基本ソフト3つ：Windows版 新卒Webデザイナーが考える「五月病」を脱却する方法 Workflow para reducir el tamaño de tus assets デザインするための三種のリファレンス グラフィッカーの三種の神器！？ 思わず絵が描きたくなる（！？）三種の神器 ディレクターまとめ もっと知りたい！「好奇心」をつくる３つの視点とサービスを紹介します

iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、

HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ

kayac 閃光部 クリエイターの嶋田より寄稿です。 「モンスターを集めてまいれ！」というiPhoneアプリを プロデュースしたんですが、イラストレーターのタスクが多く ドット絵を自分で描く事になりました。 初ドット絵だったので このノウハウ共有に何の意味も無いかもしれませんが きっと何処かに需要はある！と、思い込んで記事を書いております。 使用ソフトはPhotoshopです。 余談ですが バイトのドット絵得意な子に聞いたところ「Photoshopはやめておいたほうがいい」 との回答。 ・・・・。 さあいってみよう！

おいしいポートフォリオを作ろう！ どうも、はじめまして！！ 縁あって面白法人カヤックで働くことになりました、デザイナー内定者のハットリです。 ところでみなさん！ポートフォリオ、作ってますか？ ポートフォリオって作るの難しいですよね…。 今回はそんなポートフォリオのことを ちょっとでも楽しく、料理に例えつつ紹介したいと思います。 自己流レシピですが、皆さんの参考になれば嬉しいです！ ちなみにカヤックにはこんなポートフォリオを送りました。 1.下ごしらえ:　素材を準備しよう！ 作品リストをつくろう！ まずは、ポートフォリオの下ごしらえです。 今までの作品をリスト化してみましょう！ 「どの作品なら使えそうか？」が分かるように書くといい感じです。 こうしてチェックしておけば、いざ作り始めて 「クオリティはOKでも、写真データがない！」とあたふたしなくてすみます。 キーワードを探そう！ さて、これで

あっという間に12月！ さて、こんな年末の年の瀬迫るちょー多忙期に、なんとFacebookのタイムラインが新しくなることに！ カバー写真とプロフィール写真を工夫することで、面白い見せ方をしているデザインを51個ご紹介します！ 新タイムラインの設定方法やカバー写真の変更方法についてはこちらがおすすめです！ 来月スタート！新・facebook「タイムライン」登場。で、準備しておきたい５つのこと Facebookでタイムラインのcoverを設定する方法 - nanapi Web また面白いプロフィールページだけを集めたFacebookのグループもおすすめ！ Awesome Profile Hacks Ekkapong Techawongthaworn Mohammad L. Azzam Andrew Grojean Yale Zhao Sune Adler Miltersen Sven De B

Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ！ 「いいね！」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね！」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね！」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って

HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から

ということで、2011年の三大広告賞と国際的デザイン賞を簡単に、日本受賞作品とともにまとめてみました！

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。

カヤックの受託向けラボチーム「BMCL（ブッコミ クライアントワークラボ）」のデザイナー、佐藤ねじです。今回は、BMCLよりビッグなお知らせです！「攻殻機動隊 S.A.C.」シリーズの中で登場する「電脳空間」をBMCLが作りました！ これは、Kinectセンサを活用して「攻殻機動隊 S.A.C.」シリーズの『電脳空間』を再現したインタラクティブコンテンツ。渋谷PARCO PART1 5F(monozoku)で開催中の「攻殻機動隊 S.A.C. プレミアムショップ」に展示するために制作しました。指定位置に立ち、自分の体を動かすと、その動きに合わせて電脳空間を自由に遊泳することができます。プレイヤーは、空間内に常駐する「タチコマ」の指示により時間内に電脳空間を飛び回る「タチコマ」をつかまえるミッションに参加します。実際にその様子を見てみましょう。 電脳空間システムの動画 電脳空間システムの遊び

東北地方太平洋沖地震にて、募金や各種支援活動がありますが、デザイナーでも出来ることをまとめてみました。 ※こちらの情報は随時更新していく予定です。デザイナーができる活動がありましたら Twitter @barimi 、Facebookページ面白法人カヤック意匠部 、もしくはこちらの投稿フォームよりご連絡いただけると幸いです。どうぞよろしくお願い致します。 #ideaforlife 東北地方太平洋沖地震のため、命のためにできるアイデアを募集しているハッシュタグ。アートディレクターの森本千絵( @morimotochie )さんも参加して活発なやりとりが行われています。 活動のまとめサイト（ポスターやロゴがダウンロードできます。） http://www.ideaforlife.jp/ 節電ポスター http://setsuden.tumblr.com/ 節電を促進するためのポスターが集められた

販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！ 本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。 ちなみに出した企画はこちら。 ただいまWeb投票もしているので、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！ まずは販促会議賞ってなに？という人にご説明。 販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され そのどれかに応募するというものです。 企画をパワーポイントにA4サイズ10枚以内で、容量は5MB以内にまとめてくださいというルール。 誰でも参加可能、いくつでも提出OKです。 今回は、全27社から28課題出てました。 1.まずやったこと どうしたら勝てるか研究しました。 販促会議賞は第2回目だったので、1回目の受賞作品をざざっと拝見。 思ったこと 第１回の優勝者、

このフォームのポイント！ 上部のボックスでエラー表示 入力時にリアルタイムのエラー判定 それぞれのフォーム下部にエラー文言 項目名を赤く目立たせる

未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ

突然ですが、ペーパープロトタイプって知ってますか？ 実演ムービー 今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります！ これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。 ピンと来るやつが無かったので、作っちゃいました！ iPhone上で動く フルスクリーン対応（アプリによる） ファイルを開くだけなので、メールで送ったり共有も簡単！ 後からの追加、削除も柔軟に対応可能 デフォルトのUIを使わない場合のテストに真価を発揮します やり方は超簡単なので、今すぐに試すことができますよ！ 簡単なサンプルファイルも最後についてます！ それでは「続き」からどうぞー！ ペーパープロトタイプとは 新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階

連載企画「今年ありがとうを言いたい○○」 2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。 デザイナーズブログでは今年を振り返って、 それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。 第一弾は「今年ありがとうと言いたい『html5の本』」です。 それでは続きからどうぞ！ 徹底解説HTML5マークアップガイドブック タグが一つ一つ解説されています。 html5を勉強するならまず最初に読んでおくべき。 常に手元に置いておきたい1冊です。 HTML5&API入門 html5で何ができるようになったのかが広くまとめられています。 Google API Expertが解説するHTML5ガイドブック HTML5のAPIについての詳細な解説。 応用的な使い方も。 2冊目、3冊目に読んでおきたい本です。 HTML5＋CSS3で作る 魅せるiPhoneサイト 最近発売され

みなさん、こんにちわ！ いつも元気なbarimiです。 本社のある鎌倉は紅葉真っ盛り！真っ赤なもみじや、黄色のイチョウがかわいいなー♪とホンワカ見とれてしまう日々を送っています！ Kinect (キネクト)がキテル！ さてさて、11月20日にMicrosoftから発売されたKinect センサーがヤバい！ と盛り上がっているのですが、ここで簡単にKinectについてまとめてみました！ Kinectって何？ Kinectとは、Microsoftのゲーム機 XBOX 360の専用ゲームデバイスです。 最大の特徴は、コントローラーフリー。身振り手振りでゲームの操作が出来るのです。 Kinectの特徴 Kinect™ は、コントローラーを使わず、自分自身の体を使って直感的に遊べる、新しいエンターテイメント。Kinect センサーがプレイヤーの体の動きや声を認識して、直感的に誰でもすぐに遊ぶことがで

HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を

昨日、2010年12月1日、ついに IPサイマルラジオ「radiko」がついに本格サービススタート！ ワッショイワッショーイ！ てなこともあり、無料音声配信コンテンツが今最高にアツイ！と信じて疑わないgunjiです。 映像系サービスが大人気の今、なぜあえて音声だけがイイのか？ それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが ひとつは、コンテンツを配信する方・視聴する方　両方にとってハードルが低く、 別のことをしながら利用出来るということが挙げられると思います。 まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど 作業用BGMなら仕事の効率がアップすることもありますしね。 移動中も眠りながらも聞いていられますしね。 というわけで今回は国内外の、特にプレイヤー部分のUIが面白い 無料オーディオ系サービスをご紹介したいと思います。 「ながら利用」を加