タグ

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

  • 「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた

    平日は割りと仕事しているんですが、 さっきふとこんな技術相談を、エンジニアに投げてみました。 お題を投げてみた barimi ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする? 私ならオートリロードとiframeだと思うんだけど。

    tyage
    tyage 2013/01/25
  • インターネットでものづくりするときに役立つサイトまとめ

    先日、東京学生広告研究団体連盟の総会にて、 「インターネットでつくる人を増やす」というテーマでお話させていただきました! その時に紹介したサービスをまとめます。 この記事のターゲットは、インターネットでまだ作ったことがない人。 興味があってこれから始めよう!と思っている人向けです。 ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。 アイデア・インスピレーションをストックしよう まずは、アイデアのストックやインスピレーションを高めるサービスを紹介します。 EVERNOTE 簡単なメモから、写真や動画まで記憶し、整理整頓ができるサービスです。 tumblr オンラインでできるスクラップブック。Web上の記事や画像・映像などを簡単にストックできます。 また他のユーザーの投稿もストックできるので、面白いユーザーをフォローするのがオススメです。 Pinterest 画像を貼りつけて共有

  • どう考えても無茶な「CSSプログラミング」が話題に

    CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itCSSプログラミングが流行中! ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。

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

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

  • Web制作業界最速?!CS10の新機能を使い倒してみた! #aprilfool | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

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

    Web制作業界最速?!CS10の新機能を使い倒してみた! #aprilfool | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
  • 地獄のミサワがCSS3の勉強に最適と話題に

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

    tyage
    tyage 2011/02/15
    こんなにできてたんだ・・・すごいなあ
  • 卒制採用にのっかって「コーディング推薦」やります!就活よりコーディングを頑張ったあなたを推薦します!

    卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています! とはいえ、、、 ME志望の学生さんの中には 「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・! ぜひとも、そういう学生さんにもエントリーしてほしい・・・! ということで、担当にかけあってきました! 「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います! 就活よりコーディングを頑張ったあなたを推薦します!「コーディング推薦」! 対象は 2011年3月に卒業予定の方 jsdo.itで「課題」に挑戦していただきます(課題については後ほど説明します) 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部(ME課・コーティング推薦)」とご記入ください 集まった作品をME課のみんなで見させていただき、「これは!!」という作品を投稿

  • HTML5でつまずきやすいasideとsectionの使い方

    HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします! 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を

    tyage
    tyage 2010/12/21
  • いま読むべき、クリエイティブWEBマガジン10選

    カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう! Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中!だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト

    tyage
    tyage 2010/11/25
  • ログイン画面の離脱率を下げる!ECサイト各社の工夫

    こたつにみかんはじめました。nonakaです。 週に1度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました! ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ:BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服:goo

  • Facebookファンページ、デザインのまとめ!

    11月ですね!今年も残り2ヶ月! 社のある鎌倉は紅葉の季節にさしかかり、いい景色に元気をもらっているbarimiです! Facebookって流行って…る?! ってことで、私も先月からぼちぼち使いはじめました! …が、ファンページってどうやってつくるの?とかデザインってどんなのがあるの? などなど、まだまだ分からないことが沢山。 そこで今回は、デザインがかわいいファンページや、デザインギャラリーサイトをご紹介したいと思います! いいね!ボタンを押させたい!ってときに一工夫しているファンページ ってことで、印象的なウェルカムページ。 Redbull まずはRedBull。かわいいグラフィックで思わず押したくなります。 Teesey Tees こちらは、いいね!を押すと、、、、(押してみましょう!) Desigual オーソドックスな画面ですが、独特の浮遊感のある色合いが綺麗ですね。 ファンに

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

    Facebook使ってますか? こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね!」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね!」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ! 「いいね!」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね!」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね!」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って

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

    インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ! 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう!! つづきからどうぞ! すごいよ!CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ! ここまでレベルの高いボタンはつくれないので、 基重視のシンプルなCSSボタンをつくろうと思います。 まずはC

    tyage
    tyage 2010/09/22
  • JavaScriptは盗んで学べ! 知識0のデザイナーでもできるjsdo.itの遊び方

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

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

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

  • 1