Tags

閉じる

Category

閉じる

Search

Search

閉じる

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

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

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

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

秘密道具-fb.png

続きを読む

こんにちは、クライアントワークチーム、ディレクターのふかっちです。

今回は、カヤックが実施したイベントのご紹介です。

 

VOICE DRIVER CUP ~世界初!声でクルマが走るカーレース!~

「VOICE DRIVER」は、「モータースポーツのワクワク感を、すべての人に」をコンセプトにした、声でクルマを運転する世界初のモータースポーツ。カヤックは、プロジェクトチームの一員として、Webサイトの制作はもちろん、声で走るクルマのシステムづくりから塗装にいたるまで、さらにはコースづくりにも関わりました。

 

声で走るクルマの仕組みとしては、iPhoneのマイクに向かって声を出すと、それを感知したクルマ「日産フェアレディZ」のアクセルが発動し、全長60mのコースを疾走。声の大きさに応じてスピードが変わり、他レーンを走る参加者と競い合うことができるという内容です!

 

 話題を集めたメイキングやイベント模様の動画は続きから!

続きを読む

ゼロからゲームアプリつくった後の大事なメモ

こんにちは、ゲームチームのキノです。

先週、カジュアルゲームアプリ「なぞダン -なぞるだけダンジョン-」がApp storeで公開されました!!!!

ひとさしゆびだけの超シンプルな(でもムズイ)ダンジョンゲームです!

thm01.png  thm03.png

過去にキャンペーンの一環などでゲームは何度かつくってきましたが、
今回が初の企画段階からのモック含めた参加になるので、学んだことや役立ったを書いておきます。

あとは地味にデザイナー向けにアプリ制作のtipsなど。

意外と長くなってしまったので、週末にじっくりお読みください〜

 

m1.png アプリは無料!!こちらからダウンロードできます。

 

それでは記事の続きをどうぞ〜!!


 

続きを読む

iOS4.2からSafariで加速度センサーを使うことができるようになりました。

モンハンの予約を逃していつ買えるのかとヤキモキしているME課の比留間です、こんにちわ。

さて、つい先日アップデートされたiOS4.2。このアップデートでMobile Safariから加速度センサーをJavaScript経由で利用することができるようになりました。使い方は簡単で、以下のようにするだけで加速度の値を取得することができます。

続きを読む

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。

最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません)

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhoneで実際に見るとこんな感じに見えます↓
iPhoneで表示したiPhone風UIのキャプチャ

iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV

1要素1クラスで実現する

今回のサンプル作成でこだわったのは、1要素に1クラスを指定することでiPhone風のUIを実現することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

a要素をiPhone風ボタンにする

<a href="#" class="btnTypeA">ボタンタイプA</a>

実際に上記を表示すると以下のようにすぐボタンっぽい外観に変わります。↓
灰色のiPhoneボタン風のスタイルになったa要素

iPhone風リストA

<div class="listIPhone listTypeA">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeA --></div>

実際に上記を表示すると以下のようにリストスタイルになります。(1要素1クラスを意識していますが、ベースとなるものが同じで、異なる外観の場合は2クラスに分けて複数の見た目を制御できるように実装しています)
iPhone風リストスタイルのキャプチャ
また、「削除ボタン」はややイレギュラーなもののため、いくつかクラスを追加しています。リスト中のa要素は基本、横100%のリンクになってしまいますが、例外的に「noListLink」クラスを追加することで回避しています。
さらに通常時は表示されない要素、ということで、「floatBtn」クラスを付けることで、左は時に表示されるようにしています。

iPhone風リストB

<div class="listIPhone listTypeB">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeB --></div>

実際に上記を表示すると以下のようにリストスタイルになります。
iPhone風リスト。リスト右端に丸い矢印マークがあります
もちろん、右端にある青い丸矢印も画像は使っていません。

見出し部分も画像なし

そして今回、ちょっとこだわった部分がタイトル左横にある矢印型のボタンです。
当初はこういう形は画像使わないと無理かなーと思っていたんですが、そこそこ見れるものが作れました。(ただ、やっぱり若干標準のUIと比べると形がいびつです)
ソースもかなりシンプル。

<div class="toolbarBox">
<h1 class="toolbar">CSS3 UIテンプレート</h1>
<nav>
<ul>
<li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li>
<li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li>
</ul>
</nav>
<!-- /.toolbarBox --></div>

見出し部分のキャプチャ。左横の矢印ボタンもCSSのみで実装

作ってみた感想

意外とがんばればなんとかなるな、というのが感想でした。
標準UI以外にも、これくらいのデザイン性のものであればCSSのみで実現できてしまうので、iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
(もともとは、CSSを使って画像を使わずにデザインを実装する、というのを書こうと思ったのが発端だったので)

ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみに今回のサンプルは、個人のブログで公開しているCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。→Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

そしてカヤックでは、こんなiPhone風CSS3が大好きなマークアップエンジニアを募集中です!

WEBデザイナー向け☆iPhoneアプリのUIデザイン

どーもキンモクセイぷんぷん香る自由が丘からaoizmです。
秋満開!スマートフォンまっさかり!(強引)
KAYACでもiphoneアプリ制作のお仕事が増えてきております。
WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。
画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。
その違いを認識した上で、違いを活かしたデザインをするためには?
iPhoneアプリのUIデザインまとめてみました。

続きを読む

抜き打ち!デザイナーのiPhoneホーム画面!

こんにちわ!いつも元気なbarimiです。

みなさん、iPhoneユーザーですか?カヤックはiPhoneアプリ制作も多いことから、そのほとんどがiPhoneユーザーです。

そこで、カヤックデザイナー達の意外と個性の出るiPhoneのホーム画面を集めてみました!
どんなアプリが入っているか気になりますよね。

続きを読む

iPhone + iPod touch 壁紙

発売され、様々な人を魅了し続けるiPhone。そんな中、わが社でもiPhoneに魅了された社員がちらほら。
かっこいいiPhoneをさらにかっこよくしてみませんか?
ということでiPhoneの壁紙コンテンツを制作しました。是非、ご活用ください
(ちなみに、サイズが一緒なので iPod touch の壁紙にも使えます。)

続きを読む

警告とメッセージ