Chapter.02 コンテンツは質が命

概要

コンセプトの次に大切なものはサイトで提供する「コンテンツ」です。第二回目のテーマは、リフォーム設計用リストの「3.コンテンツについて」に注目して、コンテンツをいかに魅力あるものにするか、それぞれのジャンルごとに解説します。

目次

STEP1 質のいいコンテンツを作ろう

どこかで聞いたような言葉ですね。今回はこれをサイトが生き残るために大事なポイントとして解説していきます。

なぜコンテンツの質が大切なのか

なぜコンテンツの質が大切なのかといえば、コンテンツを提供するのがメディアの本質であって、デザインやシステムが良くても、コンテンツが良くなければ結局サイトの評価も下がってしまうからです。

そしてコンテンツを利用するために、せっかく来てくださった人たちの期待を裏切らないためにも、こだわりを持って質のいいコンテンツを提供するべきだと思いませんか?アトリエ鼎もできるだけご期待に添えるよう頑張っています。

どんどん作って後で直そう!

とはいえ初心者の方がいきなりプロと同じものを作れるわけが無いのですから、萎縮せず「後で直せばいい」と割り切ってどんどん作って、その後で気付いた所から質を向上させていけば大丈夫です。(後から直せるのがWebの良い所でもあります。)

コンテンツをどう見せるか

一つのコンテンツを伝える表現方法はたくさんあり、一般的には、テキスト(論文、小説、詩などなど)、写真、イラスト、マンガ、実写、3DCG、特撮、アニメ、インタラクション、その他、、、など数え上げればきりがありません。(その方法自体がコンテンツの本質であったりすれば、替えられない事もあります。)

そして、結局一つ(又はいくつか)の方法を選択するという決断を迫られるわけですが、サイト全体の統一感を崩さないためにもまずは「サイトのコンセプトに従う」をオススメします。例えばこの講座も、今表示しているデザインの他に2パターンほど用意していたのです。しかしそれらはコンセプトと合わないため没になりました。

当講座で没になった表現方法たち

注意、当初はフルFlashの予定だったのでアート風とマンガ風サンプルを作っていました。
ここはデザインを見るのではなく表現方法として何を選択したのかを見てください。
没になった理由も併記してあります。

コンセプトがあなたを助ける

何を伝えたいのか、本質はどこにあるのか、どう伝えるべきなのか、当然迷ってしまうと思いますが、コンセプトがここであなたを助けてくれるはずです。一生懸命悩んで、答えを見つけ出しましょう。

目次に戻る

STEP2 ジャンル別のヒント

コンテンツのジャンル毎に、質のいいコンテンツを作るためのヒントを解説します。全部は無理なので、初心者の人が良く使うジャンルに関しては詳しく解説し、残りはまとめておきました。

テキストや写真など良く扱うコンテンツは詳しく、あとは目を通す程度に考えてください。ただしインタラクションについてはしっかり頭にいれておきましょう。

質のいいテキスト

テキストの質を向上させるポイント

  1. 分かりやすく簡潔に
  2. 用途に応じた書式に従う
  3. 出す前に必ず読み返すか読んでもらう
分かりやすく簡潔に

質の良いテキストとは、スムーズに理解できて「また読もう」と思ってくれるように、読む人の立場に立って利用しやすく編集が加えられたテキストの事です。読む側の人は何かしらの目的を持ってきているわけで、テキスト自体も目的を持っています。その間を結んであげるのが編集のテクニックです。

Webでは特に画面を見渡すことが出来ないので、一画面に収めるために簡潔に書くことも求められます。(もしくは当講座のように先頭に要約を記述し詳細を下に並べるという方法もあります。)

用途に応じた書式に従う

まずカンタンな例として、文書をルールに従って整形し書式を揃える事をやってみましょう。芸術性やインパクトを求められる用途でない限り、テキストもそれぞれ用途に応じた書式やスタイルがあります。(ビジネス用の書式については書籍がたくさん出ています。)さらに公共性の高いテキストでは、つかってはいけない文字や言葉使いなど細かいルールがある事を忘れてはいけません。

必ず読み返すか読んでもらおう

例えば私が共著した本のほとんどの文章(技術的記述を除く)は、熟練した編集者によって読みやすくなるように編集が加わっています。一度書いたテキストを必ず何度か読み返すようにし、できればターゲットに近い人に読んでもらいテキストに反映させておきましょう。

質のいい写真

写真の質を向上させるポイント

撮影時
  1. きれいに写る環境を整える
  2. 難しければプロにまかせる
加工する時
  1. 見られる画像にする
  2. 見せたい画像にする

最近ではデジカメも当たり前のツールとして用いられるようになり、皆さんも利用する機会が多いと思います。テキストと写真さえうまく扱えればコンテンツはきれいにまとまりますので良く読んでおきましょう。

写真のもつ力

デザインで良く用いられる用語に「訴求力」という言葉があります。科学的に数値化されている訳ではありませんが、分かりやすく言うと「見る人を引きつけ、見た人に何かをもたらす力」ということです。

その力が最も発揮されやすいのが写真です。同じものを表していても、イラストと写真では、写真のほうが圧倒的に力を持っています。そして質のいい写真は、強力な訴求力を持つという事になるのです。(例としてあげるなら、顔写真が一番効果的です、人間の脳はたとえば魚の一部分を人面だと認識してしまうほど人物像に引きこまれます。)

撮影するとき

質のいい写真を作り上げるには、まず出来るだけ良い条件で撮影するように心がけましょう、光源など環境の整備は最低限の準備です。撮影が失敗すると後で補正しきれないので、細かい設定が難しければ撮影はプロに任せたほうが安全です。

加工するとき

デジカメならそのまま、写真ならスキャナやフィルムスキャナを用いて、デジタルのデータにした後にもまだ質を向上させるポイントがあります。まずは見られる画像にする事、そして見せたい画像にする作業です。これらの作業は「フォトレタッチ」と呼ばれています。

見られる画像

見られる画像というのは、写真素材として利用できる状態にする事で、明暗調整、コントラスト調整、出力レベル補正、色の補正、ノイズの除去、アンシャープマスク、輪郭以外をぼかす、などを行います。印刷物をスキャンした場合などはモアレ除去なども行います。蛍光灯の下で取ると青みがかってしまうのを取り去る作業などもここに含まれます。

見せたい画像

そして見せたい画像とは、実際にページに載せる画像にする作業で、用途に合わせて、解像度の変更、トリミング、圧縮率設定、減色、その他エフェクトを加えて、ピッタリと画面に収め、目的を果たせるようにします。

自分で試して目で確認する

それぞれの処理は、Photoshop等のソフトで実際にいじってみて、自分なりのやり方を見つけ出すと良いでしょう。どちらの作業でも重要なのが、「目で確認する」ことです。色の変化などは設定値も重要ですが、結果を見て作業しましょう。

コンテンツを素材で演出するときは

コンテンツを素材で演出するときのポイント

  1. 自作できるものは作る
  2. 作れないものは素材集から
  3. 同じテイストで統一する
  4. 著作権には注意する

たとえばせっかくいいコンテンツでもテキストだけでは、興味を引きにくかったりする事も良くあります。そんなときに役に立つのがコンテンツを演出する素材たちです。ポイントを踏まえてスパイスを効かせてみましょう。

自作できるものは作る

演出するための素材として、写真、イラストやアイコン、サウンド、フォント等がありますが、質のいい素材のためにはまずは「自力」で作りあげましょう。当サイトではフォント以外の素材はほぼ全て自作です。

作れないものは素材集から

人間には得意なものと不得意なものがあるわけで、まずは「自力」が基本でも、 出来ないものがある事は決して恥ずかしい事ではありません。そんな場合は、選択眼を磨いて市販の素材集等で何とかしてしまいましょう。

ちなみに日本語のフォントは漢字の数が多いためタイトルの題字以外は素材から使ったほうが無難です。フォントは出来るだけ沢山用意しておきましょう。

同じテイストで統一する

これはデザインとも関わってくるのですが、いくら内容に沿っているからといって、全く違うテイスト(雰囲気、感覚、タッチ、品質など)の素材を使わないようにしましょう。さらに画像素材などはそのまま載せることなくちゃんと「見せたい画像」に加工してから載せるようにしてください。

著作権に注意

素材を使う際に、最も気をつけなくてはならないのが著作権です。著作権者自らが許諾しない限り、基本的に決められた年数は著作権が消滅しません。いくらインターネットに公開されていても許可と正当な対価無く勝手に素材を利用する事は出来ないのです。

「マネされるようになれば一人前」とよく言われますが、当サイトでも素材として提供している以外のものを許可無く、ほとんど変更無く使っているサイトを少なくとも2サイト確認しています。素材は法律とマナーを守って使うようにしましょう。

インタラクション

インタラクションとは?

初めて聞く方も多いと思うので解説からはじめましょう。

インタラクションっていったい何?

ああ、どうすればいいのだろう。そんな感じでしょうか。だいたいインタラクションなんて言葉も良く分からないし、どう扱うかなんて誰も教えてくれないじゃないかと思っていませんか。

思っているほど難しいものではなくて、カンタンなものなら「マウスをリンクに合わせると色が変わる」等も立派なインタラクションです。

インタラクションの定義

インタラクションとは、双方向で情報をやり取りして、コンテンツが訪問者に伝えたい情報をきめたり、訪問者がコンテンツを自分が望むかたちにできたりする事です。あるいはコンテンツそのものの生成に参加できる場合もあります。インタラクションをもつコンテンツをインタラクティブなコンテンツといいます。(インタラクティブのほうが知っているかもしれませんね)

インタラクションにも質はある

インタラクションを持つコンテンツを実現できるメディアにはDHTMLやFlash、SMILで記述したREALメディアやJAVAアプレットなど色々あります。当然これらにも質があります。

質を向上させるポイントは、「ストレスをためない」に尽きます。例えば使い方がすぐ分かるようにしたり、明解な操作性やレスポンスの早さ、ロード時間の効率化など、細かい所まで徹底して訪問者の邪魔にならないようにコンテンツを改良しましょう。

こういったコンテンツは初心者の方にはちょっと難しいかもしれませんが、書籍やサイトなどを参考にして本格的に挑戦してみるといいと思います。ぜひ挑戦してみてください!

メディアアートにヒントあり

インタラクションをもっと体感してみたい、そんな方には、「メディアアート」というジャンルのアートなどがオススメです。近代美術とテクノロジーの融合したスタイルでインスタレーション(空間に作品を展示する形式)作品として展示されている事が多くWebを利用している作品もあり、インタラクションを理解するにはピッタリです。

※もちろんTVゲームなどもインタラクティブなコンテンツですので、十分参考になります。

質のいいシステム

Webで提供できるコンテンツは、単純にHTMLと共に載せる文字や写真ばかりではなく様々なものがあります。前ページのインタラクションを更に拡張して、サーバ用のプログラムを組み込んでシステムを構築するとその用途は無限大です。もちろんこれらにも質があります。

システムの質を上げるポイント

  1. 反応を良くする、大容量に対応する (回線容量、マシン性能を上げる、ソフトウェアのバージョンアップ)
  2. BBS、CHAT、ゲームなど (多機能化など、ソフトのチューンアップ)
  3. 大量の情報を扱う (データベース化、検索経路の多様化。)
  4. 会員制や決済システム (不法アクセスに強いシステム、通信の暗号化、個人情報の保護やバックアップ、24時間のサポートなど。)
  5. アクセス環境への対応 (多言語版の制作、規格やガイドラインへの準拠)
中途半端に手を出さないで

ですが初心者の方には、中途半端には手を出さないことをおすすめします。システムの構築には、初心者向けのソフトではできないことが多く、この講座では説明しきれないほどのやり方があり、どれにも一長一短があって「これがベスト!」というのは一概には言えません。ここは割り切ってレンタルのサービスを利用するか、パッケージ化されたシステムを導入するなど、プロに任せた方がいいでしょう。

質のいいコンテンツの基準

誰が見ても質のいいコンテンツとは、利用する人々が判断することなので明確な基準はありません。ただ用途によっては参考になる基準が提唱されていますので、できる範囲でそれらをクリアしていくことが必要になるでしょう。公共性が高ければ技術的な面についての基準は「必須」になります。

社会的評価

  1. 政府や団体からの賞や推薦を受ける
  2. 雑誌や有名サイトで紹介されリンクされる
  3. 大量の利用者を確保する

技術的なガイドライン

  1. WCAG(Web Content Accessibility Guidelines) WCAG邦訳
  2. ユーザビリティ(ISO 13407など)
  3. ユニバーサルデザイン
  4. 情報バリアフリー
  5. WAP2.0 (携帯端末向けの規格)
  6. 多言語バージョンの制作

詳しい点は専門の書籍やサイトなどでもっと理解しておきましょう。最新の動向はそれぞれのキーワードで検索してみるとすぐに分かると思います。

目次に戻る

STEP3 コンテンツに関する補足

コンテンツに関する解説は一応完了です。

ここからは補足

ですがおまけとして、現実には今までの内容を打ち消すような場合もありうる、という点についても補足しておきましょう。これはWebデザインに対するアトリエ鼎としてのスタンスでもあり、多少文面も雑ですが、現実としてはこんなものですよということを記述しました。

表現に多少地が出ているところもあるため、読まれた方で一部不快に思われる方もいらっしゃると思われます。講座全体とはそれほど関係も無い所なので、読まずにまとめに進まれても支障は全くありません。お読みになる方はその点をご了承の上、次ページにお進みください。読まずにまとめに進む

コンテンツに関する補足

  1. コンテンツが面白ければいい
  2. やりたい事の半分も出来ればOK!
  3. メディアリテラシー

かなりいいかげんに書いている所もあるので、お読みになる方はその点をご了承の上お進みください。

1.コンテンツが面白ければいい
iModeから学ぶべし

初期のiModeが良い例でしょう。どんなにモノクロで狭い画面で小さなインターフェイスでも利用できるコンテンツに魅力があればみんな使うのです。HTMLの文法がどうとか、バグを回避しているからスゴイとか、そんな事は後回しにして、まずはコンテンツ自体の魅力を高めましょう。

まずコンテンツを疑え!(コンセプトも!)

よくリフォーム系や批評系のサイトで紹介される「悪い例」「うまくいかなかった」例のサイトはたいてい「コンテンツ自体が全然面白くない」事が多いのです。

当講座でもそれに気付いて欲しいために「サイトの自己診断」から始まっています。「周りの評価が変だな」と思ったら、まずコンテンツを疑いましょう。(コンセプトも!)

いいものは良い

たとえば、「手ブレ」と「犬」という意味不明なエフェクトの掛かった字の犬の画像があったとしましょう。

「質」の面からすると最低のコンテンツですが、この写真を見て不快に思う人は少ないでしょう。(犬が嫌いな人を除く)コンテンツそのものが良ければ、色々余計な事をしなくても十分目的を果たせます。蛇足にならず、コンテンツを生かすように作ることを心がけてください。

手段も同じ

手段についてもそうです。ある男性(例えば私)に彼女がいるとして、その彼女と連絡を取りたいだけなら、メールだろうとTV電話だろうと、糸電話だろうと連絡さえ取れれば、その手段についてのこだわりは後まわしでも良いという事と同じです。(こんなときによけいな邪魔をするやつは「馬に蹴られて、、、」ということになるでしょう。)

つまり質と同じように、コンテンツの良い所を消さないような表現手段を優先して選択しましょう。(コンセプトのいいところも消さないように!)

「できるのにやらない」はダメ

色々書いてますが、「質」をほったらかして良いというわけではありません。できるのならばできるだけ質も上げてください。「できるのにやらない」というのはやめましょう。

やりたい事の半分も出来ればOK!

今現在の技術水準では、マシンの性能、ソフトウェアの性能、ネットワーク効率、規格の限界、バグなど様々な理由で制限が加わり、やりたいことの半分も出来れば十分うまくいったといって良いでしょう。

実際に使えるものは結構少ない

下のイメージを見ていただくと良く分かると思いますが、コンテンツを作るために利用できる能力はそれぞれの段階で削られ、かなり限られています。

初心者の方は、まだその限界にぶつかるほど使い切ってはいないとは思います。ですが良く考えてみると、一般的なWebのコンテンツは良く使うビジネスソフトの機能のほんの一部、TVゲームの能力のほんの一部ぐらいしか使っていないとは思いませんか?

ネットはまだ過渡期

もちろんネットならではの機能に関するものは先んじていますが、まだまだ本来の性能を生かしきれるまでには至っていません。もうこの辺まで来るとドキュメントという概念に固執しているHTML自体の「規格の限界」がはっきりと見えてきているのです。(アクセシビリティなどを考えるとこれ以上拡張のしようがないというのも分かりますが、、、)

これからどんどんネットワークとマシンの速度が上がっていくわけですが、これらの使い道に明確な答えを出せるものはまだ確立されていません。ネットはまだまだ過渡期なのです。(つまり将来「Webサイト=HTMLをブラウザで見る」という概念自体変わる可能性があるということです。その結果HTMLは単なるハイパーテキストに戻る場合も十分ありえます。)

ブラウザを乗り換えない人々

機能を十分生かしきれないもう一つの原因は、経済的な面、ライセンス面などからブラウザを最新のものに乗り換えない人々がいることです。最近特にクリエイターから嫌われているのが「Netscape Navigator 4」です。

登場した当初は新しいものを取り入れてなかなか良いブラウザという評価もあったのですが、その中途半端な取り入れ方が今になってかなり混乱を招いています。しかし表面上はエンジニアやクリエイターがその差を何とか埋めているため、「動作も軽いしまだ使える」と思っている方も多いようです。(うちの訪問者の7%はまだこのブラウザで、大企業や大学の人に多いようです。セキュリティへの脆弱さはトップレベルだと思うのですが、、、)

新技術はハイリスクハイリターン

こういった様々な理由でできることはかなり限られ、新たな技術を取り入れようとすると、昔のセオリーに邪魔され騙し騙し実装するはめになり、実用に持っていくにはかなりハイリスクハイリターンになっています。

やりたい事の半分も出来ればOK!

というわけで、初心者向けのツールで利用できる機能のなかにも、実際は使いものにならない機能が必ずあります。本当はどんどん使ってしまっても良いのですが、今までの内容を踏まえてできる限りテストをしたうえでダメだったら使わないようにしましょう。

いろいろな壁にぶつかる事も多いと思いますが、「やりたいことの半分もできればOK!」です、できる範囲の中でしっかりしたWebサイトを作りましょう。

3.メディアリテラシー

うにゃにゃにゃ〜

うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜うにゃにゃにゃ〜

愛と平和と真実の山手線全駅リスト究極完全版

東京、有楽町、新橋、浜松町、田町、品川、大崎、五反田、目黒、恵比寿、渋谷、原宿、代々木、新宿、新大久保、高田馬場、目白、池袋、地下神殿、大塚、巣鴨、駒込、田端 、西日暮里、日暮里、鶯谷、上野、御徒町、秋葉原、神田。

インターネットはウソもいっぱい

いきなり何を言っているのだろう、アトリエ鼎もとうとう壊れたか、と思われた方もいますでしょうが、上の例のようにインターネットにはたくさんのウソ、そして意味のわからないコンテンツがたくさんあります。ウソっぽく真実を伝えるものや、逆に真実をちりばめてウソの結論に導こうとしているものもあります。もしかしたらこのサイトもウソかもしれません。(冗談ですよ!)

メディアリテラシー

「メディアリテラシー」という言葉をご存知でしょうか、メディアの特性を知り、それを分かった上で使いこなし、自分で判断できる能力のことです。信用できると認められるものは自分で調べて自分で判断して決めましょう。全ては自己責任です。

コンテンツを提供する側として

そしてWebサイトを開設しコンテンツを提供する側としても、このことを忘れないようにしてください。メディアには力があります。決して悪用しないように心がけましょう。こんな風に何でも疑ってかかる必要のない世界を願ってやみません。

目次に戻る

まとめ

今回はここまでです、おさらいとしてまとめて見ました。今までの内容を一つ一つチェックしておきましょう。

STEP1 質のいいコンテンツを作ろう

コンテンツの「質」を向上させることが、膨大なサイトの中で個性を出し評価を受けるポイントになります。「コンテンツは質が命」です。

STEP2 ジャンル別のヒント

それぞれに質を向上させるポイントがありました。できるところから改良していきましょう。何をすればいいかは分かったと思いますので、あとは書籍やサイトを参照してさらに詳しくやってみてください。ちなみに「Webデザインの仕事術」もオススメです。

STEP3 コンテンツに関する補足

補足なので、本編とは直接関係はありません。暇なときにでも読んでおいてください。

今回の講座について

やっと第2回が完成しました。また色々と難しいところ、良く分からなかったところなどあるとは思いますが、もし気に入っていただけたのでしたら、次回をお楽しみに。物足りない方はリンク集からご自分にあったサイトを見つけていただけると幸いです。

目次に戻る

リフォーム入門の目次ページに戻る