意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
ユーザーを逃さない！海外Webアプリの入力フォームいろいろ
このフォームのポイント！ 上部のボックスでエラー表示 入力時にリアルタイムのエラー判定 それぞれのフォーム下部にエラー文言 項目名を赤く目立たせる
今熱い！無料オーディオ系サービスのUI 7選＋α
昨日、2010年12月1日、ついに IPサイマルラジオ「radiko」がついに本格サービススタート！ ワッショイワッショーイ！ てなこともあり、無料音声配信コンテンツが今最高にアツイ！と信じて疑わないgunjiです。 映像系サービスが大人気の今、なぜあえて音声だけがイイのか？ それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、 別のことをしながら利用出来るということが挙げられると思います。 まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど 作業用BGMなら仕事の効率がアップすることもありますしね。 移動中も眠りながらも聞いていられますしね。 というわけで今回は国内外の、特にプレイヤー部分のUIが面白い 無料オーディオ系サービスをご紹介したいと思います。 「ながら利用」を加
iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作る
iOS4.2からSafariで加速度センサーを使うことができるようになりました。 モンハンの予約を逃していつ買えるのかとヤキモキしているME課の比留間です、こんにちわ。 さて、つい先日アップデートされたiOS4.2。このアップデートでMobile Safariから加速度センサーをJavaScript経由で利用することができるようになりました。使い方は簡単で、以下のようにするだけで加速度の値を取得することができます。 JavaScriptから加速度センサーにアクセスする window.ondevicemotion = function(event) { //event.accelerationIncludingGravity.x //event.accelerationIncludingGravity.y //event.accelerationIncludingGravity.z } これ
いま読むべき、クリエイティブWEBマガジン10選
カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
購買意欲を刺激する！印象的なHTMLメルマガ10選
マラソンに夢中！ nonakaです。 毎週通販サイトのhtmlメルマガを作っているので、他の通販サイトのメルマガも多数購読してます。 今回は、通販サイトのhtmlメルマガを集めてみました。 通販サイト html形式メルマガまとめ セレクトショップ：BEYES（バイズ） 【メルマガの横幅】600px。 【構成】バイヤーからの一押しアイテム、毎週更新される特集ページバナー、新商品情報、ファッションコラムなど。その他、購入者限定のメルマガも配信してます！ 靴下専門店：Tabio（タビオ） 【メルマガの横幅】713px。 実際のメルマガ用のhtml 【構成】雑誌掲載商品、季節のリコメンド、ランキングなど要素が豊富！ 無印良品 【メルマガの横幅】569px。 実際のメルマガ用のhtml 【構成】バナーが縦に並ぶ構成が多い。 facebookやtwitterの案内もさりげなくヘッダーに入っている。 z
iPhone4 Retina Display対応のデザインのコツ！
僕はどうやったらRetina Displayが綺麗に表示されるか必死に模索する毎日です。（保護シート含め） ということで、今後のiPhone開発に”必須!!!"のRetina Display対応のデザインデータの作り方のコツについてご紹介します！
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ～～～ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という
ドキッ！デザイナーのバッグの中身拝見！
皆様こんにちは！いつもはデザイナーたちのアウトプットを紹介していますが、今回は kayacデザイナー達のこだわりの身の回りアイテムを紹介していきたいと思います！ ...という名目で、抜き打ち荷物検査を行いました！！いったい何が出てくるのか！？ hashimotoの鞄の中 鞄はユニクロの真っ白なやつを使ってます。 ■CROQUIS 100sheets maruman ss クロッキー帳。メモ帳としても、落書き帳にもできる、程よい大きさが使いやすいです。ロゴマークが鼻から飛び出てる鼻毛に見えるので好きです。 ■ステッドラー トリプラス ペン。人間工学に基づいて設計された三角のグリップがにぎりやすいです。あところころ転がらないのでうれしい。描き味もよく線の強弱がつけやすいのでイラストを描くときに重宝しています。 ■GUM #211 かため 歯ブラシ。ボディの配色がいいです。 中でも取っ手が紫でブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドット絵描く楽な方法見つけた！気がする