ゲーム画面グラフィック_走査線表示の再現

コンテンツにはその時々の「環境」に影響された「体験」が存在します。

80~90年代の娯楽の中心であった家庭用TVは、真空管を利用した走査線があるTVで、現在の液晶TVや有機elTVでは再現が難しい独特の個性的な映像表示の仕組みを持っていました。

そんな当時の「環境」であるTV画面/ディスプレイに表示していた「家庭用据え置きゲーム機」のカクカクした粗いドットグラフィックを、あえて再現するデザイン/文化が根強く続いております。

当時の「体験」を求める需要と、「デザイン表現」としてソリッドなドットを好む需要がそれぞれ存在し、
2018年現在でも、インディーズゲームから商業ゲームまで、あえて粗いドットを採用したゲームが数多くリリースされています。

もちろん懐古や趣向だけでなく「メリット」が存在します。
以下でしょうか。

・必然的ローコスト
・アイデアに比重を置ける
・抽象的なのでセグメントが少ない

前置きが長くなりましたが、
今回は、そんなゲームグラフィックについて、当時の家庭用TVの環境を追体験する需要から、再現検証してみます。


表示機器のポイント

80年代に発売された家庭用ゲーム機では、
代表的な製品で、
256x224(256)px
の解像度でテレビ画面のアンテナ端子に接続してゲーム画面を映してました。

出力された映像は独特の歪みとボケ、ノイズがあり、また当時の一般的なテレビのサイズは14~21インチ(4:3)で画質も粗いものでした。

256x224のゲーム画像を映し出した画像密度(ppi)はこちらの数値になります↓

・14インチSDTV(4:3)256×224⇒24ppi
・21インチSDTV(4:3)256×224⇒16ppi

※参考)現在のフルHDゲーム機の場合
・32インチHDTV(16:9)1920×1080⇒69ppi

ppiがとても粗いですが、ゲーム中のテキスト読む場合など想定すると、
当時のテレビの水平解像度(640程度)、垂直解像度(480程度)、さらにシャープ加減も悪かったので相応の粗い仕様だったと思われます。

下記画像はSDTVではなくHDTVのものですが(SDTVは下記画像の倍以上の粗さ)、
TVの画素を接写すると下記のような粗さのRGBの点がセットで1画素を構成しております。

参考に現在の液晶モニターとスマートフォン(細かすぎてRGBの画素が確認できない)がこちらです。

現在も新作が発売されている「カクカクで粗いドットグラフィック」の特徴としてこれらの表示機器の環境影響が無い全くストレートで高精細な表示になっています。
(疑似的に近い表現をソフトウェア側で行えるものも一部あります)

それらについて、80~90年代の悪く言えば画質の悪いドットグラフィックゲームで育った世代は、高精細のドットの表示に違和感を感じるようです。

ドットグラフィックは抽象画像ですので、見る人により、想像するキャラクター像が変わってきます。
戦いに挑む研ぎ澄まされた目をイメージする人もいれば、ポップで明るい表情をイメージする人もいますが、
商品パッケージが存在すれば、そこに描かれたイメージイラストを投影する人が多いのではないでしょうか。

その想像に必要な要素はより抽象的な映像品質ですが、
高精細でエッジの立ったクッキリドット画面では、見てはいけない舞台裏構造が丸見えでゲームの没入感も下がります。

下記の画像は元画像は同じソースですが、
表示する環境により見え方がだいぶ変わってきています。

より違和感が少なく、表示として没入できる表現が比較できると思います。


半ドットの表現

先程の画像をみて気付くポイントとして、
高精細でエッジの立ったクッキリドット画像は、「環境」により「滲み/ボケ」が発生しそれによって自然なアンチエイリアスが発生しています。

3段階のグラデーションを作成してみると、

境界がシャープな画像と、滲みやボケの発生した画像では、段階の滑らかさに変化が生じており、
どちらがグラデーションに見えるか確認出来ると思います。

この表示環境を利用して本来使っていない色を再現するのが「タイルペイント技法」(ディザ処理)です。

この画像は白と黒をタイル模様に配置したものですが、
ボケのないシャープな表示ですと、白と黒の二色しか見えません。

しかし「滲み/ボケ」を利用すると、
白と黒の中間色である「灰色」が再現できます。

同じく他の中間色、混合色を作ってみました。

贅沢な表現が可能となった現在でも、同時発色数に制限がある環境など効果を発揮します。

拡大すると分かりますが、
タイルペイント(ディザ処理)によって少ない色数で画像を再現出来ているため、容量の大きな削減につながり、WEBページや画像転送では、表示速度を高めています。

PNG形式の画像には

・PNG8 … 256色発色/透明可/アルファチャンネル可※
     ※Fireworks書き出しでアルファチャンネル透明可
・PNG24… 約1,677万色発色
・PNG32… 約1,677万色発色/透明可/アルファチャンネル可

が存在し、
多くの色数を使用した場合は「PNG8形式」の範疇を越えてしまい、
「PNG24形式」「PNG32形式」の画像容量が極端に大きくなってしまいます。

現在でも、タイルペイント(ディザ処理)を適応して少ない色数の「PNG8形式」を使うことが望ましいと考えます(アルファチャンネルを含む場合は「Fireworks」必須ですが;)。

以上のように、
意図的「滲み/ボケ」を利用する事で少ない容量や制限下でも解像度以上の表現がされます。

さらにもう一つの環境効果として、
モニターの「走査線」を利用する事で、半ドット表現が可能となります。

走査線は映像と映像の間に必然的に出来る一方向の縞々線のような隙間で、
映像情報は無く真っ黒な横線になっています。

走査線はモニターの仕組み上発生する映像表示制限となりますが、
この線は結果としてドットの一部を隠すことになり、隠された部分の描写は実データー以上の表現として脳内に補完され映像を作り出しています。

右側の画像は疑似的に太目の走査線で0.5ドット分の黒線を追加してます。

ドット画像データを規則的等間隔の平行線で表示を隠す制限すると、
あるはずのない画像データが半ドット単位で補完されていくのが感じられます。


走査線の再現

作り方を検証していきます。

実は、今回作成する「SDテレビの走査線模様」は、フルHD解像度(1920x1080)では高さが足りなく、縦2880pxの細かさが必要になります。

最新の4Kテレビでも高さは2,160px(3840x2160px)しかない為、
「ゲーム」のSDテレビの表示表現を実現するには
8Kテレビ(7,680x4,320px)までの細かい解像度が必要になります。

納得できる画像再現表現を映し出す機器の普及には、まだまだ時間がかかりそうです。

それでは早速
「SDテレビの走査線模様」
を作っていきます。

SDテレビの解像度は640x480px 程度の想定でいきます。

走査線の黒線高さは、走査線の1/3とします。

480(高さ)x3(走査線の確保) =1,440px

※横の走査線の再現だけであれば縦1,440pxで足りるので4Kテレビ(3840x2160px)で再現が可能

TVの方式にもよりますが、拡大してみると1画素を作り出す縦線があります。

この縦線は走査線の黒線(1px)の半分の太さで再現するため、さらに倍の解像度が必要です。

1,440px x 2 = 2,880px

PhotoShopで
高さ2,880pxの画像を4:3の比率で作成します。

4:3 = X:2,880px
x = 3,840px

画像サイズは
3,840 x 2,880px

■横線の製作

 1)2pxの横線を引く
 2)4px置きにコピペ

■縦線の製作

3,840px / 640px(SDTV横解像度) = 6px

 1)1pxの縦線を引く
 2)5px置きにコピペ

出来た横線は「ボカシ」を3回程度かける

縦線は「ボカシ」を3回程度かけ、「不透明度」を50%にする。

ここまでで、
背景透過のpng画像で模様部分だけ書き出しすれば
「SDテレビの走査線模様」自体の完成です。

適応させたい画像はPhotoShopで「ボカシ強」を3~9回かけてボケボケ状態にして、「HDMI入力(デジタル)」以前のアナログな出力映像を再現します。

好きな画像を
3,840 x 2,880pxで書き出しして模様を重ねてみてください。
元画像は一度、
299x224pxか640x480px
などで解像度変更した画像を経由させた後、
3,840x2,880pxに解像度変更(ニアレストネイバー法)+ボカシ 
をすることで80年代の低解像度感が出せます。


気分は昭和ですね。


最後に重要なポイント

出来上がった画像が「暗い」ことに気づいたと思われますが、
理由は走査線により画面表面積の1/3を黒で塗りつぶしているためです。

失った元の明るさに戻すには、表示端末の輝度を33%程度明るくする必要があります。

消費電力の高さはデメリットでしかなく、
TVの消費電力の高さの要因だったと思われます。

現在、TVやモニターでソフトウエア制御で輝度を高くする仕組みとして「FreeSync 2」などのグラフィックカード側からモニター同期制御するテクノロジーが考えられますが、こちらは今後確認してみます。

コンテンツを楽しむうえで「体験」と「環境」は重要な要素です。
古びたアンティークな映画館での名作リバイバル上映など、コンテンツと環境の相乗効果は考えただけでも心躍ります。

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

バナー制作でおさえておきたいポイント

こんにちは。ユイPです。
最近2年使ったiPhone 7をiPhone XSに機種変更しました。画面とカメラの綺麗さにはテンションがあがりますが、まだ使いこなせている気はしません。

今回は「バナー制作の時におさえておきたいポイント」がテーマです。
以前「新米デザイナーが作る!バナーの作り方」という記事を書きましたが、あれから約10ヶ月…制作したバナーの数も10ヶ月前の時点では約300個でしたが、この記事を書いている時点で約800個まで増えました。1000個までもう少し。

前回の記事ではバナーの作り方を作業工程と共に解説していきましたが、今回はタイトルの通り、「バナー制作時におさえておきたいポイント」を解説していきたいと思います。

※前回の記事と少々書いてある事が被る部分もございます。
※またこの記事で使われているバナーは全て架空のバナーです。


バナーとは広告や宣伝などのために使われる画像の事です。
バナーの目的は主に「見た人にクリックしてもらう」事です。
掲載場所やターゲットによってデザインや訴求ポイントは変わってきますが、クリックしてもらうために「このバナーで誰に何を訴求したいのか」を考えて作っていく事が大切です。

これを踏まえて制作時のポイントを解説していきます。


1.めりはりをつける

例えばこの2つのバナーだったら、どちらの方が大事な文言がより強調されていると思いますか?
答えは下です。文字サイズの強弱や色の差がついているので「人気作品”無料”」という言葉が一番見せたい部分なんだなとわかります。
めりはりは文字サイズ、フォント、文字色などでつける事が出来ます。

掲載場所や内容によっては、文字や色のトーンが統一されたものなども使用されています。
そういったバナーは訴求力が重視されているのではなく、「雰囲気にあった」バナーである事が多いかと思われます。
広告などで使われるバナーは目を引く事が大事になってくるので、人の目に触れてほしい部分がどこかを考えて、強調する部分と控えめでいい部分、差をつけて作っていきましょう。

2.不自然な”余白”は埋める

このバナー…どうにも真ん中の文言と写真の間の余白が気になりませんか??文字や写真/絵を調整すれば埋められそう?…そんな時はどうにかして埋めてしまいましょう。

という事で文字の組み換え、写真のサイズ調整などをしてみた所、見事に埋まりました。
変な余白があるとなんだかそこに目が行きがちですし、画面も寂しくなります。文字を大きくする、組み方を変えてみる、文字間や行間の調整、画像があればその位置を調整してみる、図形や線を足してみる…など余白の埋め方は色々あります。
もちろん余白を活かしたデザインというのもありますので、埋めるのは”不自然な”余白です。

3.要素を散らばせない

人の目線は左上から始まり右下で終わる、Z型の流れのレイアウトが見やすいというのはどんな媒体にも言える事ですね。
もちろんバナーも、そういった流れを意識して自然と読みやすいように制作しています。

例えばこのバナー、要素が四方に散っているし、図形は多いし、どこが大事でどこから読めばいいのか…読めない事はないけど散らばっていてなんだか気持ち悪い…。
なので流れを意識して作ってみます。

これなら、上の情報と下の情報、混乱せずにスッと読む事が出来ると思います。要素を分散させずに、図形や線を使う時もバランスには注意しましょう。

4.困ったら位置変え・傾ける

基本の法則は守っているけれど遊び心がない。つまらない。そんな時は思い切って文字の位置を変えたり、傾けてみたりしましょう。

ちなみに傾ける時は左下から右上に向かって↗この角度で傾けた方が文章が読みやすいです!

5.表示されるサイズを考えて作る

私は普段1020×360のサイズのバナーを作る事が多いです。そのサイズを開いていると、普通にPhotoshopの画面いっぱいくらいに大きく表示されていますよね。
ここで陥りがちなのが、「スマートフォンの画面サイズで見た時に、文字がちゃんと読めるか?」という問題です。

このバナー、PCの画面では大きく見えていても、実際にサイトに掲載されたら…(スマートフォンでこのブログを読まれている方には既に見えづらいかもしれません)

こんな風に小さくなりますよね。こうなった時、このバナーの上の部分の白文字、読めますか?正直読みにく~~いですよね。
こうならないためにも、ある程度サイズが小さくなった時の事も考えて制作しましょう。
今回はこのように調整してみました。

白文字の部分に太字の効果をかけ、背景に濃い色を引いてみました。先ほどのよりは少しは見やすくなったかと思われます。

このように情報量が多いバナーだと限界もありますが、出来るだけ配慮して制作しましょう。

6.文字間・行間の設定はしっかり

文字が主役なバナーにとって、これは本当にとっても大事な事です。

文言・配置は同じでも、上のバナーよりも下のバナーの方が、読みやすいと思いませんか?文字間を調整する事で「55%OFF」の部分は更に大きく強調されていますし、緑枠の中の説明文も間を開ける事で読みやすく、無駄な余白もなくなりました。少し調整するだけで、こんなにも変わります。
文字は手動で調整してバランスを美しく整えましょう!


以上が、私がおさえておくべきだと思うポイント6つになります。

とは言え私もまだまだ勉強中で完璧ではありません。上記の内容も最初からわかっていたものではなく、色んなバナーを見て学んだり、たくさん指導して頂いて覚えたものです。
バナー作りにこれから携わる方は、色んなバナーを見て、学んで、たくさん作ってみてください!

それでは、また。
ありがとうございました。

簡単!ラフと回転ツールでほぼ完成!《輪切りの野菜・果物の作り方》

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

早速ではございますが、イラストレーター(以下:イラレ)で簡単に作れる輪切り野菜と果物の作り方を紹介したいと思います。
ラインナップとしましては『レンコンニンジンキウイ』となっております!

1.レンコン
2.ニンジン
3.キウイ

輪切りのレンコン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:c4c1ab/塗:e2e1d3]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
オブジェクトの真ん中に[30px×30pxの円]を配置します。
同時に[70px×120pxの楕円]も上部に配置します。
どちらも[淵:c4c1ab/塗:c4c1ab]

【4】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③真ん中の小さな円の中をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト4つを[Ctrl+D(4回)]で増やします。

【5】
①コピーした楕円6個選択しツールの[回転ツール]を選択し
[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【最後】少々調整を行ってレンコンの輪切りの完成です!

輪切りのニンジン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
幅400px 高さ400pxの円を用意。
[淵:e25b00/塗:ff8b00]

【2】
①[幅350px 高さ350px]の円を内側中央に配置。
②[淵:なし/塗:ff9f19]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅190px 高さ190px]の円を内側中央に配置。
②[淵:なし/塗:ffb839]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅156px 高さ156px]の円を内側中央に配置。
②[淵:なし/塗:ff8b00]

【5】
①[幅3px 高さ60px]の楕円を上部に配置。
②[淵:なし/塗:ff8b00]

【6】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト2つを[Ctrl+D(2回)]で増やします。

【最後】ニンジンの輪切りの完成です!

輪切りのキウイ

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:826f30/塗:9ac44b]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅300px 高さ300px]の円を内側中央に配置。
②[淵:なし/塗:aad156]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅120px 高さ120px]の円を内側中央に配置。
②[淵:c1d643/塗:ddd69f]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【5】
①[幅10px 高さ66px淵:なし/塗:8faf2e]と
[幅6px 高さ12px 淵:なし/塗:414240]の楕円を作成し
以下のように組み合わせグループ化(Ctrl+G)します。

【6】グループ化したら中央の円にかかるよう上部に配置します。
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト34つを[Ctrl+D(34回)]で増やします。

【最後】キウイの輪切りの完成です!


最後に

以上輪切りの果物・野菜の作成の仕方をご紹介させていただきました。
ラフツールも回転ツールも慣れてしまえばとても簡単です。
ここでは説明がしやすいように数値を決めておりましたが、作成したい大きさによって効果の加減などが変わってきますので、いろいろ試してみて下さいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

画像トレース&ライブペイントで簡単なイラストを描いてみよう

こんにちは!ユイPです。
だんだん暑さを感じる時期になってきましたね。

今回のテーマは「Illustratorで”画像トレース”と”ライブペイント”を使ってイラストを描いてみよう」です。
Illustrator(以下:イラレ)でパスを描くのが苦手だなあ…という方(私)でもこの2つの機能を使えば簡単にイラストを描く事が出来ますよ!


使用ソフト:Adobe Illustrator CC 2018
作業環境:Windows 7


最初に「そもそも画像トレースやらライブペイントって何だっけ??」という方のためにどういう機能かご紹介します。

画像トレースは、写真などを一瞬でベクター画像にしてくれる機能です。
例えば左側の写真に画像トレースを行うと、右のようになります。ちょっとイラストっぽくなりましたよね。

ライブペイントは、パス内に塗り絵のように色をつける事が出来る機能です。
タルトの手前にあったいちごの色を少し鮮やかにしてみました。

これらが”画像トレース”と”ライブペイント”の機能です。(詳しいやり方はこの後説明していきます)

それではこの2つの機能を使って、簡単なイラストを描いてみましょう!


まずはイラストの主線となるものを用意します。

準備が出来たらイラレで開き、「画像トレース」を行っていきます。

画像トレースの手順は以上になります。

トレースしたらお好みで自由に余分なアンカーポイントを削除したりなどして整えたり、パーツを描き足したりしてみてください。
なんとなく気に入らない部分もここで直してしまいましょう。

調整して完成した主線がこちらになります。

主線が出来たら、「ライブペイントツール」で色を塗っていきましょう。

以上がライブペイントの手順になります。

そして色を塗って完成したものがこちらになります。

どうでしょうか?とても簡単な行程だったのではないでしょうか?

イラレで画像を作成する際、何もないキャンバスに一からパスを形成していく、図形を変形させていく、画像を引いてその上をペンツールでなぞっていく…など色々な方法がありますよね。場面や時間、描くものによって様々なやり方があると思います。
今回はイラストでやり方を紹介しましたが、手書きのロゴを作る時などにもおすすめです。
最初に紹介したように、写真などをトレースすることも出来ますし、Photoshopなど他のツールを使ってデジタル上で描いたイラストをベクター化したい時にも使えるのではないでしょうか。

状況に応じて、ユイPおすすめのこの機能、是非一度使ってみてください★


以上「画像トレース&ライブペイントで簡単なイラストを描いてみよう」ユイPがお送りしました。
くれぐれも5月病にはお気を付けください。ではまた次回!

★毎日更新しているデジマースブログ公式Twitterもよろしくお願いします!


スマホ広告サイズ_バナー

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

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

「お菓子なもじ」Photoshopで簡単作成!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

お菓子なもじ

Photoshopを使ってクッキーにアイシングをした様なお菓子な文字を作ってみたいと思います。
今回「レイヤースタイル」を使ってエフェクトをかけますが、難しいことはいたしません。
初めて使用する人にも比較的優しい内容になっております。

文字エフェクトメイキング

※ここで紹介しております内容は、一作例となります。サイズ、比率等は説明のしやすい様に書いております。
また、エフェクトの設定の仕方などは誰でもわかりやすいようにしております。

—————————————————————–
★作成環境:PhotoshopCC2017
★動作確認:Windows10
※所要時間:15分くらい
—————————————————————–

(1)新規作成(Ctrl+N)で縦300px・横1200pxのファイルを開きます。

(2)テキストツールで文字を書きます。
文字【おかしなもじ/A-OTF 新丸ゴ Pro/U/150px】
文字の背景にクッキー部分がくるので文字幅を+300開けています。
※文字フォントがない場合は丸目の太字がおすすめです。

(3)アイシング文字の色を設定します。
パステル系統がオススメです。今回は下記色を使っています。
お:ff9dc2 菓:9fceff  子:c1ef83
な:ffffff  も:d5bfff じ:ffa6a6

(4)レイヤースタイルを加えていく準備をします。
グループを作成してその中に文字レイヤーを置きます。
※テキストレイヤーを選択した状態で(Ctrl+G)でもグループ化できます。

(5)【レイヤースタイル①】クッキー生地部分を作ります。
以下のどちらかの方法でレイヤー効果の編集画面を表示します。

表示されたら以下のように項目を設定していきます。

設定後↓

(6)【レイヤースタイル②】アイシング部分を作ります。
上記と同様にレイヤー効果の編集画面を表示します。
以下の値を設定します。

設定後↓

(7)【レイヤースタイル③】クッキー焼き込み部分を作ります。
今回は「グループ1」にレイヤー効果をかけます。
以下の値を設定します。

表示されたら以下のように項目を設定していきます。

設定後↓

焼いたクッキーの上にアイシングで飾った、クッキー文字が出来上がりました!

設定を変えて試してみました

上記のエフェクトメイキングの一部の数値を変えてみると以下のようになります。
見え方が全然変わってきますね!

上記のエフェクトメイキングの「境界線部分を10pxに変更」するとクッキー生地部分が減ってアイシングをたっぷりのせている風になりました!

ココア色にしたい場合は「光彩(内側):533a23に変更」
「境界線色:7b5e44に変更」するとそれっぽくなります。

・上記のエフェクトメイキングの「境界線部分を10pxに変更」
・文字のレイヤーを複製し、効果を各1つずつになる様にします。
その際上にベベルとエンボス、下に境界線が来るよう設定します。

・境界線の効果がある文字の色を境界線と同じ色に揃えて(今回の場合はfbdf8d)、
右クリック→「レイヤースタイルをラスタライズ」を選択しレイヤーを画像化します。

・あとはラスタライズしたレイヤー(クッキー生地部分)を文字のバランスに合わせていい感じに背景色と同じ色で塗り足します。
(今回の場合はfbdf8d)

上記のエフェクトメイキングの「ベベルとエンボス」「境界線」効果をオフにするだけです。
ピンク(苺):ffc1c6 緑(抹茶):b1d27f
黄(プレーン):ffd893

最後に

今回ご紹介したレイヤー効果の値ですが、あくまで一例ですので作成するサイズや好みに合わせて変えてみてくださいね。
また、これを参考に自分なりのもっとやりやすい方法を見つけていただけたら幸いです。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

新米デザイナーが作る!バナーの作り方

こんにちは!あけましておめでとうございます。ユイPです。
今年もよろしくお願い致します。
私は学生の頃、年末年始は巫女さんのバイトをしていたので今年は久しぶりにゆっくりしたお正月を過ごす事が出来ました。
お正月が終わったら次のイベントはバレンタインですね!


さて、今回のテーマはズバリ!「バナー制作」です。

私がデザインチームに配属になって半年が経ちますが、この半年間での私の主な業務はバナー制作でした。これまで制作したバナーの数は約300個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

★バナー記事第二弾(2018年10月更新)→バナー制作でおさえておきたいポイント

バナーとは、広告や宣伝のために使われる下のような画像の事です。

バナーをクリックする事で見せたいページに飛ぶ事が出来るので、主に「クリックしてもらう」事が役割となります。
表示される場所は自社サービス、もしくは他社のサービス上です。
文字のみのバナー、画像と文字を組み合わせたバナー、縦型や横型と種類やサイズも色々とあります。

掲載場所やターゲットによってバナーのデザインや訴求ポイントは大きく変わります。
種類は多々あれど、「このバナーで誰に何を伝えたいのか」まずはそこをしっかりと踏まえて制作する事が大事です。

ちなみに私がバナーを作り始めた初期のバナーは大体こんな感じでした。

作り始め感満載ですね…。

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 1080×360
▽掲載場所:自社サイト内
▽少女漫画の特集のバナー(無料試し読みあり)
▽ターゲット:女性
▽掲載文言
【もうすぐバレンタイン!青春する準備はいい?甘い恋物語10冊無料♡】
▽イラスト素材2点(どちらを使っても両方使ってもよい)

————————————————————————————————

早速作っていきますが、まずは深く考えずにキャンバスを作成してイラストや文言を何も加工せずに配置します。

とりあえず女の子のイラストのみを使用することにして、イラストは右、文言は左側かなとざっくり配置しました。フォントも普通のゴシック体のままです。
後から加工しやすいように文言はここであらかじめ分解しておきます。
色やサイズを変えそうだな…という場所は特に細かく分解します。ちょっとめんどくさい作業ですがのちのち作りやすくなりますよ。(もうすぐ/バレンタイン!/青春/する準備はいい?/甘い/恋/物/語/が/10冊/無料/♡)
素材の画像の編集(透過作業など)があればここで行っておきます。今回使用しているイラストは自前です!

また私は実際に作品を扱うバナーの際、作り始める前に公式サイトを検索してみたりどんな内容のお話なのか軽く試し読みしてみたりしています。
作品に100%合わせる必要はないですが、どんな作品か知っておくと純粋に作りやすいです。

バナーの目的はただ見てもらう事ではありません。クリックしてもらう事です。そのためには、どこに目をつけてもらうか考えて制作していかなければなりません。まだほぼ加工してないこの状態で、文言の強調したい部分を決めていきます。

見やすく、遊び心も加えながら大体こんな感じかなと文字を置いてみました。
今回まず一番強調するべき点は「無料」だと考え、無料の文字を一番サイズを大きく目立つ位置に配置しました。
あとは何が無料なのかも伝わらなければ意味がないので無料の次に「恋物語」も強調していきたいですね。恋物語と書いてラブストーリーです。

ピンクで囲ってある部分①がメインとなる目立たせたい文言、青で囲ってある部分②がそれを修飾するサブとなる文言です。
強調したい部分が決まったらフォントや背景も決めていきます。

文言のテーマ的に背景はやっぱりピンクかな~フォントは可愛らしく落ち着いたやつがいいかな~というイメージでこのようにしてみました。
あとはやはり「恋物語」の特集だし女性がターゲットならば男の子も欲しいな?いうことでイラストの配置も少し変えてみました。

強調したい部分や大体のレイアウトも決まった所でさあ色をつけていくぞ!

…といいたい所ですがその前にまずとても大事な作業があります。
「字間の調整」という作業です。

現時点でのバナーをよく見てみると…

このピンクで○した部分や線の部分、文字が詰まりすぎていたり、広がりすぎていたり…なんとなくまとまっていないと思いませんか?
見やすいバナーにするために、ここを調整していきます。調整は使うフォントを決めてからやりましょう。
(Photoshopでの細かい調整のやり方やそもそも字間って何?という方はこちらの記事をご覧ください。→たのしい文字組み 字間を調整してみよう)

調整したものがこちらになります。
細かいですが、文字のバランスが良くなって見やすくなったと思いませんか?
同時に「青春する準備はいい?」という文言の「する」や「は」や、「恋物語が」の「が」といった接続詞のひらがなを少し小さくした事で文章にメリハリがつきました。

また文字の位置の揃えも調整しました。
文章の端っこと端っこのラインをあわせてあげるとバランスよく整います。
変則的な組み方をする場合でなければ、端っこは出来るだけ揃えておく事が大事です。

文字の調整も終わった所で、次に背景を装飾していきます。
え?文字の装飾じゃなくて背景からやるの?と思うかもしれませんが、私の場合は背景の装飾を決めてからその背景の上でも見やすい文字の装飾を行っていきます。

ピンクの色合いを少し変え、キラキラしたテクスチャを載せてみました。なぜこれにしたかというとチョコレートっぽさを感じたからです。

背景が決まったところで遂に念願の(?)文字に色をつけていきます。

まず強調したい部分から色を決めていきます。
ここが強調したい部分にはやはり濃いめの色、赤や青、オレンジ…背景が黒の時は白、など目立つ色を使っていきます。

まずこのように色を置いてみました。
このようなバナーの場合、色数は多くても3~4色程度に抑えて出来るだけごちゃつかないようにしたいです。
ただこれでは色合いも同系色でメリハリがなく、白文字も少し読みづらいですし何より面白みがないですね…。
なのでメリハリを意識しつつ、遊び心も感じられるように装飾していきます!

こんな感じになりました。
茶色の地を入れて文字を黄色にした事で目立たせたい文言が更に強調されましたし、画面に締まりが出たと思います。
何よりピンクと茶色の色合いがバレンタイン感をより強めてくれました!

ここまできたらあとはもう色味や文字、イラストの位置などレイアウトを再度確認して調整するのみです。
字が間違っていないか…文字間の調整の見落としがないか…などもここで確認してしまいましょう。

微調整が終わってしまえば晴れて…完成です!
「もうすぐバレンタイン!青春する準備はいい?甘い恋物語が10冊無料♡」バナーが完成しました。


いかがでしたでしょうか。

今回の記事ではイラストを使用し、「無料」という文言を強調させるようなバナーを制作しましたが、最初に書いた通りバナーにもたくさん種類があります。今回この記事で作成したバナーは、オシャレさというよりかは「見やすさ」や「訴求力」が重視されるバナーです。
普段私はそのようなバナーを作る事が多いのですが、最初の頃はやはりオシャレに作りたくて細めのフォントを使ったり色数を少なくしたりして作ってしまっていました…。それが悪いわけではありませんが、求められているものと遠いものを作ってしまうのはいい事ではありませんよね。

最初に書いた事の繰り返しとなってしまいますが、掲載場所やターゲットによってバナーのデザインや訴求する部分は大きく変わります。
「このバナーで誰に何を伝えたいのか」ターゲットを見据え、求められているものを作る。そこをしっかりと踏まえて作る事がバナー制作において大事な事だと思います。

私もまだまだ勉強中です。日々先輩方に助けて頂いています。
これからもたくさんバナーを作ってもっと成長していきます!

長くなってしまいましたが以上、ユイPがお送りいたしました。
皆さんもこの1か月、バレンタインに向けて美味しいチョコレートをたくさん食べてください♡

★バナー記事第二弾はこちら→バナー制作でおさえておきたいポイント

————————————————————————————————

デジマースブログ公式ツイッター・インスタグラムを開設いたしました。

★Twitter https://twitter.com/digi_design_
★Instagram https://www.instagram.com/digi_design_/

記事と合わせましてこちらもよろしくお願い致します。

簡単!アニメーション GIFの作り方

こんにちは!今回のテーマは「簡単!アニメーション GIF の作り方」です。
アニメーション GIF (以下 アニメ GIF )の作り方がかわからない、上手く動かせない…とお悩みの方向けの簡単な内容になっています。

作業環境は下記の通り、Adobeのソフトを使用して作成します。

—————————-

■ Illustrator CC 2019
■ Photoshop CC 2019

—————————-

それでは早速作ってみましょう!


01.何を作るか決める

何を作るか決めましょう。
「どんなモノを作るか」だけでなく、「どんな動きをさせるか」までイメージすると作りやすいです。
例えば「ボールを作って」「上下に跳ねる動きを付けよう」とイメージすることが大事です。

私は「犬を作って」「嬉しそうにしっぽを振る動き」のアニメGIFを作りたいと思います。


02.アニメーション用の素材を作る

アニメーション用の素材を作ります。まずはラフを描き、Illustratorを使って描き起こします。
“アニメーション用”とはどう言うことかと言いますと「パーツごとに分けて作る」と言う意味です。

簡単な例えですと、「犬のしっぽを動かしたい」時は、「しっぽ」と「それ以外の部分」を分けて作ります。こうすることで、後で動きを付ける時に楽に調整することが出来ます。

分けて作っておかないと、いざしっぽに動きを付けよう!と言う時にパスで調整することになるので、非常に時間が掛かってしまいます。更に、やっぱり元に戻したいと思った時などの修正も難しくなってしまいます。

パーツごとに分けて作る際、最初からバラバラに作ると難しいと思いますので、ラフをなぞる過程でパーツごとに区切って下さいね。

パーツを分けると言っても、実際にどこをどう分けたらいいの?と疑問に思う方もいるかと思います。
基本として、まずはパーツをザックリ大枠でイメージすることが大切です。

大枠で捉えてから、動きのイメージに合わせて必要なパーツの足し算と引き算を行います。
必要なパーツの数は、どんな物にどんな動きを付けたいかによって1個~数百個に変わります。

例えば生き物の場合だと、「頭」「胴体」「上肢」「下肢」の4つが大枠のパーツになります。大枠が捉えられたらパーツの足し算と引き算を行います。
頭だけ動かしたいなら、「頭」と「それ以外」の2つのパーツが必要になります。
頭の動きと、歩行のアニメーションも付けたい場合は、「頭」「胴体」「上肢」「下肢」の4つのパーツが必要になります。

さらに、「肘や膝を曲げる」「瞬きをさせる」と言ったより繊細な動きを付けたい場合は、もっと多くのパーツが必要になります。
表現したい動きをイメージしながら、必要に応じて「腕」「手」「脚」「足」「指」「耳」「目」「口」など、細かく分けてパーツを作るとより自由に動かすことが出来ますよ。

関節や接続部分を意識するとパーツを分けやすいですが、指は?瞼は?と細かく意識し過ぎると果てしないので、イメージする動きに合わせてほどほどに分けて下さい。

今回は犬を作りますので、基本の「頭」「胴体」「上肢」「下肢」と、「耳」「目」「口」「しっぽ」の大きく8つのパーツに分けて作っていきたいと思います。
パーツを作る際のコツですが、パーツ同士が重なる部分は面積に少し余裕を持たせて作って下さい。理由としては、パーツを動かした時にスキマが出来ないようにする為です。

上記のことを意識しながら、Illustratorに新規ドキュメントを作ります。最初のレイヤー名は「01」にしておいてください。
レイヤー01のアートボードに犬を作っていきます。
実際に作った物が下の図になります。

一見普通の犬の絵ですが、分解するとパーツが沢山ありますね。
これでベースとなる素材は完成です。


03.コマを作る

素材が出来たら、次はコマを作っていきます。
アニメGIFは、複数のコマをパラパラ漫画のように再生することで動いているように見せます。

先ほど作ったレイヤー01が1コマ目になりますので、これをベースに2コマ目を作っていきます。

レイヤーパネルのレイヤー01をコピーして上に複製を貼り付けます。これが2コマ目になりますので、レイヤー名を「02」にします。
これで、アートボード上の前後に同じ絵が重なった状態になっているかと思います。

レイヤー02のパーツを動かして、2コマ目を作っていきましょう。
イメージする動きに合わせて、レイヤー02のパーツを傾けたり移動させたりします。
今回はしっぽを振るアニメーションにしたいので、まずはしっぽの位置や傾きを変えます。

位置が決まったら、これで2コマ目は完成です。
ちなみに、02のレイヤーの左側にある目のアイコンを表示させたり消したりすることで、Illustrator上でアニメーションを疑似的に確認することが出来ますよ。

この要領で、レイヤー02の他のパーツも動かしていきます。
目や口、耳なども調整を行います。

これで2コマ目も完成です。

今回は2コマを繰り返し再生するアニメーションにしますので、これで素材は揃いました。
もっと複雑な動きを付けたい場合や動きを滑らかにしたい場合は、必要なコマ数は増えていきます。

最後に、アートボードをコピペして、レイヤー01とレイヤー02をそれぞれ別のアートボードに配置します。
その後、アートボードごとにPNG形式で描き出してください。ファイル名はそれぞれ「01」「02」として下さい。


04.アニメーションさせる

いよいよアニメーションさせる作業に入ります。
ここからはPhotoshopを使います。

PhotoshopにPNGファイル「01」をドラッグ&ドロップして下さい。その上に重ねるようにPNGファイル「02」もドラッグ&ドロップします。
ここまでで、Photoshopの画面は下の図のようになっているかと思います。

一度、レイヤーパネルのレイヤー02の目のアイコンをクリックして非表示にします。
「タイムラインパネル」の「フレームアニメーションを作成」をクリックします。
すると、タイムライン上にレイヤー01が表示されます。これが1コマ目になります。

次に、タイムラインパネルのレイヤー01を選択した状態で、タイムラインパネルの右上にあるメニューを選択します。
いくつか選択肢が表示されますので、「フレームをコピー」を選択した後、「フレームをペースト」を選択します。
モーダルウィンドウが開いたら「選択範囲の後にペースト」を選びます。
タイムラインパネルに、左上に「2」と書かれたもう1つレイヤー01が表示されたかと思います。

左上に2と書かれている方を選択した状態で、先ほど非表示にしたレイヤーパネルのレイヤー02を表示させます。また、レイヤー01を非表示にしておきます。

タイムラインパネルの1コマ目と2コマ目の「ディレイ時間」を「0.5秒」に、「ループ回数」を「無限」に設定します。

これでアニメーションさせる準備は整いました。
タイムラインパネルにある再生ボタンを押してみて下さい。絵が動き出します。
実際の動きを見て、ディレイ時間やループ回数を調整してみて下さい。

「Web用に保存」でgif形式で書き出せば、完成です!


おわりに

いかがでしたでしょうか?
アニメGIFを作るのは難しいイメージがあった方も多いかと思いますが、このような単純な動きであれば簡単に作ることが出来ます。
もっと複雑で滑らかなアニメGIFを作りたい!と言う場合も、ご紹介した工程を繰り返したり増やしたりすることで可能になります。
時間は少し掛かってしまいますが、コツコツ作ることで誰でも作ることが出来ますので、ぜひ楽しんで作ってみて下さい。

それではまた!デジマースのコンでした。


簡単!SNSで使えるスタンプ画像の作り方!★無料プレゼント付お正月ver★

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼年末年始スタンプ画像

今年も残すところあと少しになりました。
新年を迎える準備で忙しくなりそうです…!
―――早速ですが前回に引き続き皆様にご使用いただけるような「SNSなどで使えるお正月のスタンプ画像」を作ってみることにしました!
量も増え、年末年始に使える仕様となっております♪
下のイラストが今回の完成図です。

▼(今回の)スタンプ画像作成の流れ

※ここで紹介しております内容は、一作例となります。サイズ、比率等は説明のしやすい様に書いております。
こちらは簡単に作れますので、簡単な作成の流れをゆるっと書いていきたいと思います。

—————————————————————
★作成環境:PhotoshopCC2017
★動作確認:Windows7
★イラスト作成:PhotoshopCC2017+ペンタブ
※所要時間は内容によりけりですが、集中して一日くらい
—————————————————————

【1】方向性を簡単に決めます。
年末年始/男女選ばす/気軽に使える
【2】大まかにどれくらいの量を作成するか決めます。
年末と年始になりますので少し多めに、今回は前回の倍、
年末年始大サービスの12点です!
【3】点数を決めたらスタンプ画像に盛り込む言葉などを考え、絞り込みましょう。

年末年始に無難に使える文言を12点選択しました!
バラエティ系も入れるといいですね。

【4】言葉が決まりましたらイラストの作成開始です。
ざっくり下書きしたものをスキャンしました。

【5】Photoshopの新規作成でファイルを開きます。
スタンプ画像なので250px×250pxサイズ位が丁度良さそうです。
【6】今回、線画や色味はペンタブで行いました。
(イラレのパスで作成するのも有りですね!)

【7】出来ましたらPNGで書き出しをして完了です。

▼プレゼント
上記でも記載しておりましたが、今回作成致しましたスタンプ画像12点を無料プレゼントさせて頂きます♪
もし1つでも気に入って頂けたら幸いです!

 

バックナンバー↓

いかがでしたでしょうか。
気軽に使って楽しんで頂ければ何よりです。
また機会がございましたら新バージョンを作成したいと思います!
(こんなスタンプ画像があったら便利なのに…というものがございましたら参考にさせて頂きます)
皆さんも年末年始、オリジナルスタンプ画像を是非作ってみて下さいね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

Webデザイントレンドとテクノロジーの必然的関係性

「トレンド」と書くとポジティブで先進的なイメージですが、
「流行」と置き換えると少なからずネガティブを感じます。

今回はそんな流行り廃りもあるWebデザイントレンドとテクノロジーの関係を考えてみます。


過去のトレンドとテクノロジー

まずは、
歴史ある量産性ともなう印刷技法として、
「シルクスクリーン印刷」を紹介します。

メッシュ目の素材に特殊な薬品を使って、
インクが通過する部分をつくることで版を作ります。
プリントTシャツなど単色表現、もしくは重ね合わせによる多色構成が可能な技法ですが、
その独特な仕上がりと印刷される側の自由度が高いため、
現在も活用され、1950年代後半から、商業、ポップ・アート、
芸術作品の表現手段として用いられました。
引用元:google画像検索
アンディ・ウォーホル/ マリリン・モンロー/1967年

シルクスクリーンによる表現も当時は先進的なグラフィックデザインとして捉えられ、
数多くのポップ・アートが商用利用されておりました。

重要なのは、その表現にはテクノロジー/テクニック(技術/技法)が伴っていたことです。

コンピュータの進化により、
独特な手順と工程、器具が必要であったこれらの表現も、
コンピューター上で疑似的に再現が可能となりました。

「規則的に凹凸のある紙にクレヨンで引いた線」や、
「こすれたマットな表面ながらも鈍く光るエッジを持つスチール表現」など、
デザイナーとして本質を知らなければ組み込みの発想に至らないため、
表現理論を知ることは必要です。


画面のトレンドとテクノロジー

それでは、過去のソフトウエアなどの画面表現について確認してみましょう。

画面表現は制約の歴史です。

1980年代の「8ビット」の時代は、限られた画面解像度と色パレット制限がありました。
使える色は、光の三原色をオンオフして再現可能なわずか8色
(黒、白、赤、緑、青、黄、紫、水色)でしたが、


この時代でも技術を駆使して高見を目指し、トレンド表現を作っておりました。

代表的な表現として、
少ない色数から新たな色を認識させる「タイルペイント」技法がありました。

2色をタイル状に交互に並べることで、
遠目で見ると2色の中間色を再現しています。
間隔を調整することで濃淡も再現できます。
モニターのコントラストが低く滲んでいる方が自然に見えたりもします。
この苦肉の策の技法は、現在も
「ディザ」処理(インデックスカラー256色など、少ない色数で段階の多い素材を再現する)として使われています。


テクノロジーの違いによる表現の違い

それでは最近のWeb表現トレンドである、
「グラデーション」について比較説明します。

グラデーションはGIFやPNGなどのビットマップ画像の場合、段階表現を増やし滑らかな色変化を再現するには多くの容量を必要とするため、利用できる機会が必然的にありませんでした。

グラデーション画像を運用する為には、容量を可能な限り軽くする必要があり、結果、滑らかなグラデージョンは失われ、再現できませんでした。

現在ではアイコンをはじめ多くの表現としてグラデーションが使われていますが、可能にしたのは下記要因です。

・回線情報転送量の拡大 ※【秒間】64kバイト程度 → 数メガバイト単位
・画像表示メモリ増
・演算によるリアルタイム表示 ※従来は書き出した画像での表示

CSSやSVG[Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)]
で表示出来るようになった点もありますが、
もっとも影響が大きいのは、
画像を減色等、最適化しなくても実運用に持ち込めるようになった回線速度テクノロジーの進化の影響ではないでしょうか。


高速かつ複数コア化したCPUの恩恵

回線速度の進化と並行して強力高速になったのはプロセッサ類です。
機器の処理速度をつかさどる頭脳ですが、
一旦の高速化鈍化を迎えながらも、
複数コア化によりさらに多くの情報を処理できるようにテクノロジーが進化したため、
いわゆる「力技」が出来るようになったのも大きいと考えます。

過去の非力なCPUでは画面の描画に時間がかかり、
JavaScript等による処理も足かせになって表示ストレスを生んでいましたが、
悪い意味で、無駄が多くで扱いやすい低速プログラミング言語や不適切なマークアップでも、
そこそこに見れるものが再現出来てしまう時代になりました。

結果、
段階表現がとても多く重いメガバイトレベルのグラデーション画像でも、ストレスを感じさせないレベルで運用できる環境が出来てしまっています。

不自由を感じる状況があるとすれば、
速度制限を受けたユーザー利用シーンの場合でしょうか。


まとめ

以上のように、
過去は制約上なしえなかった表現が現在のテクノロジーでは可能となり、
リッチでマテリアル感を押し出した表現ができている、
という見方もできるのではないでしょうか。
また、
最適なマークアップやプログラミングが出来ていなくても運用できることで、
専門工程職の必要性がなくなりつつあるのも時代の流れと感じますが、
Webやアプリに関係するグラフィックデザイナーに対しては、
必然的に総合スキルを求められる時代になってきたのだと深く考えさせられました。

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