WD Online

課題解決のためのUI実装講座 Web Designing 2016年2月号

Webフォントが普及しても、まだ手放せない画像テキスト(2/2) 画像テキストを使ったレスポンシブ対応メニューを実装してみよう

画像テキストとWebフォントのメリットとデメリットを理解したところで、画像テキストを使ったメニューを実装してみよう。今風にレスポンシブに対応するのはもちろん、CSSスプライトやSassを使って、効率的に制作していく。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

[IMAGE TEXT MENU 01]画像テキストを用いたレスポンシブなメニューをつくる

画像テキストを用いたメニューをつくってみよう。しかもレスポンシブデザインに対応させ、さらにPC版とスマホ版で一部異なるデザインにする。こうした場合は必要な画像ファイル数がかなり増えてしまい、実装の手間がかかる上に、サーバへのリクエストも無駄に増えてしまう。そこで、CSSスプライトやSassを使用して、これらの問題を解決する方法を紹介しよう。

Photoshopから個別画像の書き出し

作成するのは、テキスト部分がすべて画像のPC・スマホ対応メニューだ(01、02)。

a7e33ad2543234a767ccea2fb4d0cd3d.jpg
01 作成するサンプル
シンプルなUIでも、PC版とスマホ版で30枚の画像が必要となる
<ul class="button-list">
  <li><a href="#" class="button top active"><span class="sprite">トップ</span></a></li>
  <li><a href="#" class="button blog"><span class="sprite">ブログ</span></a></li>
  <li><a href="#" class="button latest"><span class="sprite">新着</span></a></li>
  <li><a href="#" class="button popular"><span class="sprite">人気</span></a></li>
  <li><a href="#" class="button recommended"><span class="sprite">おすすめ</span></a></li>
  <li><a href="#" class="button search"><span class="sprite">検索</span></a></li>
</ul>
02 HTMLの抜粋(sample/sample.html)

まず、Photoshopでボタンのテキストをデザインする。ボタン状態は「通常」「ホバー(PC版のみ)」「選択中」を用意し、Retinaディスプレイなどの高解像度画面向けに、PC版とスマホ版で異なる解像度のボタンを作成する(03)。

0d184de528d3c1bf8f83a32be52a4029.jpg
03 Photoshopで作成したデザイン
Photosohpのアートボードにボタンの状態ごとのデザインをまとめていく

あとは、各ボタンのデザインをPNGファイルとして書き出す(04)。

41be8a6dfe009864780bc6b1c3836056.jpg
04 Photoshopから書き出し
バージョンCCでは、レイヤーから個別に画像書き出しができる。書き出したいレイヤーを選択し、右クリックで「PNGとしてクイック書き出し」を実行するだけだ。レイヤー名が書き出し後のファイル名となるので、規則性のある命名をしよう

スプライト画像の作成

Photoshopで書き出した画像は30枚にもなる。このままだとサーバへのリクエストが無駄に増えるので、画像を一枚にまとめて background-positionで位置をずらして配置する「CSSスプライト」を使用する。今回、スプライト画像の作成にはTexturePacker※1を使う。

Photoshopから書き出した画像をTexture Packerの画面にドラッグすると、画像のプレビューが作成される(05)。Publish sprite sheetボタンを押して保存先を指定すると、スプライト画像とCSSコードが出力される。

37f1d736e99937c210ed94fe56ea7e88.jpg
05 TexturePacker から書き出し
無料版では使用できないオプションがあるので、エラーメッセージが出る場合はオプション内容を確認しよう

スプライト画像の最適化

スプライト画像をそのまま使用するのではなく、少しでもデータ量を軽くしておきたい。ImageOptim(OS X対応)※2やPNGGauntlet(Windows対応)※3といった、透過PNGの容量を最適化できる無料アプリケーションがある。最適化の効果は画像によって異なるが、多いときは20%から40%ほどの容量削減効果が期待できるので、ぜひ行っておきたい。

[IMAGE TEXT MENU 02]Sassの機能をフル活用してスプライト画像を効率よく配置する

メニューでCSSスプライトを使う際に面倒なのが、同じようなCSSスタイル定義をボタンごとに何度も繰り返す作業だ。さらにレスポンシブ対応ともなると、ボタン一つで多くのスタイル定義が必要になる。このような繰り返し部分を持つUIの場合、Sass※4の変数、連想配列、@mixin、@eachなどの機能を効果的に使うと効率よく実装することができる。

 

TexturePackerで生成したCSSから、変数の一覧を作成する。テキストエディタの検索置換機能などを使って、「変数にスペース区切りで数値が代入された」データに整える(01)。

.item1-1x{width:42px; height:15px; background-position: -107px -25px}
.item1-2x{width:82px; height:29px; background-position: -5px -91px}
.item1-active-1x{width:42px; height:15px; background-position: -154px -25px}
.item1-active-2x{width:82px; height:29px; background-position: -313px -91px}
.item1-hover-1x{width:42px; height:15px; background-position: -201px -25px
$item1-1x: 42px 15px -107px -25px;
$item1-2x: 82px 29px -5px -91px;
$item1-active-1x: 42px 15px -154px -25px;
$item1-active-2x: 82px 29px -313px -91px;
$item1-hover-1x: 42px 15px -201px -25px;
 省略
$item6-1x: 30px 15px -334px -5px;
$item6-2x: 59px 29px -318px -57px;
$item6-active-1x: 30px 15px -369px -5px;
$item6-active-2x: 59px 29px -254px -57px;
$item6-hover-1x: 30px 15px -229px -5px;
01 TexturePackerから書き出したCSS(上)
SCSS(sample/style.scss)。class名を変数名に変更し、プロパティを除き、「変数にスペース区切りで数値が代入された」データに整形する(下)

@mixinの作成

整形したデータを使って、スプライト画像を配置する@mixinを作成する(02)。この第2引数に0.5を入れると、画像をRetinaディスプレイ用の2分の1サイズで表示することができる。途中の計算では、変数の内部から数値を取得するためにSassのnth()関数を使用している。

変数をmap型のデータにまとめる

Sass 3.3以降では「map型」というデータ型で、連想配列を作成できるようになった。今回は作成した変数をボタンごと、デバイスごとに整理してmapに格納した(03)。

@eachによるループ

map型のデータを対象に、@eachでまとめてスタイルを作成している(04)。@eachを使うと、連想配列の内容一つひとつに対して処理を行える。内部のデータへのアクセスには、Sassのmap-get()関数を使用している。

// 配列と拡大率からスプライト画像を配置するミックスインを定義
@mixin sprite($sprite, $scale:1) {
    // スプライト画像全体の横幅・高さをここに入力
    $sprite-width: 477px;
    $sprite-height: 125px;
    // 背景画像サイズを計算
    background-size: $sprite-width * $scale, $sprite-height * $scale;
    // オフセットを計算
    $sprite-offset-x: nth($sprite, 3) * $scale;
    $sprite-offset-y: nth($sprite, 4) * $scale;
    background-position: $sprite-offset-x $sprite-offset-y;
    // 表示サイズを計算
    width: nth($sprite, 1) * $scale;
    height: nth($sprite, 2) * $scale;
}
02 SCSS(sample/style.scss)
// map型データを作成
$spriteMap: (
    top: (
        // PC用データ (通常, ホバー用, アクティブ用)
        pc: ($item1-1x, $item1-hover-1x, $item1-active-1x),
        // SP用データ (通常, アクティブ用)
        sp: ($item1-2x, $item1-active-2x)
    ),
 省略
    search: (
        pc: ($item6-1x, $item6-hover-1x, $item6-active-1x),
        sp: ($item6-2x, $item6-active-2x)
    )
);
03 SCSS(sample/style.scss)
// map型データを対象にループでルールを作成
@each $key, $item in $spriteMap {
    $pc: map-get($item, pc); $sp: map-get($item, sp);
    .#{$key} { // インターポレーションを使い、class名にmapのキー名を代入
        > .sprite { // SPサイズ
          @include sprite(nth($sp, 1), 0.5);
        }
        &.active > .sprite { // SPアクティブ状態
            @include sprite(nth($sp, 2), 0.5);
        }
        @media all and (min-width: 600px) {
            > .sprite { // PCサイズ
              @include sprite(nth($pc, 1), 1); 
            }
            &:hover > .sprite { // PCサイズホバー状態
                @include sprite(nth($pc, 2), 1); 
            }
            &:active > .sprite, // PCサイズアクティブ状態
            &.active > .sprite {
                @include sprite(nth($pc, 3), 1);
            }
        }
    }
}
.sprite {
  background-image: url(./sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%; overflow: hidden;
  white-space: nowrap; display: inline-block;
}
04 SCSS(sample/style.scss)

※1 TexturePackerはさまざまな形式でスプライト画像を作成できるアプリケーション(OS X、Windows対応)で、無料版でもCSSスプライトを書き出すことができる。 https://www.codeandweb.com/texturepacker
※2 ImageOptim
※3 PNGGauntlet
4 Sassとは、CSSを効率よく記述するためのCSS拡張メタ言語。変数やネストなど、CSS仕様には用意されていない機能を使うことができる。

 

64f6d4d9973cb69f740814fd82cfe0af.jpg
藤田遼
インターネット・アカデミーにてHTML・CSSを学ぶ。2013年より(株)LIGに入社。現在はWebデザイナーとして主にコーポレートサイトのリニューアルやキャンペーンサイトのデザイン業務に従事している。
9df82bcd1ce9f98150a4559fcec415a3.jpg
堀祐磨
多摩美術大学を中退後、デザイナーとしてグラフィックデザイン・Webデザインを経験。デザイン業務のかたわらプログラミングを行うようになり、Webフロントエンドへ関心を持つ。2015年に(株)LIGに入社。 http://liginc.co.jp/

掲載号

Web Designing 2016年2月号

Web Designing 2016年2月号

2016年1月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

IoTの現在――その先にあるビジネスのヒント

サンプルデータはこちらから

■ 特集:IoTの現在
 その先にあるビジネスの「ヒント」

2015年、「モノのインターネット」と訳される「IoT(Internet Of Things)」が急速に広まりました。「モノの価値が変わる」「ビジネスが変わる」「生活が変わる」など、さらなる期待が寄せられています。けれども、「IoT」というコトバだけが先行しつつあるのもまた事実。IoTが指し示すこと、そして本当の価値をあなたは理解していますか? ネットとモノ、ヒトとモノ、そしてモノとモノがつながることで生まれる新たな価値とはなんでしょうか。その恩恵を最大限に享受するためにも、いま知っておきたいIoTについて学んでいきます。

 第一人者に聞く基礎知識「「坂村 健先生、IoTってなんですか?」
 6つのキーワードから理解する「さまざまなIoTのカタチ」
 IoTによる課題解決と価値創造「ビジネスのIoT事例」
  e-kakashiが変える農業の姿/「ともだち家電」が提示する新たな価値
 「ユカイ工学」の青木俊介さんに聞く「作り手から見るIoTの未来」

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
有馬記念でさがせ!/早押しクイズ連動ドラマ「脱線刑事」/Slay Your Next Giant/おもてなでしこ伝承中/Bj?rk「Mouth Mantra」/Because Recollection/ztokyo/The Standing March/にこにこ小児歯科/Sagakeen 佐賀県×スプラトゥーン 公式サイト/OKINAWA: The Secret is Out

■ ビジネス・EC
 □ ECサイト業界研究
 AI/FinTech/配送 ――5年後を見据えた2016年のキーワード

 □ 月刊店舗設計
 和座本舗:複数店舗展開で石川県から全国・全世界へ届ける

 □ モバイルビジネス最前線
 アオイゼミ:「無料+ライブ動画+α」で急成長を遂げるオンライン学習塾アプリ

 □ 知的財産権にまつわるエトセトラ
 映画の著作権は誰のもの?

 □ Bay Area Startup News
 SNSメッセージ感覚で送金できる「Venmo」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 コンバージョン率改善の近道は意思決定ボタンにあり

 □ ハギハラ総研
 国境を越えたECは日本でも定着するか

 □ デジタルプロモーションの舞台裏
 日本全国にブランド認知を拡げた、福岡発のバス施策

 □ 行動デザイン塾
 初めての行為がなぜ習慣化していくのか?

 □ 課題解決のためのUI実装講座
 Webフォントが普及しても、まだ手放せない画像テキスト

 □ 解析ツールの読み方・活かし方
 サイトの改善ポイントを見つけるための現状把握

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]「 リアル」と「リアリティ」:Volvo Trucks 眞鍋海里
 [デジタルプロモーション]歯の健康をリンゴで診断:Dentapple 築地 Roy 良
 [Webサービス]指先で創作する時代:Adobe Post 仲暁子
 [IoT]インターネット的体験:Amazon Dash Button 神谷憲司

 □ モノを生むカイシャ
 NAKED Inc.:異次元空間を生み出す魔法の仕掛け人

 □ 清水幹太の「Question the World」
 Jamie Carreiro:芸人根性がつくり出したハイブリッドモンスター

 □ ツクルヒト
 宮本卯之助(神輿師):義を重んずる神輿ディレクター

 □ 最果タヒの「詩句ハック」
 第20回 今日は何の詩?

 □ デザインにできることMonologue
 Vol.145 物理的デジタル

 □ エキソニモのドーン・オブ・ザ・ボット
 人間のソースコードが編集可能に! 遺伝子操作による“デザイン”は是か否か?

■ インフォメーション
 □ Topics
 オトコ心をくすぐる、自走式&可変ロボット「Tipron」/VR ヘッドセット「Oculus Rift」今春発売/10年目のクリエイティブアワード。グランプリは踊る折り紙「DANCING PAPER」と「ちゃんりおメーカー」に

 □ Special
 クリエイターのためのプラットフォーム「DemoDay.Tokyo」レポート

 □ Movement&News
 第8回恵比寿映像祭「動いている庭」/ホキ美術館5周年記念展/宇宙から見たオーロラ展2016/祖父江慎+コズフィッシュ展/「YouFab Global Creative Awards 2015」受賞作品展 ほか
 2015年も続くPC→スマホの消費者動向、アプリは利用者数を大きく伸ばすものも/ITエンジニアが注目する、2016年世間を賑わすキーワードとは?/日本の労働人口の49%が人工知能やロボット等で代替可能に/IoT普及を強力に後押しする無線技術! 実用化に向け開発中 ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています