Webデザイン・Webデザイナー専門スクール【インターネット・アカデミー】のオフィシャルブログです。
2010年03月
お手軽なPhotoshop。
『外出先からちょこっとだけ写真の補正がしたい！』
『せっかく携帯の性能が良いのだから、携帯で撮った写真を簡単に加工したい！』
そんな声にお応えできるのが、『PHOTOSHOP.COM」です。
このサイトは、その名のとおり、Web業界だけでなく全ての業界のデザインに携わる人必携のグラフィックソフトである「Photoshop」の一部機能をネット上で無料で使えるサイトなのです。
しかも、この「PHOTOSHOP.COM」には『PHOTOSHOP.COM Mobile』というアプリもあり、iPhoneなどアンドロイド携帯でも手軽に利用することができます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
『PHOTOSHOP.COM』では、会員登録さえすれば、無料で
切り抜き、サイズ変更、回転、明るさや色味などの色調補正といった
画像加工を行うことができます。
また、アンドロイドの携帯アプリである『PHOTOSHOP.COM Mobile』を携帯電話にダウンロードすれば、
ご自分の携帯電話で撮影した写真をそのまま携帯電話の中で簡単に編集することができます。
もちろん、正式なPhotoshopソフトと比較すると天と地ほどの差がありますが、
グラフィックソフトの王者である「Photoshop」の名を冠したソフトを
Web上で手軽に使うことができる、というのは非常に嬉しいサービスです。
既にPhotoshopを持っている人も、
外出先でネット接続できる環境さえあれば、気軽に画像のトリミングができちゃうのですから、
嬉しい限りですよね。
さらに。
3月4日にAdobe Systemsが「Photoshop.com Mobile」の新版をリリースしました。
この新版のスゴイところは、
この「Photoshop.com Mobile」を携帯電話上のほかのプログラム（アプリなど）と連動させることが
できるようになった、ということです。
ということは、ブログに掲載する写真も、
オークションに出品する写真も、手軽にすばやく携帯電話から行えるようになったということ。
すごく嬉しい限りですね。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
とはいえ、無料版ですから、
やっぱりPhotoshopのホンモノにはほど遠いものがあります。
ただ、Webがどんどんどんどん身近になっていく、
ということには違いがありませんし、
既にPhotoshopを使っている方や、今勉強していらっしゃる方にこそ、
補助的な存在としてぜひ使っていただければと思います♪
インターネットで生中継！
本日、ソフトバンク本社食堂にて『OPEN DAY』というイベントが行われていました。
このイベントは、Twitterで公募した一般客を社食ランチに招くという創業30周年イベントです。
そのイベントの目玉のひとつに、『Ustream』でイベントの様子を生中継する、というのがありました。
『Ustream』というのは、
今年の1月、ソフトバンクが約2,000万ドルを出資して今年の5月には日本語化が予定されている「インターネット放送」サービスサイトです。
今日は、そんな『Ustream』と「インターネット放送」のお話です。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
インターネットを使って動画を見る、というと
既に当たり前の世の中になりましたが、
「インターネット放送」というとあまりピンと来ない方もいらっしゃるのではないでしょうか？
「インターネット放送」とは、その名の通り、インターネット上で
音声や動画の配信を行うサービスを指します。
そして『Ustream』のような「インターネット・ストリーミング放送」の場合、
再生するデータをリアルタイムに伝送できるため、
データを全受信する前に再生を始められる（＝生放送ができる）のです。
『Ustream』には、動画視聴者とのチャット機能や、
視聴者から投票を受け付ける機能があるのですが、日本語化はもう少しだけ先の予定。
そんな『Ustream』で、本日のソフトバンクのイベントの放映している様子をチラっと見てみました。
感想は、なんだかスゴイ、の一言につきます。
インターネット上で生中継で番組が放送され、
それを見ているユーザーがリアルタイムにTwitterで感想を書き込んでいく。
…そんな風に、情報の伝達とそのクチコミ（批評、の方が正しいかもしれません）が
リアルタイムで同時に閲覧できるため、「なんだか近未来的だ！」と思わせる構成となっているのです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
ちなみに、『Ustream』と似ているのが『ニコニコ生放送』です。
この2つのサービスを比較し、それぞれの違いや特長を紹介しているサイトもありましたので、
興味がある方はこちらも見てみてくださいね。（⇒関連記事）
さてさて、この『Ustream』、Webカメラ会議も行うことができる上、
本日孫社長が「Ustreamスタジオを無償で提供します」という発表を
イベント中に行っていました。
実は、今後、この『Ustream』を使ってイベントのインターネット放送をひそかに考えている人が
うちのスタッフの中にもいます☆
もしその企画が実現したら、Web業界のセミナーや、
より面白い情報をインターネットを使って配信できるようになりますので
私も今から楽しみです！
実現が決まったら、このwebismでもご紹介させていただきますね♪
楽しくブラシ。
「もっと種類があったらなあ…」と思うのは、フォント（文字）データであることが多いのですが、
実はPhotoshopのソフトで使うブラシにも、種類がいろいろとあるのをご存知でしょうか？
「ブラシ」というツールは、筆で絵を描いた様なタッチになるのが一般的なイメージだと思うのですが、
実はこのブラシもフォントデータのように、
後から追加をして増やしていくことができるのです。
作業の手順としてはカンタン。
………・・・………・・・………
◇ブラシデータの追加方法◇
①「～.abr」という拡張子のブラシデータを用意
②Photoshopを起動し、ブラシツールを選択
③ツールオプションバーのブラシの種類を選択するサブウィンドウのメニューから、
「プリセットマネージャー」を選択
④出てきたダイアログボックスから、「読み込み」ボタンを押す
⑤①で用意したファイルを選択
………・・・………・・・………
…以上！
とてもカンタンに取り込みができる上、
後は好きな色を選択してブラシとしてつかうだけです。
今日の画像は、そうやって取り込んだブラシデータで描いてみました☆
カワイイですよね。
さて、問題の「～.abr」というデータですが、
これはこのサイトで確認できます。
どうぞアクセスしてお使いください♪
デザインセンス磨く＋αに。
実は、私が普段授業をさせていただいているインターネット・アカデミーが運営しているサイトは、この【webism】以外にもうひとつあります。
その名も、『新宿御苑365日』。
インターネット・アカデミー新宿校のすぐお隣に位置する、日本随一の庭園、「新宿御苑」の雰囲気を、
開園日に毎日写真と短い文章で紹介するサイトです。
このサイトのアイキャッチ、と呼ばれるページ上部のイラストに注目。
イラスト部分はFlashアニメーションという技術を使って作っているのですが、
なんとアクセスをしていただいた時間に応じて、
どんどんアニメーションとイラストの風景が変わっていきます♪
もちろん、生えている植物も変わりますよ！
昼は多くの人で賑わい、
夕方は暮れなずむ風景に植物が照らされ、
夜には月が暦通りに満ち欠けしていきます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
この”時間”によって変化するアニメーションの仕組みは、
ActionScriptという言語を使って命令を出しています。
アニメーションの動きを作るのはFlashというソフトなのですが、
それにActionScriptという言語を足してあげることで
こんな「変化する」アニメーションをつくることができるのです。
しかも、このイラストを描いたのも、
ActionScriptの命令を書いたのも、
記事や写真撮影をしているスタッフも、
頭のてっぺんからつま先までインターネット・アカデミーのインストラクターなのです☆
もちろん、私も更新のお手伝いをしています☆
Webデザインの重要な構成要素が、グラフィックです。
質の良い写真がなければ、良いWebサイトを作ることができません。
だからこそ、写真撮影がお好きな方にも
興味を持ってもらえるようなコンテンツとしてこのサイトをご用意しました。
また、このサイトを作る技術も、
デザインもすべてインターネット・アカデミーの授業で習う範囲ですから、
講義に興味を持ってもらえたら幸いです。
今はちょうど、桜が見ごろ！
写真を撮るのも楽しくて仕方がありません。
撮った写真を見ていると、「ああ、こんな色の組み合わせもアリなんだなー」なんてふうに、
画面にどんな色味をならべていけばどんな風に見えるのか、
といったことまで思考が進むので、写真は色のバランス感覚を養うのにとてもいいと思うのです。
ぜひぜひ、サイトを見てみて、さらに興味がわいたら
スクールに足を向けるついでに、新宿御苑にも訪れてみてくださいね(^^*)
カメラが好きな方は、特にカメラ必携で！
撮った写真が、もしかしたらいつかの自分の制作物の素材として
使えるようになるかもしれませんから。
オシャレなテキストボックス。
何気なく、そして当たり前に使っている「テキストボックス」。
何かを検索して調べたいときに、文字をぽちぽちと打って”検索”したり、
会員登録をしているサイトでIDやPWを入れて”ログイン”したり。
いろんな目的で「テキストボックス」を使うことが多いと思います。
しかし、この「テキストボックス」。
フツウに作ってしまうと、”なんかパッとしないな。”という感じに
なってしまうことが多いと思います。
せっかくサイトのデザインにこだわるのであれば、
どうせなら「テキストボックス」と「ボタン」までデザインにこだわりたいものですよね。
その作り方を本日はご紹介します。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
作り方はカンタン。
オシャレな枠とボタンの画像を用意して、
HTMLとCSS（= Cascading Style Sheets）の言語を使えば作ることができます。
………・・・………・・・………
①formタグにCSSで枠として見せたい背景画像を指定
②input type="text" の枠を border:none; で消す
③input type="image"で検索ボタンを画像として表示させる
………・・・………・・・………
以上！
その他レイアウトを調整したり、マウスが乗ったときの設定を調整するなど、
細かい指定方法などはインストラクターに聞いてみてください(^_^*)
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
オシャレなテキストボックスを作る場合に注意すべきこととしては、
デザインに凝りすぎてそこに文字を入力できるかどうかがわからなくなっては本末転倒です。
そのため、たとえば検索枠として使うなら、
虫メガネのアイコンを作ったり、ボタンの上の表記の文字をそれとわかりやすく
作っておく必要があります。
そういった点に注意をして、ぜひオシャレな検索枠を作って
私たちインストラクターにも見せてくださいね☆
ひと足お先に、HTML5。
Webサイトを作るために、必要なもの。
それは、『 HTML 』という言語です。
HTMLには、バージョンがあります。
Webの技術が進化するにつれて、言語そのものもどんどん進化しているのです。
現在策定中の最も新しいバージョンはHTML5 です。
関連記事を【webism】で過去に何件か書いているので、ぜひ検索をしてお読み下さい☆
実は、このHTML5は2012年ごろに正式に勧告予定ですが、
既に昨年あたりから注目度が高まっています。
インターネット・アカデミーでも、
他のスクールに先駆けて昨年はやくにセミナーを開催しています☆
さてさて、そんな「HTML5」ですが、
この言語を使うことで大幅にWebサイト制作のあり方が変わる！
…と業界の人たちはみな思っています。
まさに歴史が変わる！といってもいいでしょう。
新たに追加される”タグ”（HTML言語の中の単語の種類、みたいなものです）
の数も多く、考え方もずいぶん変わってきます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
でも、実際、作り方は変わっても、
実際の表示結果でユーザーが見るときにどう変化するかわからない、
という方も多いのでは。
そこで、ぜひ見ていただきたいのが『 HTML5 Gallary 』というサイトです。
こちらのサイトには、HTML5の採用事例をまとめて
掲載してくれているのです。
登録数は既に300以上あるとか。
英語のサイトですので、ちょっぴり見づらいかもしれませんが、
既に海外ではこんなにもHTML5での制作事例があるのですね！
いくつか実際に見てみてください☆
HTML5が正式に使われるようになる将来がとっても楽しみになります。
フリーランスの心得。
本日は、インターネット・アカデミーの卒業生ネットワーク【BOHR】のイベント、「BOHRミーティングvol.111」の開催日でした。
ミーティングの内容はその時々で変わるのですが、今回は、既に業界でフリーランスとして活躍をされているアカデミーの卒業生、青松健輔 様にご来校いただいて、『フリーランスの心得』という主題のもと、お話をしていただきました。
青松様は、ちょうど1年前の3月にインターネット・アカデミーに入校。
それから、わずか2か月目にして(！)フリーランスとして案件を初受注をされたスーパーデザイナーです。
青松様が作るサイトは、得意なFlashが駆使されたインタラクティブでオシャレなものばかり！
………・・・………・・・………
【制作実績】
………・・・………・・・………
知り合いや友人のサイトを要望に合わせて作って、
満足してもらう。その働き方ってすごく格好いいですしステキですよね。
お仕事を楽しみながらされているからこそ、青松様自身も表情はいつも生き生きされています。
もともとのお人柄もとっても気さくで話していて楽しいお方なので、
ミーティングもとても盛り上がりました☆
簡単に、その内容をご紹介します！
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
1.フリーランスは人脈がすべて
==============================
フリーランスとして短期間で活動をはじめることができたのは、
友人や、仕事上で知り合った方など、
自分のまわりにWeb制作のニーズがあるネットワークがすでに存在していたから。
それ以外にも、行きつけの飲食店で知り合った方や
クライアントからの紹介など、常に輪を広める努力をされているのだそうです。
「どんな場にいるときでも、もしかしたら仕事につながるかもという
「オン」のスイッチを入れた状態でいることが大切」とのことでした。
2.自分にハードルを課すこと
==============================
実際にフリーランスとして初めてお仕事を受注したのは、
インターネット・アカデミーで受講を開始して2ヶ月目のことでした。
その当時は、まだ受講した授業も数が少なかったそうですが、
「実制作を通して学んでやる」という意気込みで案件を受けたのだそうです。
実際に制作を始めてから分からないことは、
アカデミーのフリーレッスン室やマンツーマン授業を使って解決をしていただいたようです。
”スクールをうまく利用”されたのでしょうね☆
ありがたいことです♪
3.契約内容を明確に
==============================
フリーランスとして活動をはじめて、最初に抜けてしまいがちなのが契約書の締結です。
青松様も作業範囲に関してクライアントとのすれ違いがあったそうです。
あらかじめ、クライアントに提供してもらう素材や、
作業をしてもらう範囲など確実に決めることが大切ですね。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
参加者の中にもフリーランスとして既にお仕事を始められている方も
いらっしゃったそうで、イベントの後の交流会は
非常に盛り上がったようです。
BOHR担当のインストラクター仲間もまた次のイベントの構想を練っていたようなので、
ぜひぜひ興味のある方は次回も参加してみてくださいね☆
ブラウザの選択。～後編～
”見れないブラウザはおいておいて、とにかくデザイン重視でいこう！”。
前回は、そんな考えが今Web業界に広まりつつあるんです、というお話で終わりました。
きっと、Web制作に携わったことがある方であれば、なんて乱暴な考え方だろう…と思ったに違いありません。
私が乱暴な書き方をしてしまった、というのもあるのですが…。
とにかく、上記のような考え方のことを
『プログレッシブエンハンスメント』と言います。
2003年にアメリカで開催されたイベントの中のプレゼンで使われて以来、
じわじわ広まってきた言葉だそうで、
ちょうど現在発売されている『Web Designing』にも特集で取り上げられています。（⇒当時のプレゼン資料）
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
定義としての「プログレッシブエンハンスメント」の意味とは、
「新技術に対応していないブラウザに囚われることなく、
積極的にハイレベルな技術を取り入れてWebサイト制作をしていこう」
という考え方なのです。
たとえば、前回出てきたInternet Explorer（以下、IE）に対応をしていない『WEB WEB BOY』。
あのサイトには、現在策定中のHTML5で対応される予定の”<canvas>タグ”というタグが使われています。
この<canvas>タグに対応をしていないために、
『WEB WEB BOY』のサイトはIEで見ることができないのです。
今までだったら、
”一般的に利用されているブラウザであれば、
そのいずれで見ても同じく表示できるよう制作する”
というのが常識でした。
しかし、「プログレッシブエンハンスメント」の考えは、
”制作するにあたり、新技術をサポートしていないブラウザに技術を合わせない”
”リテラシーが高いユーザーにより高い満足度を提供する”」
という積極的な姿勢であり、かつ革新的な考えということができます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
現時点での技術に照らし、「プログレッシブエンハンスメント」を具体的に言うと、
制作技術として現在最も広く利用されている「HTML4.01、XHTML1.0、CSS2.1」に加えて、
現在策定中の「CSS3」、「HTML5」を積極的に
使っていきましょう、さらにその他のAPIなどの新技術も使っていきましょう、
…という感じですね。
その考え方でいうと、現在もっともユーザー数が多いIEは
とくに高い技術を利用したWebサイトのデザインや操作性に厳しい目を持っていない、ということで
それ以外のブラウザを利用しているユーザーが対象となってきます。
…今回は少し難しい話をしてきましたが、
この新しい考え方である「プログレッシブエンハンスメント」が今後注目を集めることで、
Web制作のあり方もどんどん専門化し、変化していくことが考えられます。
よりハイクオリティ、ハイレベルな制作技術が求められてくるということですね。
Webの学びに対する意欲がますます掻き立てられます☆
ブラウザの選択。～前編～
以前、「みなさんは何のブラウザを使ってインターネットをしていますか～？」という話題をブログで書きました。（⇒『IE6、さようなら。～前・後編～』参照）
現在、世界で最も使われているブラウザソフトはInternet Explorer（以下、IE）です。
バージョンはさておき、みなさんも使っていらっしゃるのではないでしょうか？
実は、あろうことかこのIEに非対応という思い切ったサイトが出てきました。
PlayStation 3ゲーム「のびのびBOY」の最新公式サイト『WEB WEB BOY』です。
このサイトを見るためには、IE以外のブラウザソフト…
たとえば、Safari、Firefox、Camino、Google Chromeといった
ブラウザの最新版で見なければなりません。
IEで見ようとすると、今日の画像のようなsorry画面が出てきます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
IE以外のブラウザでみたこの『WEB WEB BOY』は、
とくに使い方に説明もなく、サイトを訪問すると
ゲームのキャラクターであるBOYが勝手にうねうねと動き出す、というものです。
なんとなくマウスでクリックしていくと、
コンテンツがどんどん開いていきます。
この不思議な雰囲気が好きな方はきっととても
このゲームに興味をお持ちいただけるだろうな～～…という
ような不思議な感じをかもし出しています。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
さらに、制作知識がある方はこのサイトの構造にも注目。
なんとこのサイト、一見するとフルFlashに見えますが、
すべてコーディングで制作されています。
しかし、なぜ、最もユーザー数の多いはずのIEに対応していないのでしょうか？
…実は、こういう、
『見れないブラウザはおいておいて、とにかくデザイン重視でいこう！』
という考えがじわじわとWeb業界にひろまりつつあったりするのです。
…つづく。
現代風レイアウト。
デザインをする上で、Webサイトの大きさ、特に横幅の設定というのは重要な要素の一つです。
初めてサイト制作をする、という受講生の方はむしろ悩みの種のようですね。
よく、「ちょうど良いサイズって…？(>_<;)」というご質問をいただきます。
これまでは、パソコンのモニタのサイズは800×600ピクセル～1024×768ピクセルといった具合に大体足並みをそろえていました。
だからこそ、それにあわせた幅でWebサイトを制作すれば良かったのですが、
最近はワイドな横長モニタのパソコンが増えたり、
逆に800×600ピクセルの小さな「ネットブック」パソコンが流行したりと、
画面サイズのバリエーションが多岐にわたるようになりました。
んー、こまった！
そこで、注目を集めているのが、Webサイトの幅を固定せずに制作する
「リキッドレイアウト」というものです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
リキッドレイアウトというのは、
ブラウザのウィンドウ幅に合わせてレイアウトの最大幅も変わる設定のことです。
違う言い方をすると、ウィンドウ幅にあわせて
リキッド（＝液体）のようにレイアウトを自在に変形させることができる、というものなのです。
代表的なリキッドレイアウトのサイトをいくつかご紹介しましょう。
ブラウザのウィンドウサイズを小さくしたり
大きくしたりしながら変化を確認してみてください。
………・・・………・・・………
横並びに表示される商品の数が増えたり減ったりします(^^)
トップページはFlashのActionScriptで、
中のページに入ると、JavaScriptでリキッドレイアウトが作られています。
ウィンドウの横幅のサイズによってコンテンツを並び替えられており、
動きがとってもかわいらしいです！
自分でカスタマイズして利用できるGoogle。
選択したコンテンツが液体のように流動します。
………・・・………・・・………
リキッドレイアウトの作り方は、
・CSSでコンテンツの幅を%などの相対的な値で設定する
・JavaScriptで制御する
・FlashのActionScriptで制御する
といった方法があります。
CSSもJavaScriptもHTMLも言語ですし、
それらを正確に記述するだけの知識がなければリキッドレイアウトを実現することはできませんから、
ますます正しいコーディングの知識が制作現場に欠かせなっていっていることを実感します。
ユーザーの環境に合わせてコンテンツを見せることができるという点で
まさに”現代風レイアウト”として注目を浴びているリキッドレイアウト、
書きたい！という方はぜひ当スクールのホームページの授業を受講してくださいね☆
図書館へいこう！
調べ物をするときに、インターネットを使う方は今の世の中大半だと思いますが、”図書館に行って調べ物をする”という方はどれくらいいらっしゃいますでしょうか？
とあるインターネット調査によると、図書館の利用頻度に関しては
半年に1回も利用しない … 42.6%
半年に1回程度 … 12.9%
1ヶ月に1回程度 … 10.6%
1週間に1回程度 … 9.7%
……といった結果が出ているようです。（⇒関連記事）
とはいえ、”本を読まなくなった”というわけではないようです。
同調査では、雑誌やマンガとは別に
本を読むのが1週間に1回以上（「毎日」と「2～3日に1回」と「1週間に1回」の合計）
あると答えた方は、なんと全体の47.7％！約半数いらっしゃったそうです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
昨今は、”本を買うまではいかないが情報収集をしたい”
といった場合に、図書館にまでわざわざ行かなくても、
インターネットを使えばあらゆる情報が手に入るようになった、
ということも上記の結果に関連しているのかもしれません。
しかし、インターネットで情報収集した場合は、
その情報の信憑性や正確性が保障されているわけではありません。
そこで、やっぱり手堅く本で情報を得たい。
久々に図書館を使ってみようかな…というキモチがちょっとでもあるあなたへ。
便利なサイトが10日に公開されましたのでご紹介します☆
日本最大の図書館検索サイト、『カーリル』といいます。
カーリルは、全国4300以上の図書館や図書室から、
現在の貸し出し状況が確認できるというサービスです。
運営しているのは、米Nota。
洛西 一周さんがCEOを勤めるアメリカの企業です。
登録をしなくても利用OKなサイトですが、
自分が住んでいる区市町村を設定すれば、借りたい本の有無はもちろんのこと、
貸し出し状況の横断検索までできちゃう！というスグレモノです。
他にも、ジャンル別検索、作家別検索と利用しやすさはバツグン。
twitterとの連動もしていて、
使ううちにふらっと図書館に行きたくなること間違いなしです！
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
ユーザー側からすれば、インターネットは、
あらゆる情報を手軽に集めることができるのが魅力です。
ただ、サービスを提供する側からすれば、
インターネットでただ情報を提供すれば利益が上がる、
というわけではないのが実情です。
結局、最終的な目的は”足を運ばせる（=消費行動につなげる）こと。”
その点、
この『カーリル』は、ユーザーにアクションを起こさせる工夫が
いたるところにあり、ユーザー側も図書館側も双方にとってウレシイ
サイトということができます。
すでにWeb上で話題沸騰中ですので、
ぜひチェックしてみてください☆
"Coming soon"を楽しみに。
映画の「予告ムービー」は、見ていてワクワクするので私は大好きです。
”次に何を見ようかな””これ面白そうだな”という期待感が、なんとも心くすぐられる気がして楽しい気分にさせられるのです。
この”ワクワク感”は、Webマーケティングにとっても大事なことです。
たとえば、商品のキャンペーンサイト。
期間限定で公開するようなサイトがあるのであれば、
そのページがまもなく出来上がる（＝公開される）ということを告知することで、
期待感はぐっと高まって公開時のアクセス数の伸びに変化が出ます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
ユニクロが良い事例ですね。
3年ほど前になりますが、『UNIQLOCK』コンテンツに必要な
時報に合わせて踊るダンス「CLOCK DANCE」のオーディション映像を公開したことがありました。
さらに、このオーディション映像はYouTube上に同時公開もされていました。
既に知名度の高かったコンテンツのリニューアルに際し、
”期待感”をあおる戦略をとったのです。（⇒関連記事）
しかも、この映像の隣にはばっちり「ユニクロオンラインストア」へのリンクが貼られていました。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
未発表の情報を断片的に公開し、ユーザーの興味を引くことを
目的としたプロモーション用Webサイトのことを、「ティザーサイト」といいます。
情報を小出しにして詳細を隠し、閲覧者を焦らす(tease)ことから
その名がついたようです。
最初に話題になったのは、トヨタ自動車が2005年に行った「bB」のコンテンツです。
新モデル発売前に、テレビCMとティザーサイトを連動させた広告キャンペーンでした。
現在では事例もいろいろと増えました。
ちなみに、大型の広告キャンペーンコンテンツでなくとも、
”準備中ページ”を作ることで、期待感を持ち上げることはできるはずです。
『webdesigner depot』の「A Collection of “Coming Soon” Web Pages」という記事は、
海外の”素敵な準備中ページ”を集めたコンテンツです。
興味がある方はぜひぜひご覧になって参考にして下さい。
たまに使いたい筆記体。
モニタを使って見なければならないWebというメディアは、もともと文字を読むのに適してはいません。
長時間見ていたら目は当然つかれます。
だからこそ、大切なのは”なるべく見やすく”表示をさせる、というデザイン上の工夫です。
その”文字の見やすさ”のことを「可読性」といいます。
可読性を上げる方法には、
「背景と文字の明暗差を調整する」
「文字を大きく表記する」
「漢字はなるべくつかわない」…など、いくつかあります。
その中に、細かい項目をいれるとしたら
「難しい英語表記を使わない」と「筆記体を使わない」
というのも該当するかと思います。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
実は、母国語など使い慣れた言語であれば、
一文字一文字を追わずとも、ぱっと見の字面で
意味を理解することができます。
しかし、メニューがすべて英語表記だったりすると、
当然そのメニューのページが何を意味しているのか理解するまで
多少の時間がかかってしまいます。
しかも、それが筆記体だったりすると、さらに見づらくなります。
とくに、筆記体は現行の英語の教科書では
ほとんどの出版社が巻末の付録扱いだとか。
あまり一生懸命教えていないのですね。
そもそも、アメリカでも小学校中学年程度で
筆記体を教えているようですが、
日本と同じ事情で授業時間は激減しているとか。
なんだかもの寂しい気がしますね。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
とはいえ、
画像やデザインの一部として筆記体はやはりオシャレですから
「使いたい！」というときも出てくるものです。
そんな時は、『thinkdesign』のこちらの記事を参考にしてください。
20個の筆記体のフリーフォントを紹介してくれています。
上記の画像は、その中からいくつかダウンロードして使ってみました☆
フリーなのになかなかのクオリティ！
ぜひぜひブックマークしておいてください♪
IE6、さようなら。～後編～
”そういえば、自分が使っているブラウザってバージョンいくつなんだろう…”と疑問に思った方、Googleの『WhatBrowser』という可愛らしいサービスがありますので、ぜひ使ってみてください。
利用法はカンタン。
上記のリンクをクリックしてページを開いて、しばらく待ったらページの真ん中にブラウザソフトの名前とバージョンが表記されます。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
前回の記事で、”今月1日、GoogleはInternet Explorer（以下、IE）
バージョン6のサポートを打ち切った”ということを書きました。
実はそれについて、”IE6は2010年3月1日に亡くなった”という設定で
葬式を挙げようという企画がアメリカで盛り上がり、
実際に3月4日にアメリカのコロラド州デンバーで葬儀が行われたそうです。（⇒関連記事）
…さすがにこのニュースを見たときは…なんていうか…ビックリしました…^^;
葬儀にはちゃんと棺も用意され、Microsoftからは花も贈られたそうです。
この企画の特設サイトもあります。（⇒『IE6 Funeral』）
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
実は、Web業界では、新しいWeb制作基準に対応していないIE6は、
多少やっかいもの扱いを受けている節がありました。（⇒関連記事）
だからこそのイベントだったのかな…という気がしなくもありません。
ちなみに、Microsoftが今月行う『Microsoft’s mid-March Mix 2010 』というイベントで、
最新バージョン「Internet Explorer 9」がお披露目されるのでは、というウワサもちらほらあります。
どんな変更点があるのか、発表が楽しみですね♪
IE6、さようなら。～前編～
実は今月1日、GoogleはInternet Explorer（以下、IE）バージョン6のサポートを打ち切ってしまいました。
それはつまり、WebブラウザのIE6をつかってGoogleの一部サービスを利用しようとすると、うまく表示されない可能性がある、ということです。
しかも、そのサービスというのがGoogleドキュメント、Gmail、YouTubeなどのメインサービスですからタイヘンです。
もし、ご自宅のPCがIE6だ！という方がいらっしゃいましたら、
取り急ぎ最新のバージョンへアップしてくださいね。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
インターネットをするためには、ブラウザと呼ばれるソフトが必要です。
このブラウザソフトは、いくつも種類があります。
しかも、そのブラウザソフトによって
実はWebサイトの表示結果が変わってしまう可能性があります。
だからこそ、より正しい知識でWebサイト制作をするスキルが業界では求められるのです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
世界中で各ブラウザソフトのユーザーの比率がどれほどなのか、ということは
「W3Counter」というサイトで知ることができます。
2月時点での数字は、
………・・・………・・・………………・・・
１．Internet Explorer 8 … 24.45%
２．FireFox 3.5 … 19.95%
３．Internet Explorer 7 … 14.40%
４．Internet Explorer 6 … 9.79%
………・・・………・・・………………・・・
…という結果です。
あれれ、IE6は2001年に出ているはずなのですが、なんとまだシェアでいうと4位なんですね…。
ちなみに、Google製のブラウザ「Chrome 4」は、
6位の6.12%という結果に落ち着いています。
まだまだ、ブラウザのシェアはInternet Explorer とFireFoxが
圧倒的に占めていることを表していますね。
…つづく。
伝統の美に学ぼう。
新橋からお台場方面につながる『ゆりかもめ』。
この各駅には、それぞれ日本の伝統色と伝統文様が施されています。
たとえば、台場駅は菫（スミレ）色に大波文様、有明駅は柑子（こうじ）色に獅子文様…というように。
それはそれはとてもキレイで、駅で降りるたびにその文様があしらわれ、説明が書かれたプレートをじっと見てしまっています。
私のお気に入りなのが、日の出駅の「日足散らし文様」。
紅色に華を連想される模様が散り、とても可愛らしいです。
また、新橋駅はなんと「新橋色」なんです！
ちゃんと理由もありますよ☆
他にも気になる方は、こちらをご覧下さい。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
Webデザインを勉強する上で、
日本の伝統美、というのは、必須ではないかもしれません。
でも、ひとつ「何かを勉強する」、と言うのであれば、
寄り道であったとしてもやっぱりいろいろな視点から勉強できたほうが楽しいと思うのです。
それは、色でも模様でも同じ。
和風なサイト制作のデザインのアイディアにはもちろん、
それ以外にも斬新なデザインを考える上でヒントになるかもしれないので、
興味がある方は勉強してみてはいかがでしょうか？♪
ちなみに、スタッフから教えてもらった便利なサイトがあります。
『ちょっと便利帳』というサイト内にある、
「色彩辞典・日本の色」という、
JIS・日本工業規格が「物体色の色名」と規定している慣用色名の
カラー16進数（色番号）が閲覧できるコンテンツです。
ぜひ見てみてください☆
モバイルに注目！
今、Web業界で注目されているのは「モバイル」です。
現在リクルートから発売されている『2010年上半期版 稼げる資格』という雑誌の付録、
『IT業界に転職お役立ちBOOK』にも、
”ITで今、注目されているのは「モバイル」と「クラウド」”
とはっきり書かれています。
「クラウド」についてはいつかお話するとして、
「モバイル」はもともと人が足りないIT業界の中でも特に人手不足。
実際、インターネット・アカデミーのグループ会社のWeb専門人材サービス会社「WEBTSAFF」からも、
”モバイルスキルある人いないー！？”とよく声がかけられます。
それぐらい今ニーズがあるのです。
スキルを身につけるとしたら、モバイル分野はかなりオススメです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
そんなわけで、今日はモバイル関連のお話を。
インターネットに関する多くの規格を定めている団体、W3Cは
モバイル機器からのWebアクセスを行いやすくするための取り組みで
『Mobile Web Initiative（MWI）』というグループを5年前から立ち上げています。
活動目的は、”モバイルWebを快適にするために，開発者を支援する情報を提供する”というもの。
このグループには、日本からも携帯電話メーカーとしてソニー・エリクソンやノキア、
携帯情報機器メーカーとしてヒューレット・パッカード、
携帯電話事業者としてNTTドコモやボーダフォン、
ソフトウェアメーカーとしてOpera Softwareなどが協賛会員として参加しています。
MWIの中に下部組織としてMobile Web Best Practicesという名のワーキンググループがあり、
Webコンテンツの開発の指針や、どのような点がアクセスの妨げになっているか
確認する項目を策定したり、ツールの公開を行なったりしています。
そのグループが、”モバイル向けWebコンテンツ作成のための指針”を発表しました。
いくつか取り上げると、
………・・・………・・・………………・・・
* 携帯電話やパソコンなど異なる機器から同じURLにアクセスした場合は、
同じ情報を得られるように工夫すること。
* <title>を必ずつけること。
* ユーザーが求めているものだけを、コンテンツとして提供すること。
………・・・………・・・………………・・・
などがあります。
これらの指標に基づいたチェックテスト『W3C mobileOK Checker』なんていうのも、
サイト内に用意されています。
（⇒パソコン用のチェックテストをしたい！という方はこちらの記事を参照）
使い方は「Address:」と書かれた項目にサイトのURLを入れてCheckボタンを押すだけ☆
Flashは読み込めないので、
HTMLで作られたサイトでチェックしてみてくださいね。
