Webデザイン・Webデザイナー専門スクール【インターネット・アカデミー】のオフィシャルブログです。

本日、インターネット・アカデミーでは少人数の受講生を対象にした
『Web制作実践プロジェクトセミナー』が開始されました。

このセミナーの目的は、定められた期間内にチームで一つの案件を作る、というもの。
一人でサイトを作るのではなく、プロジェクトチームのメンバーとして配分された自分の役割を全うし、制作を行っていくため、より実践的な経験をつむことが出来ます。

しかも、今回の題材はなんと、あのWeb業界における世界的権威「W3C」のコミュニティサイトを立ち上げる、
という一大プロジェクト。
本日はその記念すべき第一回開催日！

参加者は2チームにわかれてうまくコミュニケーションをとりながら
楽しそうにこれからのスケジューリングと企画会議を行っていました。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

さて、企画が確定した後は、「サイトマップ｣や「ワイヤーフレーム」の作成に入っていきます。

そこで、本日は初めてWebサイトを作るのにはよくイメージがわかないという
ご意見をいただく「ワイヤーフレーム」についてお話をしましょう。

「ワイヤーフレーム」とは、Webサイトの設計図、骨組みのことです。

これを作ることで、デザイナーにデザイン制作のイメージを伝えたり
コンセプト通りの一貫したサイト制作を行うことができます。
また、プレゼンの資料としても必須の書類です。

ワイヤーフレームの作り方は十人十色。
手書きで作る人もいれば、Excel、PowerPoint、PDFで作る人もいます。
そこで、いくつか便利なサイトを紹介しましょう。

………・・・………・・・………
◆I ♥ wireframes
このサイトでは、ワイヤーフレームがどんどんアップされていきます。
惜し気もなくアップしているところが外国らしいというかなんというか…。

◆Web Browser Elements
ブラウザごとのボタンやチェックボックス、ラジオボタンなどのフォーム要素画像を
ダウンロードすることができます。

◆Design Stencils - Yahoo! Design Pattern Library
Yahoo! DEVELOPER NETWORKサイト内のコンテンツ。
ワイヤーフレームを作成する際に使える素材がダウンロードできます。
………・・・………・・・………

全て英語のサイトですが、ワイヤーフレームを作成する上で良いヒントが得られるかと思いますので
ぜひブックマークしておいていただければと思います☆

それにしても、セミナーでどんなW3Cのコミュニティサイトができるのかとても楽しみですね！
また形が見えてきたらご報告いたします。
参加者の皆様、がんばってください！！

「セレンディピティ（serendipity）」という単語をご存知でしょうか。

英作家ホレス＝ウォルポール（1717～97）の造語で、”求めずして思わぬ発見をする能力、幸運と偶然出会う能力”という意味があります。

なんだかステキな言葉ですが、
最近この単語をWebマーケティングの現場でちらほらと聞くようになりました。

制作したWebサイトやWeb広告をより多くの人に知ってもらうためには、
今後はこの「セレンディピティ」を利用した仕組みを考えねばならないといわれています。
つまり”’偶然’Webサイトを見つけてもらい、そのユーザーにとって有益な情報を提供する”仕組みを考えることが必要だというのですね。

今日は、そんなユーザーの「セレンディピティ」ニーズをうまく利用している
「ビジュアルブログ検索エンジン　Blogopolis」というサイトを紹介いたします。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

「Blogopolis」は、日本国内のブログの勢力分布図を1個の島（もしくは都市）
の形に置き換えて表現し、ブログを検索したり閲覧したりできるサービスです。

オモシロイのが、膨大なブログをカテゴリごとにエリア分布して、
都市のビルとして表現、可視化している所。
ビジュアルは「ボロノイ図」を採用しています。

ブックマーク数が多い記事ほどそのブログの土地面積が大きく、
購読者数が多いほどビルが高くなるようになっています。
ブログ記事の隣接カテゴリの配置は、はてなユーザーが蓄積してきたデータを反映しているようですね。

都市の中でのカテゴリ分布をみていると、
「twitter」と「iphone」の面積が同じくらいあったり、
「design」区域の1/6もとって「javascript」のスペースがあったり、
俯瞰の状態で見ているだけでもとても興味を持ってみることができます。
クローズアップしてみれば、どの界隈でどんな記事が人気なのか？
誰が有名ブロガーなのか？
そんなことを発見することが出来ます。
新参者の【webism】も、はやくここへ大きなスペースをとってビルを建てねばなりませんね…。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

ちなみに、この「Blogopolis」、Yahoo! JAPAN インターネット クリエイティブアワード2009で賞をとっています。

何か情報が欲しいとき、いつもお決まりの検索エンジンを使うのではなく、たまに「Blogopolis」も使ってみてください。

たまたま検索したワードから、「セレンディピティ」で思わぬ収穫を得ることもできるかもしれません。

---------------------------------
※今回の画像は、「Blogopolis」で「web」というキーワード検索をかけた状態のものです。赤い印が、webに関わる人気ブログのある位置を示しています。

近いうちに習得したいもの、第1位。
近いうちに習得したい言語、第2位。

『Web Designing』2009年10月号、今年で9回目となる恒例特集「Webデザイナー白書2009」の調査によって、現場のWebクリエイターが求めている技術、学びたい技術は、今年も昨年と変わらずFlashでのリッチコンテンツ制作とActionScript3.0であることが判明しました。

そこで。
いよいよ12月より、インターネット・アカデミーで待望のFlashの新カリキュラムが始動いたします。
今回の改定は、FlashCS4、ActionScript3.0に完全対応。

しかも！
何がすごいかっていうと、カリキュラム開発担当があらゆる制作会社とフラッシャーにヒアリングし、
現場のニーズはもちろん、実務ですぐに使える技術＆内容で編成。

担当者いわく、「なんとなくActionScript3.0を学ぶのとはワケが違う。」
自信満々です。

そんな新カリキュラムのFlashとFlash上級の内容を、ちょこっと本日はお話したいと思います！

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

Flashにおいて、インタラクティブなコンテンツ制作には、
このActionScriptという言語が欠かせません。

ここ何回かの【webism】で、”HMTLにはバージョンがあります”というお話をしてきましたが、
ActionScriptもHTMLと同様バージョンが存在します。
FlashCS3から使用が開始されたのが最新のバージョン「ActionScript3.0」なのです。

この言語は、「今までのActiopnScriptとは全く違う」「開発者向けの言語だ」などといわれています。
しかし、それだけ大幅な改編をした目的はきちんとあって、
『厳しく言語定義をし、ActionScriptをある程度プログラム言語に近づけることで
より新しいFlashの表現が生まれるように』と願ってのものでした。

Flashを勉強した方はご存知かと思いますが、
ActionScript2.0まで使われていた「ムービークリップイベント」「ボタンイベント」の記述だと、
命令がいろんな場所に書かれてしまうため、
他人のFlaファイルを見ても瞬時には構造が理解できない、という問題がありました。

それを乗り越えたのが今回のActionScript3.0なのです。

インターネット・アカデミーの講義では、
3Dアニメーションや動画の取り込みといった今注目の技術はもちろんのこと、
クライアントのWeb担当者の方が知識がなくとも簡単に
Flashコンテンツの更新作業を行えるようにXMLを絡めて制作する方法…などなど、
実務に即した制作技術まで学ぶことができます。

さらに、他の人が作った「ライブラリ」という命令のカタマリを取り込んで
自分のFlashアニメーションに活用する方法…なんていうノウハウまで学べます。

今、Webクリエイターが喉から手が出るほど求めているFlashの技術。
再受講もオススメしちゃうくらい良い内容にしあがっています。

独学より半年は習得が早い！
オススメのFlash、ぜひ受講してくださいね。

限られた時間の中で、情報をすばやく手に入れ、整理する。

それはWebに限らず仕事をしている上で誰もが望むことですよね。
そこでぜひ活用をしていただきたいのが、Googleの「タイムライン検索」です。

これは、検索結果を年表形式で表示することができるというもので、「歴史や人物の生い立ちなどを時系列で調べたい」というニーズに応える機能なのです。

日本語版は10月から開始されたばかりのできたてほやほや、話題のサービスです。

使用方法は、Googleで検索をし、その画面に表示されている[検索ツールを表示] というリンクをクリックし、
[タイムライン]を選択することで画面を表示することが出来ます。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

たとえば、Webの仕組みを考案した『ティム・バーナーズ・リー』で検索したとしましょう。
すると上の掲載画像のような年表とともに検索結果画面が出てきます。

実際の画面で見ると、年表の一番古い数値が「1955年」とあり、
中の情報を見ると”1955年英国生”という情報が。
ティムの誕生日と年齢が（たとえその情報を望んでいなくとも）一瞬でわかりました。

また、1991年に大きくグラフが伸びており、
その年のデータを見ると”フランス・スイス国境上にある欧州原子核研究機構「CERN（セルン又は サーン」にてWorld Wide Webプロジェクトを発表”とあります。

この年表は重要イベントが発生した年ほど大きく伸びるような仕組みになっていますから、
一目で「1991年にWebが生まれたのか！」ということがわかりました。
（そんなWebの創造主、ティムとお会いしたうちのスタッフが羨ましい…⇒11月7日記事）

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

通常であれば、欲しい情報は2度3度と検索をかけねばなりません。

でも、この「タイムライン」を使えば、たった一つのキーワードから
それに関連する情報を一気に引き出し、理解することが出来るのです。

とても便利！
実はコレ、私が今とてもはまっているサービスなんです。

情報収集に便利でオススメですよ♪
ぜひあなたなりの活用方法を生み出してみてください。

XMLの特性をHTMLに入れることで、新しいWebの可能性が開かれる。

そんな期待がこめられていたにもかかわらず、
その後継バージョンとして作られた「XHTML1.1」や「XHTML2」は『難しすぎる！』という声が続出し、結局W3Cは「HTML5」の開発に専念することを発表したのです…

と、いうお話が前回の【webism】の内容でした。（発表についてはこちら）

では、ここでW3Cが勧告している「HTML4.0」と「XHTML」との違いを具体的にお話しておきましょう。

………・・・………・・・………
1.文書は整形式でなければならない
2.要素（タグの種類のこと）と属性名は小文字で記述
3.終了タグの省略は不可（※<html>～</html>←）
4.属性値は引用符（""）で括る
5.属性の省略は不可
6.meta、hr、br、img などは、空要素として />で閉じる（※<br />、<img />など）
7.属性値内での改行を含む複数の空白は１つとみなす
8.<script>および<style>の定義の違い
9.要素の入れ子などSGMLの排除機能を再現できない
10.‘id’および‘name’属性をもつ要素は、‘id’属性を使用する

*参照：　http://www.w3.org/TR/2000/REC-xhtml1-20000126/
………・・・………・・・………

などなど。
上記はほんの一部で、もっとたくさん違いがあります。
上の内容だけ見ても、なんとなく、HTMLよりもXHTMLの方が
記述方法や文法に厳密さを求めている傾向があるのが分かりますね。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

繰り返しますが、開発がストップになったからといって、「XHTML」が悪いわけではありません。
XHTMLが目指していた”Webの情報を他のソフトでも共有する”という考え自体は「HTML5」に引き継がれていますし、
何よりXHTMLの”構文としての正しさ”の考えは、むしろ言語として重宝すべきものです。

昨今のWebサイトの制作現場では、「XHTML1.0」で制作されているWebサイトがほとんど。
そのため、「XHTML」の知識はこの先も必須なのです。

（しかも、「HTML5.0」は”記述は自由”なスタンスがあるため、
「XHTML」の文法に沿った記述を使ってもなんら問題はありません。）

将来的に、またXHTMLの開発が再開される可能性だってありますしね。
乱暴な言い方をすると、HTMLを使うのかXHTMLを使うのかは好みによって違うといっても良いでしょう。
ただそれだけの問題なのです。

ちなみに、W3Cが発表したXHTMLの今後に関するFAQ（日本語訳）のサイトもありますので、
詳細はこちらをご覧下さい。

また、今回のお話で参考にしたのはこちらのサイトです。

マンガでとてもわかりやすくXHTMLについて書かれているので、
HTMLを勉強中の方はぜひ読んでみてください。

Webサイトのベースを作る言語、「HTML」と「XHTML」。

名前も似てるし、どっちの言語を使ってWebサイトを作るのが正しいのかはよくわからない…という方もいらっしゃるのでは？
また、ネット上の議論を見ているとXHTMLに対する誤解も多いようです。

そこで、2回に分けて「XHTML」の誤解にまつわるお話をしたいと思います。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

Webの技術は日進月歩で成長しています。

より表現力を高めるため、「HTML」や「XHTML」といった言語も、
文法の再定義や開発がW3Cという団体によって行われています。
つまり各言語のバージョンというのは、過去からの改変数を表しています。

現在Webサイト制作で主に使用されているバージョンは「HTML 4.01」と「XHTML 1.0」ですね。
（ただし、XHTMLの最新バージョンは「XHTML1.1 」。）
そして、現在策定真っ最中なのが「HTML 5」です。
しかしそこに、「XHTML」の名は並びません。

何故なら今年の7月、
W3Cは開発中だった「XHTML 2」のワーキンググループ(WG)を解散し、
「HTML 5」の開発に専念するという発表を行ったからです。

このときWeb業界の中で一気に、
”「XHTML」はなくなるんじゃないか”という不安と心配が広まっていきました。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

そもそも、「HTML」と「XHTML」って一体どんな関係なのでしょうか？

実は「XHTML 1.0」は、
「HTML 4.0」の言語を「XML」という言語の構文に沿って直したものです。

HTMLと別の言語であるXMLを混ぜる必要があった大きな理由には、
『Web上の情報をブラウザだけでなく、他のいろんなソフトでも共有できるようにする』というのがありました。

たとえば、Webで拾ったレシピ情報を、電子レンジや冷蔵庫に送って表示する、
というようなことをしようと考えていたのです。

しかし、XHTMLの開発が1.0から1.1へと進んだ際に構文に対するこだわりが高まっていき、
「XHTML 2」の開発にいたっては画像を表示する<img>を非推奨に近い扱いにしていたりで、
クリエイター側からするとかなりムリのある方向にXHTMLは進んでしまっていました。

そのため、ブラウザソフトを開発している企業から「XHTMLは難しくて普及しづらいのでは」という声が続出。

反論も多くあったのですが、そんなこんなで「XHTML 2」の開発はストップになったのです。
でも、だからといって、XHTMLが悪いとか、「XHTML 1.0」まで問題があるというわけではありません。

…次回へつづく。

------------------
※写真は、W3C TPAC2009の「HTML5 WG」ミーティングルーム前にあった看板です。（インターネット・アカデミーのスタッフが撮影）

せっかくいい天気だし、美味しいパスタが食べたいな…。

そんな気分のときは、ぜひ『cafe LA BOHEME（カフェ ラ・ボエム）』の新宿御苑店へ。

実は、インターネット・アカデミーのインストラクターもダイスキなカフェなのです。

ランチは美味しいパスタを御苑のまぶしい緑を見ながら味わえ、
ディナーは大きなガラス窓に映る御苑の森にシャンデリアの光が反射して、
ちょっぴり豪華な気分で食事を愉しむことができます。

ちょっと勉強につかれたら、少し新宿校から新宿御苑の側道を
ゆったり歩いて、ラ・ボエムへ。

昼も夜も美味しい食事とキレイな景色が身体と心を休ませてくれます。

お正月まであと50日をきりました。
皆様、「そろそろ年賀状の準備をしなければ…」と考え始める時期ではありませんでしょうか？

今年は、インターネット上での年賀状サービスの競争が激化しそうです。
10月末に新しく始まったのが、『ウェブポ』というサービス。

『ウェブポ』に登録をすると、年賀状のデザインを選んで、
写真貼り込み、宛名入力、印刷、発送までをウェブ上で行うことができます。

GmailやTwitterなどネットつながりの相手先や、
携帯電話を含めたメールアドレスしか知らない相手にもお年玉付き年賀はがきを送ることができ、
とても便利なサービスです。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

この『ウェブポ』はmixiの『ミクシィ年賀状サービス』と同様の手法をとっています。

『ミクシィ年賀状サービス』は昨年、70万枚以上の申し込みがあり、
2009年のグッドデザイン賞も受賞しています。

今年は0円でマイミク5人まで贈れる年賀状を提供、携帯電話からも年賀状を作成可能になり、
ますますユーザーが増えるのではと評判です。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

とはいえ、webismとしては、ユーザー視点だけでこの話題を取り上げるわけにはいきません。

便利なサービスだな、と考えてユーザーになるのはカンタンですが、
Web業界にいる人間としては、そのサービスを考え出したアイディアや企画に注目したいところです。

『ミクシィ年賀状サービス』のコンセプトを、
グッドデザイン賞サイトから引用させていただきます。

”若年層のコミュニケーションは、年賀状のような『ハガキ』から「アケオメ」「コトヨロ」などの 『メール』に置き換わりつつあります。 このような若年層が、メールのように簡単に、紙の年賀状を送り合える 「新しい手紙文化」を創造することを目標とし、「広告としてのサービス」をデザインしました。”

引用元：Good Design Award　グッドデザインファインダー

Webだから便利に出来ること、
Webだから消費者心理に訴えかけることが出来ること、
Webだから面白くできること。

いっぱいあります。

言い換えれば、Webを知っていれば
世の中に新しい仕組みや新しいサービスを生み出すチャンスがいくらでもあるということ。

ワクワクしちゃいますね。

ちょっと面白いモノをみつけてしまいました。

”コンテンツインターフェイス”「SKETCH PISTON（スケッチピストン）」です。

なんと、Webサイトに好きなようにラクガキができて、しかもそれがアニメーションとして動いてくれる！
というゲーム感覚で遊べるユニークなコンテンツなのです。

しかも、ただ単にラクガキをして終わり、じゃないのがポイント。
描いたラクガキは、保存して「スケッチピストンパーク」というサイトに投稿したり、
自分以外のいろんな人が描いた「作品」を見ることも出来るのです。

言葉で説明するより触ったほうがわかりやすい…ので、
さっそくアクセスして見てみてください。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

スケッチピストンに限らず、
Flashアニメーションの技術がどんどん進化するにつれて、
よりインタラクティブで自由な表現のサイトが増えてきました。

たとえば、インターネット・アカデミーの卒業生さんが制作に携わり、
各界からの評判が高いリクルートコミュニケーションズの
「Air Yakiniku」が個人的にとても好きです。

炭火の七輪に乗せた肉が焼けていくさまを眺めることで、
焼肉を食べた気分になれる。

それがこのサイトのコンセプトです（笑）
とにかくそのディテールに見える完成度の高さが半端じゃありません。
だからこそ訪れた人に強い印象を残すサイトになり、
口コミでも話題になったのでしょう。

私は、このサイトがとてつもなく好きです。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

単純に”情報を提供する”だけがWebサイトではありません。
時には遊び心も必要です。

情報が溢れている世の中だからこそ、
秀逸なアイディアやコンテンツを用意することで、人々の心に強く訴える。

そんな表現も大切なのです。

その上で、Flashというアニメーションソフトの存在感を強く感じる今日この頃です。

…Flashで遊ぶのも面白いですが、
Flashで自由な動きを自分で作るのは、もっともっと面白いですよ。

新宿駅新南口直結。

百貨店としての設備はもちろんのこと、
「TIMES SQUARE」や「東急ハンズ」、「紀伊国屋書店」などなど、
ここに行けば新宿校から駅までの行き帰りでなんでも買い物を済ませることができてしまう、
というまさに魅力たっぷりの百貨店です。

『新宿サザンテラス』へつながるデッキは
昼でも夜でも風が心地よく、買い物やスクール帰りの気晴らしに
抜群のスポットだったりします。

14階建ての高層ビルのため、レストランやカフェも多く、
ゆったりと買い物ほか食事も愉しむことができるので、
本当に一日中いれちゃいそうな百貨店です。

ひとつところで全部用事を済ませたい！という方はぜひ☆

突然ですが、新宿や渋谷でお仕事をしていて、良かったと思うことが多々あります。
それは、Webとかクリエイティブとかを考えるのに最適な街だから。

渋谷は、人の波が激しい若者の街。
だからこそどこのショップに入っても、
置かれている商品は必ず洗練された流行モノばかり。

音楽にしろ、インテリアにしろ、文房具のデザイン一つ取ってみても、
どれもとにかくオシャレ。

今人々が何に注目をしていて、何が売れているのか。
マーケティングを考えるのにとても良い街なのです。
（しかも、何よりいいのが渋谷区はWeb関係の会社がとても多いため、
どこの書店もWeb絡みの本の品揃えが良いのがポイント☆）

新宿は、電車の乗降者数世界ナンバー1の街。
ビジネス街であり、流行の最先端をいく街であり、花柳界でもある。
歴史があり、自然があり、住宅街があり、少し歩けばいろんな顔にめぐり合える都。

私が働くインターネット・アカデミーがある場所は
新宿御苑の新宿口すぐなのですが、
これがまた都会の街というイメージからかけ離れた緑の見えるとても落ち着いた場所。

しかも、新宿御苑を沿うように穴場で評判の良いカフェやお店が立ち並び、
息抜きや考え事をするのに最適です。
新宿御苑の向こう側に見えるドコモタワーも、
時間帯によって表情を変えるから私は大好きで、毎日必ず見上げています。

私と同じ気持ちかどうかはわかりませんが、
新宿校では外に休憩に行く受講生さんも多いです。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

「作品のイメージがわかない！」「アイディアが出ない！」と
困ってしまうこと、誰だってありますよね。
私だってそうです。

でも、自分がいる街の魅力に気がついてから、
机の上でネットサーフィンしていたっていいアイディアなんか出てこない！
と思い切って外に出るようになりました。

クリエイティブなことを考えているとき、一番危険なのは一人よがりになること。
だって、Webのお仕事は人の心を動かすクリエイティブなお仕事ですから。

何も自分の中から湧き出てこない…というときは、こりかたまってしまった
自分の感性の蓋をこじ開けるために、街に出ましょう。
きっとヒントが見つかるはずです。

英語圏の国のサイトを見ていると、文字のデザイン性（タイポグラフィ）が羨ましくなることがあります。

Webサイト上で表記される日本語はどうしたってハンデがあるのが現状。
なぜなら、ユーザーのパソコンにフォントが入っているかどうかや、OSやブラウザによる違いなどでテキストとして表示できるフォントにはかなりの制約があるからです。

よって、特殊なフォントの文字はすべて画像で作らねばなりません。

そんな状況を改善すべく開発がすすんでいるのがCSS3のWebFontsなのですが、
残念ながらまだまだ普及には時間がかかりそうです。

そんなことを考えながら「WebDesignerWall」なんかを見ていると、
『これもテキスト!?あれもテキストなの!?』とやっぱりアルファベットが羨ましくなってしまいます。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

とはいえ、私だって日本語が好きだからこそ、
テキストで表記できなくともデザインとしての日本語のタイポグラフィをもっと大切にしたい！と思っています。

そこで、Webデザイン上で日本語のタイポグラフィの質を手軽にワンランクアップさせるコツをご紹介します。

★日本語の見出しをキレイに見せるコツ。★

・むやみにMSゴシック体を使わない
・ホワイトスペース（余白）を大切にする

この2つです。

MSゴシックは気軽に使えてしまうフォントのため、
フォントサイズを大きくして使うと、とてもアマチュアっぽいデザインになりがちなので基本は使いません。
（ただし、本文の文章には最適なフォントです。）

次に、ホワイトスペース。これには重要な役割が2つあります。

まず1つ目が、ユーザーに読み進めようとする気持ちを持続させること。
2つ目が、情報の区分を明確にするというものです。

日本語はアルファベットと違い画数が多いため、
うまくホワイトスペースを活用しなければ途端に字が全体のデザインのジャマをし、
読みづらくなってしまいます。
だからこそ、余白と文字の絶妙なバランスが大切なのです。

うまくホワイトスペースと日本語フォントとのバランスがとれているサイトをご紹介しましょう。

・浦上蒼穹堂　⇒http://www.uragami.co.jp/
・かさね三盆　⇒http://www.kasanesanbon.jp/
・はつかいちご　⇒http://www.hatsukaichigo.jp/
・昭恋館　よ志のや　⇒http://www.taiza.jp/

どれも素敵ですよね。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

日本語は、ひらがな、カタカナ、漢字と3種類もの文字を組み合わせて表現する言語だからこそ、
それを逆手に取ればアルファベットが嫉妬するようなデザインが表現できます。

ちなみに、日本語の文字の形からインスピレーションを得たいときには
モリサワフォント株式会社のWebサイトがオススメです。
ぜひ見てみてください。

良いWebサイトを見て、何が良いのかを研究することが成長への近道。

というわけで、デザインのすばらしいサイトを集めたアーカイブサイトを
私も普段からよく閲覧しています。

最近は、メインカラー検索ができるもの、使われている技術別に検索ができるものなど、
さまざまな検索機能が追加されているアーカイブサイトを見かけるようになりました。
Webデザインを仕事にしている人、
Webデザインを気にしている人が増えてきている証拠なんだろうなあと感じます。

そこで、今日は新しくできたばかりのアーカイブサイトを紹介します。
『dualfront WD』というサイトです。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

この『dualfront WD』というサイトの運用は、
Webクリエイター御用達の「Web Designing」という雑誌が行っています。

メンバー登録（無料）をした制作会社や代理店の人が、
『dualfront WD』で新作サイトやリニューアルサイトの情報を公開できるのです。

通常のアーカイブサイトと違って面白いのは、
個人の方が運営しているわけではなく、
「Web Designing」という業界でも有名な雑誌がバックについているということ。

だから、公開されたサイトは「Web Designing」の紙面掲載候補にもなります。

個人ユーザーとしても、もちろんばっちり使えるのがポイント。

たとえば、サイトの検索にしても、編集部によるセレクトサイトのみ表示させたり、
使用技術、業種別、イメージカラー、などなどさまざまな検索の方法が可能なため、
事例研究としてだけでなくさらに制作会社探しの目的でも使用ができるのです。

天下の「Web Designing」の編集部が確認作業をしたサイトのみが公開されるため、
掲載サイトのクオリティは当然高いのですが、
現時点で難点がひとつ。
11月1日に公開されたばかりのサイトのため、まだ掲載事例が少ないのです。

ただ、まだβ版の公開段階ですし、これからこれから。

ブックマークをしておいて損は絶対ありませんので、
今から掲載サイトが増えていくのを楽しみに使用させていただきたいと考えています。

前回のTPACの紹介に引き続き、
会議でもっぱら話題になっていたというHTML5、CSS3とはなんぞや？
というお話を本日はさせていただきます。

（会議の具体的内容は技術開発の内容になってしまいますので、表立って書くことができませんでした…すみません。）

HTML5とは、新しいHTMLのバージョンです。

以前、この【webism】でちょっとだけ話をしたことがありますが（⇒10月15日記事)、
HTMLは、Webサイトを作るための言語です。
言語なので、文法が存在します。その文法を必要に応じて変更したり新しく定義するのがW3Cの役目なのでしたね。

HTML5が正式に勧告されるのは2012年の予定です。

「文書構造をより明確にすること」と、「Webアプリケーション開発をしやすくする」のが開発目的だそうです。

文書構造の明確化、というとわかりづらいかもしれませんね。
今までは、なんとなく”Webサイトとして見れたらそれでいい”と曖昧な作り方でもかまわないところがありました。
それを、HTMLのタグや要素の種類を増やすことで、
よりHTMLの”意味”を正確に考え、使用しながらWebサイト制作をしましょう、という流れになったのです。
それが、「文書構造の明確化」です。

次に「Webアプリケーション開発」に関してですが、
具体的に言うと今までJavaScriptやFlashのコンポーネント技術を使わなければ表現できなかったものを、
HTML言語だけを使って作れるようにしよう、というものです。

たとえば、次のタグをHTMLファイルとして保存し、表示してみてください。
（※注意、表示させるブラウザはOperaしか対応しておりません！）

---

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><input type="date"></p>
</body>
</html>

---

なんと、こんな簡単なHTMLのタグだけで、日付が選べるカレンダーを表示することが出来ました。
それにこのDOCTYPE宣言のシンプルさ。
現行の長い宣言と比較すると、感動してしまいます。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

CSS3に関しては、以前「CSS3 Web Fonts」の話を書いたときに簡単にお話しました。

HTML5とあわせてよりデザイン性を高めようというもので、
HTML5と同じく既に実行・対応できるものがありますが、
正式な勧告はいつになるか正直不明なところがあります（それは、HTML5も同じだそうですが…）。

うちのカリキュラム開発担当者は、そんな開発真っ最中の技術者の会議に参加してきたのですから、
スタッフ一同目を輝かせて質問攻め（笑）しました。

正確に勧告された際には、
その内容がカリキュラムになるのですから、今からとても楽しみです。

みなさんも楽しみにしていてください。

11月2日～6日の間、アメリカ合衆国カリフォルニア州サンタクララの地にて
『TPAC 2009: W3C Technical Plenary / Advisory Committee Meetings Week』が開催されていました。

W3Cは、Webで利用する各種技術の標準化をすすめる、
世界的権威のある団体です。
Webサイトを作成するためのHTML言語のルールもこのW3Cが定めています。

「TPAC」というのは、そのW3Cの例年行事で、
世界中からW3Cメンバーが集まる”秋の総会と技術者会議”のことです。

実は、今年そのTPACにW3Cメンバーであるインターネット・アカデミーの、
カリキュラム開発担当者が参加してきました。

本日帰国をしたばかりですが、
さっそく根掘り葉掘り聞いた土産話がありますので今日はそれをご紹介したいと思います。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

TPACは毎年世界中のいろんな場所で開催されており、
今年はシリコンバレーの中で、Yahoo!、Apple、Google本社などが軒を連ねるサンタクララが開催地でした。

そこで、世界中からWeb業界の権威ある人々や多くの企業が集まり、
最新のHTMLやCSSといったWeb制作技術の開発状況について情報共有し、語り合うのです。

メインの話題となっていたのは、やはりHTML5やCSS3だったようです。
他には、Webアプリケーションのセキュリティ問題、XML言語などなど…。

参加していたカリキュラム担当者は、
最新の情報をテキストに盛り込むべく多くの情報を収集し、
いろんな方とお会いして意見交換をしてきたようです。

たとえば、HTMLの生みの親ティム・バーナーズ・リー。
名前を聞いただけで感動で震え上がる思いがしました。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

アメリカでは多くの企業がWebの専門家を常駐させているそうで、
社内スタッフへの教育もその専門家が担当しているそうです。

Googleの場合、Google日本法人の新卒に対しても、
その専門家の勉強会に参加させているようですね。

専門家とは、単純に”Webの知識がある人”ではなく、
Webの問題を分析し、解決する能力がある人のことです。

インターネット・アカデミーへいらっしゃる方の中には、
社内でWeb担当者を作ることになったということで、
法人研修の依頼や個人的に学びにくる方が増えています。

そこで、私たちは単純なWebの知識を紹介するだけではなく、
サイトの効果検証やターゲット選定と効果検証のノウハウなどの知識をご紹介しております。

今後は、Web業界とは関係ない企業でも、
専門家としての「Web担当者」が求人募集されることが当たり前になる予感がしています。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

…ちなみに。
アメリカでは学術機関か企業研修でWebのスキルを学ぶことが多く、
インターネット・アカデミーのような”Web専門スクール”はないんだとか。

だから、スタッフも世界中のW3Cメンバーからとても注目を集めて質問をされていたようです。
具体的なお話は、また次回に。

新宿校のすぐそば、新宿御苑の新宿門からてくてく歩いて、大木戸門の方へ。

ひたすら真っ直ぐ、御苑脇の木漏れ日を見ながら歩いていくと、突き当たりに四谷区民センターがあります。

この区民センター、中には各種手続きができる四谷出張所のほか、区民ホール、地域センターなどいろいろと入っているのですが、
中でもオススメなのが新宿区四谷図書館！

とても落ち着いた雰囲気の中、読書や調べ物をすることができます。

さらに、勉強につかれたら、ぜひとも9Fのモスカフェへ。

新宿のど真ん中、高層ビルから見渡すすぐ近くの御苑の風景と、
遠くに見えるビル群の景色は絶景！

御苑で歩きつかれた方も、スクールで勉強して一息つきたいときにも、
資格の試験勉強をしたいというときにも実は最高にオススメの穴場スポットです。

企画書の作成やプレゼンには、マーケティングデータが必須。

それは、Webサイト制作以外においても全く同じで
市場調査やマーケット分析は欠かせません。

とくに、Webサイトを”誰に見てもらうのか”、”誰の満足度を高めるのか”という
ターゲットの特性を把握をすることはとても重要です。

そこで今日は、簡単に手に入る調査データを紹介したいと思います。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

ターゲットとする人たちがインターネットをどう活用しているかという
インターネット視聴率調査なども大切ですが、
趣味嗜好、生活習慣など一般的な統計調査や情報というのも参考にすべきデータと言えます。

必要になったときにデータを収集することはもちろん大切ですが、
日常的に統計データなんかは見慣れておくといいですね。

そこで、いくつか気軽に情報収集するためのサイトを紹介したいと思います。

■レポセン
http://reposen.jp/

いろいろなマーケティングリサーチ会社から提供される調査データやレポートを
集めて掲載しているサイトです。
詳細なデータは一部購入が必要ですが、たいていの調査は無料で閲覧したり
データをダウンロードすることができます。

■ニコ割アンケート
http://www.nicovideo.jp/static/enquete/index.html

ニコニコ動画を閲覧しているユーザーのアンケート調査結果です。
データのダウンロードなどはできませんが、中には考察がついているものもあります。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

このニコ割アンケートは新聞社が行っている世論調査とは
また違う結果がでていたりします。

なんでも、新聞社の世論調査は固定電話からランダムに出した番号にかけて
調査を行っているもののため、携帯電話がメインで固定電話のない若年層が少ないんだとか。

ニコ割アンケートは一定時間になると動画閲覧中に
いっせいにアンケート画面を表示させ、ユーザーに応えてもらうアンケートで、
結果もその場ですぐに表示されるようです。

日ごろから、
さまざまな統計データから消費者ニーズや嗜好を把握しておくことで、
面白い企画というのもわきやすくなるかもしれません。
ぜひぜひ参考データとして見てみてください。

本日の日経新聞で、
転職者が今後伸ばしたいスキルは
”専門知識・スキル”だと答えた転職者が72%とダントツトップだった、という記事が掲載されていました。（※1）

こういう記事を見ていると、
雇用不安が深刻化しているからこそ、
「手に職をつけて転職したい！転身したい！」と切実に考えている人が増えているんだなと改めて実感します。

（ちなみに、2位が「コミュニケーションスキル」、3位が「ビジネス思考力」でした。）

専門スキルといえば、
インターネット･アカデミーの卒業生で
現在Webコンサルタントとして業界の第一線で活躍している方が、こんなことをおっしゃっていました。

『僕たちは、医者と同じだ。
クライアントのWebサイトを見たときに、どこの何をどう改善したら一番効果が出るのか、
その場で判断しその場で適切な提案ができなければならない。
それは、医者が患者のレントゲン写真を見たり診察をするのと同じ。

だからこそ、基礎知識がもっとも大切であることを知っているし、
さらに僕たちは新しいことを知るために日々研究と勉強が欠かせないんだ。』

…と。

その方は今は独立して新しい道を歩んでいらっしゃいます。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

仕事をしている上で一番すばらしいのは、
「あなただからお願いする」とか、「あなたにしかできない」という言葉だと思います。

誰にでも出来る仕事じゃなくて、
これは自分にしかできない仕事だ、と言い切れたらそれはホンモノのプロですし、格好いいですよね。

それが、「手に職」だと思うのです。

Web業界の仕事は、どの職種もそんなやりがいが当たり前。
だってみんな、プロですから。

---------------------------------------------------------------------------------
(※1)毎日コミュニケーションズ「マイナビ転職」
9月1日～28日に行ったウェブ調査結果。

11月1日は「古典の日」だそうです。

1008年（寛弘5年）11月1日の「紫式部日記」の記述にもとづき、
源氏物語が歴史上はじめて記録されたことを根拠に2008年に制定されたばかりの記念日です。

将来的には国民の祝日とすることも視野に入れているとか…。
なんにせよ、そんな記念日なら『文学の秋』と洒落こみたくなりますね。

本日はそんな”秋”らしいイメージを重視して、
「落ち着いた」「穏やかな」配色のデザインのお話をしてみたいと思います。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

淡くやさしいトーン、
落ち着いた暗めのトーンというのは、秋のファッションに多く使われる色でもあり、
かつ”大人っぽい”と表現されることが多い色ですね。

なんで”大人っぽい”のかというと、
一般的に小さい子供は鮮やかなトーンの色を好み、
年齢を重ねるごとに暗い色やくすんだ色を含めて好みの色が多様化するといわれているからです。

ここでひとつ、落とし穴があります。
”シニアは地味な色が好き”という意識がある方が多いのですが、それはまったくの誤解。
実はシニアにもっとも好まれているのは、鮮やかで明るいトーン。

あくまでも加齢に伴い”色の好みが広がる”だけで、
決して地味な色が一番好きになる、というわけではないのです。

………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

もし穏やかで大人っぽいデザインにしたいならば、気をつけていただきたいことがあります。

それは、

【文字やボタンなど大切なWebサイトのパーツでは、コントラスト(※1)をつける】

ということ。
地味な色が多くなると、自然と明度差が少なくなり、境界線の区別がつきづらくなります。
そうすると、どこにボタンがあるのか、どこからどこまでがクリックできる範囲なのか、
そういった情報がわかりづらくなってしまいます。

コントラストを明確にしているサイトの例をあげてみましょう。

○５０＋　フィフティプラス
○シニアコム.JP

…こんなところでしょうか。
上記の気をつけるべきポイントというのは、シニア向けのサイトに限った話ではありません。

背景と文字のコントラストは文字の読みやすさ、
情報の取得しやすさにそのまま直結します。

落ち着いたデザインのサイトにするときほど、
文字の読みやすさや色のコントラストに気をつけてデザインをする必要があるのです。

---------------------------------------------------------------------------------
(※1)コントラスト：画像の最も暗い部分と最も明るい部分の色との間の幅のこと。
幅を狭くするとコントラストが上がり、
幅が広ければコントラストが下がってぼんやりした画像になります。