Web2.0的サイトのグラフィック表現

一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。

時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。

そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。

その昔、凸状のリンクボタンが「ホームページ」の象徴だったように、Web 2.0的なサービスを提供しているサイトにも好んで採用されているグラフィック表現というものがあるように思えます。そんな「なんかWeb2.0」なデザインパターンを見つけ出し、実際にAdobe Photoshop CS2で実現するための方法をご紹介して行きましょう。

初回は「ガラス調の質感」です。メニューボタンや見出しタイトルの背景画像などで利用されている半透明のカラーガラスが反射しているようなグラフィックで、Mac OS XやiTunes Store(図01)などApple製品のGUIで採用されていたものにインスパイアされたものでしょう。

一昔前の凸状ボタンのような半立体の表現にも近いですが、もう少し自然な立体感と透明感、光の反射を表現する色の変化が特徴です。白～グレーを基調にした透明ガラスのほか、オレンジや黄緑、明るいブルーなど1つのサイト中にいろいろなカラーを組み合わせている場合も多いようです。

実際に作成してみよう

それでは、実際にPhotoshop CS2でガラス調の質感表現のボタンを作成してみましょう。最初にPhotoshop CS2で新規ファイルを作成します。[新規]ダイアログボックスでは、「プリセット:640 480」を選択すれば(図02)、Webグラフィック作成に適した設定でドキュメントが作成できます(図03)。

ひとつのグラフィック表現をボタンやタイトルバー背景などサイズが異なる領域に適用できるように、サイズの調整が簡単にできる「シェイプ」として図形を描くことにします。[ツールボックス]で[角丸長方形ツール]を選び(図04)、[オプションバー]で「丸み:8px」と設定します(図05)。「なんかWeb2.0」なボタンやタイトルバーには、角丸長方形が使われていることも多いのです。

まずはドキュメント内をドラッグして、横長の適当なサイズの角丸長方形を作成しましょう。デフォルトのペイント設定のままなら、黒い角丸長方形が描けます(図06)。「レイヤースタイル」を使用してカラーなど外観を変更しますから、ペイント設定は何でもOKです。

[レイヤー]パレットでは、新たに作成されたレイヤー上に角丸長方形がベクトルマスクとして描かれていることがわかります(図07)。このレイヤーが選択されている状態で、[レイヤー→レイヤースタイル→グラデーションオーバーレイ]を実行します。[レイヤースタイル]ダイアログが表示され、ダイアログ内では「スタイル」の「グラデーションオーバーレイ」がチェックされ、設定できる状態になっています(図08)。「グラデーション」のバーをクリックして[グラデーションエディタ](図09)を開き、グラデーションカラーを編集します。

サンプルとしてオレンジを基調にしたガラス調ボタンに設定します。グラデーションバー下を3カ所クリックして、「57%」「61%」「92%」の位置にカラー分岐点を作成します(図10)。分岐点はマウスによるドラッグで位置を自由に調整できるほか、「位置」項目に数値を入力して設定することもできます。

左端のカラー分岐点をクリックしてアクティブにしてからカラーサンプルをクリックし(図11)、[カラーピッカー]を表示させます。右下のWebカラー指定欄に「(#)fdbb3d」と入力してカラーを変更し(図12)、「OK」ボタンで[カラーピッカー]を閉じて[グラデーションエディタ]ダイアログに戻ります。左端のカラー分岐点が、指定したオレンジ色に変わります(図13)。

同様に57%位置のカラー分岐点は「#ff7e00」、61%位置は「#ffb14d」、92%位置は「#fcdc86」、右端の100%位置は「#eea93c」と指定して、中央部で急激に色が変化するグラデーションに調整します(図14)。

「OK」ボタンで[グラデーションエディタ][レイヤースタイル]の両ダイアログを閉じると、描いておいた角丸長方形の外観がオレンジのガラスが反射しているような表現になります(図15)。

ここではオレンジを基調にしたカラーで指定しましたが、グリーンやグレーなど他の色を基調にしたガラスボタンを作成する場合もカラー分岐点を同様の位置に作成し、彩度・明度が同じように変化するグラデーションを作成します(図16)(図17)(図18)。

さらに[レイヤー→レイヤースタイル→境界線]で「サイズ:1px」と指定したグレーの境界線(図19)や、[レイヤー→レイヤースタイル→光彩(外側)]で輪郭の外側にグレーのぼかしを追加する(図20)ことで、ガラスの質感がより引き立つようになります(図21)。この作例のように[角丸長方形ツール]などシェイプツールで輪郭を作成しておけば、[パス選択ツール]でパスやアンカーポイントを部分的にドラッグすることで形状の変更も容易に可能です(図22)。

作成したガラス調の質感のグラフィックは、文字とアイコンを追加してRSSアイコンにしたり<H1>タグの背景として使用する(図23)などの活用方法が考えられます。どのようなパーツとして利用しても、そこはかとなくWeb2.0的なサービスを喚起させるようなサイトイメージに演出することができるでしょう。