「5秒でわかる」を作る！ハイパーカジュアルゲームのデザイン - 意匠部

2023/07/13 130 users ハイパーカジュアルゲーム 越後 デザイン 5秒 テクニック

こんにちは！意匠部の越後です。 僕は今ハイパーカジュアルゲームという、超シンプルなゲームを作っています。 この記事では、超シンプルなゲームだからこそ必要な初めて見た人が遊びを理解するスピードを上げるためのテクニックを紹介できればと思います。 ハイパーカジュアルゲームってなに？ とはいえ今回は初回なの... 続きを読む

【トリビア】：資生堂の美意識が詰まった「資生堂書体」って知ってる？　100年近く手書きで社員に伝承してるらしいぜ！ - ねとらぼ

2014/04/03 200 users 書体 美学 トリビア 資生堂 資生堂書体

化粧品メーカーの資生堂が、同社が100年近く伝承している独自の書体「資生堂書体」を動画で紹介していました。同社の美意識が込められた書体であり、長年、同社のデザイナーが手書きで伝承しているらしいです。 資生堂書体は、1916年の意匠部（現在の宣伝・デザイン部）設立とともに「資生堂の美学と精神性を表現する」フォントとして誕生し、資生堂のポスターやパッケージを長らく彩ってきました。現在でも、同社に入社し... 続きを読む

どう考えても無茶な「CSSプログラミング」が話題に | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/06/22 973 users カヤック KAYAC DESIGNER Blog 無茶 話題

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます... 続きを読む

HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき） | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/05/31 633 users カヤック KAYAC DESIGNER Blog ハロこん

4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い... 続きを読む

SVG女子を90%軽くしたSVG軽量化テク+α #svggirl | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/04/25 240 users SVGアニメーション ラスベガス あいつ アニメーション 必見

あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神... 続きを読む

2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/04/21 138 users SVG カヤック KAYAC DESIGNER おさらい 疑問

MIX11で「SVG女子」が紹介されました！ 弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。 こちらがその様子です。 日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。 それでは続きからどうぞ！ SVGの気になる疑問に答えます！ SVGって何？ SVG（Scalable Vector Graphics）... 続きを読む

初めての企画書が、最終選考に残った　アイデアの出し方 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/03/02 740 users カヤック KAYAC DESIGNER Blog アイデア

販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！ 本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。ちなみに出した企画はこちら。まずは販促会議賞ってなに？という人にご説明。販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され そのどれかに応募するというものです。 企画をパワーポイントにA4... 続きを読む

ユーザーを逃さない！海外Webアプリの入力フォームいろいろ | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/02/25 139 users カヤック KAYAC DESIGNER Blog ユーザー

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

iPhoneデザインで役立ったツールまとめ | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/02/24 107 users カヤック KAYAC DESIGNER iPhone 遷移

未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょうマインドマップで遷移図を整理iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによ... 続きを読む

地獄のミサワがCSS3の勉強に最適と話題に | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/02/15 397 users ミサワ カヤック KAYAC DESIGNER canvas

CSS3に興味はあるけど、きっかけが無いなあと思っている方へこんにちわ、jsdo.it担当のふちがみです。最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。「それ2年ぐらい前に見たわー」という方も続きからどうぞ！一瞬でわかるまとめフロントエンジニアたちが地獄のミサワに夢中 - togettercanvasで描かれたミサワ 続きを読む

今年ありがとうを言いたい「html5の本」5+1選 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/12/21 311 users カヤック KAYAC DESIGNER 一つ一つ Blog

連載企画「今年ありがとうを言いたい○○」 2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。 デザイナーズブログでは今年を振り返って、 それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。 第一弾は「今年ありがとうと言いたい『html5の本』」です。 それでは続きからどうぞ！ 徹底解説HTML5マークアップガイドブック タグが一つ一つ解説されています。 html5を勉... 続きを読む

HTML5でつまずきやすいasideとsectionの使い方 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/12/20 514 users section 縁起物 aside コーディング 久保田

HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに... 続きを読む

大量の画像をサクサク処理するためのエントリまとめ | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/12/01 397 users カヤック KAYAC DESIGNER Facebook

大量の画像を書き出す場面に遭遇して( ꒪⌓꒪)ってなるのはWEB屋の宿命のようなものですが そんな書き出しを一瞬でもはやくやっつけたい。 むしろやりたくない。なにもかも機械に任せたい。 機械がやってくれてる間にはとサブレ食いながら優雅にFaceBookをたしなみたい。 そんなめんどくさ効率を追求するために調べたまとめです。 なにかお役に立つものがみつかればうれしいです。 書き出しをとにかく速くした... 続きを読む

いま読むべき、クリエイティブWEBマガジン10選 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/11/24 800 users カヤック KAYAC DESIGNER Blog デザイン

カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディ... 続きを読む

ログイン画面の離脱率を下げる！ECサイト各社の工夫 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/11/19 384 users カヤック KAYAC DESIGNER nonaka 離脱率

こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：B... 続きを読む

Facebookファンページ、デザインのまとめ！ | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/11/01 391 users カヤック KAYAC DESIGNER Facebook

11月ですね！今年も残り2ヶ月！ 本社のある鎌倉は紅葉の季節にさしかかり、いい景色に元気をもらっているbarimiです！ Facebookって流行って…る？！ ってことで、私も先月からぼちぼち使いはじめました！ …が、ファンページってどうやってつくるの？とかデザインってどんなのがあるの？ などなど、まだまだ分からないことが沢山。 そこで今回は、デザインがかわいいファンページや、デザインギャラリーサ... 続きを読む

metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/10/27 435 users Facebook 仕組 カヤック Facebook中毒 ME課

Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できる... 続きを読む

ところでiPadアプリってどうやって作るの？てなったときに読む記事 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/10/01 335 users カヤック KAYAC DESIGNER iPhone 縦横

こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があ... 続きを読む

今日からCSS3アニメーションを使えるようになるチュートリアル | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/09/26 351 users カヤック KAYAC DESIGNER チュートリアル

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示さ... 続きを読む

CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/09/21 492 users インターンシップ 自由が丘 カヤック 面白法人カヤック

インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹... 続きを読む

JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/09/09 527 users カヤック KAYAC DESIGNER jsdo.it 知識

jsdo.itではInternetExplorerやFirefoxなどのWebブラウザだけでコードが書けちゃいます。 続きを読む

デザイナー必見！ポータルのポータル【モバイルデバイス編】 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2010/08/25 368 users カヤック KAYAC DESIGNER ポータル Blog

歴代人気記事でも上位の ポータルのポータル。 今回は、iPad・iPhone・携帯サイトなど モバイルデバイスのデザインギャラリーを集めてみました！ それでは続きからどうぞ。 iPad・iPhone Landing Pad ー an iPad App Gallery 綺麗なiPadアプリがたくさん掲載されています。 iOSpirations iPad/iPhoneのアプリやサイトデザインが紹介され... 続きを読む

誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT

2010/07/14 789 users 比留間 メーラー 種明かし ニュ 面白法人カヤック

一撃デザインの種明かし（12） 誰でも作れる！ “崩れない”HTMLメルマガ作成術 面白法人カヤック 意匠部 ME（マークアップエンジニア）課 比留間 和也 2010/7/14 よく使われているメーラーを対象に注意点やコツを紹介しながら、初心者でもある程度問題のないHTMLメールを作る方法を紹介します キレイなHTMLメールを作るコツ/Tips盛りだくさん！ ECサイトはもちろん、企業サイトのニュ... 続きを読む

新人Webデザイナに贈る！ 美人/タレント素材の創り方（1/3）- ＠IT

2010/06/02 193 users 美人 創り方 種明かし 顔写真 面白法人カヤック

一撃デザインの種明かし（11） 新人Webデザイナに贈る！ 美人/タレント素材の創り方 面白法人カヤック 意匠部 西川紘平、市川葵 2010/6/2 いま話題の“美人”“美女”やタレントを扱ったWebキャンペーンコンテンツの写真素材作りの基礎、そして現場で使えるテクニックを説明します 顔写真を使ったWebコンテンツ制作の基礎知識 新人Webデザイナの皆さんも研修を終えて、そろそろ制作現場で実作業に... 続きを読む

canvasでキラキラした背景を作る方法 | tech.kayac.com - KAYAC engineers' blog

2010/05/14 380 users canvas KAYAC engineers 野郎 属性 ボク

tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3... 続きを読む