ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
Google Feed APIで3分マッシュアップ (1/2)
特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota
HTML5要素のブラウザー実装状況を調べてみた (1/2)
次世代Web標準規格として注目されるHTML5。2011年5月25日にはW3CがHTML5の最終草案を発表し、標準化のプロセスはいよいよ大詰めを迎えている。 とはいえ、実際にWebサイト制作に使えるかどうかは、結局のところブラウザーの実装状況次第。そこで、HTML5の各要素（タグ）について、主要ブラウザー（Internet Explorer、Firefox、Google Chrome、Safari、Opera）の実装状況を調べてみた。 ターゲットブラウザーにあわせてコーディングすることを考慮して、主要なブラウザーで共通して使えるタグ、特定のブラウザーで使える・使えないタグに分類した。 この記事の見方 要素名の下にあるテキストは要素の意味を表す IEはInternet Explorer、ChromeはGoogle Chromeの略 本調査は2011年11月に実施。IE以外は調査時点での最新バ
ゲーム機やスマホの画面をPCでキャプチャーする技 (1/4)
筆者は仕事柄、さまざまな画面のスクリーンショットを撮る。パソコンやiPhoneなら簡単に撮れるが、面倒なのがゲーム機やメディアプレーヤーなどのデジタル家電だ。これらの機器で、スクリーンショットの機能があるものはまずない。 そこで役立つアイテムがHDMI入力対応のキャプチャーカードだ。ゲームの動画などを投稿する際にも利用できる。今回はプレイステーション3(以下PS3)などのHDMI映像を、パソコンでキャプチャーする技を紹介しよう。 HDMI入力を4ポート備えて2万円以下！ サンコーのHDMIキャプチャーカード パソコンに入力される映像を記録するには、通常なんらかのキャプチャーカード/ユニットが必要になる。HDMI入力端子を備える製品もいくつか発売されているが、2万円以下で手に入るものとなると数製品に絞られる。そんな中で、今回試用したのはサンコーが販売するのが「HDMIビデオキャプチャーカード
text-shadowで作る「見出し」デザインのアイデア (1/4)
text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。 text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。 今回のお手本
ハンバーガーをグルーポンの広告風に撮るには？ (1/3)
『プロが教えるデジカメ撮影テクニック』の著者でプロカメラマンの三浦健司氏の担当になった新人編集者。ご時世を反映して、上司よりひとまわりも、ふたまわりも年上なのに“新人”！ 最初に与えられた仕事は、バナー広告に掲載されている美味しそうなハンバーガーとお寿司を、もっと美味しそうに撮るにはどうすればいいのか、三浦カメラマンに話を聞いてこいということでした。第1回は“美味しそうなハンバーガー”に挑戦です！ もっと美味しそうに！ 編集：新しく担当になります。新人ですが、よろしくお願いします。 三浦：なんだよ、新人編集者ときいていたけど、ずいぶんおじさんだなぁ。できれば…… 編集：まぁ、まぁ、そうおっしゃらずに、ちょっとこれを見てください。 三浦：おお、これはよく見るグルーポンのバナー広告。 編集：そうなんです。このハンバーガーやお寿司をもっと美味しそうに撮れないかなと思いまして。 三浦：食べ物は「プ
ビリヤードで学ぶ「サイトモチベーション」の考え方 (1/3)
Webサイトを作るときに私が強く意識しているのが「モチベーション」という考え方です。ユーザーにうまくモチベーションを与えられると、「自分にとって役立つ情報」として真剣に読んでくれます。他人ごととして読むのと、自分ごととして読むのでは、情報の吸収量や理解度が違ってきますから、サイトマスターはユーザーのモチベーションを高めるサイトを用意することが大切です。私はモチベーションを「ユーザーの興味を受け止めること」と「興味を維持させること」の2つの視点で捉えて、サイト構成を考えています。 ユーザーのモチベーションを2つの視点で考える モチベーションはもともとは「動機付け」という意味ですが、一般的には「意欲」「やる気」などの意味で使われています。では、Webサイトにおける「モチベーション」とは何でしょうか。以前紹介した「サイトストーリー」が「情報を伝える物語」とするならば、モチベーションは「物語を語り
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
スマートフォン対応サイトを設計するときのノウハウ (1/3)
Webサイトの制作は、一般的にサイト設計／構造設計→画面設計→デザイン制作→HTML/CSS制作→JavaScript開発といった手順で進めます。 スマートフォンサイトの場合も基本的な手順は同様で、各設計工程を経て制作していきますが、PCとも携帯電話とも違うスマートフォンの場合、サイト設計段階でも注意すべき点が多くあります。今回は、スマートフォンサイトを設計する際のポイントを解説します。 スマートフォンサイトの構造設計 「構造設計」とは、Webサイト全体の各ページのつながりを考え、いわゆる「サイトマップ」を作成する作業です。 トップページから連なるWebサイトにおいて、利用者に見てもらいたい情報を探しやすく整理し、Webサイトの目的に応じた「ゴール」への誘導を考えます。 入口は検索エンジン対策（SEO）重視で考える 一般的な携帯電話ではカメラ機能と2次元バーコード（QRコード）が普及してい
月額70円で独自ドメインのメールを運用する技 (1/3)
メールアドレスの「@」より後ろの文字列は「ドメイン」という。例えば、Gmailなら「@gmail.com」、ISPの@niftyを使っていれば「@nifty.com」などがそれに当たる。企業ユーザーの場合、アスキーメディアワークスなら「@asciimw.jp」のように、企業名が付けられていることもある。 読者の方は、どんなドメインのメールアドレスを使っているだろうか？ 今回は、自分の名前などオリジナルのドメイン名で、メールアドレスを安く取得、運用する技を紹介しよう。 メールアドレス感覚で独自ドメインを利用しよう メールアドレスの@より前に、名前を付けて使っている人は多いだろう。しかし、「～@yanagiya.biz」のように、ドメイン名に名前が入っていると見栄えがいい。フリーランスで働いている人やブロガーなど、ネットを活用している人にはぜひお勧めしたい。メールアドレスが覚えやすいので気軽に
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
ASCII.jp：行っとけ！ Ubuntu道場！
初心者も使えて人気急上昇のOS『Ubuntu』。Ubuntu Japanese Teamの個性的な面々がやさしく、カンタンに、そして本音トークで「Ubuntuの今」を解説してくれるぞ。Ubuntuユーザーなら必読の座談会なのだ！ 2012年10月11日 14時00分 PC 第61回 ～師範、Ubuntu道場が最終回です！～ 永らく御愛顧いただきましたUbuntu道場も遂に最終回。なんだかしんみりとした展開になっちゃいましたねといったことは特になく、今回もゲストを迎えて、よくわからないことになっております。 2012年09月13日 12時00分 PC 第60回 ～師範、組版システム「TeX」について教えてください！～ 今回のお題は「TeX」。そもそも組版って何？ってところからUbuntuでの使い方などなどをゲストをお迎えしてお届けです。 2012年08月09日 14時00分 PC 第59回
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
プロの犯行現場｜美少女イラストをSAIで描く【線画編】 (1/5)
先生すいません、編集長のムチャ振りに 答えていただけませんか…… ニコニコ動画の人気タグの1つに「ニコニコ動画講座」がある。 講座として教えているのはGoogle検索の裏技から腹筋の方法まで幅広いジャンルだが、とりわけ人気なのがCGの描き方。その中でもトップクラスの人気を誇るのが「初音ミクが可愛すぎるので描いてみた」だ。そのクオリティの高さに「プロの犯行」ともタグが付けられている。 この動画を投稿しているのは同人作家として活躍する網野コハクさん。初音ミクをモデルにした同人ゲーム「未来のキミと、すべての歌に」の企画・原案を担当するなど多才な能力を発揮している。 しかしこの動画、見ていればある程度の流れは分かるのだけど、なにせ収録時の33倍速で再生されている。ササッと手早く何かをされてしまうと、「あれ、今何やったんだ？」と思うこともしばしばだ。 同僚とそんなことを話していると、編集長がちょいち
楽器って楽しい!! GarageBandでレッスンしてみた (1/3)
これからMacで音楽制作を始めるなら、Mac本体と「GarageBand '09」があればOK！ということは、前回もお話した通り（関連記事）。今回はGarageBand '09の目玉である「レッスン」機能をざっくり紹介していこう。 レッスン機能で習えるピアノとギターのうち、ここではピアノをチョイス。機材のセットアップからレッスン機能をひと通り使うまでをお伝えしていく。ピアノやギターを弾けるように、Macと一緒にトレーニングを始めよう！ 1台4役のすごいヤツ「KeyStudio 49i」に注目 さて、快適に音楽を作るためには、最低限の機材は揃えておきたいところ。特にキーボードを持っておらず、新しく買うならぜひオススメしたい1品がある。それが、前回も少し触れたエムオーディオのオーディオ搭載MIDIキーボード「KeyStudio 49i」だ（Apple Storeで見る）。 KeyStudio
3分でできるJS＋CSS「角丸」テクニック (1/3)
“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。 ところがこの角丸ボックス、（X）HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き足したりと、意外に手間がかかって面倒です。現在、W3C（World Wide Web Consortium ）で策定が進められているCSS3（CSS level 3）では、ブロック要素の角を丸くできる border-radiusプロパティが追加される予定ですが、現在のところCSS3は一部のWebブラウザーしか対応していませんし、border-radiusプロパティの実装状況にもばらつきがあります（Firefoxの -moz-border-radius、Safariの -webkit-border
使わなにゃ損！記号フォントで作るWeb素材 (1/2)
アイコンやバナーなど、Webサイトのデザインにちょっとしたイラストを使いたいけれど、絵はまったく描けない。かといって、他人に頼んで描いてもらうほどでもないし……。そんな困ったときには、記号フォントを試してみてはどうだろうか？ 記号フォントとは、通常アルファベットなどの文字が割り当てられている文字コードに、記号や絵文字を割り当ててある特殊なフォントで、Windowsの場合は「Wingdings 1」「Wingdings 2」「Wingdings 3」「Webdings」が標準で付属している。いずれも身の回りのものをモチーフにしたイラストが収録されているので、うまく使えればネット上でフリーアイコンやイラストを探すよりも手っとり早い。今回は、Illustratorでの使い方と簡単なTipsを紹介しよう（以降の操作説明は、Illustrator CS4を前提としています）。 必要なときにすぐ使うた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEにも対応！10分でできるWebフォント実装法 (1/3)
菊池 崇の実践！CSS3道場
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
