タグ

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

  • 縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個!

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

  • CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件

    jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…!」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは!」と思った作品をピックアップして紹介したいと思います。(コンテストの審査とは関係ないですよ!) CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい!:forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技!第2弾! - jsdo.it - share JavaScript, HTML5 a

    nurupoeb
    nurupoeb 2011/12/13
    その発想がなかったw
  • Web制作業界最速?!CS10の新機能を使い倒してみた! #aprilfool | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

    さてさて!先日発売されました、待望のCS10。 デザイナーなら誰しもが使っているであろう、Photoshop。 その最新版の新機能をご紹介したいと思います! 電脳メガネキタ━━━━(゚∀゚)━━━━!! CS10の最大の特徴ともいえば電脳メガネ! 前回のCS9から、拡張スクリーン対応になったのですが、 CS10からはなんと拡張スクリーンメガネ付きで販売されています! なかなかおしゃれ!と評判もよく、街中でこのメガネをしているデザイナーが増えているとか?! ずっとみんな欲しかった!?上司に応じる、これ如何に?! 新人デザイナーなら一度は経験する、上司からのニュアンスでの指示。思わず、困惑してしまいますよね? そんな指示に柔軟に対応できるのがこの機能。 プルダウンから擬音語を選ぶだけで、それっぽい画像が出来上がります! もっとバーンと! このような画像を作った後に、上司から「え~もっとなんかバ

    Web制作業界最速?!CS10の新機能を使い倒してみた! #aprilfool | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
    nurupoeb
    nurupoeb 2011/04/01
    翻訳は本当にあってもいいんじゃないかなー(チラッ
  • 初めての企画書が、最終選考に残った アイデアの出し方

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

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

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

  • 1