11月24日、ワコムはコンシューマー向けタブレットの活用方法をEラーニング形式で学べるオンラインサービス「ワコムクラブアカデミー」（以下、アカデミー）を開始した。アカデミーは誰でも無料で利用できる。 アカデミーでは、タブレットの基本的な使い方から、より本格的なテクニックの習得に至るまで、ユーザー自身のレベルに合わせて授業を受けられる。コースは現在「イラスト」「マンガ」を公開しているが、今後は「絵画」「コミック」「映像・写真」を追加し、幅広いユーザーの興味や嗜好に合わせてスキルを習得できるように充実させていく。 カリキュラム作成には、現在プロとして活躍しながら、他の教育機関などで講師を務めた経験も持つクリエイターなどが当たっており、ユーザーは基本から応用まで実践的なスキルを習得できる。また、Eラーニング形式なので、時間を気にすることなくユーザー自身の都合でコースを進めることが可能だ。ユーザー

「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための入門ガイド。PCサイト制作のノウハウを生かして作るスマートフォン（iPhone/Android）対応サイト制作の基礎知識から実践的なテクニックまで解説します。<cj:inc template="792" element_id="594257" />

ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを

アクセス解析ツール「シビラ」を開発・販売する環（かん）の江尻俊章社長から、「画面解像度の種類がここ数年で爆発的に増えている」という話を聞いた。Webサイトを運営していれば自社サイトの画面解像度シェアは分かるが、他社サイトまでは分からない。ASP型のアクセス解析ツールを提供している環であれば、より俯瞰した立場で状況の変化が分かるはずだ。「それは面白い！ぜひデータを見せてください」とお願いし、画面解像度のシェアを集計してもらった。 手元のASCII.jpの画面解像度のデータと比べると、シェアの順位が若干異なるが、シェアの高い上位3件が1024×768（XGA）、1280×800（WXGA）、1280×1024（SXGA）であることは同じ。では、4年前、2005年の解像度シェアはどうだったのかというと、下の表のように、今とはかなり異なる。この4年で、1024×768（XGA）のシェアが半減し、横

Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

Webデザイナー、（X）HTML／CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。<cj:inc template="792" element_id="499288" />

“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

この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま

本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を

Photoshopのカスタムブラシを使えば、Webサイトで使えるカッコいいグラフィックをあっという間に作れる――。先週、「アナログな質感」をテーマにネット上で入手できるいくつかのブラシファイルを紹介したが（関連記事）、「自分の環境では使えなかったぞ！」という読者もいるだろう。というのも、Photoshopのカスタムブラシ（ABRファイル）はバージョンによって異なり、新しいバージョンで古いバージョンのABRファイルは読めても、その逆はできない。たとえば最新のPhotoshop CS3で作成されたABRファイルは一昔前のPhotoshop 6では使用できないのだ。 古いPhotoshopで最新のPhotoshopブラシを使えるようにするにはどうすればよいのか？　今回はオープンソースソフトを使って手軽に実現する手順を紹介しよう。 そもそもPhotoshopブラシってどうやって作る？ 手順の説明に

「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。