タグ

ブックマーク / design.kayac.com (7)

  • HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個!

    動くぞ!きれいだぞ! ヘ(・_・ヘ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営WebサービスHTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破! 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました!(わーい!) 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します! あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集! 説明不要! 気になったコードは是非のぞいてみてください!

  • SVG女子を90%軽くしたSVG軽量化テク+α #svggirl

    あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を(いろんな意味で)驚かしてきましたが、 ついに日、日でも公開されました! しかも日版に合わせてアニメーションも長くなっています! こっそりブラウザを英語にして見ていた人も必見です! (神風動画さんによる予告編動画!) 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装(プログラマーブログ) で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要! SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回

    sky_2007
    sky_2007 2011/04/26
  • WEBデザイナー向け☆iPhoneアプリのUIデザイン

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

  • 最近流行りの「カスタムして楽しむFlashサイト」5選

    ちっちゃいころはミニ四駆をカスタムして肉抜きしまくりだったhashimotoです! そんなカスタム大好きな子供は、大人になってもカスタムが大好き! ということで、Flashでカスタムができるサイトをまとめてみました! あんなものやこんなものまで自分の好きなようにカスタム出来ちゃいます。 他人と同じものを持っているのがいやだ!って人も、続きでどうぞ! NIKE ID かなり細かいパーツごとにいじることが出来ます。色はもちろん、材質も選べたりして、さすがの充実度。 主にスニーカーですが、バッグなどもあります。 KOTORI たのしいほうのヘッドフォン ヘッドフォンのサイトです。カラーはもちろん、気の利いた柄も選択できるようになっています。ランダムでカラーを決めてくれる機能もあって、カラーリングが苦手な人や、新鮮な組み合わせを発見したい人にもおすすめです。 ところで、たのしくないほうのヘッドフォ

  • 【新人Webデザイナー向け】Webドリル vol.2: このバナーもっと目立たせてください!

    【2位】A:オレンジ オレンジは、暖色系で高彩度なので、 興奮色、進出色として使うことができます。 △背景のベージュに対して、オレンジは同じ色みなのでなじんでしまいます。なので、この場合は2位にしました。 【3位】C:緑 背景の黄色に対して、緑は隣り合った色相なのでなじみます。 写真の植物とも近いので調和がとれています。 △きれいにまとまりますが、インパクトは弱まるかも。 デザイナーが陥りがちな色彩のワナ 目立たせたいとき、ワンパターンに、赤やオレンジをつい使ってしまう 目立たせたいのに、きれいにまとめてしまう 【目立たせルール!】反対色を試してみよう! 暖色の背景には寒色の文字、 寒色の背景には暖色の文字を使うと引き立ちます。 それ以外の中性色の場合は隣接していない色を選んでみましょう。 【目立たせルール!】グレースケールでコントラストを確認! ここで注意したいのは、反対色を使うだけでは

  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

  • 【ケータイ】画像のファイルサイズを50%削減するひと手間

    こんにちわ。最近ソーシャルアプリやるようになったやしこです ソーシャルゲームはいま一番アツい分野!いろいろなゲームが群雄割拠です。 でも画像が重くてさくさく連打できないとゲームの爽快感が半減してしまいます。悲しいけどこれ携帯なのよね。 なるべくストレスフリーのみんなに優しいデザインをした〜い! そんなユーザーにもエンジニアにもモテる爆軽画像への研究・発見報告です 基の基 画像の重さは1画面合計100k以内 PNGは使えないとおもっておk 画像にwidthとheightを指定しないのは死亡フラグ 元画像が複雑な場合ライブトレースで爆軽に 私が現在担当している英雄になりたい!は魅力的なキャラクターたちが登場する戦争ゲームです 繊細なキャラクターデザインでそれが重厚な世界観を作り出す大事なキーになっています ところがアニメ塗りと違って色数が多すぎて減量に不向きです。どうしても重くなってしまい

  • 1