【WEB向け】画像拡張子の種類と特徴

こんにちは!ユイPです。
2019年も残すところあと2ヶ月を切りました。今年は元号が変わったり消費税があがったり、変化の多い年だったな~と感じています。

さて、今回のテーマは拡張子です。拡張子というのは、画像や音楽などあらゆるファイルの名前の末尾につけられている文字列のことです。「ファイル名.●●」の「.●●」の部分ですね!
この記事では「主にWEB上で使われる画像」の代表的な拡張子の種類やそれぞれどんな時に適しているのかなどを簡単に紹介していければと思います。


GIF(.gif)

読み方:ジフ

最大256色で表現されるファイル形式です。色数が少ない画像を書き出すのに適しています。透過処理も出来て、容量も軽いため、ロゴやアイコンやボタンなどに最適な形式です。色数が少ないほどファイルサイズは小さくなります。
またGIFは可逆性圧縮形式の画像です。可逆圧縮とは、簡単に説明すると可逆圧縮は劣化が生じない圧縮方式の事です。一度保存した画像を再度加工したりリサイズをしても、画像が劣化しません。


【GIF 色数64 18KB】

上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。
ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。


【GIF 色数64 25KB】

こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。
色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。

またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。

アニGIFについてはぜひこちらの記事も参照してみてください↓
簡単!なめらかなアニメGIFの作り方

PNG(.png)

読み方:ピング

約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。透過処理も出来ます。(※種類による 後述します)
またPNGもGIFと同じく可逆性圧縮なので画像の劣化が起きません。
ただGIFや後述のJPGと比べると、ファイルサイズが大きくなってしまう事が特徴です。


【PNG24 63KB】

GIFで全く同じ画像を色数256色(最大)で書き出すと22KBでしたが、PNGにすると一気に63KB…およそ3倍になりました。
高画質にはなりますが、大きな画像を多用するページでPNGをたくさん使うと少し重くなってしまうかもしれません。

またPNGには種類が3つあり、「PNG32」「PNG24」と「PNG8」というのがあります。
フルカラーで表現出来るPNGは「PNG32」と「PNG24」の事を指します。

PNG32とPNG24の違い

PNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。PNG24の透明な部分はあくまで「透明な部分を表現している」のであり、厳密には透過ではないのです。
PNG32にもなるととてつもなくファイルサイズが大きくなるのであまりWEBには適していません。WEBでよく使われるのは「PNG24」、もしくはこれからご紹介する「PNG8」が主流になっています。

PNG8とは

GIFと同じように256色で表現される形式です。透過も出来て容量も軽いので、PNG8もGIFように色数の少ないデータを書き出す際に向いています。
ほぼGIFと同じなのですが、違いをあげるとするとグラデーションなどを含んだ画像において、PNG8の方がGIFよりファイルサイズが小さくなります。

同じ写真をそれぞれGIF、PNG8で保存して比較してみましたが…見た目に差異はありませんが、PNG8の方が少しファイルサイズが小さいですね。
まあ最終的にGIFを選ぶかPNG8を選ぶかは、個人の好みかな~と思います!

私は「画像PNGで欲しいです!容量200KB以下で!」と言われたら大体PNG8で書き出すようにしています。あとPNG8の事はピンパチと呼んでいます。多分日本でこう呼んでいる方は多い。はず。

JPG(.jpg)

読み方:ジェイペグ JPEGと表記されることもある

約1677万色を表現出来る画像形式です。写真などの色数の多い画像に向いています。そこまで聞くとPNGと同じじゃん?と思いますが、JPGは他の形式に比べ容量を軽くする事が出来るのが特徴です。GIF、PNGと違って透過処理は出来ません。
またJPGは、「非可逆圧縮」です。非可逆圧縮は、可逆圧縮と逆で保存を重ねるほど画像が劣化していってしまいます。一度そうなってしまったら元のオリジナルデータには戻せません。

一般的にJPGは写真向きの形式と言われています。スマホで撮った写真は基本的にJPGで保存されています。
単色のものやフチがはっきりしているものはぼやけてしまったり劣化が激しいのでJPGにはあまり向きません。


【JPG 最高画質】

画質も細かく調整して書き出しが行えるので、ファイルサイズと相談しながら圧縮が行えます。ただあまりにも圧縮すると劣化がわかりやすく表れてしまいます。


【JPG 低画質】

ガサガサになってしまいますがファイルサイズはこれでなんと10KB。

まとめ

・ロゴ、アイコンなどの色数が少ない~単色でフチがはっきりしているもの、アニメーションはGIF
・GIFのアニメーション以外の要素はPNG8でも代用出来るので用途によって使い分ける
・色数が多く、高画質に書き出したいイラストや画像はPNG24かPNG32(透過と容量に注意)
・写真はJPGが一般的(圧縮率に注意)

長々と書いてしまいましたが、まとめるとWEBで画像を扱う際はこのポイントを抑えておけば問題ないと思います。
今回はWEBで中心に使われている拡張子に特化して書きましたが、他にも色々な拡張子があるのでそれもまたいずれ紹介出来たらなあと思います。


いかがでしたでしょうか~ぜひ参考になれば幸いです。
それでは!寒さにお気をつけて!ユイPでした。

ツイッター↓
ユイP@デジマースブログ

リセットCSSを使わないデフォルトCSSを活かすHTML5タグの使い方

  1. そもそも正しいHTML5マークアップとは?
  2. タグの用途
  3. デフォルトCSSを活かした基本タグの組込み
  4. その他の基礎的HTML5構成タグについて

  5. WEBページをイメージしたレイアウトにするためには、閲覧ブラウザに組み込まれている邪魔なデフォルトスタイルシート(デフォルトCSS)をリセットすることになります(リセットCSS)。

    この本末転倒な無駄(誤った?)な作業はなんでしょうか。
    デフォルトCSSも良かれで組み込まれているものです。

    間違ったタグ選び/HTMLマークアップ、間違ったHTMLの書き方では丁寧に用意されたデフォルトCSSが活かせません。
    今回はデフォルトCSSが適切にあたるように誤りのないHTML5タグの使い方、正しいタグ選びと書き方(正しいHTMLマークアップ)に挑戦してみます。


    WEBページに文言を表示させるだけならテキストエディタで文字を打ち、ファイルの拡張子を「html」に書き換えれば良いです。

    ページ閲覧者は適切なタグで文字が表示されているか知る由もありません。
    そして、「章」「節」「段落」「画像」「キャプション」「注釈/細目」などが適切なタグでマークアップされていなければ、見出しを大きく表示したり、詳細説明文を小さくするスタイル調整の作業が都度発生します。

    正しい記述(マークアップ)がされているとブラウザのデフォルトスタイルが自動であたり、スタイルシートを用意しなくても、見出しはHタグのそれぞれによって章節項と大中小項目別に表示され、注意書きはキャプションにより小さく表示されます。

    また、こちらの恩恵のほうが大きいですが、記述が適切であれば検索結果へ正しく情報が反映され、利用者の検索ワードに対して適切なページが表示されることになりページビュー(PV)が増えます。


    例えばある読み物の構成する場合、印刷物では下記のような文章体になり、WEBページでそれを再現する場合は適応したタグに当てはめる(マークアップ)ことになりますが、その判断には個人差が生じる問題があります。

    WEBページと印刷物

    注意として、全てがこのようになるわけではなく、構成を考えた方の意思によって別のタグ構成も考えられます。

    重要なのは、章立てて考えた構成がブラウザや検索プログラムに伝えられなければデフォルトCSSは適切にあたらず、結果読みにくい表示が成されたページを調整するCSS作業が増えてしまうことなのです。


    それでは下記の原稿の文章をHTMLファイルに組み込んでいきます。

    ■ページタイトル
    190924記事内_デフォルトCSSサンプル01
    
    ■本文
    PCでも!スマホでも!記事数豊富なデザインブログ!
    DIGIMERCE BLOG
    DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET
    
    DIGIMERCE BLOGとは?
    多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介
    しています。
    
    【掲載カテゴリ例】
    
    WEBデザイン
    CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイア
    ウトを紹介
    
    UI/UX
    タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明
    
    サイズ/仕様
    スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく
    細部まで掲載
    
    ★画像の図1
    
    ※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります
    
    こんな方におすすめ!
    ・Webページの設計を進めているが何から始めたらよいかわからない
    ・スマホ用画像を作りたいが主要端末の画面サイズを知りたい
    ・マスコットキャラクターってどうやって作ればいいが調べたい
    

    最初に、章立てした構成ごとに分けてまとめる「section」タグの設定します。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta name=”robots” content=”noindex”>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>190924記事内_デフォルトCSSサンプル01</title>
    </head>
    <body>
    <section>
    PCでも!スマホでも!記事数豊富なデザインブログ!
    DIGIMERCE BLOG
    DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET
    </section>
    <hr>
    <section>
    DIGIMERCE BLOGとは?
    多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介しています。
    【掲載カテゴリ例】
    WEBデザイン
    CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイアウトを紹介
    UI/UX
    タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明
    
    サイズ/仕様
    スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく細部まで掲載
    <img src="img/190924_web01.png"  alt="図1">
    ※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります
    </section>
    <section>
    こんな方におすすめ!
    Webページの設計を進めているが何から始めたらよいかわからない
    スマホ用画像を作りたいが主要端末の画面サイズを知りたい
    マスコットキャラクターってどうやって作ればいいが調べたい
    </section>
    </body>
    </html>
    

    メインの構成を分けて適切に伝えるため、構成の固まり毎に「section」タグで囲いました。実際の見え方がこちら↓

    テキストをhtmlファイルに直書き、sectionタグで章ごとに囲み、imgタグで画像直置きした状態※罫線タグ(hr)を入れてます

    文言同士がくっつき読めた状態ではありません。

    「section」タグにデフォルトCSSの設定がされていないようですので、タグを入れたことでの見え方の変化はありません。

    次は、
    テキストを考えナシに「段落タグ」の「P」タグ付で表示させてみます。

    pタグでテキストを囲った状態

    …こうなります。

    やっと文字が改行、段落付けがされたので読めるようになりましたが、文字が置いてあるだけです。

    では、「h」タグで「見出し」付けを定義していきます。

    「h」タグを追加定義

    …見出しが認識できるようになったので見やすくなりました。

    「h」タグは優先度と構成順で「h1」~「h6」まであります。
    「h1」は大きい見出しで、数字が大きくなるにつれ文字の大きさは優先度が下がり小さくなります。

    「h」タグは、伝えたい重要なワードに適応することで、ユーザーの利便性に大きく影響をあたえますので活用していきましょう。

    さらに見やすくするため原稿内の「項目の説明部分」と「箇条書き」の部分に適切な、

    • 「dl」「dt」「dd」タグ(説明リスト)
    • 「ul」「li」タグ(箇条書きリスト)

    以上を定義していきます。

    「dl」「dt」「dd」/「ul」「li」タグを追加定義

    全体が適切な見え方に変化しました。

    最後に「p」タグの通常段落本文より優先度が下がる「注釈」「細目」に定義するテキスト部分に「small」タグを設定していきます。

    「small」タグを追加定義

    小さい文字が入ることで、さらに文字サイズのバリエーションが増え、訴求優先度の大中小表現が完成しました。

    以上のように、文章を読む目的では適切なタグでマークアップすることによりデフォルトCSSだけで表現出来ました。

    正直なところは…飾り気がなく寂しいですが、章立てて構成された見出しと説明の優先度は伝わっているのではないでしょうか。

    華やかな構成は付加価値としては必要ですが、文章構成を理解させる場合には重要ではないのかもしれません。


    ページで取り扱う内容によっては、文章に関連付けられた図表や、又は独立した欄外構成があり、それに応じたカテゴリを示すタグが存在します。

    • 「header」タグ⇒ ヘッダー部分の要素を括る
    • 「nav」タグ⇒ ナビゲーション
    • 「article」タグ⇒ 内容が単体で完結しているセクション
    • 「footer」タグ⇒ フッター部分の要素を括る

    それらのタグをつかい機械に伝え、適切なページ評価と検索表示をしてもらいます。


    さいごに

    今回、CSSを意識せず正しいHTML5マークアップに挑戦して、基礎のおざなりを痛感しましたが勉強になりました。
    タグの最適化を今後も進めていきます。

    十分な時間が確保出来ない案件はどうしても発生致します。
    可能な限りコーディング時間を減らし、考える時間を増やすためにも、正しいHTMLマークアップを固める行動を意識してみてはいかがでしょうか。

    次回も情報設計に関係した話題をお届け致します。
    デジマースのネモトでした。

[コピペOK]スマホ ハンバーガーメニュー(ドロワーメニュー)とスマホ レスポンシブ メニュー CSSだけでの作り方【2019】

【2019年版】
今回は、ソースをコピペして使える、スマホとPCのレイアウトをCSSで切り替えるレスポンシブと、モバイルファースト(スマホファースト)の設計概念では必要不可欠なドロワーメニュー/ハンバーガーメニュー CSSの記述について、読み込みと実行リスクがあるJavaScriptやjQueryは使わずCSSだけでハンバーガーメニュー(ドロワーメニュー)をシンプルに書いていきます。

※ HTML5/CSS3を学び中ですので、不適切な部分につきましてはご理解ください


モバイルファーストは利用者UCD/UXを考慮した現代的な設計概念の意味を持ちます

ドロワーメニュー/ハンバーガーメニューとは?

スマートフォンの画面では、PCでは表示できる大項目のグローバルメニューがサイズの問題でそのまま表示できないため、ハンバーガーメニューアイコンを押すことで展開させるUIが必要となっています。

展開されるメニュー画面は、メイン画面外の「引き出し(ドロワー)」に格納されて隠されているためドロワーメニューと呼ばれています。

今回はテンプレート使用を想定したシンプルなサンプルページを作成してます。HTMLとCSSのソースも展開してますので参考になれば幸いです。
※ お見苦しい箇所が多々ありますのでご了承ください


サンプルページ

▶サンプルページはこちら

「HTMLソース」「CSSソース」


HTML要素の文書構造化はやるべき!

レイアウト崩れの問題に直面したとき、文書構造をビジュアルで確認することで解決できました。また第三者が作業を引き継ぐ状況においても有効と思われます。


初心者故に?詰まるポイント

基本部分の理解が足りていないためミスに時間をとられました。備忘録として今回の作業のポイントを残してますので
気になる部分があれば確認ください。


  1. ブラウザに既に定義されているデフォルトスタイルシートを確認
  2. 「物理プロパティ」と「倫理プロパティ」の違い
  3. HTML5タグの引き出し不足
  4. 参考(コピペ)にしたCSSの理解不足
  5. CSS「疑似要素」をつかう目的
  6. 「inline-block」使用による予期せぬ隙間対応
  7. 特定ブラウザ固有バグの存在による使えない表現
  8. 「inputタグ」の機能を利用してレイアウトを切り換える
  9. Firefoxで「max width」が効かない事象


▶ブラウザに既に定義されているデフォルトスタイルシートを確認

各ブラウザにはあらかじめuser agent stylesheetというデフォルトスタイルシート(デフォルトCSS)が読み込まれています。

それらはレイアウトを細かく弄りたい状況で邪魔になるときがあるので、代表的なCSSリセットで効果を消したり、独自のCSSリセットをつくる人もいます。
今回はレイアウトする上で影響があるuser agent stylesheetを、把握する意味も兼ねて都度消しています。

さらに「全称セレクタ」などCSS効果反映の優先度もあり注意したいところですが、設定しているのに効かないスタイルがある場合は、
htmlが見難くなるので推奨しませんが、その対象タグに近い場所に直接「インラインスタイル」で記述すれば適応優先度が上がります。

また「物理プロパティ」で値を記述しているのに表示が効かない場合は「倫理プロパティ」により別角度で設定がされている状況が考えられますので十分確認します。
※編集の手間を少なくする目的で、適切なセレクタをつかう

検証画面はブラウザ上で右クリックするなどして「検証」を選べば確認できます↓

リストに戻る↑


▶「物理プロパティ」と「倫理プロパティ」の違い

下記CSSソースのはulとh1にタグに対してデフォルトのスタイルをリセットするスタイルです。

「margin-top: 0px;」が、見慣れた「物理プロパティ」での記述
「margin-block-start: 0px;」が、「倫理プロパティ」での記述です。

ul,h1 {/*レイアウト崩れを防ぐためにデフォルトスタイルシートをクリアー_物理プロパティと倫理プロパティ記述*/
	margin-block-start: 0px;
	margin-top: 0px;/*EDGE対応*/
	margin-block-end: 0px;
	margin-bottom: 0px;/*EDGE対応*/
	margin-inline-start: 0px;
	margin-left: 0px;/*EDGE対応*/
	margin-inline-end: 0px;
	margin-right: 0px;/*EDGE対応*/
	padding-inline-start: 0px;
	padding-left: 0px;/*EDGE対応*/
}


表示結果はどちらも同じですが概念が違っています↓

今回、作業を進めていく中、デフォルトスタイルシートに特定ブラウザで効果がでる倫理プロパティの設定が存在し、リセット対応しました。

リストに戻る↑


▶HTML5タグの引き出し不足

文言を訴求するだけの特集ページを作る機会が多く(極端な場合全てが画像でも問題ない)、「inputタグ」「formタグ」などユーザーアクションが必要なページを作成する機会がありませんでした。

inputタグは本来はラジオボタンやチェックボックス機能として入力部分に使用するタグですが、今回のドロワーメニューの出し入れの「判別」に使用する知識がありませんでした。

リストに戻る↑


▶参考(コピペ)にしたCSSの理解不足

今回参考にさせていた「ドロワーメニューのソース」をコピペしただけでは、カスタマイズして組み込む段階で詰まりました。

ソースと向き合って「動き」と「意味」を理解してはじめて最適化させることができたので、レイアウトデザインをおこなう状況では機能理解は必要でした。

リストに戻る↑


▶CSS「疑似要素」をつかう目的

HTMLソースは可能な限り見やすく編集しやすく、かつSEOのために可能な限りシンプルにしますが、そこで必要になるのがHTMLの記述に関与しないスタイルシート上だけに存在する「疑似要素」です。

「レイアウト」と「機能の組み込み」の為に重宝するようです。

クラスセレクタ等の後ろに「:before」「:after」をつけることで、「意味を持たない、HTMLに記述する必要がない疑似的なタグ要素」を追加できます。※CSS2を考慮した場合は「:before」(コロン1つ)。完全にCSS3向けで記述する場合は「::before」(コロン2つ)

「レイアウトの装飾」に使う場合は、ボタンの「押せる感」「遷移する感」を後押しする「矢印マーク」などの装飾部品を「画像」ではなく「システムで表示」が出来ます。

HTMLのソースに影響がないので検索エンジンの巡回ロボットに無駄に寄り道させる必要させることがなく、ソースが複雑化してページ評価も下げる心配もありません。

つまりはデザイナーがUX向上のためにページビジュアルに組み込める付加価値になります!

今回の用途ではキービジュアルに画面スクロール時の動きのインパクトを与える「固定表示」にする際、一部のブラウザで固定されない事象(ブラウザ依存)が発生したので、その不具合対応に使っています。
※SafariのiOS発生する、「background-attachment:fixed」が効かない不具合(画像固定が効かない)

※バナー画像については、そもそも一枚画像で全て作ってしまうことも可能ですが、画像更新の手間とSEOを考慮する必要はあります。
さらに、動きをつけたり動的要素の組み込みの制限や、表示する端末によって解像度不足や読み込み時間増など品質の影響を受けるデメリットが考えられますので、可能な限りCSSでの作成を進めています。

リストに戻る↑


▶「inline-block」使用による予期せぬ隙間対応

「h1」のタイトルスペースと「#nav-open」の隙間がどうしても空いてしまう事象への対応

CSS
#nav-open
内の

display: inline-block;


が影響しておりました。

inline-blockである必要性がなかったので

display: block;


に変更して対応しました。

#nav-open {
	display: block;
	height:0px;
	}


inline-blockに設定されていたことで予期せぬ空白が出来ておりました。

inline-blockの特性を理解して適切に使う必要があります。

リストに戻る↑


▶特定ブラウザ固有バグの存在による使えない表現

nav id="nav-drawer"


にドロップシャドウをCSSで設定すると、
heightが100%で表示されているはずのドロワーメニューの表示に不具合が出てheightが小さくなってしまいました。

こちらも特定ブラウザに発生する不具合の可能性があるようなので、
ドロップシャドウをかける対象を変更するなど代替要素を追加して、今後対応進めていきます。

リストに戻る↑


▶「inputタグ」の機能を利用してレイアウトを切り換える

<input id="nav-input" type="checkbox" class="nav-unshown">


inputタグのtypeをチェックボックスにすることで、
特定要素へのアクションにより表示を切り替えることができます。

#nav-input:checked ~ #nav-close {


チェックが入った状態でスタイルを切り換えることで、
ドロワーメニューの開閉を再現しているそうです。

CSSはいろいろ出来ますね。


html

<nav id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><span></span></label>
	<label class="nav-unshown" id="nav-close" for="nav-input"></label>
	<div id="nav-content">
		<ul class ="nav_box">
			<li class ="nav_text"><a href="リンク先のURL">TOP</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents01</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents02</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents03</a></li>
			<li class ="nav_text"><a href="リンク先のURL">other</a></li>
		</ul>
	</div>
</nav>


CSS

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;/*透過具合*/
	}

#nav-input:checked ~ #nav-content {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

リストに戻る↑


▶Firefoxで「max width」が効かない事象

参照したドロワーメニュー/ハンバーガーメニューのソースコードに、SP表示時、ドロワーメニューの開き具合を端末幅で最適化する目的で「max width」が組み込んであったのですが、
Firefox で特定条件でmax widthの設定が効かないため、色々回避策あるなかで対応するのではなく、今回は単純に「width」設定に戻しました。

レイアウト具合にこだわりがある場合は対応策を設定する必要があります。

参照元⇒「Firefox で max-width が効かないときの解決法 – SeijiNIshiwakiの日記」

リストに戻る↑


さいごに

PCを触らない人が増えているなか、それでも一定需要と確かな利用シーンがありますので、
今後もSP⇒PCそしてタブレットも含めたレスポンシブの最適化を進めていきます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Adobe Animate CC 2019 HTML5 Canvas 広告バナーサンプルと作り方

デザイナー向けのインタラクティブWebアニメーションツール「Adobe Animate CC」使って、スマホのWEB画面を横断する全画面を使った広告バナーサンプルを作ってみます。
画面の上部からキャラクターが降ってきて、下部に固定のバナーに着地する目を惹く広告です。
 


作りはシンプルな全画面広告

構成は下記の図のようになります。

とてもシンプルですが、
プログラムもコーディングスキルもないデザイナーでも、ツールで補助してもらいながら作ることで何とかなるかもしれません。

それでは早速挑戦してみます。


全面固定広告の制作

固定広告部分を「Adobe Animate CC」を使って作っていきます。
※細かいオペレーション部分は割愛

まずはソフトを起動してステージサイズとフォーマットを設定します。
普及端末数の多いiPhone6系画面サイズをWebページの「dvice width」値で設定
375x667px
(750x1334px)


下部固定バナー制作

バナーはメジャーな320x50pxのネットワーク系バナーを今回は仕込んでみます。

作った画像はAnimateの「ライブラリ」に格納して、いつでも配置出来る部品状態にします。

バナーの右側には画面上部から飛んで登場するキャラクターが着地するスペースになりますので、キャラクター画像は載せず空けておきます。


登場キャラクターの作成

アニメーションパターンは運用しやすさと読み込みを考慮して出来るだけ数を抑えます。
今回は

「飛び降りる滑降ポーズ」
「着地時のポーズ」
「立ち上がったポーズ」
「決めポーズ_アニメ01」
「決めポーズ_アニメ02」
「決めポーズ_アニメ03」

以上の6パターンを作りました。

作った画像は先ほどの固定表示されるバナー画像と同じで「ライブラリ」に格納しておきます↓


キャラクターの組み込み

ライブラリーに格納したキャラクター画像は画像のままなので、
制御するために「シンボル化」をします。

シンボル化は、名をつけたフォルダのようなものの中に画像を格納することで、JavaScriptの変数で制御したり、設定したアニメーション等、情報が引き継げるものです。
さらに編集作業などが簡単になり、素材の効率的な運用が出来、「アニメGIF」に比べ、ファイル容量を軽減するメリットもあります。

背景画像など、動かす必要のないものなどはシンボル化の必要はありませんが、背景を動的に差し替える、色変えするなど、状況によって制御する場合も想定できるため、原則シンボルして格納する癖をつけておきます。


グラフィックシンボルとムービークリップシンボルの違い

シンボルの種類は、違いがわかり難いですが、大きく「グラフィック」「ムービークリップ」があります。

「ムービークリップ」は、
原則、アニメーションを制御するモノで、メインのタイムラインとは独立したタイムラインを持ち、メインのタイムラインが、「stopのJavaScript」で再生が停止している状態でも影響を受けず動き続けることが出来ます。

独立して繰り返し動き続ける「キラキラ画像」など、エフェクト系のアニメーションを作る場合に向いており、スクリプトにより制御が出来ます。

「グラフィック」は、
原則、静止画像を扱うもの、ムービークリップ内で扱う「部品画像を格納(定義)する場所」という理解で問題ありません。
また、アニメーションもつけられますが、
こちらはメインのタイムラインと同期して影響を受ける為、メインのタイムラインが「stop」のスクリプトで止まっていれば、同じく停止します。

シンボルにはそのほか「ボタン」もありますが、、「HTML5 Canvas用」としてファイル制作する場合はボタンシンボルとしてのFlashファイルでは機能していたマウスアクション機能(オンマウスやクリックなど)は、HTML5 Canvasファイルでは現状機能しないため使用する機会はないと思われます。
※Flashファイル(swf)ではマウスアクションが機能します。


コマ画像を「シンボル化」して格納

今回はアニメーションの静止コマ画像を扱うので「グラフィックシンボル」として格納します。

格納方法はシンボルをダブルクリックで「ステージ」表示画面を開けるので、格納したい画像をライブラリからドラックして適当に置きます。
「Ctrl」+「Alt」+「1」~「6」キーで左上揃えや中心揃えなどショートカットが出来ますので試しましょう。

基本は左揃え
「Ctrl」+「Alt」+「1キー」
を行ったあと、
上揃え
「Ctrl」+「Alt」+「4キー」
を行う
「左上配置」にしておきます。

今回は要素が少ないので「ムービークリップ」にわざわざ「グラフィック」を格納せず、ルート(基本の親階層)にアニメーションのコマ画像を配置していきます。


「グラフィック」をタイムラインへ配置

それでは「グラフィック」(コマ画像)をタイムラインに格納してアニメーションを作ります。

タイムラインは1コマ毎の横並び制御になるので馴染みが多いデザイナーは多いと思います。

アニメーションの開始時点は画面上部画面外ですので、
ステージ上部座標の
x23
y-89
に配置します。
※キャラ画像は高解像度対応で150x150pxで制作してますが、配置する際は半分の72x72pxで配置します。

全6個のキャラクターアニメーション画像とベースバナー画像を配置します。

下部バナー画像に着地して「決めポーズ」をする画像の座標は
x284
y589
あたりで配置しています。

降下中のアニメーションは「飛び降りる滑降ポーズ」コマ画像を「画面外」と「着地寸前」の2箇所に始点終点として配置して「クラシックトゥイーン」で繋ぎ、自動補完アニメーションを使うと簡単です。(タイムラインの紫部分矢印が「クラシックトゥイーン」を設定した状態です。)


アニメーションの制御

アニメーション画像間の表示時間等(フレーム間隔)を調整してイメージ通りのアニメーションが出来ていれば配置は完了ですが、
一度再生されたらそれで止まったままだと広告効果が悪いので、決めボーズのアニメーションを定期的に特定フレームまでリープ処理をさせます。

こちらのスクリプトを最終フレームに書き込みます↓
this.gotoAndPlay(“anime_roop”);


これにより、赤旗で「フレーム名」(フレーム番号でも可)をつけた文字列”anime_roop”の旗地点まで戻って繰り返し再生
されることで無限ループ可能となりました。

バナー画像クリックによるWEB遷移の組み込みは、
下部固定ボタン画像の上に新規レイヤーを作り、

ボタン範囲を制御す「ムービークリップシンボル」を、
・バナー画像と同サイズ
・バナー画像と同座標
・白一色塗り
・アルファの設定を1%
にして薄く透過状態でボタン画像にピッタリ重ね配置します。

制御のJavaScriptは、
作った「透明ムービークリップ」を選択した状態で、「アクションパネル」(スクリプト入力画面)の「コードスプニット」から「HTML5」⇒「クリックしてWEBページに移動」を選べば自動で入力してくれて便利です。

※「ムービークリップ」などシンボルを作った場合は必ず「シンボル名」(名前)を付けておきましょう。
忘れると制御対象が設定できないので名前付けが必須です。


htmlとJavaScriptの書き出し

それではwebページへの組み込みを行います。

「Adobe Animate」から「パブリッシュ」を実行すると、

「html」ファイル
「JavaScript」ファイル
そして、使用した画像が格納されている
「img」フォルダ

以上が書き出されます。

JavaScriptはhtmlファイルのなかに内包する設定も可能です。
※「パブリッシュ設定」から書き出し詳細が変更できます。

以上を表示させたいWebページの「headタグ内」に、
書き出されたAnimateから書き出されたhtmlファイルの

<!-- write your code here -->

で囲まれた部分をコピペし、
「bodyタグ」周りの以下の部分をコピペ

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:375px; height:667px">
<canvas id="canvas" width="375" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:375px; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

スタイルは「position」プロパティで設定できる値「fixed」を設定して、画面のきまった位置に固定させる書き換えを行っています。
position: fixed; bottom: 0; left: 0;
を使って上部基準で固定して組み込めば完了です。

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="position: fixed; bottom:0px; left:0px; background-color:rgba(255, 255, 255, 0.00); width:100%; height:667px">
<canvas id="canvas" width="100%" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

コチラがWEBページに広告を組み込んだスマホ表示に最適化したサンプルページです↓
★組み込みサンプルを⇒ひらく


さいごに

ブラウザ画面全体を使った仕込み表現はFlashの時代からあった仕組みで目新しくはなく、
時代が一回りして戻ってきたと考えられます。

しかし、利用者に対して予測を超える表現は「ユーザー体験」を阻害する可能性が高く注意が必要です。

組み込む際は広告訴求内容と、対象サービスページの親和性を注意さえすれば、好意的に受け入れられる可能性も否定できないと考えます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホ画面CSSレイアウト:グラフィックデザイナー向け

グラフィックデザイナーはペーパーレス化の流れにより、紙からデジタル画面に関わることが多いのではないでしょうか。

今回は最低限の配慮レベルではありますが、贅沢な環境が整っている現在において求められる、「デザイナーとエンジニア間の温度差を減らせる」WEBページレイアウト作りを紹介致します。


まずは枠(要素)取り

紙でもWebでも同じです。
レイアウトをするときは大きなカテゴリから小さいコンテンツまでを枠(以後要素)取りしていきます。
「html」「body」タグの要素は、全体を包括する要素として存在しています。

Webコンテンツはインタラクティブ(双方向)に利用者が操作することが多いので、サイズを指定したレイアウトや装飾を行う各要素に対しては、名前(idやClass)を付けておく必要があります。

idはレイアウト構成項目ごとに別の名前で設定し、classは繰り返し使う装飾表現のセットとして使いまわします。

同じ名前のidは1ページ中に1回しか設定できません。(「特集コーナー」など同じ項目名が複数存在することはないとおもいますが)

※「hoge~」部分は、意味はなく、仮置きの言葉です、自身で適切な言葉に置き換えてください。名前欄によくある「○○太郎」と同じ使用目的。

名前つけをしなくてもdivタグとして要素自体は見えない形で存在していますが名前つけをしていないとCSSによる装飾に対応できません。
そして、装飾以外にもインタラクティブなメリットがあり、
例えば、利用者の性別に応じて特定の名前を付けた広告枠の表示/非表示を動的に制御する場合にも使用します。

「枠取り」「空白のデザイン」「コンテンツ優先度」を設定することは紙面を作る場合と変わりないのです。


機能をもつ表現の場合

単純な画像や文字組の配置であればそのまま実運用してしまっても問題ないですが、
デザイナーに立ちはだかるのは、「タブ」や「カルーセルパネル」などの機能です。

これらはスキルが必要なので、ありもののソースをコピペするか、
実運用を考慮して正しい要素を配置(正しいマークアップ)をしていきましょう。

表現は、画像イメージで作り上げるのは簡単ですが、コーディングする際HTMLで再現出来なければ絵にかいた餅です。

しっかりと実運用と同じ制御下のパーツ構成で作る必要があります。

どの部分が押されたら画面を書き換えるアクションが起こるのかを意識する必要があり、UI情報デザイン上では押せる部分と押せない部分のわかりやすさは、画面イメージを製作するデザイナーは意識する必要があります。


文字など全体設定を入れておく

とりあえず、
CSSファイルの一番上に下記をコピペしておきましょう。

@charset "utf-8";
/* CSS Document */

html {
	font-size:62.5%;/*10pt基準*/
}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
	font-size: 12px; font-size: 1.2rem;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: #ffffff;
	line-height: 1.4;/*文字行間設定*/
	height: 100%;
}

重要)「全角スペース」がソース中に含まれると、正しく動きません


CSSによるオブジェクトの座標操作

いよいよデザイナーのスキルを発揮する工程に入ります。

各パーツは設置するだけでは縦に並ぶだけですので、
横並びにしたり回り込んだりはCSSでの設定が必要です。

CSSの命令文やソースをは覚える必要はありません。
CSSを使える人でも使用頻度の少ない命令文はすぐ忘れてしまうそうですので、
ソースの横にコメントアウト(/*機能説明*/)で機能説明を書いたものをコピペして手軽に使っていきましょう。

<< 配置の色々を紹介 >>

【枠/パネル】

width:90%; /*横幅*/

padding-top: 50%; /*アスペクト固定*/
height:auto;/*親要素の高さを、格納した子要素の高さで合わせる*/

border: 1px solid #000000; /*枠線の設定*/
border-radius:6px; /*角丸具合*/
margin: 2em 5% 2em 5%; /*上、右、下、左の要素周りの空き具合*/

background: #ffffff; /*オブジェクトの塗り*/
box-shadow: 2px 2px 0px #00254A; /*シャドウ*/
-webkit-box-shadow: 2px 2px 1px #00254A; /*シャドウ_Google Chrome, Safari用*/
-moz-box-shadow: 2px 2px 0px #00254A; /*シャドウ_Firefox用*/

【テキスト】

text-align: center; /*テキストの揃え*/
font-size: 12px; font-size: 1.2rem; /*テキストサイズ(pxとrem両方同じ数値で)*/
color: #333333; /*テキストの色*/
padding: 1em 0% 1em 0%;/*テキストから要素四辺までの空き具合*/

list-style:none; /*リストマーク「・」を消す*/
font-weight:700;/*文字強調*/
font-style:normal;

【罫線】

hr.keisen {/*罫線*/
    border: 0 none; 
    height: 1px; 
    color: #696969;
    background-color: #696969;
	}

【位置/並び/回り込み】

display:block; /*要素の縦並び*/
display:inline; /*要素の横並び(テキスト制御など)*/
display:inline-block; /*横並びで一部inline特性*/
float:left; /*浮動独立させ右寄せする*/
overflow:hidden; /*子要素のはみ出た部分は表示されない*/

【要素の表現】

opacity:0.5; /*要素を透過*/
background-color:rgba(255,255,255,0.5); /*背景を透過*/

【重なり順序】

position:relative; /*要素のデフォルト表示位置を基準とする設定(相対)※z-indexに必要 */
z-index: -1; /* 重なり順序の設定*/
position:absolute; /*親要素の位置を基準とする設定(絶対)※z-indexに必要 */
z-index: -1; /* 重なり順序の設定*/

最後に

以上の基本的な設定だけでも数値を調整して想定レイアウトの再現に一部活用出来ると思います。

実運用ではブラウザ依存や機種依存など、またまだ補う設定が必要ですが、
エンジニアの方になかなか伝わりにくい要素間の空き具合だけでも最低限伝えられるのではないでしょうか。

ペンやマウス、illustratorから、
HTML/CSSに持ちかえて、
ダイレクトにインタラクティブ性がある絵が描けたら効率的ですね。

このページは今後も修正と追加をしていきます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホ画面レイアウト_ガイドライン_テンプレート

社内のスマートフォン(以下スマホ)向けのデザインガイドラインから、画面レイアウトデザインに絞って紹介します。


1. ガイドライン化の目的

2. 画面デザインの基本方針

3. HTMLで重要な「viewport」とは?

4. デザインしやすいフォントサイズ土台設定

5. フォントサイズパターンのガイドライン

6. 行間の設定

7. 左右の余白

8. 最後に「高さ」の余白設定


ガイドライン化の目的


ガイドライン化によるメリットを重視しない場合は意味を持ちませんが、テンプレートとして活用することで、サービスの立ち上げを短縮出来ます。

ポイントとして以下の3つでしょうか。

1. ブランディング
担当者の価値観に左右されない統一されたルールと表現


2. 効率化
サービスの立ち上げや運用コスト効率化をはかるため見せ方を統一


3. 精度の向上
都度ガイドラインの改修行い、精度の高いデザインに更新


画面デザインの基本方針


時間をかけてテクノロジーを導入し手の込んだ表層デザインにしても、ユーザーにはメリットがなく、自己満足で終わることがあります。

そういった傾向を回避するための方針が下記です。

1. シンプルに
2. ユーザー目線で
3. 新技術は追わない
4. 第三者チェック
5. 訴求は2~3秒で理解させる
6. アーティスティックな表層デザインは使わない
7. 明確な目的をページ毎に設定

ユーザーの目的達成に必要ではない要素は提供側のエゴになりますので、バッサリと割愛の判断して先に進むことが大事です。


HTMLで重要な「viewport」とは?


まずはスマホで表示されるweb画面の設定によりページの表示範囲や最適化に影響がある土台設定を行います。

ヘッダー領域の「Meta」内に下記「viewport」設定ソースを記述します。

******************Viewportソース_1******************
※ユーザーによるページのズーム不可
(アプリ的な固定画面を再現する場合はこちら)↓
<meta name=”viewport” content=”width=device-width,user-scalable=no”>
******************Viewportソース_2******************
※ユーザーによるページのズーム可
(文字、画像のユーザビリティー重視の場合はこちら)↓
<meta name=”viewport” content=”width=devicewidth,minimum-scale=1.0″>
*******************************************************

「viewport」とは、仮想的なweb表示領域を設定する機能で、
何も設定しない場合、

・iPhoneの場合の初期値は横幅980px
・Androidの場合の初期値は横幅800px

です。

スマホの物理的なティスプレイのリアルな解像度ではなく、
ディスプレイ内で表示される「ブラウザアプリケーション」などの仮想的Web画面表示領域/解像度のことです。

それでは「viewport」の設定による端末画面での見え方の紹介です↓


以上の設定による見え方の違いは理解できましたでしょうか。

スマホの場合は

“width=device-width”

の設定で、各デバイス側で適切にフィット表示してくれますので、設定はまずはじめに行いましょう。

ページ表示の土台が固定されたので次は「フォントサイズの設定」です。


デザインしやすいフォントサイズ土台設定


サービスで扱うフォントの大きさの設定をガイドライン化します。

基準点を統一必要があるため、HTMLタグの中で全体に影響がある「HTML」タグに、フォントサイズの基準設定を行います。

HTMLファイルとは別にCSS(スタイルシート)ファイルを設け、その中に以下の記述をします。

******************** CSSの記述例 ********************
html {
font-size:62.5%; /*10px基準*/
}


p.XXX {
font-size: 10px; font-size: 1.0rem; /*最小*/
}

*******************************************************

この設定を行うことで「rem」のフォント設定時に

1.0rem → 10px

という想定と扱いがしやすい明確な10px基準での大きさの設定がされ、

グラフィックデザイナーが「画面イメージ」をIllustratorやPhotoShopで作成する際に、
ピクセル数単位でフォントサイズの作業が進められます。
それによりコーダーとの組込み時の数値の乖離が少なくなるので有益です。


フォントサイズパターンのガイドライン


フォントサイズが10px単位で扱えるようになったので、ページ内で使用する用途別文字サイズを6種類に絞って設定してしまいます。

これにより都度フォントサイズの設定に時間を取られることがなくなり、各項目ごとに決められたフォントサイズを割り当てることが出来るようになりました。

丁度良い大きさのメリハリをつけた6サイズが下記となります↓

実際のフォントの大きさの違い具合が確認出来るでしょうか。

見出しは大きく、
通常説明文は程良く、
利用者の便益がないレギュレーション上必要な表記文などは必要最低限に小さく設定してます。

フォントサイズはガイドラインとして設定はしてますが、幼児やシルバー世代などにターゲットする場合は見やすくい大きさのルール設定が行われる必要はあります。


行間の設定


行間については表示されるブラウザのデフォルトCSSなど端末依存でのブレが発生しますが、

文字サイズの1.4倍以上~1.7倍まで空ける(推奨)

で設定されていればテキストが読みやすい間隔が確保でき、それ以下になると詰まった読みにくい文章になってしまいます。

******************** CSSの記述例 ********************
body {
line-height: 1.4;  /*文字行間設定*/
}

*******************************************************


左右の余白


左右画面いっぱいまで文字が置かれていると文章体が把握しづらいく読みにくいため、適度な余白が必要です。

ガイドラインでは表示幅全体を100%とした場合の設定を行うことで端末依存に対応できます。

テキストエリアの両サイドに、表示横幅の5%程度を左右にそれぞれ設定。


******************** CSSの記述例1********************
p.XXX {
margin:0 5% 0 5%; /*テキスト横空白設定*/
}

******************** CSSの記述例2********************
p.XXX {
width:90%; /*テキスト横エリア横サイズ*/
margin:0 auto 0 auto; /*エリアのセンター置き*/
}

*******************************************************
以上がフォントサイズまわりの設定となります。


最後に「高さ」の余白設定


ページレイアウトガイドラインの最後の設定は、テキストや画像などの要素間余白の高さです。

***************CSSの記述例_ソース1***************
p.XXX {
    margin:10% auto 10% auto;
    }

***************CSSの記述例_ソース2***************
p.XXX {
    margin:5% auto 5% auto;
    }

***************CSSの記述例_ソース3***************
p.XXX {
    margin:1.875% auto 1.875% auto;
    }

*******************************************************
こちらの設定も絶対的なものではなく、ページ構成の作業を進める上でとりあえずこの値で設定しておけば「おおむね問題ない」値です。

この工程に多くの時間が使えるスケジュールがあれば厳密に設定することは効果的ではあります。

以上のように、サイズや高さや間隔などをガイドライン化することで、実績あるページ設計が効率的に組み込むことができ多くのメリットを生みます。

効率化によって確保できた時間を有効活用してアドバンテージを増やしていきましょう。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

注意が必要なカルーセルパネルとユーザビリティーのポイント

カルーセルパネルとは?

カルーセル[carousel]パネルとは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWeb/UIコンポーネントです。


スマートフォンが登場した黎明期から、
カルーセルパネルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。

実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルパネルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。

今回はそんなカルーセルパネルを有効活用するためのポイントを紹介致します。


使いやすさのポイント

単純に単体静止パネルとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。

1. ちょい見せ

「単体パネル」ではなく「複数パネル」であることを認識させる表現にする。

2. 手動+時間での切り替え

停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる

3. 全体数の表示

全スライド数を認識させる

4. ポジション

現在のスライドの表示順番を認識させる

5. ループ

最終スライドから先頭へ戻る(ループする)ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。

以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。


カルーセルパネルの動きをプロトタイピング

「jQuery」などオープンソースから理想の表現が出来ているカルーセルパネルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。

それでは、カルーセルパネルの内容や動きが確認できるプロトタイピングして具現化してみます。

デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。

グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。


早速作る

まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセルパネル本来の動きが確認できるのではないでしょうか。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


最後に

いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。