Are you the publisher? Claim or contact us about this channel


Embed this content in your HTML

Search

Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog


older | 1 | .... | 3 | 4 | (Page 5) | 6 | 7 | .... | 12 | newer

    0 0

    残り3ヶ月切りました!

    あっという間に秋ですね。秋の夕日が綺麗で、ますます元気が出ているbarimiです。

    電機/ITの見本市、CEATEC開催中とあって、携帯関連も盛り上がっている今日。
    その中でも、1番熱いのではないかとおもう、Android掲載携帯、国内外のキャンペーンサイトをまとめてみました。

    そろそろ機種変したい!なんて思っている方は参考になるのではないでしょうか?

    GALAXY S

    android_sumsung_galaxys.png

    コマ撮りのような表現が面白い、SAMSONのGALAXY Sのキャンペーンサイト。
    各シチュエーションごとに、使い方の提案をしていますが、横スクロールを使うことでつながりを持った見せ方になっています。
    また、静止画の連続ではなく、微妙に動画をいれているので、動きや柔らかさが出ていると感じました。

    GALAXY Tab

    android_sumsung_galaxytab.png

    こちらはタブレット。
    タブレットを歩きながら使うシーンを上から撮ったような画面構成。
    床の色や、素材で屋外か室内なのかを表現しているところがポイント。
    ただ前方注意!と声を掛けたくなりますね。

    Android au

    android_au.png

    au全体のAndroidキャンペーン。
    Twitterの発言と連動しているところがユニークです。

    XPERIA

    android_xperia.png

    パーティクルのローディングが印象的なキャンペーンサイト。
    動きが快適で、サクサクしていて気持ちがイイですね。

    LYNX

    android_lynx.png

    イラストを使った柔らかい印象のサイト。

    シチュエーションごとに、カラフルなイラストを使い説明しているのがポイントです。

    ソーシャル連携いっぱいの製品紹介ページ!

    携帯電話の商品サイトを見ていると、やはりソーシャル連携が目立っていました。

    android_softbank_product.png

    softbankの詳細ページはTwitterを押しているだけあって、関連Tweetを表示していますね。

    android_xperia_product.png

    よく出来ていると思ったのは、Sony Ericssonの製品ページ
    ソーシャルボタンがあるのはもちろん、Facebookと連携をしています。
    今後は、あなたの友達もこの携帯持ってますよ!なんで出るようになるんでしょうか。

    Android搭載の携帯はここでチェック!

    今どんなAndroid携帯があるんだろう?と、気になったらGoogle先生に聞く、、、のではなく、下記のページを見ると便利です。
    すべてのプロダクトと、国別で出ているAndroid携帯がチェックできますよ!

    android_google.png

    年内いっぱい、採用強化キャンペーンやってます!

    夕日がとても綺麗な鎌倉に、移住してみませんか?
    海と山に囲まれた中で、今熱いAndroidアプリ、ソーシャルアプリなどのデザインをしてます!

    興味がある方は、こちらをクリック


    0 0

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

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


    DREAM FACTORY リンテック 夢をつなぐサイト

    okabe_101007_01.jpg

    ちまちま歩くペンギンとシロクマ。ロゴから出てくる色んな人(とか物とか動物とか)たち。
     

    SOUVENIR FROM TOKYO

    okabe_101007_02.jpg
     
    ショッピングカートのカートがキャラクターに!動きも色々バリエーションあって楽しいです。
     

    CocoBongo

    okabe_101007_03.jpg

    ロゴが遊んでます。

    WILD Advertising & Marketing

    okabe_101007_04.jpg

    手書き風アニメーション。ページが変わるたびに楽しい。

    Christian Louboutin official web site.

    okabe_101007_05.jpg

    ナビゲーションのところにいる靴がコツコツ動きます。
    コツコツ音も鳴ってます。

    年内いっぱい採用強化キャンペーン実施中!!

    kayacではちょっとした遊びのあるデザインがしたいデザイナー&マークアップエンジニアを募集中!


    0 0

    子供のような大人のような子供のような大人、ねじです。

    私はブッコミキッズというチームで、日々キッズ向けのサービスを作っておりますが、調べていくと、赤ちゃん向けのアプリはけっこう充実しているようです。 本日はママの方へ、そしてこれからママになる方へ、そして赤ちゃんのようなどうしようもない大人を知り合いにもつ方へおすすめの、赤ちゃんアプリをご紹介します!!!

    アプリはたくさんあるので、その中から厳選して、私の独断と偏見によってBEST3を決めさせて頂きました!

    【第3位】ベイビーを狂わせる、魅惑の知育アプリ!!

    nezi_101007_3.jpgnezi_101007_4.jpg

    まず第3位はこちら。
    画面をタッチすると、かわいい音とともシンプルな図形が次々に現れるだけのアプリです。でも、そのシンプルさゆえに、赤ちゃんは熱狂するそうです。家にある 玩具にも飽きはじめた息子に、このアプリを買い与えてあげましょう。これ大人に使ってもいいんですかね?仕事で追いつめられて泣きそうな同僚がいたとき、イライラ解消に使わせたいです。(iPad版もおすすめです!)
     

    ダウンロードはこちらから

     

    【第2位】全赤ちゃんが泣いた!赤ちゃんの泣き声翻訳!!!

    nezi_101007_5.jpgnezi_101007_6.jpg

    続いて惜しくも優勝は逃したものの、これはすごいです。
    赤ちゃんの泣き声を“翻訳”してしまうiPhoneアプリ。2歳児までの赤ちゃんの泣き声を10秒間録音すると、10秒以内に解析して、泣いている理由が「空腹」「ストレス」「退屈」「不快」「眠気」の5つうちどれか教えてくれるそうです。スペインの会社が「赤ちゃんの泣き声を理解す るという長年にわたる研究の成果」をもとに開発したもので、母語や文化に関係なく、どんな赤ちゃんでも使えるというから驚き。お値段は1200円とちょっとお高めですが、赤ちゃんの気持ちが分かるなら安いもんですよね?

    ダウンロードはこちらから

     

    【第1位】きてるぜ未来!21世紀のガラガラ!!!

    nezi_101007_1.jpgnezi_101007_2.jpg

    おめでとうございます!栄えある第1位を獲得したのはこちら!
    古来より赤ちゃんをあやすために用いられてきた乳児用玩具、通称「ガラガラ」。これをiPhoneらしさを120%に活かして作られた秀逸なアプリです。 iPhoneをブンブン振ると、赤ちゃんが泣き止むように工夫された気持ちのいい音と、心地いいビジュアルが優しいハーモニーを奏でてくれます。外出中に赤ちゃんがグズったとき、あやす玩具をもっていなくても大丈夫。iPhoneを取り出し、そっと鳴らしてあげましょう。また、仕事で追いつめられて泣きそうな同僚がいたときにも、そっと鳴らしてあげましょう。きっと泣き止むはずです。

    審査員コメント:
    シンプルな発想ながら、そのクオリティの高さに脱帽。ずっと持っておきたくなる気持ちになりました。

    ダウンロードはこちらから

     

    年内いっぱい、採用強化キャンペーンやってます!

    海と山に囲まれた気持ちのいい鎌倉。子育てするにも、デザインするにも最適な古都に、移住してみませんか?
    今もっとも熱いAndroidアプリ、ソーシャルアプリなどのデザインができちゃいます!!

    興味のある方はこちらをクリック!!

     

    敷金・礼金 全額負担 鎌倉移住キャンペーン、Webデザイナー・マークアップエンジニアも応募可能に!


    0 0

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

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

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

     


    Tシャツのデザインを自分で考えて、WEBサービスを通じて売るというシンプルなことですけど、
    実は各WEBサイトではそれにオリジナリティを色々と加えています。

    T-SELECT(http://t-select.livedoor.com/

    Tシャツコミュニケーションサイト

    T-SELECT

    Tシャツのデザインを応募すると、一定期間にサイト上で掲載され、
    期間内に受注が一定数集まれば販売出来るというシステム。
    買う人が多いと値段が下がるという特徴もあります。

    tegat(http://tegat.jp/

    手書きでTシャツを作ろう

    tegat

    サイト上にあるFLASHカンバスで直接手書きのデザインが出来ます。
    すぐ出来ちゃう、手書き感たっぷりな感じが面白いです。
    あと、作品に対して気軽にコメントが付けられます。

    DESIGN GARDEN(http://designgarden.jp/

    オリジナルTシャツのデザインガーデン

    DESIGN GARDEN

    自分のブランド的なものを登録して、テンプレートをダウンロードして、Tシャツを売るサイト。
    プリントTシャツ以外に、タンブラー、マグカップやポストカードなどのデザインも提供出来ます。
    アフィリエイト会員登録枠というのもあります。

    Club T(http://clubt.jp/

    オリジナルTシャツプリント・コラボデザインTシャツ

    Club T

    デザインのカスタマイズも可能なMyショップの開設が出来ます。
    Tシャツ以外の商品は多数(服、iPhoneケース、時計など)。

    UPSOLD(http://www.upsold.com/

    デザインTシャツとオリジナルグッズストア

    UPSOLD

    Tシャツだけでも種類が多いけど、Tシャツ以外でもデザイン出来る商品はかなり多いです。
    Tシャツの色のバリエーションも多数。
    自分の出したTシャツは携帯サイトでも掲載出来ます。

    T-Shirts Trinity(http://www.ttrinity.jp/

    デザインTシャツを買って、作って、売って楽しむ

    T-Shirts Trinity

    ECサイト感がとても高いサイト。商品の金額がある程度自由に決められます。
    違う感じのデザインを出したい場合などは複数のSHOPの登録が出来ます。


    サービスも、機能も多くて、自分のデザインをWEBで簡単にアピール出来る時代になっています。
    こういう参加型サイトは自分のデザインの練習用にも使えますし、
    自分のアートの展示の場としても使えます。
    そして、もしかしてお小遣い稼ぎまで出来ちゃいます。

    ただ、時間がないとなかなかデザインの提供が出来ないから、忙しいデザイナー
    よりは、デザインを勉強してる学生の方が楽しめるかもしれません。


    年内いっぱい採用強化キャンペーン実施中!!

    kayacでは、物づくりが好きなデザイナー&マークアップエンジニアを募集中!


    0 0

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

    WEBサイトとiphoneアプリの違い

    iphoneui_situation.png
    1. 状況
      持ち歩けるがゆえそのシチュエーションもさまざま
      「会議で」「合コンで」「移動時」「就寝時」...
    2. 状態
      そのときユーザーはなにをしている?
      「歩きながら」「話しながら」「運動しながら」...
    3. 使い方
      ユーザーは片手で使うのか両手で使うのか?
      使う指からその可動領域まで考慮したデザインが必要です。
    4. iphoneui_area.png
    5. WEBページのように画面全体で見せるだけでなく 触って使う画面であること
    6. ピンチインアウトやスワイプなどのiphone特有の操作方法を考慮する
    7. 一度に一画面。出来る操作が限られる
    8. 指は思いのほかでかい
    iphoneui_view.png

    以上のことから、マウスやキーボード操作を前提としているWEBサイトよりも、むしろプロダクトにも近い、 より直感的な操作性が求められることがわかります。
    では具体的にどんなデザインが必要とされるのでしょうか?

    iPhoneヒューマンインターフェイスガイドライン

    iphone開発の必読ドキュメント。
    appleがどのような意図を持ってiPhoneのインターフェイスを作り上げているのか。インターフェイスデザインに押さえておくべき考え方がまとめられています。UI設計の視点からも非常〜に勉強になります。

    iPhoneヒューマンインターフェイスガイドライン

    ペーパープロトタイピング

    iPhoneアプリでは、手の位置や指の大きさなど、ユーザービリティ、インタラクティブデザインを実際に肌で感じることができるペーパープロトタイピングがおすすめです。 以下のようなツールも利用してみるといいかも。

    iPhone UI sketch sheets

    実寸のiPhone画面デザインシート

    Stainless steel stencil

    iphone画面のスケッチブックや基本的なパーツを描けるステンシルも売られてます。

    アプリデザイン参考サイトのまとめ

    iphoneアプリのデザインには実際にたくさんのデザインを見て使ってみることが1番です。
    なかでもおすすめなのはiPhoneアプリのUIに特化してまとめられていたサイト。膨大な数のアプリUIが集められています。

    TappGala

    iphoneui_01.jpg

    Well-Placed Pixels

    iphoneui_02.jpg

    TapFancy

    iphoneui_03.jpg

    29 Sexy iPhone App Designs

    iphoneui_04.jpg

    30 iPhone Apps with Sexy Interfaces

    iphoneui_05.jpg

    21+ Essential iPhone Apps with Sexy Interfaces

    iphoneui_06.jpg

    21 Fantastic iPhone App Designs

    iphoneui_07.jpg

    Convert - the unit calculator

    iphoneアプリのデザインプロセス(動画)。
    最終的なデザインに辿り着くまでに、何度も試行錯誤が繰り返されているのが見て取れます。

    iPhone App Design Trends

    アプリデザインのトレンドまとめ。
    こちらのサイトで日本語訳版を公開されているようです。
    デフォルトのUIに似せたデザイン、リストを使ったデザインなど、ガイドラインを元にしたユーザーを迷わせることなく操作しやすいUIが多いようです。

    iPhone Apps Design Mistakes: Over-Blown Visuals

    アプリデザインでやりがちな落とし穴のまとめ。


    iphoneデザインギャラリーはこっちの記事でもたくさん紹介しています。

    KAYACではiphoneアプリをつくりたい!というデザイナーやMEを絶賛!募集中です!

    しかも今だけ!年内いっぱい採用強化キャンペーンやってます。興味のある方はぜひ☆


    0 0

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

    Saatchi & Saatchi よりTOYOTAのCM

    http://www.saatchi.com/en/our_work/ideas_gallery/toyota_hsd_better_together

    二人羽織のオチが最後にわかります。なるほどね〜。

    楽しいキャンプのはずが…

    建物が大変なことに…

    パラパラ…マンガ…?

    parkour motion reel from saggyarmpit on Vimeo.

    アニメーション制作には頭が下がります。こんなのもありましたね。

    動力は風!

    Animaris Umerus - Part 2 from Alexander Schlichter on Vimeo.

    アーティスト theo jansenさんの作品です。これが風力で動くなんてすごい!


    年内いっぱい採用強化キャンペーン実施中!!

    kayacでは、物づくりが好きなデザイナー&マークアップエンジニアを募集中!まだまだ間に合いまーす!


    0 0

    親知らずをノリで抜いたらしばらく痛み悶えることになってものすごく後悔したくにーです。こんにちは。

    さて、2011卒就職活動時期の直中ですが(カヤックでは2011卒の方のご応募をカヤックサイトより受付中です)
    受け入れる側としては、そろそろ2012卒の採用サイトも準備しなくては…
    というよりもよく見たら、もうすでに出そろいつつあるシーズンですね。

    そんなワケで今回は2011年までの色んな採用サイトをピックアップして振り返ってみました。
    それでは続きからどうぞ〜
    ※カヤックの採用情報は記事の一番下に載せています。(新卒 / 中途 / 物販 / 飲食 / サービス別のご案内)
     

    採用サイトいろいろ。

    TFC RECRUIT 2009 | 東北新社 2009年度新卒採用サイト

    10.png

    CMができるまでを絵コンテ風にみせています。
    左下の「すたっふぅ〜」が気になりました。
     

    HAKUHODO I-STUDIO RECRUIT 2011

    13.png

    オープニング?と思いきや、紙に書かれているメニューが
    そのままクリックできるようになっています。
     

    T A G B O X | RECRUIT 採用サイト | Tokyu Agency Inc.

    04.png

    社員のインタビューを箱をころがす→うけとるの動線でみせています。
     

    株式会社ドリコム2010イベント | 2011年度新卒採用サイト

    15.png

    まずフィボナッチ数列の問題を解かないと先に進めません。
     

    SonyMusic™ 新卒発掘オーディション2011

    09.png

    就職活動をオーディションとして表現しています。
    オープニングムービーが華々しい。
     

    DAIKO Creative Workshop2010 クリエイティブじゃんけん

    05.png

    こちらはワークショップ参加者向けのサイト。
    テンションの高いじゃんけんコンテンツです。
     

    IMJ | IMJ GROUP RECRUIT 2011

    06.png

    つらぬく人、やりぬく人、うみだす人をテーマにしたメッセージが流れます。
    関連したメッセージがつながるインターフェース。
     

    株式会社 電通テック 採用サイト | かたちつくる

    14.png

    キーワードをいれると、点と線で表現してくれます。
    ひっぱったりもできます。
     

    CCCグループ2010年度新卒採用サイト

    07.png

    3つのポイント→企画のみせかたがキャッチでみやすいサイトです。
     

    SEプラス Webディレクター採用コンテンツ|GROWING UP WITH SEplus

    08.png

    Web業界に飛び込む最初の状態「ハダカ」から
    webディレクターになるまでの「あなたスタイル」をそれぞれ別の服装で表現しています。
     

    京セラミタ|新卒採用情報 RECRUITING 2010 Special site

    16.png

    仕事の様子をチラみせした動画系コンテンツを
    なめらかに繋いで見せています。
     

    住友電工 RECRUITING WEB SITE FLASH

    17.png

    横に流れるピクトグラムがかわいいサイト。
    技術が「アル」世界(左)と「ナイ」世界(右)にわかれています。
     

    2011 DENTSU RECRUIT

    18.png

    一人一人からの骨のあるメッセージが表示されます。
    色とりどりの名刺の動きがとてもきれいです。
     

    ソニックジャムパン | 株式会社ソニックジャム 採用サイト

    19.png

    スタッフもみんなパンで紹介。
    このパンは手づくりなんでしょうか。
     

    ちなみに過去のカヤック採用サイトはこんなでした。

    面白法人カヤック 2011年度新卒採用企画 社員の「消えない話」

    01.png

    みんなの記憶に残ってほしいという願いをこめて
    記憶から消えないようなイイ話を社員が披露。
     

    カヤックDAN数:面白法人カヤック2010新卒採用スペシャルコンテンツ

    02.png

    カヤックにまつわるあれこれを数字にからめて
    楽しくクイズでご紹介。
     

    面白法人カヤック 2009年度新卒採用企画 FIND FAKE

    03.png

    ニセモノ社員を制限時間内にさがせ!
    ちなみにホンモノ社員の中で一番ニセモノとしてクリックされたのはこの人でした。

    2012年新卒採用サイトもお楽しみに!

    そして、

    カヤックでは一緒に面白いサービスをつくりたい人を募集中です!

    一緒に働きたい!新卒採用はこちら

    2011年3月に4年制大学や専門学校等各種学校を卒業(見込み)の方、海外の大学に在籍中の方や大学院を修了見込みの方、また、既に4年制大学を卒業して就業経験のない方もこちらからご応募ください。
    ※2012年卒の方の応募受付はまだ始まっていません。もうしばらくお待ちください。


    年内いっぱい採用強化キャンペーン実施中!
    プログラマー・WEBデザイナー・マークアップエンジニアの方お待ちしております!

    只今カヤックでは『稲村ヶ崎R不動産』とコラボして、「鎌倉移住キャンペーン」を実施中です!
    敷金・礼金を全額カヤックが負担!これを機に、食べ物がおいしい!海も近い!歴史や季節を感じられる!鎌倉で、
    のびのびとサービスをつくりませんか?


    運営管理STAFFを急募!物販が好きな方はこちら

    ART-Meterは、画家が描いた1点モノの絵画を測り売りで販売するサービスです。
    新しいコトを生み出していきたい、アートを軸にしたイベントを開催してみたい、
    ものをつくるのがとにかく好き、そんな方々大歓迎!
    只今運営管理STAFFを募集中しております。


    オープニング&既存店スタッフ募集!飲食店で働きたい方はこちら

    鎌倉若宮大路沿いにある"どんぶり"をメインにしたカフェ「bowls」もおかげさまで3年目。
    地の利を活かして昨年は鎌倉に海の家を出店し、今年、12月に新業態を予定しております。
    キッチンのマネージャー候補の方には地場の新鮮食材を使った新メニューの考案や、
    将来的には商品開発や仕入先の開拓、飲食事業の中核メンバーとして活躍していただきたいと思います。
    一緒に店を盛り上げてくれる仲間を待っています!


    プロジェクト別求人速報できました!

    こえ部、ソーシャルアプリ、ギブ&ギ部などなど
    このサービスをつくりたい!運営したい!というこだわりのある方はこちらをご覧下さい。
    空き枠が随時更新される予定です。

    皆様のご応募をお待ちしております!


    0 0

    ポケモンでまだ一度もトリックルームという技を使ったことがありません。shiihoです。
    ということで今回はトリックムービー特集です。
    これどうやって作ってるんだろうとか、おーなるほどねぇとなるようなムービーを特集します。

    意外とマンパワー編

    Carousel - Phillips

    Philips社による21:9のテレビ訴求のための動画です。
    2009年度のカンヌグランプリで話題になりましたね
    登場人物が静止している状態でアングルがグワングワン変わります。
    やっぱり合成してるのかなーと思いきや
    メイキングを見ると人は最後まで静止した状態で撮影がされています。
    弾丸や細かいパーツなどを後で合成しているようです。

    CANON - Freeze Tag

    カメラで激写すると、人がフリーズして止まってしまうというムービー。
    初めて見たときは鳥肌がたってしまいました。
    こちらもメイキングを見ると同じ場所を何テイクも重ねて撮影しています。
    監督は僕と同じ1986年生まれのSaman Keshavarzさん。
    いやー世界は広い

    分身編

    Seaweed

    Seaweed from Tell No One on Vimeo.

    ロンドン発の実験映像。
    腕の部分がどんどん分身をして海藻のような形になっていきます。
    こちらは分身した後でも微妙に動いてるなど、本当にトリッキーです。

    Kylie Minogue - Come Into my world

    shiiho_101015_kylie.jpg

    埋め込みタグが無効になっているのでこちらからどうぞ
    女性がなんとなく町中を歩いているのですが、いきなりもう一人の自分が登場
    あれあれ、と見ているとさらにもう一人登場。最終的には4人登場します。
    というカイリー・ミノーグのPVです。 一人目の落とし物を二人目が拾うなど演出もいいですね

    二回見たくなる動画編

    Test Your Awareness: Do The Test

    ちょっと前にはやった二回見たくなる動画です。
    白いチームが何回ボールをパスしたかという映像です。さて何回パスしたでしょうか?
    なぜ二回も見たくなるのかというと・・・見てからのお楽しみです。

    Test Your Awareness : Whodunnit?

    どうやら人が殺されたらしいというシチュエーション。探偵が犯人を推理します。
    こちらも二回見たくなるトリックが含まれています。おおなるほどー。へー となってしまいました。

    まとめ

    こうやって見てみると様々な試行錯誤やアイディアが詰まっています。
    いくつかFlashの演出やバイラルの参考などにもなりそうです。
    WEBでもトリッキーなデザインをどんどん提案していきたいですね


    0 0

    Photoshopの秋 run 時短の秋 runrunrun

    ひぶたポケモンが進化しておおひぶたポケモンて。セキネです。
    みなさんショートカットは好きですか?ぼくはどっちかというと好きです。
    そこで、今回は王道ショートカットではなく、知っておくと実は使えるflair/知っていても使うまでいかないcool/ボタン押した方が早いじゃないかdashというようなちょっとB級臭のするショートカットや小ネタを紹介します。ちなみにB級かそうでないかは独断と偏見で選んでます。そのへんよろしくお願いします。
    目指せ、カンバス以外非表示系男子。

    ※Macキーボードでの記載となります。Windowsの方はCommand→Ctrl/option→altへと脳内変換をお願いします。
    ※OSやバージョン違いによって差異があるかもしれません。

     


    ツール

    まずは意外と使いこなせていない人が多いツール切り替えショートカット。
    ツールパレットまで移動する時間を省ければ全体で大きな時間短縮となります。
    移動ツール(V) / なげなわ(L) / 文字(T) / 長方形(U) / ペン(P) など(人によって差はありますが)、よく使うものは最低限おぼえておくと良いと思います。
    ちなみに+shiftで長方形→角丸→楕円形のようにツール内切り替えが出来ます。

     

    ポイントくん:( ・ิω・ิ)つ「基本的に暗記。あと音声注釈ツール( [Shift] + N)という機能があったりするよ!」

     


    整列系

    使用頻度が高い整列です。
    「整列ボタン普通に押すわ」という声が聞こえますが、ショートカットした方がかっこいい。
    ここをマスターすれば、複数のオブジェクトの配置を自在に操るキモい人に。(良い意味で)

    cancer右揃え
    [cmd] + [Shift] + R

    cancer左揃え
    [cmd] + [Shift] + L

    cancer上揃え
    [cmd] + [Shift] + U

    cancer下揃え
    [cmd] + [Shift] + B

    cancer中央揃え(垂直)
    [cmd] + [Shift] + C

    cancer中央揃え(水平)
    [cmd] + [Shift] + M



    ポイントくん:( ・ิω・ิ)つLeftとかCenterとか頭文字なので覚え易いよ!」

     


    反復系

    前に行った動作を繰り返すコマンドは意外とあるので探してみると面白いです。
    ここらへんをうまく使うとかなりの高速化に繋がります。

    cancer前回の選択範囲を再表示
    [cmd] + [Shift] + D

    cancer前回と同じ変形を適応する
    [cmd] + [Shift] + T

    cancer前回と同じフィルタ効果を適応する
    [cmd] + [Shift] + T

    cancer前回と同じ数値で色調補正を実行
    [Option] + [cmd] + 各色調補正キー

    繰り返し系で一番頻度が高いのは色調補正系のコマンドでしょうか。
    トーンカーブ( [cmd] + M )やカラーバランス( [cmd] + B )といったコマンドの(前回の)数値を覚えておいてくれます。

     

    ポイントくん:( ・ิω・ิ)つ「ちなみにPhotoshopを終了させても、最後に入力した数値は次に立ち上げる時に持ち越されるみたいです。無駄にすごいよ!」
     


    テキスト周辺

    意外とテキスト周辺は奥が深いです。
    その中でも使う頻度が多めだと思われるものを紹介。
    比率やボールド効果などを元にもどすリセット系は意外なところで役立つかもしれません。
    (ちなみにテキストのショートカットはテキストを選択している時に発動します。)

    cancer2pt大きく/小さく
    [cmd] + [Shift] + >
    [cmd] + [Shift] + <

    (+ [Option]で+/-10ptに変化)

    cancer2pt行間を大きく/小さく
    [Option] + ↓
    [Option] + ↑

    (+ [Cmd]で+/-10ptに変化)

    cancer文字間+20/-20
    [Option] + →
    [Option] + ←

    (+ [Cmd]で+/-100に変化)

    cancer文字の横比率を100%に戻す/文字の縦比率を100%に戻す
    [cmd] + [Shift] + X
    [Option]  + [cmd] + [Shift] + X


    cancerテキストの太字や斜体、上付き文字などを全てリセット
    [cmd] + [Shift] + Y

     

    ポイントくん:( ・ิω・ิ)つ「むしゃくしゃしたら全てリセットだよ!」

     


    レイヤーパレット周辺

    cancer不透明度
    移動ツール時(V)にレイヤーを選択した状態で数字キーを打ち込むと、不透明度を変更できます。
    [ 3 ]と打てばそのレイヤーは不透明度30%に[ 8 ]なら80%。[ 0 ]で100%になります。
    [ 2 ] [ 5 ]と素早く打てば25%になります。
     [Shift] + 数字キーで塗りの%を変更です。

    cancer選択レイヤーを1つ上へ/1つ下へ
    [option] + ]
    [
    option] + [

    cancer選択レイヤーを1つ上へ移動/1つ下へ移動
    [cmd] + ]
    [cmd] + [


    cancer選択レイヤーを一番上へ移動/一番下へ移動
    [cmd] + [Shift] + ]
    [cmd] + [Shift] + [


    cancerそのレイヤー以外全て非表示
    レイヤーパレットのお目目マークを[Option]  + 左クリック

    cancer(特定フォルダ内の)レイヤーフォルダを全て閉じる/開く
    フォルダ左の▶を[Option]  + 左クリック
    (その階層以下のレイヤーフォルダに対して有効)

    cancer (全部の)レイヤーフォルダを閉じる/開く
    フォルダ左の▶を[Option]  + [cmd] + 左クリック
    (一番上の階層にあるレイヤーフォルダ左の▶をクリック時にのみ有効。全部のフォルダを空けたり閉じたり)

    cancerレイヤー効果を移す
    レイヤーパレットのレイヤー効果マークを移したいレイヤーへドラッグ

    cancerレイヤーの中身を選択範囲に
    [cmd]  を押しながらレイヤーパレットのサムネイルを左クリック。
    (レイヤー上の透明部分以外を選択範囲にします。)

    cancerレイヤーを新規作成
    [Option]  + [cmd] + [Shift] + N

    cancer全てのレイヤーを結合
    [cmd] + [Shift] + E
    (正直あまり使わない)

    cancer全てのレイヤーを結合したものを新規レイヤーに
    [Option]  + [cmd] + [Shift] + E
    (レイヤーはそのままで、全部を結合した画像を新規のレイヤーに吐き出します。こっちは何かと使う機会があったり。)

     

    ポイントくん:( ・ิω・ิ)つ「レイヤーが整理整頓されている男子はモテるらしいよ!」

     


    Fシリーズ周辺

    カンバス以外非表示系男子には必要不可欠な"情報ウィンドウを表示/非表示"(F8)を要するエリア。
    とりあえずF7とF8は心得ておきたい。

    cancerレイヤーウインドウを表示/非表示
    F7

    cancer情報ウインドウを表示/非表示
    F8

    cancerカット
    F2

    cancerコピー
    F3

    cancerペースト
    F4

     

    ポイントくん:( ・ิω・ิ)つ「よく使うコマンドはFシリーズのどうでもいい箇所にカスタマイズでぶっこんだりするよ!」

     


    設定初期化

    cancer設定ファイルの初期化
    Photoshop起動時に[Option]  + [cmd] + [Shift]

     

    ポイントくん:( ・ิω・ิ)つ「俗にいうバルス。photoshop設定を生まれたままの姿に戻すよ!」

     


    そして、カヤック意匠部では地味なショートカットに興味があるお友達を募集中です。

    カヤックでは、物づくりが好きなデザイナー&マークアップエンジニアを随時募集しております。

    興味がある、又は人生のショートカットをしたい方はこちらをクリック


    0 0

    先日、瀬戸内国際芸術祭に行ってきましたキノです。

    多島海を巡る船に乗りながらのんびりと写真を撮っていたので、今回は写真を使った実験をやってみます。

    高松⇒直島の間をつなぐ、超長いパノラマはつくれるのか。

     

    フォトショの自動整列機能で試してみましたー!

    うまく行けば、高松と直島が両端に映った、長い写真ができるはず!

    さてさて・・・

     

    素材

    高松⇒直島行きのフェリー上で撮影した写真(287枚)

    フェリーの上で、同じ方向に向かいポチポチと撮影しました。

    p_01_2.png

    こんなことに使うとも思わず、ただひたすらに撮っていた自分はなんだったのだろう。

     

    方法

    1. 一枚のPSDファイルに写真を全部読み込む
    2. 全レイヤーを選択、「自動整列」コマンドを使用
    3. 自動整列の種類を選ぶ
    4. 完成!

    自動整列は内容に合わせてキャンバスの大きさも変えてくれるのが便利です!

     

     

    やってみました

    一枚のPSDファイルに写真を全部読み込む

    こんな時はやっぱりBridgeですね!

    ツール>Photoshop>ファイルをPhotoshopレイヤーとして読み込み

    これで一枚のPSDにレイヤーとして写真を読み込むことができます

    p_02.jpg

    (Bridgeをもっと使いたい人はこちらの記事もどうぞ!)

     

    全レイヤーを選択、「自動整列」コマンドを使用

    PSDにファイルを入れたら、全部のレイヤーを選択して、この奇妙な顔のアイコンを押します

    p_05.jpg

     

    一枚のPSDファイルに写真を全部読み込む

    自動整列のメニューにて。

    船上にて横にしか移動していないので、まずは「位置の変更」を選んでみました。

    p_07.jpg

     

     

    結果

    で結果なのですが、

    p_09s.jpg

    なんだかとても残念な感じに・・・

    期待はしていなかったけれど、ここまでとは

     

     

    反省

    は!横に移動っていっても手で持っているし、微妙な調整が必要なのでは

    p_06.jpg

    ということで、今度は回転や拡縮も行う「コラージュ」を試します

    今度はいけるはず・・・!

     

     

    結果2

    p_10_s.jpg

    またまた失敗。なんかまがってる。

    でも真ん中らへんの雲は繋がっている気がしなくもない。

     

     

    もう手動でやりました

    ここらへんで諦め、自分でイメージしていたものをつくることにしました。

    最後にご覧ください。

     

    高松⇒直島:完成1

    test_1011_2_island.jpg

    写真をクリックすると原寸大写真になります
    (横4000pxぐらいあるのでご注意を!)

     

    こんなふうになったらよかったんですけどね。

    ちなみにこちらは写真の左端を重ねる形で作りました。

    船で言うと進行方向側。

    なので、逆側の端がつながると全く印象が変わります。

    (といってもレイヤーを逆順にするだけですが)

     

    高松⇒直島:完成2

    test_1011_2_island2.jpg

    写真をクリックすると原寸大写真になります
    (横4000pxぐらいあるのでご注意を!)

     

    高松⇒直島:二つ並べると

    test_1011_2_island.jpg

    test_1011_2_island2.jpg

    いやー、手作業でやった分、カメラの設定や視野についていい勉強になりました。

    被写体との距離があるので、複数の写真に映る角度のバラつきが大きく、

    プログラムで自動判別するのは厳しいですね。

    自分でやりながらも、島がどんどん細長くなったり、山が消えたりするのを補正するのに苦労しました。

    (そんなこともあり、上下の写真で島の形が大きく違います)

     

    自動整列で繋ぐとしたら、近距離被写体に限る(たぶん)

    という誰にも響かない発見で終わりにします。

    次は自動整列でもうまく行く撮影ができそうです。

     

    面白法人カヤックでは、こんな体当たりで実験しちゃう人も大歓迎です!

    仕事ではどんなことができるのか、気になる人はこちらをクリック!


    0 0

    2012年度の新卒採用コンテンツは”ありがとう”がテーマ

    こんにちは。スライスを知らないまま新卒で入社してから
    はや5年、ニシです。

    弊社は”ありがとう”をテーマとしたTHANKSというサービスを運用しており、
    社内文化としても”ありがとう”を非常に大切にしております。

    そんな”ありがとう”を少しでも体験していただけるよう
    今年は”ありがとう”をテーマとした新卒採用コンテンツを制作いたしました!

    thumb_fresh2012.jpg

    2012年度 新卒採用コンテンツ『3x9=さんきゅう 27人のありがとう』

    http://www.kayac.com/company/fresh/2012/

    3人×9列(さんきゅ〜:ダジャレです!)=27人の社員の、
    他の26人全員へ向けたありがとうメッセージが見れたり、
    その他のカヤックのありがとうエピソードが見れます!

    是非カヤックの”ありがとう”を体験してみてください!
     

    --------------------------------------------------------------------------------------------------------

    【MEMBER】
    ■Dir:柳澤大輔
    ■AD/De: 西慶子
    ■FD:村井孝至
    ■PG:渡邊匡志
    ■ライティング:松原佳代
    ■サウンドデザイナー:瀬尾浩二郎
    ■口笛奏者:牛木匡憲、藤川綱司
    ■Dir:瀧澤紗由梨



    0 0

    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が大好きなマークアップエンジニアを募集中です!


    0 0

    Facebook使ってますか?

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

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

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

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

    「いいね!」「シェア」をするとFacebook上に何がどう表示されるのか

    「いいね!」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。

    自分の掲示板

    img_02.png

    「いいね!」したものは「最近のアクティビティ」という項目にまとめられて表示されます。
    よくよく見てみると、記事のタイトルだけのものと、サイト名が入っているものがあるのがわかります。
    metaタグでサイト名などを設定しているとコチラに表示されるようです。(おそらく)

    ニュースフィードの「いいね!」

    img_03.png

    ニュースフィード(=タイムライン)にはこのように表示されています。
    赤い下線の部分がサイト名、緑の下線の部分がタイトルです。
    サイト名の設定がない場合は省略されるようです。

    URLの「シェア」、コメント付の「いいね!」

    img_04.png

    一番良く見る形式だと思います。掲示板にURLを貼りつけたときに表示されます。
    外部でいいね!したときもこの形式で表示されることもありますね。
    タイトル・説明・画像の3項目が基本となっているようです。

    何もしなくても最低限の情報は伝わる

    シェアされたときの、タイトルや説明をコントロールしたいですよね。
    これらはmetaタグで設定できます。
    しかし、そういった指定がなかった場合は、そのページのtitleタグとdescriptionがそのまま使われます。
    つまり、そういった情報が記述されていれば、何もしなくても対応できているといえます。

    何もしないとこんな感じ

    HOUSECOの建築作品を友達にシェアしてみました。

    img_05.png

    うーん、せっかくだからサイトの説明よりも作品の説明が表示されてほしいですよね。
    タイトルもちょっと長すぎるかも。。。
    やっぱりFacebookに最適化した設定をしたい!と思うはずです。

    Open Graph Protocolのmetaタグを追加する

    Open Graph Protocol?

    Open Graph Protocolについて分かりやすい記事があったので紹介します。

    【Facebook】 Open Graph Protocol 説明

    Open Graph Protocol は、Facebookの外にあるWEBページが、Facebook Social Graph に参加するための具体的なルールです。

    こちらの記事を読んでいいただければ、Open Graph Protocolのタグについて理解できると思います。

    追加するタグ

    基本的にはfacebookのドキュメントを参考にすると良いと思います。

    htmlタグに属性を追加

    まずはhtmlタグにOpen Graph Protocol用の属性を追記します。
    (mixiチェックも一緒に対応することが多いのでmixiチェック用の属性も書いています。)

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
    

    metaタグを追加

    ART-MeterのFacebookキャンペーンの例を紹介します。

    ART-Meterは一点ものの絵画を販売するサイトで、日替わりで「いいね!」の数だけ割引するセールを行っています。
    10月27日のセール対象作品 「いいね割!」ハロウィンセール
    いいね!してもらうことでバズが広がっていくキャンペーンなので、ニュースフィードに出す情報が重要になりました。

    以下がそのmetaタグになります。

    <meta property="og:title" content="10月27日の「いいね割」ハロウィンセール!今日はこの商品に「いいね!」してね!" /> 
    <meta property="og:type" content="article" /> 
    <meta property="og:url" content="http://www.art-meter.com/special/halloween-ghost/" /> 
    <meta property="og:image" content="http://www.art-meter.com/img/special/halloween/ph_1027.jpg" /> 
    <meta property="og:site_name" content="ART-Meter:絵画の測り売りサイト" /> 
    <meta property="og:description" content="「いいね!」して「トリック・オア・トリート」とコメントをつけよう!!この商品を「いいね!」の分だけ割引するハロウィンセール開催中!どこまで安くなるかはみんな次第!?HAPPY HALLLOWEEN!!!" /> 
    

    propertyの名前からどういった属性かは想像出来ると思います。

    サムネイルを設定する?しない?

    ニュースフィードに表示されるときに、サムネイルがあるかどうかは重要なポイントになるかと思います。
    もし、metaタグで何も設定しない場合、二つの結果が考えられます。

    1. Facebookが選び出した候補の画像からユーザーが選択する
    2. 問答無用でFacebookが選びだした画像が設定される

    サムネイル候補となりうる可能性のある画像の条件は、
    50px × 50px 以上の大きさで、縦横比が3:1以下のPNG、GIF、JPEGファイルのようです。

    外部に「いいね!」ボタンを設置したときは、ユーザーが画像を選べません。
    なので、こちらから画像を指定してしまうのがいいと思います。

    ハマりポイント!meta情報はFacebookにキャッシュされる!

    Open Social Protocolのタグが機能しているかをFacebookで確認しましょう。
    本番のURLを自分のニュースフィードに貼りつけて、表示を見てみるのが一番てっとり早いと思います。
    数秒の読み込み時間のあとに、サムネイルやタイトルが指定通りに表示されれば大丈夫です。

    しかし、ここがちょっとクセモノで、このmeta情報がFacebookにキャッシュされるようなのです。
    修正してコミットしてもなかなか反映されない、ということが起こります。

    テストするときはURLの末尾に「?id=1」と付加

    本番のURLにつくりかけの情報がキャッシュされるのは、ちょっとマズいですよね。
    また、キャッシュが更新されるのを待つのも時間がかかります。
    なので、テストするときはURLの末尾に「?id=1」と追記した上で行ないましょう。
    修正をしたら「?id=2」とidを変更すれば新しくキャッシュされるのですぐに確認できます。

    まとめ

    ということで、Facebookのビッグウェーブに乗り遅れないようにがんばりましょうーーー.。゚+.(・∀・)゚+.゚

    ART-MeterのFacebookキャンペーンも10/31まで続きますのでぜひぜひご参加ください~♪


    0 0

    こんにちは、ウンコの壁紙の携帯をトイレに水没させ、
    携帯からiPhoneに変えました。ニシです。

    もともと携帯もほとんど使わない私ですが、
    iPhoneを一度使ってしまうと、もう手放せないというくらい
    便利な機能やアプリが一杯ですね!

    今回は、デザイナー向けのオススメアプリをいくつかご紹介したいと思います。
     

    ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 

    Color Stream

    01.jpg

    写真に使われている色をカラーパターンにして保存できるアプリ。
    そこから自分で編集する事もできたり、写真にして保存することができます。

    ★オススメポイント★(○ゝω・)b⌒☆
    今回のデザインのトーンを、この写真のイメージに近づけたいんだけどな〜 って時におすすめ!

    値段:¥350

    アプリのダウンロードはこちら!

    what the font

    whatthefont.png

    画像から使っているフォントを検索してくれる
    ご存知フォント検索サイトのiPhoneアプリ版です。
    PCサイトの方もよくお世話になってます。

    ★オススメポイント★(○ゝω・)b⌒☆
    あ、このポスターのフォント素敵!何のフォント使ってるんだろ〜
    私も今度使ってみたい! って時におすすめ!

    値段:¥0

    アプリのダウンロードはこちら!

     

    Typography

    typo.jpg

    アプリケーションの名前どおり、
    タイポグラフィーに関する情報などをまとめて見ることができるアプリケーション。

    ※英語アプリです。わたしは英語しゃべれません。

    ★オススメポイント★(○ゝω・)b⌒☆
    フォントの単位計算ができるのでpx←→emの変換をしたい時にも便利!

    値段:¥600

    アプリのダウンロードはこちら!

    ideaPod

    ideapod-0.png ideapod-1.png

    弊社で制作したひらめきをサポートする発想支援カードアプリ。
    画面をフリックしたり iPhone を振ることで
    次々とアイデアのヒントとなるカードを見ることができます。

    ★オススメポイント★(○ゝω・)b⌒☆
    電車の中での企画だしや、ブレストのお供に!

    値段:¥350

    アプリのダウンロードはこちら!

    iFont Maker

    maker.jpg

    こちらはiPad用アプリですが、
    フォント作成がiPad上でできてしまうニッチなアプリ。
    フォントマニアは是非。

    ★オススメポイント★(○ゝω・)b⌒☆
    急に無性にフォントが作りたくなった時におすすめ!

    値段:¥900

    アプリのダウンロードはこちら!

     

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

    そして弊社KAYACでは、
    iPhoneアプリを使うだけでなく、作る事もできます!
    一緒にものづくりができる方!お待ちしております!

    一緒に働きたい!新卒採用はこちら

    2011年3月に4年制大学や専門学校等各種学校を卒業(見込み)の方、海外の大学に在籍中の方や大学院を修了見込みの方、また、既に4年制大学を卒業して就業経験のない方もこちらからご応募ください。
    2012年卒サイト公開しました!

     

    年内いっぱい採用強化キャンペーン実施中!
    プログラマー・WEBデザイナー・マークアップエンジニアの方お待ちしております!

    只今カヤックでは『稲村ヶ崎R不動産』とコラボして、「鎌倉移住キャンペーン」を実施中です!
    敷金・礼金を全額カヤックが負担!これを機に、食べ物がおいしい!海も近い!歴史や季節を感じられる!鎌倉で、
    のびのびとサービスをつくりませんか?

    プロジェクト別求人速報できました!

    こえ部、ソーシャルアプリ、ギブ&ギ部などなど
    このサービスをつくりたい!運営したい!というこだわりのある方はこちらをご覧下さい。
    空き枠が随時更新される予定です。

    皆様のご応募をお待ちしております!


    0 0

    11月ですね!今年も残り2ヶ月!

    本社のある鎌倉は紅葉の季節にさしかかり、いい景色に元気をもらっているbarimiです!

    Facebookって流行って…る?!

    ってことで、私も先月からぼちぼち使いはじめました!

    …が、ファンページってどうやってつくるの?とかデザインってどんなのがあるの?
    などなど、まだまだ分からないことが沢山。

    そこで今回は、デザインがかわいいファンページや、デザインギャラリーサイトをご紹介したいと思います!

     

    いいね!ボタンを押させたい!ってときに一工夫しているファンページ

    ってことで、印象的なウェルカムページ。

    Redbull

    まずはRedBull。かわいいグラフィックで思わず押したくなります。

    redbull.png

    Teesey Tees

    こちらは、いいね!を押すと、、、、(押してみましょう!)

    teeseytees.png

    Desigual

    オーソドックスな画面ですが、独特の浮遊感のある色合いが綺麗ですね。
    ファンになると、どんなメリットがあるかも分かりやすく伝わります。

    Desigual.png

    Thurston & Betts PLLC

    ボタンの画像を使って、分かりやすくまとめています。(日本だとラベリングが違いますが。)

    ThurstonandBetts.png

    ファンページのギャラリーサイト

    こちらは海外の、Facebookファンページのデザインギャラリーサイトです。

    Custom facebook page.com

    タブごとのサムネイルが表示してあります。

    customfacebookpage.png

    facebook designs

    カテゴリー、タグごとに分類されています。

    facebookdesigns.png

    fbfolio

    Rateがあり、人気のデザインが分かります。

    fbfolio.png

    facebook showcase

    ぎっしりと並んだサムネイル。ながら見ができます。

    facebookshowcase.png

    デザインまとめ記事!

    こちらのまとめ記事を眺めて、デザインの参考にするのはどうでしょうか?!

    40 GREAT EXAMPLES OF FACEBOOK FAN PAGE DESIGNS

    Implementation Facebook Page:Showcase,Tutorials, Resources

    ファンページはアイデア勝負?

    今回デザインについてまとめましたが、Facebookのファンページは制約が多く、レイアウトなどを自由にはできないので、アイデアで勝負しているところが多く見えます。ボタンのを押させるにも一工夫ですよね!
    見せ方よりも、そちらの方がファンにとっては喜ばれるかも!

    Facebookをビジネスに使いたい人必見

    Facebookをビジネスに使ってみたい人必見のキャンペーン実施中!
    Facebookの基本的なことから、ファンページの運用方法まで、2週間限定でTwitterでつぶやきます。

    また毎日15時からは質問ライブを受付中!その場で質問に答えてもらえますよ!


    0 0

    食欲の秋真っ盛り!

    牡蠣の季節ですね!
    毎日牡蠣を食べて元気になりたいbarimiです。

    さて、10月も終わりましたので人気の記事をまとめました!

    10月の記事TOP10

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

    iPhoneアプリのデザインをするときに、抑えておきたいUIのポイントがまとめられています。

    ところでiPadアプリってどうやって作るの?てなったときに読む記事

    こちらはiPad。
    画面の基本的なサイズから、縦向き横向きを考えたデザインの方法などがまとめられています。

    永久保存版!?携帯コーディング、これだけ読めばすぐできる!
    (テンプレートのおまけつき)

    携帯コーディングをするときの、抑えておきたいポイントを紹介。
    カヤックで使っている、コーディングテンプレートのおまけもあります。

    metaタグを追加してFacebookに対応する方法とハマりやすいポイント

    じわじわと来ている、Facebook。
    サイトに対応させるときの方法と、ハマってしまいやすいところをまとめてあります。

    Tシャツデザイナーになろう!そしてお小遣いまで稼ごう!

    Tシャツのデザイン応募サイトを紹介。
    売れればインセンティブもGETできますよ!

    覚えて嬉しい&使って楽しい!B級ショートカット集【Photoshop版】

    こんなの知らなかった!しかも、使うほうが時間かかりそう?!
    な、B級ショートカットのまとめ。しらないショートカットって結構ありますよね。

    CSS3だけでつくるWebボタン!押さずにはいられないボタン簡単3ステップ

    夏のインターンシップで来ていた、インターン生の書いた記事です。
    画像ではなく、CSS3だけでグラフィカルなボタンをつくる際のポイントがまとめられています。

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

    デザイナーのiPhoneホーム画面。
    どんなアプリがおすすめなのか、意外と個性の出るホーム画面を集めました。

    【iPhone】デザイナー向けiPhoneアプリ特集!【オススメ】

    WebデザイナーにおすすめのiPhoneアプリを紹介しています。

    2012就活に向けて、採用サイトおさらい。(カヤックの採用情報もあるよ)

    就活サイトのまとめ。
    制作会社から、印象的な企業まで紹介しています。

    10月のまとめ

    今月は、iPhone、iPadの記事が多くランクイン。
    CEATEC開催など、モバイル・タブレット業界が盛り上がりを見せていたからでしょうか?!

    採用強化してます!

    面白法人カヤックでは、モバイル、HTML5・CSS3に注目しているデザイナー、マークアップエンジニアを募集中!

    年内中に採用が決定すると、鎌倉移住支援として、敷金礼金全額負担しますよー!

    敷金・礼金 全額負担 鎌倉移住キャンペーン、
    Webデザイナー・マークアップエンジニアも応募可能に!


    0 0

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

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

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

    vol3_question.png

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

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

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    今回は、「背景は前面のUIやテキストを引き立てるためにある」という理由で選びました。

    答えは、B

     

    ポイントは、背景に注目させないこと!

     
    A:について
    vol3_answer01.png
     
    注目点が一つだと、ユーザーの視線はその1点に集中します。
    インパクトがおおきいほど、背景のポイントへの注目度は上がります。
    これでは前面にコンテンツを置いても、目立たなくなってしまいます。
     
     
    Bについて
    vol3_answer02.png
     
    逆に、弱い注目点が複数あることで、そのどれにも意識を奪われなくなります
     

    【引き立てルール】奥ゆかしい背景の条件

    前に引き立てたい場合は、強いポイントを一つ大きく扱う

    後ろに下げたければ、弱いポイントを複数配置する!

     
     

    ぼかしの効果

    背景画像はパッキリはっきりしているよりも
    ぼかしてあるほうがより奥まってみえます。
     
    カメラで、手前のものにピントがあっている状態で、
    奥のものがぼやけていると
    主役の被写体を浮き立たせる効果がありますね、
    それと同じです。
     
     

    グラデーションで、より深みをもたせる

    グラデーションをつかうことで
    背景に奥行きをもたせる効果があります。
     
    と、この条件がすべてそろっている
    みんながよく見るお手本があります。
     
     
    それは・・・
     
    どーーーーーーーーん!macの壁紙!!!
     
    vol3_macUI.png
     
     
    優雅で美しい曲線や、グラデーションは
    ウィンドウやアイコンを引き立てるために
    選ばれたものなんですね。
     
     
     
     
     
    【参考図書】

    0 0

    イラレで描いたイラストをフォトショップにもってくることってありますよね

    ペーストするとき「スマートオブジェクト」、「ピクセル」、「パス」でなら問題ないですが、

    「シェイプレイヤー」でペーストする場合 容注意!!

    a.jpg

     

    運が悪いとせっかく綺麗なイラストがガビガビになってしまいます!

    uma_2.jpg

    こちらはイラレで「ピクセルグリッドに整合」して作った綺麗なイラストです。

    (61px×53px)

    uma_1.jpg

    それをそのままコピーしてフォトショップに「シェイプレイヤー」としてペーストすると。

    運が悪いとこうなっちゃう!

    uma_2.jpg

    でもこれって運の問題??

    もちろん違います!

    フォトショップにペーストされる位置は開いているウィンドウ画面の真ん中!

    素材(馬のイラスト)が奇数値(61px×53px)で作られているので画面の真ん中が偶数値の場合ピクセルがズレてガビガビになってしまいます。

    もちろん「手のひらツール」で適当に画面をずらしてペーストを何回かやればそのうち奇数値に出会えてピッタリフィットしたものがペーストされますが、

    そんなやりかたドンクサイ!

    この上手い解決方法としては、

    「長方形選択ツール」で奇数値の四角を適当な場所を囲ってあげてからペーストする

    と見事にピッタリ合ったイラストが一発でペーストされます!

    uma_3.jpg

     


    0 0

    mtcontest.jpg

    こんにちわ!

    Movable Type コンテスト 2010でKAYAC DESIGNER'S BLOGが「アイデアマンズ賞」を頂きました!やったー!

    うんこネタ・ネタ記事が多いにも関わらず嬉しい賞をいただくことができて大変光栄です!

    これからもネタ良記事をアップできるよう、意匠部一同頑張っていきますので、ぜひぜひみなさま応援よろしくお願いします.。゚+.(・∀・)゚+.゚

     


    KAYAC DESINGER'S BLOGが「はじめまして」の皆様へ!

    TwitterやFacebookのファンページで最新記事を紹介しています!
    フォロー&「いいね!」してくれると意匠子とワンコのテンションがやや上がります.。゚+.(・∀・)゚+.゚


    0 0

    CSS Nite LP13 Smart Phoneバナー

    どもです。ME課の比留間です。

    この度、1/22に開催される CSS Nite LP13 「スマートフォン特集」の回に登壇することになりました。

    CSS Niteには何度か参加させていただいていましたが、登壇する側というのは初体験であります。
    前からぜひ登壇したいな、と思っていたので夢が叶いました!

    が! 逆に前からそう思っていたのでそれがプレッシャーにもなっていたり(; ´Д`)

    色々と拙いところがあるかとは思いますが、興味がおありの方はぜひぜひ参加してください。ちなみにセッション内容は以下を予定しております。

    自分のセッション以外も、スマートフォンに関する情報てんこ盛りなので、スマートフォン関連の制作に興味がある人はとても参考になると思います!

    しかも12/10までは早割り期間なので、早めに申し込むと少し安くなります。参加したい方はぜひ今のうちに!

    セッション内容

    教科書には出てこない!? iPhone のUIトリック表現

    iPhone UIの応用編として、視点を変えたトリッキーなUIを紹介します。

    現在、さまざまなサイトがiPhone対応を求められていますが「小さな画面で見る」ことを前提に見やすさ、操作性に注力するあまり、どうしても画一的な表現が多くなってしまいます。

    そんな中、あえて複雑なUIを実装したり、はたまたネイティブアプリさながらのインタラクションを持ったサイトも出てきています。そうしたトリッキーなUIを考察しながら、実際に制作した実例を元に、こだわった点や苦労した点、実装するにあたっての注意点など、教科書に掲載されない(!?)UI表現についてお話しします。


older | 1 | .... | 3 | 4 | (Page 5) | 6 | 7 | .... | 12 | newer