グラフィックス

ウェブページに画像は欠かせないものであり、ウェブデザインではデジタル画像に関する知識が必要になる。ここではデジタル画像の成り立ち方、デジタル画像の種類、色のデジタル表現、デジタル画像の保存と圧縮など、デジタル画像の基礎知識について解説する。

1、デジタル画像の基礎

ウェブページで画像を扱うためにはデジタル画像の形式や色のデジタル表現などについて理解しておく必要がある。

デジタル画像の要素

デジタル画像は格子状に並んだ標本点で量子化された値を記録して表されている。デジタル画像のここの標本点のことを画素(ピクセル)と呼ぶ。

1ビットの量子化であれば、濃淡を2段階で表現することになり、これを2値画像という。

白から黒までの明暗だけで表現した画像をグレースケール画像と呼ぶ。例えば、8ビットの量子化であれば、256階調、16ビットの量子化であれば、65536階調のグレースケール画像となる。カラー画像では、RGBごとに量子化を行う。RGBそれぞれ8ビットで量子化すれば、合計24ビットになり、約1677万色を表現できる。

解像度と画像サイズ

デジタル画像の解像度は、標本化間隔で決められ、dpiという単位で表されr。dpiとは、1インチあたり南天の標本点を用いるかを表したものである。

例えば、150dpiと300dpiとでは、後者の方が2倍の解像度となる。5インチ×5インチの写真を入力した場合、150dpiでは画素数が750×750=562500となり、300dpiでは1500×1500=2250000になる。

これらの数字は本来画素数であるが、場合によって画素数が解像度として用いられることもある。画像全体のサイズが同じであれば、当然、画素数の多い方が加増度の高い画像となる。

画像サイズは 画素数に量子化ビット数をかけたものとなる。例えば、562500画素の画像が各色8ビットで入力されていれば、データ量は562500×24=13500000ビット=

1687500バイトとなる。(1バイト=8ビット)

デジタル画像の階調

デジタル画像は濃淡を出来るだけ多くの段階に分けるほど美しくなめらかな画像が得られる。前述のように、量子化レベルが8ビットで入力されていれば、グレースケールなら256階調、カラー画像ならRGBそれぞれ256階調で表現できる。

ラスタ形式とベクタ形式

画素の並びで表現するデジタル画像をラスタ形式と呼ぶ。これは画像や図形に対応する画素に色を描きこむ処理をラスタかというためである。ラスタ形式の画像では標本化された解像度を変更することはできないため、画像を拡大すればするほど粗さが目立ってくる。ラスタかした線分の例である。ラスタ化した斜めの線分は正確な直線にはならない。

一方、点や線、面の位置や長さなどの情報によって表現される画像をベクタ形式と呼ぶ。ベクタ形式の画像は点と点を結ぶ線、線に囲まれた麺という考え方で作成され、線を引く、面を塗りつぶす、トイった命令と数値の組み合わせで画像が構成される。このため、ベクタ形式とビクタ形式を使い分ける必要がある。

・ラスタ形式の特徴と用途

ラスタ形式は写真屋手書きの絵など複雑で微妙な形や色を表現するのに適している。また縁の周囲をにじませるような処理を行うこともできる。ただし、前述の斜線と同様に正確な円を描くことはできない。ラスタ形式の画像は解像度が高くなればなるほどデータサイズが大きくなっていく。

画像を扱うソフトのことをグラフィックソフトという。特にラスタ形式の画像を専門に扱うソフトのことをペイント系ソフトと呼ぶ。

・ベクタ形式は一つの画像の中にある複数の要素を一つ一つ個別に扱うことができ、それぞれのオブジェクトの形の変更、拡大、縮小、色の変更などを自由に行える。そのため、図面やイラストなどの作成に向いているまた、アウトラインフォントも代表的なベクタ形式の一つである。ベクタ形式の画像のデータサイズはラスタ形式に比べれば圧倒的に少ないことが多い。なおベクタ形式の画像を専門に扱うソフトのことをドロー系ソフトと呼ぶ。

色のデジタル表現

デジタルカメラで撮影した画像やイメージスキャナで取り込んだ画像、あるいはグラフィックソフトで製作した画像のほとんどはRGBによる加法混色で色が表現されている。また、それらの画像を表示するディスプレイモニタはは交代によって色を表現するが、これもRGBによって表現されている。

・フルカラーとハイカラー

RGBの各成分の値は量子化された値を用いており、量子化ビット数によって表現できる色数が決定される。8ビットの量子化であれば、256段階となり、RGBそれぞれに量子化が行われるため、

256×256=16777216色、つまり、24ビットの指揮数が得られることになる。24ビットは、一般に人間が識別できる色に対して十分な数と考えられている。このことから、24ビット以上で表される色はフルカラー、あるいはトゥルーカラーと言われている。

16ビットの場合、65536色を同時に表示できるが、これをハイカラーと呼ぶ。

・色空間

デジタル画像を入力出力するための機器では、色の表現可能な領域が決められており、これを色空間という。イメージスキャナ、デジタルカメラ、ディスプレイモニター、フィルムレコーダ、インクジェット方式などの一部のプリンタではRGBの色空間が用いられている。また、商業用印刷屋カラープリンタにおいてはCMYに黒を加えたCMYKの色空間が用いられている。

これらはデバイスに依存する色表現であるため、例えば同じ画像を異なるディスプレイモニタに表示した場合、同じ色が再現されない。これはディスプレイモニタは製品ごとに表示できる色が異なり、同じ型番お製品であっても個体差が存在するからである。

これに対してデバイスに依存しない色空間がCIEである。あるデバイスによる色表現をCIEの色空間位変換して、そのデータを次に渡すデバイスの色空間に変換することによって、異なるデバイス間でもできるだけ同じ色表現を行えるようにすることをカラーマネジメントシステムという。

この機能は一般的にはOSが装備している。WindowsにはICM、MacOSにはcolorsyncが搭載されている。また、アプリケーションソフトがカラーマネジメントシステムを持っている場合もある。

ディスプレイモニタによっては、一般のものより広範囲な色空間を表示できるものもある。

・インデックスカラー

RGBやCMYKなどのように絶対的な色を直接表現する以外にあらかじめ多数の色番号とそれに対応するRGB成分の値の対応表データを準備し、画素ごとに色番号を与える方法もある。この対応表データーをカラーパレット、カラールックアップテーブル、カラーマップなどと呼び、これによって表現される色をインデックスカラーと呼ぶ。例えば、カラーパレットを256個分用意すると、一つの画像に対して256色までの色表現が可能であり、各画素は8ビット、すなわち1バイトで表すことができる。これを8ビットカラーと呼び、色数の少ない画像には効果的な圧縮方法となる。インデックスカラーを用いた代表的なファイル形式にはGIFやPNGがある。圧縮についてはまた後ほど解説する。

デジタル画像の保存と圧縮

コンピュータで扱われるテキストや画像のデータはファイルという形で保存することができる。ファイルは一まとまりのデータの基本単位でもあり、ファイルと単位としてデータの保存、出力、授受などを行える。

・ファイル形式

ファイルの実態には、ある決まった規格に基づいてデータが格納される。その規格をファイル形式、あるいはファイルフォーマットとよぬ。ファイル形式にはヘッダとデータの部分に分かれており、ヘッダには、ファイル形式に応じて画像サイズや後述するデータの圧縮アルゴリズムなどの情報が格納っされる。代表的なファイルフォーマットとしては、画像データではBMP JPEG GIF PNGなどあり、ウェブよう画像としてはJPEG GIF PNGなどを利用する。映像データでは、MPRG AVIなど音声データではWAVE MP3などがある。

・圧縮方式

音声データや画像データはデータ量が大きくなりがちであるため、保存や通信お効率化のためにできる限りデータ量を小さくする手法が提案されており、これをデータ圧縮と呼ぶ。圧縮手法には圧縮しても元のデータに完全に復元できる可逆圧縮方式と、復元できない不可逆圧縮方式がある。JPEGは人間の目には検知しにくい高周波成分を除去することでデータ量を削減する方法を取っている。JPEGは不可逆圧縮方式であり、圧縮率が高い。自然がぞう向けには有効であるが、図版ではJPRGの特徴であるノイズ成分が目立つ。図版に対してはGIFやPNGを選択すべきである。データの内容や目的にあわせて圧縮方式を選択することが望ましい。

オウンドメディアのコンテンツ

オウンドメディアのコンテンツを作成するに当たり、気を付けるべきポイントが幾つかあります。ここではそれらの一部をご紹介することにします。オウンドメディアのコンテンツ作成を任された担当者は、どのように記事を書き始めればよいのか悩んでいることでしょう。確かに質の良い記事を原稿として提出できなければ、そのサイトの影響力は薄れてしまいます。しかし初めから焦る必要はありません。書き手は皆初心者の状態で始めます。慣れていなければ書き始めることすらできなくて当然なのです。初心者が最初に考えるべきことは、オウンドメディアにおける質の高さとは何を意味するのかという点です。それは必ずしも一般的な記事と同じだとは限りません。オウンドメディアならではの定義があるのです。実際、紙媒体で優れた記事を書くライターであっても、オウンドメディアのアクセス数を増やせないことがあります。彼らはこの「質の高さ」を自分の培ってきた能力でカバーできると考えているのですが、それは大きな間違いです。オウンドメディアの記事を作成する時は、まずグーグルを意識しなければなりません。グーグルを意識する以上、例えば「文章の美しさ」のような基準の優先順位は少し下がります。それよりもユーザーのアクセスを増やせる記事が望まれるのです。具体的にはグーグルで高く評価される記事がこれに当たります。というのも、グーグルに認められれば、検索結果の上位にランキングされる可能性が高まるからです。検索結果の上位というのは、オウンドメディア制作の最終目標でもあります。これが達成されることによって、ユーザーのアクセス数が増え、延いては顧客が増えるからです。

イベント投稿

facebookなどでホームページ作成をした場合、日常の投稿ではなく、イベントや特別な出来事を投稿したいといった面も出てくるでしょう。こういった場合にも投稿ツールを使用すれば簡単にイベント投稿を行えるのもクリックすると、大事な出来事をSNSの手軽さと言えるのではないでしょうか。例えば、開店や新しいサービスをリリースするといった重要なイベントの告知や、ブランドの立ち上げ、起業など、会社やお店にとって節目になるような出来事を投稿することが可能となるでしょう。もちろん公開範囲も選択可能であり、一定のユーザーだけの公開ということも可能であり、関係者だけのパーティ開催といった場合にも便利なツールとして利用できるでしょう。投稿ツールはわかりやすく簡潔なため、ネット初心者でも扱いは簡単と言えるでしょう。取り扱い説明は、その都度表示される吹き出しに従っていくだけという手軽さも取り入れやすい点と言えますが、初めてイベント登録などを行うときには、別ウィンドウでfacebookページの対象が発生した年などの登録が必要となるので注意が必要でしょう。お店などのページであれば「開業」した年月日、会社などであれば「設立」した年月日、サービスやイベントなどの場合には「リリース」年月日と言うように「そもそも始まった時」を登録することになるでしょう。設定は簡単と言えますが、一応は会社として設定する大切な情報ですのでしっかりと確認しながら間違った情報を載せてしまわないようにすることも大切でしょう。簡単であればこそ慎重な操作と情報発信は信頼に直結してしまうことを覚えておくべきではないでしょうか。企業はもちろんですが、個人利用の方もその点は共通して注意が必要と言えるでしょう。

飲食店の集客アップ「地域限定」について考えよう

飲食店の集客にお悩みのお待ちの皆様にとって、店舗の立地は何よりもお客様の獲得要素として重要な役割を担っていると思われます。ところが、メイン通りに位置する飲食店以外であっても SNS やネット広告などをうまく活用することによって集客アップを試みている店主さんが増加しているようです。飲食店に限らず店主自らが宣伝を行わない限り集客の増加が見られない個人経営主は数多くいらっしゃるはずです。お店の宣伝や紹介のWEBサイト開設を行ったり、地域の人々に手作りチラシを配ったり、販促物を近隣住宅地へポスティングしたり、集客アップに結び付くアクションは何よりも皆さんの存在を数多くの人々にお知らせすることが成功の秘訣でもあります。コスト面から考えますとSNSの活用は、何よりも心強い集客術でありますが、ネット上での集客は、ピンポイントに絞られたエリアのお客さまへの情報発信が困難であるとも考えられております。近隣のお客さま候補となる地域住民へのピントをしぼった集客を試みたい店主さんたちには、特定の地域に限られたポータルサイト広告などを利用することなどもオススメです。全国区の大規模なポータルサイト広告を利用することも多くの人々に皆さんのお店の存在をお知らせすることにもつながり知名度も高まりますが、飲食店の集客アップは、実際にお客さまがお店へご来店いただくことによってミッションが達成されますので、実際に店舗まで足を運んでいただける地域住民の方々への反響が高い地域限定のポータルサイト広告などを集客アップに活用してみてはいかがでしょうか。

ホームページの評価とは

皆さんのホームページの集客を左右するとも言われているGoogle からの評価は、サイトを訪れる人々のアクセス数に比例しているなどとも言われているそうです。ホームページ上を訪れる人々のアクセス数を増やすためには、様々な方法が考えられますが、何よりも大切なことは、ホームページ内にお客様が自然発生的にサイトを訪れたくなるような魅力的なコンテンツを蓄えることであります。Googleから高い評価を得るサイトはWEB広告や SNS などを活用しながら、出来る限り多くのお客様にホームページを訪れていただくような努力を行っているようです。シンプルな形で申しますと、お客様にとってメリットのあるより良いホームページを制作しアクセス数が集中することは、ストレートにGoogle からの評価は高くなると言われているようです。皆さんも街中のラーメン屋さんに行列ができていると、自分は訪れたことはないけれど、とても評判が良いラーメン屋さんなのだなぁと考え、自分自身も一度は並んででも食べてみたいと、つい足を運んでみたくなるものではありませんか。ホームページも多くのお客様が訪れるための努力を行っているサイトは、多くの人々の興味を惹き付けるとともに周囲から高い評価を得ることとなるようです。

SEO業者を選ぶポイント

SEOとは自分でもできるものです。しかし、対策を行う人的時間的余裕がない場合や、とにかくすぐに上位表示したいという場合に は、業者に依頼するのも 1つの手段です。 SEO 業者を選ぶ上での大事なポイントは次の通りです。

・料金体系がリーズナブルか

・経営者または担当者が信頼できるか

・良質なサイトを多く所有しているか

・対応が早いか

・サイトの事前チェックが的確か

・SEO 以外での販売アイデアがあるか

まず注意が必要なのは、過去の順位上昇実績で選ばないことです。 過去の実績というのはあくまで自己評価のようなものなので、それが高ければ実力があるというものではありません。あり得ないような大げさな実績を掲げ、ている
会社もありますが、それが本当かウソかを証明する手立ては実際はないわけです。
私の経験からすると、過去の実績と本当の実力は関係ありません。むしろ逆のケースもありうるともいえます。

ペイント系ソフト

ペイント系ソフトを使用してラスタ形式の画像を補正から加工、編集するといった作業のことを「レタッチ」と呼んでいます。また、画像の濃さなどのレベルを表した画素値の分布をグラフにしたものを「ヒストグラム」と呼び、横軸が画素値、縦軸が画素値の頻度といったように表示されるのが一般的と言えるでしょう。

さらに入力画像の画素と出力画像の画素の濃度関係をグラフにしたものを「トーンカーブ」と呼び、横軸が入力画像、縦軸が出力画像という並びでそれぞれの画素値を表示したものが一般的と言えるでしょう。ヒストグラムを解析することにより、その画像のコントラスト(明暗の差)を正確に知ることができると言えるでしょう。一方ヒストグラム操作をすることにより、画像のコントラストを整えるといったことも可能でしょう。基本的に、ヒストグラムの左は画像の一番暗い部分、右は一番明るい部分を表していると言えるでしょう。

ヒストグラムの理想形は、ヒストグラムの分布がシャドウの方から広がっているものと言われていますが、実際にはホームページ作成で使用する画像の特性や目的、ページの用途などによっても、理想と言えるヒストグラムは違ってくると言えるでしょう。低コントラストの画像というのは一般的にヒストグラムの分布範囲が狭くなってしまい、高コントラストの画像というのは、ヒストグラムの分布は広範囲にわたるとされています。また、カラー画像においてはRGBのそれぞれの色に各ヒストグラムがあると言われています。

複雑な集計をやってみよう

個数のカウントや値の集計といった方法も、扱うデータが多くなってくると、項目が違ってくると計算も違ってたらいいなと思います。たとえば、購入履歴を管理するテーブルを作るときがそうです。各商品に対して、購入履歴が記録できるテーブルを作りましょう。cartsというテーブルを作成します。phpMyAdminを起動します。mydbを選びます。新規にcartsという名前の3つのカラムを持つテーブルを作りましょう。各カラムを設定したら、IDカラムはプライマリーキー、オートインクリメントをそれぞれ設定しましょう。数字しか挿入できない簡素なテーブルとなりますが、リレーションを前提したテーブルとなります。item_idカラムに入ってくる数字はmy_itemsテーブルのidと一致します。これを見るとどの商品がいくつ売れたかがわかります。my_itemsテーブルとリレーションを張ってみましょう。「SELECT my_items.item_name,carts.count FROM my_items, carts WHERE my_items. id=carts.item_id;」です。そしてSUMという合計数を計算するSQLを利用すると、全部で商品をいくつ販売したかわかります。しかし、これでは全部で何個販売したかはわかりますが、それぞれの商品が何個売れたのかはわかりません。こういう◯◯ごとの集計を行うというのはGROUP BYという句を使います。ここで注意しなければならないのは、GROUPS BY が付加されているのは当然ですが、カラムにitem_idが追加されていることです。これでどの商品の結果なのか分かるということです。

データベースについて

現在のウェブプログラムやソフトウエアではPHPだけではなく、データベースが欠かせない存在となっています。データベースというのは、情報を記録するための仕組みの1つです。例えばオンラインショッピングでの商品で考えてみると、名前やメーカー名、クレジットカード番号や買い物の履歴、価格という情報、顧客の発送先住所、など、情報と呼べるあらゆるものを記録しておくことができます。情報を記録するということだけ考えてみうと、データベースを使う必要はないかもしれません。保存なら、ファイルやXMLなどにできるからです。だったらなぜデータベースを使わないといけないか。もちろんメリットがあるからです。そのデータベースの便利なのは、それ自身が「ソフトウェア」だからです。XMLやファイルというのは容器です。だから、情報の記録や取り出し、消去というのは自分でやるしかないのです。一方、データベースというのは、容器という役割の他に、データを管理もしてくれるというこ。データを管理する管理人がいるようなものです。この管理人に頼めば、情報を保管、管理してくれるわけです。そしてこの管理人というのはものすごい能力があります。何千件、何万件、とある情報を瞬時に検索・並び替え、分類などを行ってくれるスーパーマンみたいなものです。ただ、頼むときには、特殊な言葉を使います。データベースを操作するには、PHPなどのプログラム言語の他に、SQLを覚えたりということもでてきます。ただ、これも非常に簡単な英単語の組み合わせです。なにはともあれデータベースを覚えるとウェブシステムの種類はすごく増えてきます。ここは頑張って勉強していきましょう。