アドビ システムズは、クリエイターのためのイベント「Create Now / PLUS ONE DAY」を開催した。本レポートでは、Webサイトの構築やコンサルティング業を行うスイッチの鷹野雅弘氏によるセッション「画像をなるべく使わずにWebをレイアウトするテクニック」の様子をお届けする。

これまで、Webサイト制作といえばPC向けに行うのが常識であったが、マルチデバイスへの対応が必須となっている現状がある。それに際して、鷹野氏は押さえておきたいポイントを3つ挙げた。

Web制作が置かれている現状について「おさえておきたい3つの動向」

ひとつ目には、スマートフォンが大画面化し、タブレット端末の画面が小さくなっていく傾向があり、互いの境界線が曖昧になっていることを示す「Phablet」という単語を挙げた。ふたつ目には、スマートフォンの機種が1万1,868機種(2013年)と膨大になっていることにより、これまでPC向けWebサイトではおおむね均一化されていた端末の幅や高さ、比率が端末ごとにばらつきを見せていることを挙げた。そして、3つ目にApple製品のRetinaディスプレイをはじめとした高解像度ディスプレイによる「HiDPI(高密度、高ピクセル化)」を指摘し、1pixel単位での画像サイズの指定・選択が非常に難しいことを指摘した。

スマートフォンが大画面になり、タブレットがコンパクトになることで境界線が薄れている

スマートフォンの機種が1万1,868機種(2013年)と膨大になっていることで、閲覧環境が「断片化」している

Retinaディスプレイや一部のスマートフォンなどで「HiDPI(高密度、高ピクセル化)」が進んでいるため、1Pixel単位で画像を作り込んでも表示するのが難しい状況に

こうした状況の中、今回鷹野氏はマルチデバイス対応を行うひとつの手段として「CSS3」を選択し、これまでは画像を作って表示させていたようなリッチな見た目のボタンをCSS3だけで表現する方法を公開。「角丸(Border Radius)」、「不透明度(RGBA/Opacity)」、「ドロップシャドウ(Box Shadow/Text Shadow)」、「グラデーション(CSS Gradients)」、「Webフォント(Web Fonts)」といった5つの要素に分けて、ソースコードを表示しながら解説を行った。CSS3で表現することにより、読み込み速度も向上し、後々変更が加わった場合などに手を入れるのが楽になるという利点がある。

CSS3でボタンを表示することで、メンテナンス性も高まり、断片化する閲覧環境に対応できる

「角丸」の四角いオブジェクトを表示するためのコード

そのほか、鷹野氏は「Illustrator」や「Photoshop」で描いた画像の「CSS書き出し」の方法も解説した。Illustratorの場合、最新版の「Illustrator CC」で実装しており、「CSSプロパティ」を開くとコードが表示される。初期状態では書き出しオプションの「名称未設定オブジェクト用にCSSを生成」のチェックが外れているため、レイヤーパネルでオブジェクトに名前をつけないと生成されないことを注意点として挙げ、逐一レイヤーに名前をつけたくないひとはチェックをあらかじめ入れておくことを勧めていた。

一方、「Photoshop」の場合は「Photoshop CS6(Creative Cloud版)」と「Photoshop CC」に「CSS書き出し」機能が搭載されている。Photoshopの場合はIllustratorと異なり、ウインドウメニューに「CSS書き出し」という項目がなく、何かオブジェクトを描いた後にレイヤーパネルを開き、右クリックで「CSSをコピー」を選択する方法をとる。これに加え、レイヤー名に基づいて保存するたびに自動で画像が生成され、画像のスライス&書き出しが不要になるCCからの新機能「画像アセット」を、「パワフルな機能」としてレコメンドしていた。

PhotoshopやIllustratorでCSS書き出しを行う方法が解説された

最後に、Webサイトにおけるフォントの表現方法に触れ、従来はシステムフォント以外を用いる際は画像にした上で表示するのが常識であったが、現在はGoogle提供の「Google Font」、モリサワの「TypeSquare」など各社が提供するWebフォントサービスが多数登場している。

アドビ システムズが提供するWebフォントサービス「Typekit」

鷹野氏は自信が「フォントマニア」であることを宣言した上で、現状のWebフォントにはまだ問題があると指摘。CSSで文字を強調する場合は太字設定を用いるが、タイポグラフィの世界ではフォント自体のウェイトを変えて太字を表現する。そのため、太字のWebフォントに太字設定が重ねがけされ、過剰な太さの状態で表示されてしまうことも起こりうるという。CSS側の太字設定を削除すれば正常表示が可能な時は問題解決となるが、Webフォントの読み込みに失敗した場合、文字が細くなり意図と異なる状態になってしまう。しかしながら、画像を使わずにさまざまなフォントを表示する手段として試してみる価値はあり、注目していきたいとコメントした。

最後に、アドビ システムズが提供するWebフォントサービス「Typekit」を紹介。同サービスの特徴として、Web上での表示だけでなく、デスクトップ環境などでも用いたいフォントについては同期機能によってローカルでの使用が可能となる。そのため、Webのほか印刷物などを手がけるデザイナーにとっては、ローカル作業のためにWebフォントで用いた物を改めて探す手間が省け、便利なものであることを説明した。

同セッションのまとめ

なお、同セッションのスライドはWeb上ですべて公開されているため、各項目をより詳細に確認したい人は参照してみてほしい。