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

今日は、著作権に関わるお話です。

オリジナルWebサイトの制作に入る時に、デザインの参考になるWebサイトを探す方が多いと思うのですが、いざ作るとなると「どこまで似ててもOKなのか？」…ということに悩むと思います。

実は、Webサイトのレイアウト（配置）については、著作権保護の対象ではありません。

書籍・雑誌と同じく、レイアウトはアイディアであって、「思想又は感情を創作的に表現した」著作物には該当しない、とされています。

しかし、特定の工夫を凝らし、一見してどのサイトを参考にしたかわかるような似せ方で作ってしまうと、
知的財産権侵害のクレームの対象になることがあります。

知的財産権とは、人間の知的な活動から生じる創造物に関する権利のことです。

他者が築き上げた財産的価値に便乗することを「ただ乗り＝フリーライド」と言いますが、
場合によっては、不正競争防止法にも抵触する恐れがあります。

ようは、一般的な配置としてレイアウトが似ている分には問題なくとも、
ある特定のサイトと酷似していると判別されるような作り方をすると、
法律に抵触する可能性がある、ということです。

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

プロが作るWebサイトというのは、そのWebサイトを見るであろうターゲットユーザーのこと、
そして自分達のブランディングや提供したい情報など、
多くのことを複合して考え作られています。

それを真似たからといって、同じ成果が見込めるとは決して限りませんし、
いざ自分の創作をしようというときに、真似しかできないというのはクリエイターとして悲しいことです。

とはいえ、学びは真似から入る、という一面があるのも事実だと思います。

良いWebデザインの表現手法を知り、技術力を高めるには、
真似て作ることから入ることもあるいは必要でしょう。

しかし、そうして真似て作ったものを自分の作品として世の中に公表するとなると、
上記で述べたような権利侵害に該当する可能性が出てきます。

年が若い学生だからといって法律違反が許されるわけではないのと同じで、
まだ学びの途中だからといって真似て作ったものをインターネットで公表して良いわけではありません。

権利侵害の線引きはあいまいに感じるかもしれませんが、
ぜひとも上記のことを配慮し、クリエイティブを楽しみましょう。

Webサイトのパフォーマンスに関して、米国本社のコンピュウェアの調査から、サイトのパフォーマンス悪化を許容できないとするユーザー層が37%で、09年の調査から約10%近く増加しているという発表がありました。

約90％のユーザーが、常に快適なWebサイトの閲覧を望んでおり、パフォーマンスの悪さを体験したユーザーの4分3が同業他社のサイトに移動し、ユーザーの86％は同じサイトを訪問しなくなる傾向があるとのことです。(※1)

昨今ではほとんどの人がブロードバンド接続でインターネットを気軽に楽しんでいるので、
たしかに少しでも読み込みが遅いWebサイトがあるととても待ちきれない！と思って離脱してしまった
経験がある方も多いのではないかと思います。

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

ビジネスとしてはもちろん、ユーザビリティの観点から考えても、
Webサイトの表示の速度には配慮が絶対に必要です。

ただ、表示の速度、というと「画像のファイルサイズ」を気にする方が多いのですが、
実はロードバンド時代において、画像のファイルサイズはそれほど問題ではないのです。

最近のビジネスで使用するWebサイトは、
サーバー上でデータ処理を行うことは決して珍しくありませんし、
JavaScriptの流行もあって凝った動きをするサイトも増えてきました。

もちろん、それに伴ってブラウザの性能も上がってはいるのですが…。

Webページのパフォーマンスというのは、0.1秒を争う世界。

プログラムを組んで動けばいい、Javascriptをもりもりと動かせばいい、
というのではなく、正しく効率良くプログラミングしたり、
必要な動きを必要なだけ設置する、という配慮が大切なのです。

正しく無駄なく設計して作る。
これがプロのWebクリエイターのお仕事なのです。

………・・・………・・・………………・・・………・・・………・・・………………・・・
※1
参照元：「サイトの遅さを許容できない層が4割、米コンピュウェアによるサイトのパフォーマンス調査」Web担当者フォーラム

冬は夜が来るのは早いですが、その代わり、街が色とりどりのイルミネーションやクリスマスソングでにぎやかで、その雰囲気だけでワクワクしてくるささくらです。

そんなわけで、今日は見ててワクワクしちゃう、”クリスマスで活用できるデザインデータ”を紹介しちゃいますー！
クリスマスカードはもちろんのこと、バナー画像やキャンペーンページのデザインにも使えそうですね！

ぜひぜひ有効活用して、この季節ならではのデザインを楽しんでみてください♪

ちなみに、インターネット・アカデミーにも、ささやかではありますが、
クリスマスの飾り付けをしています(^^*)

新宿校の入り口には、ちょっとびっくりするようなキャラクターがお出迎えしてくれますよ。
ぜひ見に来て見てくださいね☆

………・・・………・・・………………・・・………・・・………・・・………………・・・

関連過去記事

＋「We wish you a merry Christmas!」

＋「Webに季節感を！」

あっという間に、12月。

2011年のことを振り返りながら、新しくやってくる年をどんな風に過ごそうか、なんて考える時期になって来ました。

新しい季節や、新しい年などの節目の時期には、気分を一新するために「真新しさ」を意識したくなるものです。

と、いうわけで、本日はWebを勉強中のミナサマも、お仕事でバリバリ活躍中のミナサマも気になる「2012年のWebデザイントレンド」をご紹介します☆

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

まず、12月14日現在で、2012年のWebデザイントレンドについてとりあげているサイトを集めてみました。

HTML5やらCSS3やら、最新の技術がどんどん話題にあがってきてますね！
個人的には縦書きデザインとか、「Googleパンダに備える」とかはとても気になっています。

それにしても、テーマが多い。

「わわわ、また新しいことを覚えなきゃ！(@_@;)」
…と、パニックになる前に深呼吸しましょう。

新しい技術が増えても、ベースとなる知識は変わりません。

それに、新しい技術が増える＝表現の幅が広がる、ということでもあります。

何より、新しいことを覚えるのは、やっぱり楽しい。

2012年も、ワクワクしながらWebサイト制作ができそうですね(^^*)♪

ちょっとの工夫で、快適なインターネットライフ。

…なんて、安っぽい広告文みたいですが、ほんとにちょっと知識をつけて工夫するだけで、インターネットを快適に、そして使いやすくすることが出来ます。

今日、インターネットをするためのブラウザソフト「Firefox」のアドオン機能を使って、「快適なインターネットライフ」を過ごすための工夫をご紹介します。

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

アドオンというのは、Firefoxに新たな機能を追加したり、デザインを変えるためのプログラムです。

プログラム、と言っても、使い方はカンタン。
好きなアドオンを選んで、ボタンを押してインストールするだけ。

マウスで選んだところを翻訳したり、世界時計を表示したり、ラジオを聞けるようにしたり…。
アドオンには、いろんな種類の楽しいものがたくさんあります！

[参考：アドオンでFirefoxをさらに便利で快適に！]

さらに、Webの勉強をしていたり、Webのクリエイティブに携わっているみなさんに、
オススメのアドオンを今日はいくつかご紹介させていただきます。

実は、アドオン機能について、インターネット・アカデミーのホームページ講座でも
ご紹介させていただいています！(^^*)

受講生の方で、アドオンについても少し詳しく聞きたい！
という方はインストラクターまでどうぞ☆

アドオンを使いこなせば、インターネットが楽しくなるだけでなく、作業効率アップにもつながります！

ぜひお気に入りのアドオンを見つけて、ブラウザをオリジナルのものにカスタマイズしてみてくださいね♪

ふと空を見上げると、青々とした空。
スタッフルームで涼しげに鳴る風鈴の音を聞きながら、あー夏がやってきましたねっっという気分になっています！

さて、そんなわけで本日は夏にふさわしいデザイン素材をご紹介したいと思います☆
見てるだけでもワクワクしちゃう素材ばかりですよー♪

今回も、PhotoshopVIPを参考にご紹介させていただきました。

夏のイベントにも、キャンペーンサイトの制作にも使えそうですよねっ♪

ステキな素材を集めて、ぜひぜひ創作意欲を掻き立てられてしまってください(*^3^*)/笑。

………・・・………・・・………………・・・………・・・………・・・………………・・・
関連過去記事

＋「Photoshopユーザー必見サイト。」

＋「デザインに役立つ便利サイト」

就職活動用の作品であれ、実際のWebサイト制作案件のであれ、Webサイト制作に欠かせないのが質の高い写真素材です。

フリー素材の中でもいい素材は多々あれど、やっぱりクオリティの高い写真はなかなか探すのがタイヘンですよね。

そこで今日は、写真素材を販売するストックフォトサービスの中でも、比較的安価な写真素材を提供しているサイトをご紹介いたします。

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

上記のサイトは購入することはもちろん、
販売することもできますので、写真撮影やイラストを描くのが好き！という方はぜひ
お小遣い稼ぎのつもりで登録してみるのもいかがでしょうか？？

皆様ぜひ、作りたいサイトのイメージにぴったりな写真素材を集めてくださいね♪

………・・・………・・・………………・・・………・・・………・・・………………・・・

関連過去記事

＋「手軽に使えるストックフォト！」

最近Webクリエイターの間で話題になっているサイトがあります。
『Cacoo』といいます。

Cacooでは、Webサイト上で簡単にWebサイト制作に必要な図を作成することができます。

たとえば、サイトマップやワイヤーフレーム、ネットワーク図、プレゼンテーション資料などなど…。

基本的には無料ですが、有料プランに申し込むとPDFやPSといったデータまでサポートされます。
グループ単位での利用もできるため、プロジェクトチームや会社で利用する、ということもできます。

魅力的なのは、ExcelやPowerPointにはない機器のアイコンやパーツの図形、人物アイコンなどが入っているところ☆

さらに、一番の魅力は、Web上で複数ユーザーが図をリアルタイムに編集できるところにあります。
メールで招待を受けたユーザーは、チャットをしながらデザインの編集を行う事ができるのです。

Cacooは、めずらしく…といっては何ですが、日本発のWebサービスです。
以前の記事でご紹介したドローイングツールはほとんどが英語でのサービスだったのですが、
Cacooはもちろん日本語で使えるのがとっても嬉しいですね。

便利なツールを使って効率よくサイト制作を始めていくこともWebデザイナーにとっても大切なこと☆

特に、Webディレクターの方々は作る書面の量も多いですから、
ぜひ使ってみてくださいね！

………・・・………・・・………………・・・………・・・………・・・………………・・・
【過去関連記事】

＋「サイトの設計図をつくろう。」
＋「ラフを、ラクにつくりたい。」

今日、皆さんGoogleをご覧になりましたか！？
今日はイギリスの絵本作家、ロジャー・ハーグリーヴス氏の誕生日ということで、Googleのロゴが彼のキャラクター「Mr. Men Little Miss（ミスターメンリトルミス）」とのコラボレーション画像になっています！

リロード（再読み込み）すると、たくさんの可愛いキャラクターたちを見ることができます♪

こんなに可愛いと、ついつい何度もGoogleを開きたくなっちゃいますよネ。
（というか、ささくらは鬼のようにF5キーを押してマス…。^^;）

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

ちなみに、今回はGoogleとキャラクターのコラボにちなんで
「コラボレーションマーケティング」のお話をしてみたいと思います。

キャラクターや芸能人を使ったコラボレーションマーケティングは、日常的によく見かけますネ。

たとえば、飲料水やお菓子のオマケ。
文房具や家電製品なんかでもまれに見かけます。

コラボレーションが成功すれば、互いの強みを発揮できたり、ブランディングやイメージアップ、
新しい顧客層を獲得することにもつながります。

WebマーケティングやWebサイト制作の企画の中でも、
コラボレーションを検討することは有効です。

コラボレーションマーケティングを考える上での注意点をいくつかみてみましょう。

よくWebサイトに「○○とコラボしました！」というお知らせが載っていますが、
それだけではユーザーの興味は引けません。

「コラボすることによるメリット」を、消費者目線で考えて効果的なマーケティングに活かしたいですね。

ちなみに、このようなWeb戦略に関する内容は「プロデュース」という講座で紹介しています☆

ささくらもトレンドの話ができるからとっても大好きな授業です。
興味がある方はぜひお受けください☆

………・・・………・・・………………・・・………・・・………・・・………………・・・
【過去関連記事】

＋「HAPPYになれるウソを。」
＋「Googleのロゴがゲームに。」

今日は、Illustrator CS5という最新のグラフィックソフトの新機能をご紹介します！

Illustratorの講義を受けた方も、これからです！という方も、「こんな機能があるんだ！」と思ってもらえたら幸いです♪

今日紹介するのは、「内側描画モード」です。

「内側描画モード」を使うことで、今回の画像のように文字やある形の内側にだけ、色をつけたり模様を描いたりすることができるようになります。

手順はカンタン。たったの4ステップで作成できちゃいます☆

以上！

「内側描画モード」になっていれば、④でブラシが土台からはみ出しても、
ちゃーんと土台のところしか色がつきません。

これはPhotoshopの選択範囲の機能に似ていますネ！
この「内側描画モード」を使えば、ちょっと風変わりなロゴの作成もお手軽にできちゃいます。

インターネット・アカデミーのIllustrator講座でも、
最新のCS5の機能をご紹介しています！

これから受講しますという方、すでに受講が終わった～という方も、
CS5は魅力的な機能が満載ですからどんどん触って使いこなしていきましょう♪♪

すっかり春らしく、コートが必要ないほど暖かくなってきましたネ。
（むしろ、ささくらにとっては暑い日も…）

すごしやすく、また勉強しやすい時期になったものです♪
そこで今日は、春らしいイラストを使ったパターン用素材をご紹介します。

パターンとは、繰り返し模様を表示する加工のことで、水玉やシマシマ模様を作るのに使います。

最近は、つなぎ目のないパターンを背景にしているサイトが多いので、
ぜひぜひ作品作りに活用してみてください(^^*)♪

………・・・………・・・………

★【春らしいPhotoshopパターン】★

◆春を感じる、彩り豊かな継ぎ目のないPhotoshopパターン素材34個まとめ

◆保存版！背景デザインに使える継ぎ目のないPhotoshop無料パターン素材まとめ

(PHOTOSHOP VIPより。)

◆春の抽象柄模様【継ぎ目がない抽象や草花の無料素材】

◆レトロポップな花柄模様【継ぎ目がない無料素材まとめ】

(DotsDemioより)

………・・・………・・・………

こういうのを見るだけでなんとなーく楽しくなってきませんか？♪

ぜひお気に入りの柄を見つけて使ってみてください☆

………・・・………・・・………………・・・………・・・………・・・………………・・・
関連過去記事

+「デザインに役立つ便利サイト」
+「雪とハートとバレンタイン。」
+「Photoshopユーザー必見サイト。」

今日は、就職活動用のオリジナルサイト制作をしている方へ、オススメのサイトをご紹介します♪

『PHOTO STOCKER』という無料写真素材集のサイトです。

このサイトに掲載されている写真はすべて、商用利用OK、加工OKの写真ばかり。
しかも、サイズもすべて大きい（高解像度）なのです！

以前、webismでWeb専門のグラフィックソフトであるFireworksについての記事を書いたことがあるのですが、
そのとき紹介させていただいた『Fireworksマニア』というサイトと同じ方が運営をされています。

サイト制作を始めて、まずどうしよう…と思うのが写真素材集めですよね。

しかも、Webサイトの中でデザインの鍵を握るのは写真やイラストのクオリティです。

だからこそ、こういったハイクオリティでかつ高解像度のサイトは重宝したくなるものです！

ぜひぜひあなたのブックマークサイトに加えておいておいてください♪

………・・・………・・・………………・・・………・・・………・・・………………・・・
関連過去記事

+「We wish you a merry Christmas!」

世の中にはいろーーんなウェブサイトがあります。
デザインに徹底的に凝ったサイト、というのは珍しくありませんが、それとは逆のタイプももちろんあります。

そんな、必要最小限のフォーマットを使ったシンプルなサイトのことを「ミニマルなサイト」といいます。

ミニマルデザインのサイトにある特徴を書き出してみました。

ミニマルデザインのWebサイトというのは、実は海外に多く、
”ポップな色合いで賑やかな雰囲気”なデザインが人気な日本においては,
まだまだミニマルデザインは珍しい…というのが実情です。

しかし、海外は「時代はミニマル！」という雰囲気がある模様。
日本においても、サイトの特性やコンセプトによってはミニマルデザインが必要な場合もあるかと思います。

ちなみに、「海外ではどんなミニマルサイトがあるのー？」という方は、
1WD.COというサイトの「Modern Element Trends In Minimal Webdesign of 2010」で紹介されていますので、
ぜひ一度見てみてください♪

また、ミニマルなデザインのサイトだけを検索できる「Mini-www」というサイトもあります。
検索枠に「sports」とか「fashion」といったようにキーワードを入力すると、
そのキーワードに該当するミニマルサイトがわんさか出てくるのです。

ぜひぜひ、デザインの参考にどうぞ☆

8日から、スターバックスコーヒーの新しいロゴマークがお披露目となっています。

日本ではまだのようですが、アメリカや北京、ロンドン、パリなど世界中いくつかの店舗で順次公開となっています。（参考記事：プレジデントロイター）

というわけで、今日のテーマは「ロゴ」について。

実は、Webサイト制作をしている受講生の方から相談されることが多いのもこの「ロゴ」なのです。今日は、ロゴの考え方についてご紹介します。

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

「コーポレートアイデンティティ（CI）」という、マーケティング用語があります。

企業の特徴や理念、ビジョンや戦略などを簡潔に表したもののことで、
ブランド名やコピー、ロゴとして表現されます。

コーポレートアイデンティティを考える上で大切なのは、「コンセプト」です。

みなさんは、就職活動用のWebサイトを作成するときに、
作成するサイトの会社が”どんな会社なのか”を考えますよね。

その”どんな会社なのか”という設定が、ロゴ作りの軸やポイントになります。

さあ、今「ロゴ制作」で詰まっている方はさっそく
設定として考えていた「コンセプト」を思い返しましょう。

そうすればおのずと、”丸みを帯びた文字がいいのか”
”グラフィカルなマークを入れたほうがいいのか”などが見えてくるはずと思います。

いろいろと悩むのは当然のこと。
困ったときは、インストラクターにご相談ください♪

ではでは、いくつかロゴ制作に参考になるサイトをご紹介します。

ぜひ、いろんなロゴを見ながら想像を膨らませ、新しいロゴを作ってみてください。

………・・・………・・・………………・・・………・・・………・・・………………・・・
webism 過去関連記事

＋「デザインはフォントから。」
＋「デザインに役立つ便利サイト」

今日の話題は少し中級～上級者向けのお話。

「チートシート」とは、カンニングペーパーのことです。転じて、本来覚えるべきものを1枚の紙にまとめたもののことでもあります。

このチートシートは、ただ勉強のためだけに使うものではありません。
Webクリエイターや現役の開発者の方々も、チートシートを手元において制作をしているのです。（辞書を開く手間が省けますからネ。）

自分用にオリジナルでチートシートを作成する人もいれば、
作ったチートシートを配布しているサイトがあるのでそれを活用している人もいます。

今日は、そんな便利なチートシートについてご紹介をします。

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

いかがでしょうか？
チートシートは、ある程度制作に慣れてきて、教科書を開かなくてもいいけど…
というレベルになってきた人にはとっても便利なはず！

ぜひお気に入りを見つけて使ってみてください☆

今日は2011年のWebデザイントレンドについてご紹介します。

元記事は「Web Design Trends in 2011」です。
詳細はそちらをごらんくださいね。

また、日本語訳が見たい方はcolissの「2011年、押さえておきたいウェブデザインの11のトレンドとテクニック」も要チェックです☆

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

では、さっそくその一覧を見てみましょう。

………・・・………・・・………

★2011年のWebデザイントレンド★

* 1. HTML5 + CSS3
* 2. シンプルなカラースキーム
* 3. モバイル対応
* 4. 視差効果
* 5. タッチスクリーン
* 6. 奥行き
* 7. 大きい写真の背景
* 8. 素敵なドメイン名
* 9. QRコード
* 10. サムネイルデザイン
* 11. Life Stream

………・・・………・・・………
Web Design Ledgerより

やはり「HTML5バブル」と言われているだけあって、
今年大注目のワードはHTML5のようです。

さて、ここで、”「就職活動用のサイト制作」に取り入れやすいトレンド”をささくらがピックアップしてみました。

こんなところでしょうか。

ささくらの感想としては、「技術」や「表現」だけではなく、
「こんなデバイス（機器）が出てきたから、そのユーザーに合わせた見やすいデザインの配慮」
…をしましょう、という考えがどんどん出てきたな、という印象があります。

マルチデバイス時代の宿命ですね。
就職活動やポートフォリオ作成時には、その「配慮」がポイントになってくると思います。

ぜひ、その点も作品制作の際には一度考えてみてください！

家を出た瞬間思わず「わぁっ」と声が出ちゃうくらい今日は朝から雪が降っていましたね！
外出される方はさむーいので、あったかくしてお出かけ下さい☆

さてさて。

そんな雪の日にはあったかいお部屋（もしくはスクール）でまったりデザインがオススメです(^^)
バレンタインも近いことですし、今日はバレンタインで使えるPhotoshopブラシのご紹介をします♪

「Photoshopブラシって何！？」という方は、過去の記事「楽しくブラシ。」をご覧くださいませ♪

………・・・………・・・………
★【バレンタインで使えるPhotoshopブラシ】★

◆バレンタインデイにオススメ、「ハート型」を使ったアイコン、Photoshopチュートリアル、ブラシなどまとめました。

◆かわいいハート柄の継ぎ目のないPhotoshop用パターン素材70個まとめ

◆キラキラと輝く無料テクスチャ素材、さらに330枚あつめました。

◆かすれて味のあるフォトショップ用花柄ブラシ無料ダウンロード

◆保存版、Photoshop(フォトショップ)用の無料花柄ブラシセット40個まとめ

Photoshopユーザーの強い味方、PHOTOSHOP VIPより。

………・・・………・・・………

今年は3連休を利用して、手作りチョコにプラスして、
バレンタイン用のメッセージカードもオリジナルデザインで…とかいかがでしょうか？？(^^*)

ちなみに、本日の画像で使っている雪もフリー素材のPhotoshopブラシを利用させていただいています☆

◆PS Christmas Brushes

フリー素材のブラシを使いこなしたらとってもラクちんにアイコンやイラストが書けちゃいますよっ☆
お試しあれ♪♪

就職活動用のWebサイトを作るとき。
悩みのタネになるのが、フォントだという方は多いようです。

特に、「ロゴ」や「見出し」、「バナー画像」に使用するフォントのデータ。

本文と同じフォントデータでロゴや見出しを作ってしまうとまったく特徴がなくなってしまいますし、
最悪の場合、オシャレ感が全くゼロになってしまうことも。

そこで、ロゴに使えるフリー（無料）のフォントデータを紹介しているサイトをまとめてみました♪

………・・・………・・・………………・・・………・・・………

【英字フォント】━━☆・‥…━━☆☆☆

◆20 Beautiful Fonts for Big and Effective Headlines

見出しやロゴの作成に使いたい！
シンプルなフォントがたくさん掲載されています。

◆25 New Free High-Quality Fonts

ちょっと新しい。あんまりみたことがない。
そんなオシャレ英字フォントがいっぱい載っています。

◆Top 50 Free Bold Fonts

見出しに使いやすい太字フォントが紹介されています。

【和文フォント】━━☆・‥…━━☆☆☆

◆漢字が使える日本語フォント 無料ダウンロード 46種類

良質な日本語のフリーフォントを探すのは大変ですが、
こちらのサイトはたくさんまとまっているのでぜひチェックを☆

………・・・………・・・………………・・・………・・・………

オシャレなサイトはまずフォントから。

色を見直すのも良いですが、
ロゴや見出し、バナーのフォントを変えるだけで、ずいぶんと雰囲気が変わるものですよ♪

ぜひご利用ください☆

………・・・………・・・………………・・・………・・・………………・・・………・・・………

Special Thanks

・Web Design Fan　
・SMASHING MAGAZINE　http://www.smashingmagazine.com/
・DESIGHNER'S TERMINAL　http://www.designerterminal.com/
・4galaxy.net　http://blog.4galaxy.net/

就職活動前に制作する「オリジナルサイト」。
この制作に入るとき、誰もが悩まれると思います。

「文章はどうしたらいいの？」「写真はどこから集めたらいいの？」
もちろん、全ての素材を自ら作成・撮影できたら一番良いですが、なかなかそういうワケにはいきません。

私たちも、授業の中でそれらに関するお話はしていますし、
著作権に関する注意事項はスクール内の掲示物等を利用して告知させていただいています。

…とはいえ、とっても大事なことですので、webismでも参考サイトや過去記事を改めてご紹介します♪

………・・・………・・・………

◆Webデザイナー必読？！ 著作権について知っておくべき10のこと

Webデザイナーさんのブログ記事。
とても参考になります！これから作品を作るという方はぜひ参考にどうぞ。

◆WEBデザイナー辞典

こちらも、Webデザイナーさんが運営されているサイトの記事です。
著作権がいかにWebデザイナーにとって大事な知識かがわかります。

◆「そっくり」ってNGですか？

webismの過去記事。
概念的な話ですが、Webサイト制作における「そっくり」に関する注意のお話です。

◆ダミーテキスト。

上記と同じくwebismの過去記事。
Webサイトのデザイン案提出や資料作成時に役立つダミーテキスト作成サイトの紹介です。

………・・・………・・・………

またwebismでも著作権については詳しく取り上げたいと思ってます～。
お楽しみに☆

こんにちは、ささくらです。

実はwebismの私のアイコンが変わりました☆

インストラクター仲間が描いてくれたのですが…とーーってもカワイイですよね♪

気分新たにこれからもWebのお話をしていきたいと思います♪
今後ともよろしくお願いします☆

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

本日はみなさんのWebサイト制作に参考になるサイトのご紹介をします。

久々のデザインネタです♪

………・・・………・・・
◆Webデザイナーがオススメする無料写真素材サイト15選◆

無料で使える優良写真素材サイトです♪
オリジナルサイトの制作にどうぞ。

◆ ブブンデザインアーカイブ ◆

ロゴや見出し、フォームやアイコンなど、サイトのパーツを集めたギャラリーサイト。
見ているうちにインスピレーションが湧くかも！？
サイト制作の参考にどうぞ☆

◆かわいいデザインに便利な継ぎ目のないPhotoshop用パターン無料素材50個まとめ◆

Webサイト制作にも、それ以外のデザインでも何でもツカエル！！
Photoshop用のカワイイ無料デザイン素材です♪

パターンとして登録して、素敵な背景の出来上がり！！


◆ベーシックで高品質で完全にフリーな日本語フォント31◆

タイトルの通り、ベーシックでどんなサイトにも普段使いできてさらに無料！！
ととっても優秀なフォントの紹介をしてくれているページです。
………・・・………・・・

はい。

こんなところで今日はオシマイです。

良い素材サイトを見ると、
デザインしたくなってきませんか？？

これからクリスマスカードに年賀状とWebサイト制作以外でも
学んだグラフィックソフトのスキルを活かす場が多いシーズンになりますから、
ぜひ上記サイトも参考にしてくださいね♪

気がついたらあっという間に寒くなってしまいましたね！
みなさんは風邪などひいていませんでしょうか？

これから一気に寒くなって、クリスマスに年賀状などなど、イベントや大切な人にお手紙を出すような時期になってきました。

そんなとき、必要になってくるのが「イラスト」ですね。

自分で思い通りに描くのが一番いいのはわかっているけれど、Webサイトの素材でも、絵葉書の素材でも、手間暇かけず好きなイラストを使えたら。

そう思うことは誰でも多いはずです。

そんなとき、便利なのがフリー素材のサイトなのですが、
フリーだとなかなかいいのがなかったりもします。

そう思っていたら、最近新しい素材サイトを発見しました。
MdN出版社が運営している「ナノハナ」というサイトです。

「ナノハナ」は、女性向け、かわいいイラスト素材をダウンロード販売しているサイトです。

さすがMdNさん、ラインナップしている素材のクオリティが非常～～～に高い！！

印刷にも使用できる高解像度・高品質ものばかりですので、
グリーティングカードにもWebサイト制作にも何でも来い！なのです。

ぜひぜひ女性も男性も！
ブックマークサイトに加えてくださいね♪

今日は、Web制作をする上で知っていると便利なツールを紹介します☆

Webブラウザーでのプレビューに関するお話なのですが、「ブラウザー」って何？という方は、過去記事「そういや、Webってなんだっけ。vol.2」を先にお読み下さい♪

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

本日紹介するのは、「Adobe BrowserLab」です。

Adobe社製のソフト…ではなく、「オンラインのブラウザー検証サービス」です。

Webブラウザーソフトは多くの会社から出ており、ソフトの種類だけでなくバージョンも様々です。

クリエイターは、制作したWebサイトの表示を確認するために、ブラウザを立ち上げてチェックをするのですが、
どこが違うかをチェックする作業はどうしても手間がかかるものです。

しかし、この「Adobe BrowserLab」を使えば、
異なる OS、異なるブラウザーの表示を同時に確認することができます！

とっても便利！

しかも、複数のブラウザーで検証をする際、
それぞれの表示結果を半透明にして重ねて表示ができるため、
違いをすばやく、かつ正確に把握することができます。

さらに、Dreamweaver CS5 をお持ちの方は、BrowserLabをDreamweaver CS5から
直接起動することができるため、いちいちAdobeサイトにアクセスする必要がありません。

なんて便利なんでしょう！

もっと詳しく知りたい！という方は、
「ADOBE DEVELOPER CONNECTION」サイト内で、
上条晃宏氏がその魅力を語っているので、そちらもぜひご覧ください♪

ちなみに、複数のブラウザーソフトで表示の検証を行うことを「クロスブラウザー」と呼びます。

これで、クロスブラウザーが楽チンに行えますね(^^*)♪

Webサイト制作の企画書を作るときに、参考になるのが”インターネットの利用状況”などの統計データです。

統計データの数字を根拠として、「Webサイト制作をする必要性」や「企画の有用性」、「企画の意図」などをクライアントに伝えるのです。

授業でそんなお話をすると、「じゃあ、そもそもその統計データってどこで手に入れるのですか？？」という質問を受講生からいただくことがよくあります。

いくつか例を出してみますね。

………・・・………・・・………

◆「インターネット白書」

財団法人インターネット協会から発行されています。
全国の書店で購入可能！

今年の6月に発売された「インターネット白書2010」のテーマは、
”通信、デバイス、コンテンツの大変革”です。

◆ニールセン・オンライン　ホワイトペーパー

インターネット利用者の動向調査やマーケティングのコンサルティングを行うネットレイティングス株式会社が
今年の8月23日、つい先日に創刊したばかり（！）の無料で読めるホワイトペーパーです。

※ホワイトペーパー創刊号ダウンロードページはこちら

◆その他　気軽に手に入るデータ

過去のブログ記事を参考にしてください☆　⇒「統計データを活用する。」

………・・・………・・・………

…こんなかんじでしょうか。

上記2つ目のホワイトペーパーの創刊号テーマは「日本のオンラインメディアの現状」だったのですが、
インターネット利用人口の推移なんかも掲載されていますので、
企画書作成にはもってこい！です。

また、”Web業界への転職ってどうなんだろう！？業界の成長性などが知りたい！”という方にも
とっても有益な情報がいろいろと載ってますので、
ぜひ見てみてください☆

最近、「ストックフォトサービス」がはやっているようですね。（⇒参考サイト）

「ストックフォトサービス」とは、イメージ写真を販売するサービスのことで、基本的にはプロが撮影した写真をレンタル・購入する仕組みが一般的でした。

新しく撮影をしなくても目的にあった高品質のイメージ写真を簡単に手に入れることができるので、スクールでも各社のストックフォトサービスを紹介させていただくことが多いです。

ところが。
最近、アマチュアの作品を安価に販売する「ストックフォトサービス」が話題なんだとか。
デジタル一眼レフの普及で、お小遣い稼ぎ目的で投稿するアマチュアが増えたんだそうです。

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

これは、クリエイターとしてもウレシイことで。

通常のストックフォトサービスであれば数万円する写真ですが、
アマチュア向けであれば数千円で手に入れることができるのです。

そこで、いくつかアマチュア向けストックフォトサービスをご紹介します。
購入してサイト制作に使うも良し、写真が趣味の方はお小遣い稼ぎとして販売するのも良し、とクリエイター的には2倍オイシイサービスです。

………・・・………・・・………

◆iStockphoto

11カ国語でサービスを行っており、世界中で使われている
ロイヤリティフリーのストックフォトサービスです。
クオリティーも高いのがウリ。

◆Paylessimages

チケット制の販売方式を取っており、定額制もあるのが特徴的。
一度にいくつかの写真を購入したいならこのサイトがオススメ。

◆fotolia

写真とベクターデータ、動画を扱うストックフォトサービス。
Illustratorが使えるなら、このサイトで作品を販売するのもありですね！

◆TAGSTOCK

ストックフォトサービスの大手、「amanaimages」の新サイト。
高品質なのに1点500円から購入できる、というのが強み。
全てがロイヤリティーフリーなのもありがたいです。

………・・・………・・・………

ちなみに、上記4番目に掲載した「TAGSTOCK」ですが、
9月から「TAGSTOCK」サイト内のフォト素材を活用した
イラストレーション又はグラフィックデザインのコンテストを開催しているようです♪
⇒コンテスト情報ページ

豪華景品もあり！
興味がある方はぜひ応募してみてくださいね^^

（ちなみに本日の画像はそのコンテストサイトの一部分をお借りしました。）

Photoshopを扱う上で重要なポイントの1つが、「加工のパターンをどれほど把握しているか」ということだと思います。

以前の記事でも、ツールの一つ、カスタムブラシを紹介させていただいたことがあります。（⇒過去記事『楽しくブラシ。』）

が、そんなブラシのオリジナルセットだけでなく、加工パターンの紹介や無料アイコンのデータなど、Photoshopでデザイン案作成するのにちょっと便利！なサイトがあります。

その名も、『Photoshop Vip』といいます☆

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

このサイトの良いところは、
使える素材の無料ダウンロードができたりチュートリアルを紹介しているだけではなく、
世界的なアーティストのインタビューやギャラリーで作品を見たりすることができる点にあります。

「世界のCM」というコンテンツも非常に面白いのでオススメ！

ただ素材を得るだけでなく、見ているだけでイマジネーションも湧かせられるという
とても”オイシイ”サイトなのです。

ちなみに。
ざっと見て私がブックマークしておこう！と思ったアーカイブをいくつか紹介させていただきますね☆

………・・・………・・・………

◆Photoshopでざらざらのノイズテクスチャをデザインする方法

ざらざらとかツルツルとか、質感の表現がWebサイトデザインでも大切ですよね。

◆ペンキを飛び散らせた様なPhotoshop用ブラシファイル「Splatter PS Brushes」

これも良く使いそうなブラシです。

◆夏を感じさせる44枚の爽やかな無料テクスチャ「Summer Garden Textures」

今の季節にピッタリ！作品制作の素材としてもどうぞ☆

◆やさしい印象のウッドフロアテクスチャのPhotoshop用パターンセット

木目調を作品のデザインに取り入れたいという要望はとても多いんですよね。

◆iPhoneで使われているリボンつきのミニマルアイコンを作成できるフォトショップ用PSDファイル

なんと、PSDファイル（Photoshopで加工ができるデータです）がダウンロードできちゃいます！これは実用的。

………・・・………・・・………

このほかにもおいしいネタはたくさん掲載されていますので、
仕事を既にしている方も、作品を作っている真っ最中！という方もぜひぜひ一度ご覧になってみてくださいね♪

adidasのデイリーカジュアルレーベル、「adidas Style Essentials」のサイトが今話題です。

ぱっと見、シンプルな方眼紙のようなデザインが表れますが、その画面上でマウスをつかってクリックアンドドラッグをすると、
ペインティングをするように画面に色が広がり、それと共にイラストや写真などが浮き出てきます。

それをクリックすることで、
さらに新しいコンテンツを見ることができる、という構成なのです。

Flashを使ったこの手の仕組みは、決して真新しい！というものではないのですが、
それでもデザインのさわやかさと、
ついつい長時間コンテンツを見てしまう工夫の点は
とても素晴らしいです。

なるべく長くサイトへの滞在時間を長くしたい、
そして、何度もリピートをしてほしい、
クチコミで広めてほしい。

そういうクライアント側の意図が見事に実現した企画だと思います。

ぜひ閲覧してみてください♪

サイトのデザイン案提出の段階や、資料を作成しているときにダミーテキストが必要になります。

大抵は、「テキストテキストテキストテキストテキストテキスト」とか「○○○○○○○○○○○○○○○」といったくり返し文で表示するものですが、それだとイメージがつきづらいもの。
そもそも、テキストエリアに文章を入れるのも、サイト全体の完成イメージをより明確にするためですから、できる限りリアリティのある文章を入れておきたいものです。

でも、ボディテキストには著作権がありますから、
他のサイトからコピペもできず…。

受講生の方から「どうしたらいいですかー！」とご質問を頂くことも多いのです。

そこで便利なサイトを発見しました☆

その名も『すぐ使えるダミーテキスト』です。

ネーミングもわかりやすい。

こちらのサイトは「意味を持たない」文章を半自動的に作成することができます。

もともと用意された元テキストだけでなく、
自分で用意したテキストを利用してパラグラフを作成することもできます。

ダミーテキストがすぐに必要！
というときにゼヒ利用してください♪

今日はちょっと上級者の方向けです。
「Ajax」という技術を使ってサイト制作をしている方、データのローディング中に「読み込み中…」というアニメーションが必要になるかと思います。

それをオリジナルで作ろうとするとかなり手間がかかりますが、『Ajax loading gif generator』を使えば、簡単にデザインパターンや色を選んで作成をすることができます。

作成方法はカンタン。

色、大きさ、背景の透過処理などを選択して、「Generate」ボタンを押すだけ。

すると、gif形式のアイコンが作成され、表示・保存をすることができます。

gif形式の画像のため、Ajax以外でも利用がOKなのがうれしいトコロ。

ワンランクアップのサイト制作のため、
Ajaxをサイトに導入しよう！とお考えの方はぜひブックマークをして
このサイトを利用してみてください☆

作品を授業でチェックをしているときに、よく受講生の方から頂く要望が『○○企業のサイトと同じようなものを作りたい！』というものです。

実はこの要望、制作会社がクライアントの担当者の方からよく頂く要望でもあったりします。

「こんなカンジのサイトデザイン素敵！」「こんな風に作りたい！」というのは、もちろん大切な感情です。

特に制作の勉強をしはじめたばかりのころは、
いいデザイン、いいコンテンツのサイトをたくさん見て勉強することがとても大切です。

しかし、就職活動用の作品や
実際に公開するサイトで、多少色や写真を変えただけで
他者のサイトのデザインを使用することは著作権法上問題になってしまいます。

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

じゃあどの程度が許されるのですか？
というと、なかなか明文化したり、定義をきちんと決めるのが難しいのです。

その点は音楽も文章も同じですね。

ただ一つ言えるのは、文章であれ写真であれプログラムであれ、
色使いからレイアウトまで「そのまま」使うのはダメということ。

たとえ自分が好きなデザインだったとしても、
大切なのはそのサイトを見てくれる人に対して最も訴求力があるデザインかどうか、というところです。

Webサイトを、見てくれるユーザーに対するラブレターなんだと思って、
大切に、そしてオリジナリティを持ってデザインをしてくださいね。

そして、もしお仕事を請ける立場になったときに、クライアントから同じような要望を頂いたら、
何かと「そっくり」にWebサイトを作ることにメリットはないことをしっかりと理解していただきましょう☆

いつでもどこでもカンタンに記載＆閲覧ができる、高性能なメモ帳が欲しい！

そう思うことはありませんか？

そんな気持ちにピッタリ合うサービスがありました。

『オンライン付箋サービス　－lino』です。

linoは、ブラウザを通して使える無料の付箋とキャンバスです。

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

”無料で使える”
というところに魅力を感じますが、その割りに高性能なのが『lino』のいいところ。

たとえば、ユーザ登録をすれば、自分用のキャンバスのURLが配布されます。

そのアドレスにアクセスすれば、
自宅や外出先からアクセスしてメモがOK！

さらに、付箋に日付をつけておくと、当日の朝にメールでお知らせまでしてくれます。

イベントや忘れちゃいけない日付のメモにも便利！

写真はおろか、動画もアップロードできて、
他人との共有もできるため、情報交換や共有にも利用できます。

どうやらiPhoneでは利用できないようですが、
通常の携帯であればモバイルサイトも利用ができます。

よって、パソコンがない場所でも、携帯からカンタンに写真や
メモのアップロード、そしてアクセスが可能なのです。

有料会員になれば、大容量のファイル送信も可能に。

とっても便利！

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

情報やファイル共有サービス、
スケジュール機能の便利なサービスは世の中にいくらでもありますが、
やっぱり外せないのは”パソコンと携帯電話の同期ができるかどうか”、
そして”お手軽に使える”かどうか、
というところ。

その2点でこの『lino』はとても便利だと思うので、ぜひ使ってみてください♪

何気なく、そして当たり前に使っている「テキストボックス」。

何かを検索して調べたいときに、文字をぽちぽちと打って”検索”したり、
会員登録をしているサイトでIDやPWを入れて”ログイン”したり。

いろんな目的で「テキストボックス」を使うことが多いと思います。

しかし、この「テキストボックス」。
フツウに作ってしまうと、”なんかパッとしないな。”という感じに
なってしまうことが多いと思います。

せっかくサイトのデザインにこだわるのであれば、
どうせなら「テキストボックス」と「ボタン」までデザインにこだわりたいものですよね。

その作り方を本日はご紹介します。

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

作り方はカンタン。

オシャレな枠とボタンの画像を用意して、
HTMLとCSS（= Cascading Style Sheets）の言語を使えば作ることができます。

………・・・………・・・………

①formタグにCSSで枠として見せたい背景画像を指定

②input type="text" の枠を　border:none;　で消す

③input type="image"で検索ボタンを画像として表示させる

………・・・………・・・………

以上！

その他レイアウトを調整したり、マウスが乗ったときの設定を調整するなど、
細かい指定方法などはインストラクターに聞いてみてください(^_^*)

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

オシャレなテキストボックスを作る場合に注意すべきこととしては、
デザインに凝りすぎてそこに文字を入力できるかどうかがわからなくなっては本末転倒です。

そのため、たとえば検索枠として使うなら、
虫メガネのアイコンを作ったり、ボタンの上の表記の文字をそれとわかりやすく
作っておく必要があります。

そういった点に注意をして、ぜひオシャレな検索枠を作って
私たちインストラクターにも見せてくださいね☆

流行を調べるにしろ、業界別のデザインの特性を調査するにしろ、アイディアの肥やしにするにしろ、
役に立つのが良いWebサイトのデザインを集めて掲載しているサイトです。

よく、「デザインに迷っているんですけれど、いいWebサイトないですか」というご質問をいただいた際には、
いくつかインストラクターもお答えさせていただいていますが、
本日はその中の一つ、『bookma! ～みんなで作るWEBデザイン参考集～ 』というサイトをご紹介いたします。

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

こちらのサイトでは、投稿型のWEBデザイン参考集のサイトであり、
Webサイトのテイスト、カラー、カテゴリ、サイトタイプを選択することで
目的のサイトをすばやく見つけることができる、
とっても使いやすいサイトなのです。

こういうWebデザイン参考集のようなサイトを利用するときに気をつけたいこととしては、
”なんとなく”で探さないことです。

なんとなく、あ、いいな、コレもステキ、あれも格好いい…
と思ってみていると、自分が何を作ればいいのかますますわからなくなってしまいます。

そこで、テーマを絞って、目的をもって見ることが大事。

たとえば、「食品メーカーのサイトを作りたいから、食品メーカーのサイトで掲載されている
サイトの比較をして研究してみよう！」とか、

「テーマカラーが青色で、作りたいサイトにしっくりくる
カラーテイストのパターンを探してみよう」

などいうようにです。

そうして気がついたことは自らの技術のストックとして溜めていくと、
新しい作品を作るときに役に立ちますよ☆

みなさんは、美術の授業などで『レタリング』をしたことはありませんか？

最近は、ただ文字（フォント）の選択をすることも「レタリング」というようですが、本来のletteringという言葉は、”手で文字を書く”という意味があります。

私は中学時代の美術の授業でこの「レタリング」を学びました。
文字の書体を見ながら、平筆とガラス棒と専用の溝引きという定規を使って、一筆一筆、一文字一文字作っていくのです。

数十年も昔の日本では、この「レタリング」の手法で文字を手書きで書いていくのも列記としたデザインのお仕事でした。

写真やイメージに合う書体と大きさ、配置を考える。

その相性を探っていくような慎重な作業は、子供心にも楽しかった記憶があります。

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

とはいえ、今や文字は”購入”できる時代です。

ただ、オシャレで頻繁につかわないような特長のあるフォントは、
できればお手軽に手に入れたいもの。

そんな方は、ぜひ『Fontstock.net』というサイトをブックマークして使ってみてください。

もともとは海外のサイトなだけあって、
アルファベットのものばかりですが、
かなりのバリエーションのフリーフォントが置かれており、
自由にダウンロードをすることができます。

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

それにしても、
カンタンにパソコンで打ち直しをすることができる時代だからこそ、
文字の選び方は昔以上に慎重になりたいものですし、
文字の形が与える印象の重要性も把握しておきたいものですね。

デザインの9割は文字の選び方で決まる、
とおっしゃる業界の方もいるくらいですから。

興味がある方はぜひWebデザイン理論の授業をお受けください☆(^^*)

『外出先からちょこっとだけ写真の補正がしたい！』
『せっかく携帯の性能が良いのだから、携帯で撮った写真を簡単に加工したい！』

そんな声にお応えできるのが、『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を使っている方や、今勉強していらっしゃる方にこそ、
補助的な存在としてぜひ使っていただければと思います♪

「もっと種類があったらなあ…」と思うのは、フォント（文字）データであることが多いのですが、
実はPhotoshopのソフトで使うブラシにも、種類がいろいろとあるのをご存知でしょうか？

「ブラシ」というツールは、筆で絵を描いた様なタッチになるのが一般的なイメージだと思うのですが、
実はこのブラシもフォントデータのように、
後から追加をして増やしていくことができるのです。

作業の手順としてはカンタン。

………・・・………・・・………
◇ブラシデータの追加方法◇

①「～.abr」という拡張子のブラシデータを用意
②Photoshopを起動し、ブラシツールを選択
③ツールオプションバーのブラシの種類を選択するサブウィンドウのメニューから、
　「プリセットマネージャー」を選択
④出てきたダイアログボックスから、「読み込み」ボタンを押す
⑤①で用意したファイルを選択
………・・・………・・・………

…以上！

とてもカンタンに取り込みができる上、
後は好きな色を選択してブラシとしてつかうだけです。

今日の画像は、そうやって取り込んだブラシデータで描いてみました☆
カワイイですよね。

さて、問題の「～.abr」というデータですが、
これはこのサイトで確認できます。

◆Doodle Garden

どうぞアクセスしてお使いください♪

実は、私が普段授業をさせていただいているインターネット・アカデミーが運営しているサイトは、この【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"で検索ボタンを画像として表示させる

………・・・………・・・………

以上！

その他レイアウトを調整したり、マウスが乗ったときの設定を調整するなど、
細かい指定方法などはインストラクターに聞いてみてください(^_^*)

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

オシャレなテキストボックスを作る場合に注意すべきこととしては、
デザインに凝りすぎてそこに文字を入力できるかどうかがわからなくなっては本末転倒です。

そのため、たとえば検索枠として使うなら、
虫メガネのアイコンを作ったり、ボタンの上の表記の文字をそれとわかりやすく
作っておく必要があります。

そういった点に注意をして、ぜひオシャレな検索枠を作って
私たちインストラクターにも見せてくださいね☆

デザインをする上で、Webサイトの大きさ、特に横幅の設定というのは重要な要素の一つです。

初めてサイト制作をする、という受講生の方はむしろ悩みの種のようですね。
よく、「ちょうど良いサイズって…？(>_<;)」というご質問をいただきます。

これまでは、パソコンのモニタのサイズは800×600ピクセル～1024×768ピクセルといった具合に大体足並みをそろえていました。

だからこそ、それにあわせた幅でWebサイトを制作すれば良かったのですが、
最近はワイドな横長モニタのパソコンが増えたり、
逆に800×600ピクセルの小さな「ネットブック」パソコンが流行したりと、
画面サイズのバリエーションが多岐にわたるようになりました。

んー、こまった！

そこで、注目を集めているのが、Webサイトの幅を固定せずに制作する
「リキッドレイアウト」というものです。

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

リキッドレイアウトというのは、
ブラウザのウィンドウ幅に合わせてレイアウトの最大幅も変わる設定のことです。

違う言い方をすると、ウィンドウ幅にあわせて
リキッド（＝液体）のようにレイアウトを自在に変形させることができる、というものなのです。

代表的なリキッドレイアウトのサイトをいくつかご紹介しましょう。

ブラウザのウィンドウサイズを小さくしたり
大きくしたりしながら変化を確認してみてください。

………・・・………・・・………

◆Amazon

横並びに表示される商品の数が増えたり減ったりします(^^)

◆PASS THE BATON

トップページはFlashのActionScriptで、
中のページに入ると、JavaScriptでリキッドレイアウトが作られています。
ウィンドウの横幅のサイズによってコンテンツを並び替えられており、
動きがとってもかわいらしいです！

◆iGoogle

自分でカスタマイズして利用できるGoogle。
選択したコンテンツが液体のように流動します。

………・・・………・・・………

リキッドレイアウトの作り方は、

・CSSでコンテンツの幅を%などの相対的な値で設定する
・JavaScriptで制御する
・FlashのActionScriptで制御する

といった方法があります。

CSSもJavaScriptもHTMLも言語ですし、
それらを正確に記述するだけの知識がなければリキッドレイアウトを実現することはできませんから、
ますます正しいコーディングの知識が制作現場に欠かせなっていっていることを実感します。

ユーザーの環境に合わせてコンテンツを見せることができるという点で
まさに”現代風レイアウト”として注目を浴びているリキッドレイアウト、
書きたい！という方はぜひ当スクールのホームページの授業を受講してくださいね☆

映画の「予告ムービー」は、見ていてワクワクするので私は大好きです。

”次に何を見ようかな””これ面白そうだな”という期待感が、なんとも心くすぐられる気がして楽しい気分にさせられるのです。

この”ワクワク感”は、Webマーケティングにとっても大事なことです。

たとえば、商品のキャンペーンサイト。

期間限定で公開するようなサイトがあるのであれば、
そのページがまもなく出来上がる（＝公開される）ということを告知することで、
期待感はぐっと高まって公開時のアクセス数の伸びに変化が出ます。

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

ユニクロが良い事例ですね。
3年ほど前になりますが、『UNIQLOCK』コンテンツに必要な
時報に合わせて踊るダンス「CLOCK DANCE」のオーディション映像を公開したことがありました。

さらに、このオーディション映像はYouTube上に同時公開もされていました。
既に知名度の高かったコンテンツのリニューアルに際し、
”期待感”をあおる戦略をとったのです。（⇒関連記事）

しかも、この映像の隣にはばっちり「ユニクロオンラインストア」へのリンクが貼られていました。

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

未発表の情報を断片的に公開し、ユーザーの興味を引くことを
目的としたプロモーション用Webサイトのことを、「ティザーサイト」といいます。

情報を小出しにして詳細を隠し、閲覧者を焦らす(tease)ことから
その名がついたようです。

最初に話題になったのは、トヨタ自動車が2005年に行った「bB」のコンテンツです。
新モデル発売前に、テレビCMとティザーサイトを連動させた広告キャンペーンでした。

現在では事例もいろいろと増えました。

ちなみに、大型の広告キャンペーンコンテンツでなくとも、
”準備中ページ”を作ることで、期待感を持ち上げることはできるはずです。

『webdesigner depot』の「A Collection of “Coming Soon” Web Pages」という記事は、
海外の”素敵な準備中ページ”を集めたコンテンツです。
興味がある方はぜひぜひご覧になって参考にして下さい。

モニタを使って見なければならないWebというメディアは、もともと文字を読むのに適してはいません。

長時間見ていたら目は当然つかれます。

だからこそ、大切なのは”なるべく見やすく”表示をさせる、というデザイン上の工夫です。

その”文字の見やすさ”のことを「可読性」といいます。

可読性を上げる方法には、
「背景と文字の明暗差を調整する」
「文字を大きく表記する」
「漢字はなるべくつかわない」…など、いくつかあります。

その中に、細かい項目をいれるとしたら
「難しい英語表記を使わない」と「筆記体を使わない」
というのも該当するかと思います。

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

実は、母国語など使い慣れた言語であれば、
一文字一文字を追わずとも、ぱっと見の字面で
意味を理解することができます。

しかし、メニューがすべて英語表記だったりすると、
当然そのメニューのページが何を意味しているのか理解するまで
多少の時間がかかってしまいます。

しかも、それが筆記体だったりすると、さらに見づらくなります。

とくに、筆記体は現行の英語の教科書では
ほとんどの出版社が巻末の付録扱いだとか。

あまり一生懸命教えていないのですね。

そもそも、アメリカでも小学校中学年程度で
筆記体を教えているようですが、
日本と同じ事情で授業時間は激減しているとか。

なんだかもの寂しい気がしますね。

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

とはいえ、
画像やデザインの一部として筆記体はやはりオシャレですから
「使いたい！」というときも出てくるものです。

そんな時は、『thinkdesign』のこちらの記事を参考にしてください。

20個の筆記体のフリーフォントを紹介してくれています。

上記の画像は、その中からいくつかダウンロードして使ってみました☆

フリーなのになかなかのクオリティ！
ぜひぜひブックマークしておいてください♪

新橋からお台場方面につながる『ゆりかもめ』。

この各駅には、それぞれ日本の伝統色と伝統文様が施されています。
たとえば、台場駅は菫（スミレ）色に大波文様、有明駅は柑子（こうじ）色に獅子文様…というように。

それはそれはとてもキレイで、駅で降りるたびにその文様があしらわれ、説明が書かれたプレートをじっと見てしまっています。

私のお気に入りなのが、日の出駅の「日足散らし文様」。
紅色に華を連想される模様が散り、とても可愛らしいです。

また、新橋駅はなんと「新橋色」なんです！
ちゃんと理由もありますよ☆

他にも気になる方は、こちらをご覧下さい。

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

Webデザインを勉強する上で、
日本の伝統美、というのは、必須ではないかもしれません。

でも、ひとつ「何かを勉強する」、と言うのであれば、
寄り道であったとしてもやっぱりいろいろな視点から勉強できたほうが楽しいと思うのです。

それは、色でも模様でも同じ。

和風なサイト制作のデザインのアイディアにはもちろん、
それ以外にも斬新なデザインを考える上でヒントになるかもしれないので、
興味がある方は勉強してみてはいかがでしょうか？♪

ちなみに、スタッフから教えてもらった便利なサイトがあります。

『ちょっと便利帳』というサイト内にある、
「色彩辞典・日本の色」という、
JIS・日本工業規格が「物体色の色名」と規定している慣用色名の
カラー16進数（色番号）が閲覧できるコンテンツです。

ぜひ見てみてください☆

作品制作の最中”色を選ぶのがむずかしい！”というお声は、受講生からひんぱんに頂きます。

色の何がむずかしいって、”組み合わせ”なんですよね。

メインカラーだけでなく、脇役色、背景色、文字の色などなど…
一つの色を決めるだけでも悩ましいのに、全体のバランスを見ながら色を決めていかねばなりませんから、当然その作業はカンタンなことではありません。

配色の参考本を片手にうーんうーんと唸っている方もみかけます。
気持ち、良ーーーくわかります（笑）
ただ、あまりに長時間悩んでしまうときは、
色以前に”作りたいサイトの雰囲気”も決まっていない、ということが多いものです。

いざ作品を作る！というときには、
”かわいい”とか”スタイリッシュ”、”ポップ”といった表現したいサイトの「雰囲気」を決めておきましょう。

あとは、その雰囲気にあう配色パターンを元に、
いくつか色を選択し、服を着替えるように色を当てはめて確認していけばよいのです。

一発でいい色なんて決められませんから、
いくつも配色パターンを作る覚悟も必要です。

具体的な色の選び方は、
「Webデザイン理論」という授業でやってますので、ぜひ受講してくださいね。

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

さて、「じゃあ、色を選ぶ感覚を養うにはどうしたらいいですか？」
という質問を頂くこともあります。

そんな方にぜひ使っていただきたい、面白くて便利なサイトを見つけました。

『Colorspire』といいます。

1.背景色
2.ヘッダー
3.メイン左ボックス
4.メイン右ボックス
5.フッター

の5つのボックスごとに、カラーピッカーのインターフェイスを使って色を選択。

配色のバランスを見ることができます。
とても簡易的なものではありますが、手っ取り早く組み合わせを見るという意味ではとても便利。

Webデザインの中で、「色」は最も重要なキーワードです。
だからこそ、悩ましくて難しいとは思いますが、上記のサイトなどを利用しながら、
少しずつ自分の中で「定番配色パターン」を増やしていってください。

QRコード、といえば携帯電話！と、親しみがある方も多いのではないでしょうか。

インターネット・アカデミーの携帯版Webサイトをご案内するのにも、QRコードを使っています。

QRコードは、実は開発元であるデンソーウェーブの登録商標で、
正しくはマトリックス型2次元コードといいます。

”QR”とは、Quick Responseに由来するとか。
つまり、データの読み取りがすばやくできるように開発されたものなのです。

バーコードは横方向にしか情報を持たないのに対し、QRの場合は縦横に情報をもつので、
数字だけでなく英字や漢字のデータも入れることができちゃうのです。

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

インターネット・アカデミーの講座である『モバイルコンテンツ』という授業でも、
このQRコードの紹介をしています。

でも、最近のQRコードの事情はちょっとオモシロイものがありまして。

昨年、アジア地域におけるベンチャー企業トップ100社を選出する米Red Herring主催の「Red Herring Asia 2009」に、
日本の㈱IT DeSignが選ばれました。

この会社が作っているのは、「デザインQR」。
オリジナルのキャラクターやロゴ、写真、イラスト、文字などの画像を、
QRコードの中の一部に入れてしまう、というものです。

導入実績企業も、名だたる企業が名を連ねています。（⇒こちら。）

それ以外にも、最近知ってオドロイタのがＡ･Ｔコミュニケーションズ株式会社の『ロゴＱモーション』というのがあります。
こちらは、アニメーションタイプで、動く2次元コードなのです。

見てみないとわからないですよね（^^;）
ぜひ、アクセスしてみて下さい。

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

こういったデザイン性の高いQRコードが普及していけば、次の3つの導入メリットがあると
IT DeSignはそのサイト上で述べています。

①集客効果
②ブランディング
③安心感UP

うん、納得。

”どうやってWebサイトを見てもらうか”もWeb業界にとっては課題ですから、
こういうQRコードのバリエーションが広がることは、利用法の可能性が広がる上になんだかタノシイですね♪

みなさんは、日常生活で乾電池をどのくらい使っていますか？
実は、日本人の平均的な使用量は、年間約70本ほど(！)なんだそうです。
数えだしたら意外と多く使っているのですね。

さてさて、そんなわけで
今日ご紹介するWebサイトは、SANYOの充電式乾電池『eneloop』を紹介するスペシャルサイト「エネループのある日々」です。

充電を約1,500回くり返して使える電池、『eneloop』。
その『eneloop』が、日常の中で活躍している様を物語の中で紹介していくコンテンツです。

Flashアニメーションを使って展開されていく物語をいろどるのは、
アーティスト、池田朗子さんの温かい写真。

誰もが、”あるある。”と共感できる
日常生活の物語が、またいっそうこの商品に対する好感度を高めてくれます。

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

しかも。
このコンテンツは、ただ商品のPRをするだけでなく、
池田朗子さんの写真を使ってグリーティングカードをつくることができます！

ちょっと、作ってみました。
⇒グリーティングカード

メッセージ、見れましたか？^^

このグリーティングカードは、メールで送ったり、twitterでつぶやくのにつかうこともできます。

最近のキャンペーンサイトやスペシャルコンテンツに多いのが、
こうやってサイトの仕組みを個人的に楽しんでもらった後に
それを誰かに広めてもらう、という仕組みですね。

ある種のクチコミ利用とでもいいますか。
”感動を共有したい、Webならそれが簡単にできる。”
このサイトは、それをうまく活用している事例のひとつだと思います。

”よく見るWebサイトのデザインを考えるのはなんとなく想像できるけれど、動くアニメーションのWebサイトは、どうアイディアを練ったらいいかわからない。”

そんなご意見を受講生の方からいただくことがあります。

確かに、静止画の状態であればなんとなくレイアウトを考えるのも苦痛ではありません。
でも、いざ動く、となると、『何でもできそうで、何をアイディアにしたらいいか』と困ってしまいますよね。

そんな方に、クオリティの高いFlashのWebサイトばかりを集めたサイトをご紹介いたします。
『koflash.com』です。

こちらのサイトでは、海外のものではありますが、
世界中から素晴らしいFlashサイトを集めて紹介してくれています。

一ユーザーとしてみているだけでも、とっても楽しい！
そんなサイトがごろごろと紹介されています。

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

でも、よく思うのですが、アイディアは瞬間的に出てくるものではありません。
自分の中で蓄積をしていった情報や知識をもとに、
”考える”ことを繰り返した人にだけ、初めてアイディアがぽこぽこと出てくるものなのでは、と思っています。

じゃあ普段からアイディアが出てくるような考え方をせねばならないのですが、
Flashの場合、私の持論はこうです。

”物が動く様子を観察していく”

たとえば、引き出しが開く、
雲が流れる、
風船が飛ぶ、
電車が走る、
植物が成長する、
泡が立つ。

その意味とは、その動きから生まれる感動とは。
そんなちょっとだけ哲学的なことを考えていったら、きっと、意味のあるFlashアニメーションができるのでは。
そんな風に思っています。

前回『Nike+』というサイトの紹介をしました。
このサイトはいろいろな戦略や企画でランナーの”気分”を盛り上げているのですが、
2月5日より新しく始まったキャンペーンがあります。

その名も、『Magic Number』プロジェクト。
これは、超えられない目標タイムとか、走行距離といった自分を奮い立たせてくれる数字や、
気に入っている数字を身につけて、レースに臨もう！
というコンテンツなのです。

このコンテンツの利用方法はシンプル。
好きな数字をエピソードとともに登録するだけ。

でも、その数字の活用法はたっくさんあります。

たとえば、twitterやmixi、Facebookなどのコミュニティサイトを使って自分のMagic Numberを知人に広めたり、
スペシャルチャレンジプロジェクト『東京ランニング・ラリー』という、
2月28日までに東京都の外周300kmを走りきっちゃおう！
なんて企画に参加することができたりします。

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

前回のお話の中で、NikeがWebを使ってやっているのは、
”商品購入後の満足度、付加価値UP”だ、ということを書きました。

どうも、Webを活用したマーケティングというと、
新規顧客の取り込みを！という発想になりがちなのですが、
Webはユーザーとユーザーの輪を広げていく、とっても楽しいツールでもあります。

他にも、 『鬼ごっこ+』というイベントも「Nike+」内で現在開催されています。
実在のナイキアスリートが”鬼”となり、
Nike+ユーザーを追いかけるのです。

毎日走るのが、とても楽しくなりそうですよね。
私も走りたくなってきました。

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

いろいろと紹介しましたが、
ユーザーの『楽しい！』から『消費行動へ』という流れを作るということ、
それが今のWeb業界と経済活動には必要不可欠なんだとつくづく思います。

どうせWebをやるなら、”ものづくり”の楽しさはもちろんですが、
ユーザー側の”楽しい”を広げるようなこと、やりたいですね。

「Webを使った画期的なマーケティングを長年行っている企業の名前をあげなさい。」

そんなテストがあったとしたら、私は絶対に「ファーストリテイリング（ユニクロ）」と「Nike」と解答欄に書くでしょう。

みなさんは、数年前の「ワークアウトを開始しています…1キロに到達しました…」というナレーションが流れるランニング風景のテレビCMを覚えていませんか？
あのCMは「Nike×Apple」というコラボ企画のスタートでした。

内容は、Nikeのランニングシューズ内にあるセンサーから
ランニングデータをiPodに送信・記録し、
『Nike +』というサイトへデータを登録すれば、
世界中の仲間とデータを共有することもできる、というものです。

実は、先日この「Nike+」内でメンバーのランニング合計距離が
3億キロを超えたそうです。（⇒関連コンテンツ）

3億キロて途方もない数字ですネ。
サイトの紹介文によると地球一周の7500回分らしいです。
…やっぱり途方もない！（苦笑）

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

大切なのは「何のための」戦略なのか、ということ。

それは、”商品購入後の満足度UP”や”商品の付加価値UP”です。
たとえば、ランニングデータを共有するだけでなく、
架空のジョギングチームを作ったり、世界中のランナーたちとタイムを競ったり、
自分の目的に合わせたトレーニングを組んだりすることができます。

『ユーザーが商品価値を高める』

そんなコンテンツなのです。

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

商品を買ってもらった後が大事。

Webというメディアが出てきてから、特にその傾向は顕著です。

買った商品に対し、ユーザーは評価をし、その情報を共有しあいます。
だから、購入した後こそユーザーの満足度を高めていく工夫をせねば、
リピーターの獲得もできなければ、
新規ユーザーを得ることもできなくなってしまうかもしれません。

そうしたときに、「商品を買って、もっとその商品を好きになってもらう」ために、
Webというメディアはとても有効なのだということを
この『Nike+』の事例は教えてくれているように思います。

つづく。

ビルや家を建てる際に、法律で建築のルールが決められているように、Webサイトを作るときにも守るべきルールがあります。

まず、世界レベルでのWebサイトの制作基準を決めている『W3C』が勧告しているルール。
それから、制作を行うプロジェクトチームごとに決める制作の「仕様」があります。

冒頭のたとえで言うと、「建物を建てる」という上で守らねばならない建築法があり、
さらに建設会社の中で独自のルールがある、というのと同じことですね。

「仕様」を決める作業のことを「仕様策定」と呼ぶのですが、
具体的には次のようなルールがあります。

・ブラウザソフトで制作したWebサイトの表示確認をする上で、どのバージョンを基準とするのか
・命名規則（データファイルにつける名前の決め方）
・サイズの単位

などなど。
あげていけばキリがありませんが、これを決めておかなければ、
多くの人が関わるプロジェクトのWebサイト制作で、一定の作り方で作ることができなくなってしまいます。

細かいルールの明文化はもちろんのこと、
作った仕様にもとづいてHTML構成図（制作する上での基本の設計図と考えてください）なんていうものも
複数のレイアウトパターン別に用意します。

良い仕様があれば、Webサイト制作をスムーズに、効率よく作成することができるのです。

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

何で急にそんなお話をしたかといいますと、
実はインターネット・アカデミーのグループ企業である『WEBSTAFF』と連動して、
1月に「WEBディレクターのためのXHTML×CSS仕様設計セミナー」を開催したからです。

しかも、実は2月10日には大阪オフィスでもインターネット・アカデミーのインストラクターが講師役を務めて
同じく「XHTML×CSS仕様設計セミナー」を開催します。

アカデミーの受講生さんでもWEBSTAFFに登録をして業務についていらっしゃる方が大勢いらっしゃいますので、
ぜひ、登録スタッフさんで興味のある方や
大阪在住のアカデミー卒業生さんは、またとない機会ですのでぜひぜひ参加してみてください。

昨年末にも、『2010年のトレンドデザイン。』という記事を掲載したことがありましたが、
今日はいまさらながら『2009年のWebサイトのデザインベスト15』をご紹介したいと思います。

その15のサイトというのは、デザイナーのためのデザインコミュニティサイト『Drawar』がセレクションしたものです。
（⇒参照ページはこちら）

「Drawar」は海外サイトですが、
日本のWebデザインの流行は海外の少しあとを追っていきますので、
上記の記事はとても参考になるかと思います。

デザインのアイディアで詰まってしまっている方は、ぜひご参照下さい。

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

選ばれた15のサイトを見て抱いた私の感想は、
昨年の年明けすぐにSmashing Magazineが発表していた2009年のトレンドデザインとやはり
つながっているものが多いな、というものでした。

大きなフォント、
大きなグラフィック、
雑誌風レイアウト、
余白の拡大…。

そういった要素が15サイトのどれにも伺えます。

しかし、それだけでなく私が注目したいなあと思っているのは、
”テキストの見せ方が変わったなあ”ということです。

海外サイトはこぞって、文章はみな画像をほとんど使わず、なるべくテキストのままデザインに組み込んでいます。
これは、クリエイターたちがテキストで文章を打つということを重要視しはじめた証拠でもあります。
（⇒関連記事　『Webの文字革命。』）

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

これまでのブログでも、
なるべく文章は画像を使わずにテキストで表記させましょう、ということを書いてきました。

まだ、日本のWebサイトはその意識が低いように思います。

流行が全てではありませんが、海外のデザインが素晴らしいサイトを見たときに
文章や見出し文をテキストで表記させる場合の、
デザインの工夫点に注目をしておいて損はないと、私は思います。

みなさんは、何か買い物をするとき、Webサイトで情報収集をしますか？

なんと、ある調査では、『男性の9割が、ネットで商品の情報を調べる』という結果が出ているようです。
（⇒参照元：株式会社アイシェア 「ECサイトの利用動向に関する意識調査」より）

インターネットで調べる方法として、95.1％が「商品名での検索」をあげているようで、
まずは購入したい商品の名前をYahoo!やGoogleで入力し調べる、という人が多いことがわかります。

つまりは、商品を買ってもらいたいと思ったら、「Yahoo！やGoogleで商品名を入力したときに、どんなサイトが出てくるか」が
大事である、ということにつながります。

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

最近知り合いがデジカメを購入したい、というので私もWebサイトをいろいろとみていたのですが、
”これはいいな！”と思ったのが、SONYのカメラ製品のためのスペシャルコンテンツでした。

たとえば、「サイバーショット」と検索をかけると、
SONYの製品情報のサイトが上位にヒットします。

そのページの一番上。
目立つところに『水のない水族館をつくろう。』とありますよね。

これがそのスペシャルコンテンツです。

このコンテンツでは、廃校になった小学校を地元の子供たちと岡田准一さんが”アートな水族館”へと返信させたプロジェクトを紹介しています。
テレビCMもしていたのでご存知の方もいらっしゃるのでは？

このドキュメンタリーと関連して、実はもう一つ、特設コンテンツがあります。

『Wonderful Moment Project 2分間の水族館』です。
こちらは、SONYのビデオカメラ「Handycam」や、デジタルカメラ「Cyber-shot」「α」の撮影体験ができます。

好きなカメラを選び、水族館の中で好きな魚を撮影体験することができる、というとても新しく面白いサイトです。

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

モノを買うという行動を起こすときにはいろいろな視点で比較検討をすると思うのですが、
”楽しい買い物”をするために大切なのは、
『物語性』と『体験』ではないでしょうか。（あくまでも私の個人的な考えですが…。）

その二つを見事にクリアしているのが、上記のSONYのスペシャルコンテンツのように思います。

『物語性』、という意味では他の広告手法でも表現は可能かもしれません。
でも、”カメラの撮影『体験』”ということを実現させたこのコンテンツは、
またひとつWebの可能性を広げたのではないかと思います。

データが欲しい！
数字が欲しい！
グラフが欲しい！

これらはきっと、Webに限らず、世の中の全ての業界、全ての職種の方々に叫ばれている台詞でしょう。

以前も『グラフにこだわってみよう。』という記事を書きましたが、そのときも多くの反響をいただきました。

私自身、”この数字のグラフがほしい…！でも作っている時間もないし…”と
グラフが喉から手が出るほど欲しく思うことが多々あります。

でも、そんな気持ちに応えてくれるWebサイトがありました。
今注目を集めている、「vizoo」です。

「vizoo」は世界初のグラフを共有することができるサイトで、ユーザーは経済データに基づき、
グラフやチャートを簡単に作成、共有をすることができます。

このサイトは金融や経営企画などのビジネスマンや投資家から人気が高いようですが、
もちろんWeb業界で働く人にもばっちりニーズがありそうですね。

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

Web業界の中で、こういった市場データが必要な職種、といえば、
Webプロデューサーやディレクターといった、サイトの企画を考える職種の方々です。

たとえば。
新しく旅行会社のWebサイトを作ることになったとしましょう。

まずは、どうすれば成果の出るサイトになるのか、企画を考えねばなりません。

そのためには、クライアントである旅行会社のこと、それから旅行会社の業界情勢、
利用者のニーズや特性といったことを調べる必要があります。

マーケット情報を調べる方法はいくらでもありますが、
なかなか有効でデザイン性の高いグラフを見つける、というのは至難の業。
とくに、使いたい数字は見つけてもグラフがない！なんてのはよくある話です。

だからこそ、信頼できる数字を元に、グラフをユーザー同士で作って共有できる、
なんてのは願ったり叶ったりなサービスなのです。
おそらく今後爆発的にユーザー数が増えていくのではないでしょうか。

サイトの企画を考えるためには、なんにしろ、こういった統計データを読むのは必要不可欠ですから、
日ごろからなんとなくこのサイトを閲覧しているだけでも、良い勉強になりそうですね。

みなさん今年の初夢は何を見ましたか？
残念ながら私は全く覚えていないのですが…。

夢を見るということのメカニズムはいまだ解明されていないため、迷信も多くロマンがあります。
夢の内容は自分の深層心理の表れだ、とは良く聞きますが、万葉集には、”夢に出てきた人は自分ではなくその人が自分に逢いたいと思ってくれているからだ”という主旨の歌が多数あり、今とは考え方が違っていたらしいということがわかります。

平安時代らしい考え方ですが、なんだか素敵ですね。

そんなことを考えていたら、素敵なサイトを見つけました。
『ENDLESS NIGHTMARE』という、”夜に見る夢の不思議で怪しい世界”をテーマにした
アニメーションのサイトです。

こちらのサイトは、マウスを動かしながらBGMとアニメーションを楽しむためのサイトで、
企業サイトやキャンペーンサイトといった類ではありません。

画面の中でゆっくりとアニメーションが動いていき、
マウスを重ねたりクリックしたりすることで、アニメーションに変化が起きます。

さらに、操作を続けると画面下方の真ん中にあるメーターが動いていき、
最後まで針が触れるとアニメーションに変化が起こります。

エンドレスでつながる空間と不思議な世界観がとても心地よく、
創作意欲が掻き立てられて自分も何か作りたくなります（笑）
アニメーションに興味がある方、ぜひご覧下さい。

ちなみに、このサイトは基本モノクロで表現され、色がほとんど出てきません。

「夢は白黒である」なんていう説があるのを聞いたことがありますが、
それをイメージしているのでしょうか。

その説が本当かどうかわかりませんが、
そう思ってこのサイトのアニメーションを見ると、ひときわロマンを感じます。

何をイメージし、意味を付与するか。
デザインの奥深さは、そこに現れるのですね。

夢か現かわからない世界や思いを表現する。
平安時代にとっては「歌」がそうだったように、
現代は「Web」がそのクリエイティビティを広げてくれているように思います。

前回、Webサイトを見た消費者の方が、見ていない消費者よりもその企業に対して好感度を抱いている可能性が高い、というお話をしました。
これは逆の言い方をすれば、Webサイトの質が悪ければ、消費者はWebサイトを見ることで逆に好感度が下がってしまう可能性が高い、ということでもあります。

ただ一つ言えるのは、Webサイト次第で企業イメージが大きく左右されるということ。
では、好感度が高まるWebサイトとは、一体どんなWebサイトなのでしょうか？

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

ネットマーケティングを展開する株式会社アイシェアが、
これに関し市場調査でわかったデータを公開しています。（⇒こちら）

まず、「インターネットで企業サイトを見たことがあると応えたユーザー」は全体の約65%だったそうです。
その65%のユーザーに対する質問の結果は以下の通りです。

………・・・………・・・………
【企業サイトでどんな情報を求めていますか？】＜複数回答＞
1位　商品情報　　…94.0%
2位　店舗検索　　…80.4%
3位　プレスリリース・ニュースリリース　　…46.7%
4位　会社概要　　…41.0%

【好感が持てるのはどんな企業サイトですか？】＜複数回答＞
1位　情報が整理されている　　…85.9%
2位　軽くてページ移動がスムーズに行える 　　…80.4%
3位　サイト内検索が使いやすい　　…64.1%
4位　情報が豊富　　…48.1%

参考：株式会社アイシェア　「rTYPE」
………・・・………・・・………

やはり商品情報をどう見せるかが鍵になるということがわかりますね。
また、「好感が持てる企業サイト」の1位は「情報が整理されている」というものでした。

消費者（＝ユーザー）は、情報を求めてWebサイトへやってきますから、
そのユーザーが求めている情報をいかに短時間でわかりやすく提供できるかが大切です。

これは、いくらWebサイトがあっても、なんとなくデザインされたようなサイトでは
好感度を高めることができない、ということの現われですね。
高感度を高めるには、Webデザイナーの腕はもちろんのこと、
コンテンツの情報整理をするディレクターの手腕にかかってきます。

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

大切なのは、Webサイトの見た目ばかりを追いかけるのではなく、
きちんとユーザーが欲しい情報を提供し、使い勝手の良いものにできているかということです。

インターネット・アカデミーのインストラクターはみな、
上記の観点を欠かさず受講生の方の作品のチェックを行っています。

Webサイトの作品を作っている！という方、
今まさに企業のWeb担当者なんです！という方は、
今一度上記の観点を元にサイトの自己評価をしてみてください。
もし自分じゃわからない、という方はぜひスクールに聞きに来てくださいね～。

インストラクター一同お待ちしております☆

みなさんは、今年印象に残ったCMはありますか？

毎年「BRAND OF THE YEAR」という、
1年間で消費者のCM-Branding評価が高かった企業が表彰されるイベントがあります。（主催：CM DATABANK／CM総合研究所／月刊CM INDEX）

今年は、ソフトバンクモバイルが1位を獲得したようですね。iPhoneの隆盛といい、納得、という感じです。

「ブランディング」とは、企業が消費者にとって価値のあるブランドを構築するための活動を指します。
ブランドとは、企業が作り出すものではありますが、
実際は消費者の中で抱かれるイメージの総体を指します。

ようは、その企業や商品に対して消費者がどういう認識を抱いているか。それがその企業の「ブランド」です。

企業が消費者に対して自社や商品の「ブランディング」を行うには、広告戦略がモノをいいます。
その代表がテレビCMですから、「BRAND OF THE YEAR 2009」の受賞企業の顔ぶれを見ると、
消費者がどんな表現に対して「好感度」を抱いているかがわかります。

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

最近ちょっと面白い統計の数字を見つけました。

日本ブランド戦略研究所が調査した「Web Equity調査結果分析2009」によると、
とある企業のユーザー（消費者）に対し、その企業に対する好感度の有無をヒアリングしたところ、
Webサイトを見た人の方が、見ていない人よりも好感者の割合が10%も高かったそうです。

つまり、ユーザーにWebサイトを見てもらった方が、よりブランディングの効果が高まるということです。

これは、メディアとしてのWebの価値が高まったこと、また、各企業がWebを重視し、
魅力的なWebサイト制作に取り組んできた結果でもあります。

うーーん。
これも納得。
いくら広告でステキなお店だったとしても、
Webサイトを見たときにその質があまり良くないと
かなりガッカリしちゃいますもんね。

…つづく。

前回は、「昔流行ったけど、今はちょっと古くてキケン」というデザインの話題を取り上げました。
今回はその続編です。

2009年から人気が出て、おそらく2010年も発展・流行していくだろうと見られているデザインを紹介します。
参考は、前回に引き続き【Web Design Ledger】の「Web Design Trends for 2010」の記事です。

2010年のWebデザインのトレンドはこちら。
………・・・………・・・………
◆ 特大のヘッダとロゴ
◆ 手描き風のデザイン
◆ 大胆で大きなフォント
◆ タイポグラフィ
◆ 1ページ レイアウト
◆ インパクトがある画像
◆ パースの活用
◆ インタラクティブで直感的なデザイン
◆ モーダルボックス
◆ 最小限主義、ミニマリズム
◆ オーバーサイズのフッタ
◆ レトロ
◆ イントロボックス
◆ 雑誌風のレイアウト
………・・・………・・・………

2つ目の”手書き風デザイン”は、決して新しいものではありませんが、
来年は企業サイトでも一般的になるのでは、とも言われています。

既にデザイン系の企業サイトでは採用しているところも珍しくありませんね。
インターネット・アカデミーの卒業生、三上洋介さんがお勤めされている
株式会社クーシーのサイトは、上記のトレンドをいくつも取り入れておりとても先進的でオシャレなのでぜひご参考までに。

☆参考：株式会社クーシー

また、「大胆で大きなフォント」と「1ページレイアウト」は、
西部劇の指名手配ポスターなどで見かけるようなデザインに近いものがあり、これも2009年からじわじわと人気を博していますね。

☆参考：Krispy Kreme Doughnutus Japan

10コ目の「ミニマリズム」というのは、”最小限主義”と訳される現代美術用語です。
1960年代の米国で影響力をもった、形態や色彩を最小限度までに突き詰めたデザインで、
Webデザインにおいては
　・十分な余白
　・大胆なタイポグラフィ（文字デザイン）
　・センスの良い配色
で表現された「ミニマリズム」なデザインが流行するのでは、といわれています。

☆参考：UNIQLOCK

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

来年のサイト制作にむけて、上記の内容はぜひ参考にしてみてくださいね。

とはいえ、前回も書きましたが、むやみやたらと流行を取り入れればいいというものでもありません。
サイトのコンセプトにあわせて、
上記の流行デザインをうまく活用することが大切です。

上記のサイトデザインを見ていて、「何か作れそう！」「アイディアが沸いてきた！」という方は、
ぜひぜひ今からアイディアを固めて、来年どんなサイトを作るか空想してみてください。

年末になると、一年を振り返って今年流行したものを紹介するメディアが増えますね。

Webデザインにももちろん流行り廃りがあります。
そこで、今日は「昔流行ったけど、今はちょっと古いよネ」というWebデザインの技法を【Web Design Ledger】という海外サイトの記事をもとにご紹介したいと思います。

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

流行＝トレンドのデザインは、うまく利用すれば
話題性を生んだり、流行に気を配っているというブランディングにも役立ちますし、
オシャレな印象を与える意味でも効果があります。

しかし、流行というものは工夫もなく過度に使いすぎたり、
既にトレンドでなくなったものをいつまでも使っていると、
途端に逆効果になってしまいます。

そんな”ちょっとキケンなデザイン”として、【Web Design Ledger】では次のものが挙げられています。

………・・・………・・・………
◆ 鏡面反射
◆ アクアボタン
◆ フラリッシュ（植物のシルエット）なデザイン
◆ 困ったらコーヒーカップの写真を使う
◆ 地球の画像を使うことでグローバル感を表現
◆ コミックフォントの乱用
◆ ストックフォトとあからさまにわかる画像の使用
◆ ペーパー（紙）の質感の表現
◆ デザインモチーフがポラロイド写真
◆ 特大のRSSアイコン
◆ アクセスするとサウンドが自動再生される
◆ アクセスカウンター
◆ テキストがスクロールするマーキー
◆ ブラックの背景
◆ サイトに入る前にFlashかHTMLサイトかなどの仕様を聞くスプラッシュページの設置
◆ Flashサイトにおけるスキップの無いイントロ
◆ 黒い背景
………・・・………・・・………

うーん…納得するものもありますし、
いまだに日本では頻繁に使われているものも混じっていて読んでいてドギマギするものもありますね…。

一つひとつを解説したいところですが、
キリがなくなるので控えさせていただきます(^^;

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

一つ言えるのは、単純に流行を追いかけて、間違った使い方をするのが一番問題！ということ。

たとえば、上記の1つ目に挙げられている「鏡面反射」。
もともとは、高級感や透明感、浮遊感を表現するものですが、
意味なくただ流行を追って鏡面反射が使われているのを見ると、
強い違和感を感じてしまいます。

また、最後の「黒い背景」など、使うのが悪い！というわけではないものもあります。
これは単純に、使われすぎてトレンドが過ぎたので気をつけてね、という程度のものです。

第一、流行が過ぎたかどうかの明確な規定があるわけでもありませんから、
慎重に判断し、利用する必要があります。

流行に惑わされない。
使い方を間違えない。
Webデザインの流行を使うには、それを忘れないことが大切です。

IAといえば、InternetAcademy（インターネット・アカデミー）！と言いたいところですが、今日は別。
本日は、IAはIAでも、「Information Architecture」、情報アーキテクチャのお話です。

情報アーキテクチャとは、一言で言えば「情報設計」のことです。
複雑な情報をわかりやすく伝えたり、探しやすくする表現技術をさし、Webに関わる人ならぜひ身につけておきたいスキルでもあります。

なぜなら、より誘導効果が期待できるサイトデザインを実現するためには、
わかり易く情報を伝えるためのサイトの情報設計力が必須。
Webサイトのデザインは、見た目が美しくなるようパーツをレイアウトしていけばいい、
というものでもないんですね。

だからこそ、よりWebサイトの質を高めるために必要な知識を追求していくと、必ずIAの概念に行きつくのです。

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

さて、昨日、IAに興味がある人にとってはとても興味深い
「ITSUDEMO ATSUSHI100%」というサイトが公開されました。

こちらのサイトは『IA100：ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計』
という本のスペシャルコンテンツで、
著者である長谷川敦士さん（株式会社コンセント代表取締役社長）が登場し、
IAについて楽しく紹介がされています。

このサイトのオモシロイ所は、なんとサイトに登場する長谷川さんと
擬似的な会話を楽しみながら、IAについての知識を深めることが出来るところにあります。

次々と繰り出される「知ってる？」の質問に回答をすると、
ときに的確なツッコミが、またときにはズレた返事が、そして唐突に違う話題の返事が返ってきます。

しかし、楽しいだけではありません。
そうやって長谷川さんと会話を楽しんでいく中で、IAについての知識がどんどん広がっていきます。

本もオススメですが、こちらのサイトは必見。
Flashによるコミュニケーションデザインの素晴らしさが十二分に発揮されています。

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

ちなみに。
IAに関わる組織としては、米国を中心とした国際組織
「Information Architecture Institute（略称：IAI）」というものがあります。
情報アーキテクチャの普及活動や設計ツールの整備、
教育・人材育成、ローカルコミュニティの統括などを行っています。

また、日本では「Information Architecture Association Japan（略称：IAAJ）」という団体があります。

ユーザーに作ったサイトを好きになってもらうには、IAを好きになり、IAについて知ることがイチバン。

IAはなかなか語りつくせる分野ではありませんから、
少しずつwebismの中で具体的な紹介をしていきたいですね。

以前、『サイトの設計図をつくろう。』という記事で、ワイヤーフレームを作るときに使える便利なサイトの紹介をしました。

ワイヤーフレームとは、Webサイトの設計図のことでしたね。しかし、しっかりしたワイヤーフレームを作る前にはラフ案が必要です。

手書きで書くことも多いのですが、本日はラフが手軽に作れる便利なツールをご紹介したいと思います。

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

Webサイト制作で作成する「ラフ案」は、別名「モックアップ(mock-up)」ともいいます。

「今回メニューはアイキャッチ画像の下に置こうか」
「ヘッダーに入れるのはロゴとサイト内検索枠でいい？」
レイアウトはデザインの屋台骨ですから、クライアントにヒアリングした内容をもとに、上記のようなディスカッションをしながら決めていきます。
その時にできる大まかなサイトイメージを図式化したのが、モックアップなのです。

モックアップとワイヤーフレームの違いについては厳密な定義があるわけではないため、ここではひとまず

• 【モックアップ】…サイトの見た目を大まかに定義したもの


• 【ワイヤーフレーム】…制作に必要な情報であるデザインやコーディングの指示などが記述されたもの

………・・・………・・・………………・・・………・・・………………・・・………・・・………
モックアップ制作に便利なサイト
………・・・………・・・………………・・・………・・・………………・・・………・・・………
◆LovelyCharts
オンライン上で、フローチャート、サイトマップ、その他ワイヤーフレームなどのチャートが無料で作れます。
日本語未対応であることと、会員登録の必要がありますが、かわいらしさと使いやすさは◎。
ちなみに今回の画像は、「LovelyCharts」で私が作ったサイトマップのサンプルです♪

◆Pencil [Add-ons for Firefox]
Firefoxというブラウザソフトのアドオン（※1）。
無料でかつ日本語対応。それでいて基本機能は全てそろえており、
参考サイトを見ながらモックアップが作れるのと、ネットにさえつなげればすぐに作れる手軽さがウリ。

………・・・………・・・………………・・・………・・・………………・・・………・・・………

もちろんソフトがあるならば、Adobe PhotoshopやIllustrator、
またはMicrosoft Office Visioなどを使った方がより細かい編集が可能です。

ただ、これらを使えば、外出先、ソフトがない場所で急に図が必要になった！なんていう場合でも、
ネットの環境があればモックアップの制作が可能です。

ちなみに、オンライン上のものではありませんが、もひとつオススメなのが
Balsamiq Mockups　です。

手書き”風”のモックアップが作れるアプリで、日本語未対応、製品版は$79の有料とはいえ、ファンかなり多し。
トライアル版を使ってみて、気に入ったらぜひどうぞ。

--------------------------------
（※1）アドオン…ソフトウェアに追加される拡張機能のこと。
FireFoxは、ユーザーが好きなアドオンをインストールすることで、
自分仕様にカスタマイズをしてインターネットを楽しむことができるブラウザなのです。

デザインをしていて頭を悩まされることが多いのは、色。他は良くても配色がぴったりこなくて悩む…ということがよくあります。
受講生の方からも、「色をどうやって選んだらいいのか…」という質問を受けることもしばしばです。

しかし！色を選ぶのってもっと楽しいはず。
そこで、『Adobe Kuler』を今日はご紹介したいと思います。

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

「Adobe Kuler」（アドビクーラー）は、グラフィックソフトの大御所、
Adobe Systemsが運営しているサイトです。

このサイトは、すごいです。
なんと、ユーザーが作った何千ものカラーテーマ（＝色の組み合わせ）を閲覧できて、
さらに自分でオリジナルのカラーテーマを作成し、登録することもできるのです。

たとえば、上の画像。
こちらはKulerの中の「画像からテーマを作成する」という機能で、
カラー抽出ツールを使って、画像の中から採取した色を組み合わせて
カラーテーマを作成することができるのです。

カラーテーマが作れて、何がいいの？
と思うかもしれませんが、ここからがオドロキ。
作ったカラーテーマは、
Adobe Swatch Exchange（AES）という形式のファイルとしてダウンロードができます。

そして、このAESはPhotoshopやIllustratorなどのAdobe CS2以降の各バージョンソフトで
スウォッチ（色見本機能のことです）として取り込むことができるのです。
しかも、Photoshopにドラッグ＆ドロップでAESファイルを放り込むだけで登録が可能。

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

配色パターンが違うだけで、
Webサイトの雰囲気はいくらでも変化します。

Kulerはぜひ、ブックマークして使ってください。

冬本番の寒さが到来しました。
冬になると、コートやマフラー、雑貨まで、なんとなく気になるのが「タータンチェック」柄。ついつい買ってしまいます。

だからでしょうか、私の中で、冬を感じさせる模様だというイメージがあります。
今日は、そんな模様についてちょっと考えてみたいと思います。

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

タータンチェックは、実は和製英語。
正しくは「タータン」もしくは「タータン･ブラッド」といいます。
（ゲール語ではbreacan（ブレアカン）です。）

もともとはスコットランドの高原ハイランド地方で織られた色物の格子柄、
またはその柄の綾織物を指し、民族衣装としても有名です。

実はタータンは、エンブレムと同様、氏族のみが使うことを許されている
一族の象徴としての模様だったとか。
日本の家紋に似ていますね。
そのため、伝統的なチェック柄のタータンを保護・展開する動きもあるそうです。

そんな歴史のある柄だからこそ、清廉さや、かっちり感を出したい時の
ファッションコーディネートとして使われることが多いのです。

では、この柄が冬に似合うのはなぜでしょうか？
これは私の憶測ですが、
タータンがもともと、紡毛か梳毛の毛織物であったこと、
生まれがスコットランドというところも起因しているのかもしれませんね。

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

タータン、ストライプ、ポルカドット、ラティスパターン。
和柄なら、市松、雷門、唐草、矢絣（やがすり）、麻の葉。

デザインにおける模様の役割は大きく、
それだけで何らかの意味を与えることができます。
ただ、その模様が持つ歴史、意味、一般イメージを知らずに使ってしまうと、
違和感につながってしまいかねません。

色にも付随するイメージがありますが、模様にだってもちろんあります。
それを知っておくのも、大切なことですね。

「お洒落は足元から」と、よく言いますよね。

足元が汚かったらそれだけでイメージがダウンしてしまいますし、せっかく他のファッションのバランスが良くても、履いている靴のイメージがズレていると、強い違和感を感じるものです。

実は、それはWebデザインにも共通して言えること。

Webサイトの足元＝フッター(footer)が良いか悪いかで、
そのサイトのデザインの質がずいぶんと変わります。
今日は、そんな”足元”のお話をします。

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

フッターは、ワープロソフトで本文の下に位置する、
ページ情報などを記述するためのスペースのことを指します。
そして、Webサイトでも、ページ情報を記述する一番下の領域を「フッター」と呼びます。

フッターの作り方は多種多様ですが、
絶対にハズせないのが、「必ず何らかのフッターは設置する！」ということ。

何故ならフッターは、そのページを閲覧したユーザーにとってのゴールでもあります。
ページの情報をスクロールバーを下げながら閲覧していて、
最下部にたどり着いたとき、フッターがないと気持ちが悪いですよね？

フッターを見ることで、ユーザーはそのページの情報の末尾にきたことを実感し、
読み終わったという感傷に浸ることが出来るのです。

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

また、最後に見るからこそ、デザインのクオリティは高くなければなりません。
「サイトの印象を強く植え付ける」ことを目的として、

………・・・………・・・………………・・・
・ロゴを改めて配置する
・フッターの色はメインカラーを使用する
………・・・………・・・………………・・・

…というのがセオリーですが、もちろんそれ以外の色でもバランスさえ良ければ問題ありません。
しかし、サイトイメージをひっくり返すような色だけは避けたいですね。

今年の頭によく言われたのが、
「海外のWebデザインはフッターを豪華にするのが2009年の流行になる」というものでした。
”豪華”というのは、よりグラフィカルにしたり、
ボリュームを増やしてスペースを大きくとる、ということです。

日本はまだそこまで波が来ていませんが、
フッターのリッチ化が進み、重要視される度合いも強くなったように思います。

ちなみに、リッチ化ってどんなの！？と気になる方はこちらのコンテンツをご覧下さい。

→『40 Beautiful and Creative Website Footers』

海外サイトのリッチなフッターデザインを閲覧することができます。
ぜひ参考にしてみてください☆

みなさんは、誰かの影響を受けて何かを好きになった！なんていう経験がありませんか？

たとえばテレビで話題になっているから気になる、とか、自分の好きな芸能人がオススメしているから興味がわいた、なんていうのも良くあることではないでしょうか。

そんな、強い影響力を持つ人や物事を、「インフルエンサー」と呼びます。
influenceとは、「影響」という意味のイタリア語で、あの感染症「インフルエンザ」の語源でもあります。

今日は、そんな「インフルエンサー」のお話をしたいと思います。

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

Webマーケティングにおいて、この「インフルエンサー」は
ブログやSNS（ソーシャル・ネットワーキング・サービス）、
コミュニティサイトなどで他のユーザーに対して影響力のある人物のことを指します。

情報が溢れている世の中、消費者にとって信頼でき、心動かされるのは
一方的なメッセージの「広告」ではなく、同じ消費者からの評判や口コミです。
（※口コミの大切さについては、以前の記事「気持ちがわかる、口コミ。」を参照。）

その口コミのスタートとなり、消費者に信頼される人物が「インフルエンサー」なのです。

マーケティング企業のブルーカレント・ジャパンは、
5人に1人は一定の情報発信力を持つ「個人インフルエンサー」であると定義しています。
また、個人インフルエンサーは

・コミュニケーション力
・信頼獲得力
・情報伝播力

…という3つの要素を全て備えた消費者だとも定義しています。
（インフルエンサー・マーケティングに興味がわいたら、
ブルーカレント・ジャパンサイト内のこちらのコンテンツがわかりやすくておススメです！）

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

テレビや新聞などを使って不特定多数の人に情報伝達を行う従来のあり方が「マス･コミュニケーション」ですが、
その逆が「インフルエンサー・マーケティング」。
一人ひとりの消費者の意見が、今の世の中に大きな影響を与えているのです。

Webの特性を掴み、インフルエンサーを操作せずにうまく活用する。
そんな力がある企業が、今後のビジネスの鍵を握るといっても過言ではありませんね。

常々、WebはWebサイトを作るだけじゃない、というところが面白いなーと思います。

冬の入り口はクリスマスが控えているからか、ワクワク感が街を染めていてそれだけで楽しい気分になってきます。
みなさんはいかがでしょうか？

実は、この「イベント」や「季節感」は、Webサイト制作やWebのキャンペーンを行う上でもとても大切な鍵だったりします。
今日は、そんなお話をしたいと思います。

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

日本には、四季があります。
そして、日本人はイベントが大好き。

移ろいゆく季節を愛でる民族だからこそ、刹那的なモノに惹かれる傾向があるんでしょうね。
私も大好きです、季節のイベント。

だからこそ、広告に季節感を取り入れることはセオリーというより必須。

季節感のある広告にすることで、親近感や好印象を与えることができ、
ユーザーや消費者に「今しかない！」と思わせる効果があります。

お菓子や飲料なんかでも、「期間限定」「冬限定」なんてのも良く出ますよね。
（わかってても私はとてもその言葉に弱かったりします…）

いつでも買える、いつでも行動を起こせると思ったら、つい後回しにしてしまうのが人の性。
また、いつも同じじゃ飽きてしまうのも人の性。

それを、「今じゃなきゃダメ！」「今がチャンス！」と思わせることが
購買行動につなげる大切なポイントなのです。

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

上記の話は、もちろんWebサイト制作にも共通することです。

たとえばサイト上のバナーや特設コンテンツ、
メールマガジンやアイキャッチ、リスティング広告に
いまひとつ効果が見られない…とか、更新がマンネリ化してきた！
という場合は、デザインやコピーに季節感を取り込んでみましょう。

ぐっと、訴求力が高まるはずです。

また、サイトデザインにおいて、雰囲気をより重視したい！という方も、
どこかのパーツに季節感を取り入れる手法もコツとして覚えておいて損はありません。

最近は、広告でも何でも
何ヶ月も先の季節やイベントを先取りしてキャンペーンが打たれていることが増えていますが…
それだけ季節感が重要だという表れなんでしょうね。

ぜひ皆さんもWebサイトの効果を高めるためにもうまく「季節」と「イベント」、取り入れてみてください。

前回は、Webサイトの表示速度は早ければ早いほうが良い、というお話をしました。

少なくとも目的をもって訪れたユーザーに対して、情報ではなくイライラを提供する、なんていう事態は避けたいものですね。

Webユーザビリティの第一人者、ヤコブ・ニールセンは自身のコラムAlertboxの中で次のように語っています。（⇒参考記事）

………・・・………・・・………………・・・………・・・………………・・・………・・・………

ウェブページはスピードを第一にデザインすべきだ。
実際、デザイン評価よりもスピードを優先するべきなのである。
ページのサイズを抑えるには、グラフィックを最小限にし、マルチメディア効果は、
本当にそれがユーザの理解に資する場合に限って利用することだ。

”スピードを第一にデザインする”とはつまり、
画像をたくさん使うということが、必ずしも良いデザインにつながるわけではない、ということです。

無駄に画像やFlash技術などを多用することで、
独りよがりに”デザインに凝ったつもり”になっても何も意味がありません。

なぜなら、どれだけ見た目が良く、最新技術がふんだんに使われているサイトだったとしても、
あまりにも表示に時間がかかるのであればユーザーは二度と見てくれなくなってしまうからです。

Webデザイナーやコーダーは、まず表示にかかるスピードを第一に考えた上で、
見た目の美しさの再現がどこまでできるかが腕の見せ所なのです。

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

画像を使わない代わりにどうするのか。
その問題を解決する手段の一つが、CSS3や前々回ご紹介したTypekitなのです。

いかにHTMLやCSSといった言語を使い、
画像を使わずテキストでデザインを再現できるかがポイントなのですね。

とはいってもサイトの表示にどれくらい時間がかかっているのかわからない…という方は、
ぜひ「ダウンロードTIMER」を使ってください。
回線速度別に、Webページが表示されるまでの時間を測定してくれます。

もちろん、ダウンロード時間の速い遅いの感覚は
ターゲットユーザーなど他の要因によっても若干変動しますから、
それを踏まえたうえで判断をすることも必要です。

ちなみに、インターネット・アカデミーのWebサイトはインストラクター陣で全て内部制作しているので、
作ったコンテンツの表示にかかる時間や、アニメーションの再生時間があまりにも長く、
ユーザビリティに反していると判断したら作り直しをしたりすることもあります。

実は地道に分析し、かなーりこだわって作っているのです♪

みなさんも、デザインにこだわればこそ、ぜひとも表示のスピードにもこだわってみてくださいね。

みなさんは、Webサイトが表示されるまでの待ち時間でイライラすることはありませんか？

インターネットが普及し始めたばかりのころ、Web業界では「8秒ルール」と言われていたものがありました。

「ユーザーがWebサイトを訪れてから、8秒以内にページを表示させなければならない」
というものです。

8秒以上待たせると、ユーザーは他のページへ移動（離脱）してしまい、
再訪してくれる可能性が低くなるから…というのがその理由でした。

しかしいまや当時とは状況が違います。
低速から高速へと通信回線状況が改善したことで、
8秒ではなく「3秒ルール」なんていう言葉も出てきたようです。

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

いかにWebサイトを早く表示するかは、いくら通信回線が高速化しようとも
デザイナーにとって常に重大な課題です。

たとえば、ショッピングサイト最大手のAmazonいわく
『0.1秒遅くなると、売り上げが1%減少する』そうですから大変な問題です。
Aberdeen Groupというリサーチ会社が出したレポートでは、
『一般的に表示スピードが1秒遅くなると、PVは11%、CVは7%、顧客満足度は16%ダウンする(※1)』
…ということが判明しました。

まさしく「時は金なり」。

Webサイトの表示速度が遅い、というのは、
一般に考えられている認識や想像以上に大変で深刻な問題なのです。

Webユーザビリティの第一人者、ヤコブ・ニールセンは、
人間の反応時間について3つの重要限界、というものを示しています。

………・・・………・・・………………・・・………・・・………
・心理的・感情的な違和感を感じないのは0.1秒まで
・思考の流れが妨げられないのは1秒まで。1秒に近づくと、データを直接操作している感覚がなくなる。
・注意力を維持できる限界の時間は10秒まで。それを超えると心理的、感情的なストレスがかかる。
………・・・………・・・………………・・・………・・・………

これを見ると、8秒とか3秒とかいう話ではないと焦ってきます。

…対策を含め、次回へつづく。

------------------------------------
(※1)
PV（ページビュー）数　…　ユーザーがWebページを閲覧した回数のこと。
CV（コンバージョン）数　…商用目的のWebサイト上で獲得できる最終的な成果のこと。
たとえば、ショッピングサイトにおける商品の購入や、ネットバンキングでの口座の開設など、それぞれサイトによって異なる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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サイトを”誰に見てもらうのか”、”誰の満足度を高めるのか”という
ターゲットの特性を把握をすることはとても重要です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それは、

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

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

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

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

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

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

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

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

日本人の1日あたりのパソコンを使用したインターネット平均利用時間は、
現在67.6分(※1)だそうです。

テレビの視聴平均時間は163.5分ですが、
性別・年齢別で見ると、男性20代で初めてネット利用平均時間がテレビ接触平均時間を抜き、
ネットが116.1分という数字になったそうです。

Web業界の人間でありながらちょっと驚きです。

インターネット利用時間が増えれば増えるほど思うのが、
「とにかく見やすいWebサイトが大事」、ということ。

Webサイトを見ている人は、
みな何かしらの情報を求めています。
よって、見づらかったり見ていて疲れるようなWebサイトは厳禁。

特に提供する情報量が多い場合は、とにかく長時間見ていられるような工夫が必須です。

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

見やすいサイトにするためのポイントのひとつに、色の選び方があります。

人は、コントラストが高いと目が疲れてしまいます。

コントラストとは、
画像の黒い部分から白い部分までの明るさの幅のことで、
コントラストが高いとは、
明暗の差が大きくなり明るい部分や暗い部分がはっきりした状態を指します。

例えば、黒い背景に白い文字、というのがもっともコントラストが高く、
もっとも文字が読みづらい状態といえます。

黒は基本色だからか、どうしても気軽に使いがちな色なのですが、
実は黒をメインでデザインをすると、閉塞感を与えてしまったり
コントラストが強すぎて目が疲れてしまったりするのです。

じゃあどういう状態が目に優しいのか。

一番目に優しいのは、コントラストが適度に弱い状態です。

例えば、「濃いグレーの背景に明るいグレーの文字」とか、
「濃い目の緑の背景に白い文字」…という具合です。

また、背景色と文字の関係だけでなく、
メインカラーとして使う色も同じです。

たとえ商品のイメージ色がビビッドだったとしても、
その商品を紹介するWebサイトでは、実際の商品カラーよりはわざと暗くして
見やすいように加工したり工夫しているものなのです。

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

「目に優しい」といえば緑色ですが、
その理由は光の波長が目に優しいからだそうです。

だからといって安易に緑色を薦めるわけではないのですが、
見易さというのはWebにおいては不可欠な要素。

どんな色が見やすいのかははじめはわからないと思いますが、
いろいろなWebサイトで使われている色のコントラストを見てみて、
見やすい・見づらいの感覚を身に着けていきましょう。

ちなみに、Webサイトでは地味～な色の方が見やすかったりするものですし、
もし派手な色を使うにしても、使用するのは部分的にして、
全体的なところでは濃い地味目な色を使ってバランスをとるようにするといいですよ。

------------------------------------------

※1　博報堂DY「メディア定点調査2009」より
http://www.hakuhodody-media.co.jp/newsrelease/2009/20090623.html

”使い勝手の良いサイト”、
これ、Webクリエイターにとって永遠の課題だと思います。

さて、10月8日付けの日経新聞に載っていた、
『日経パソコン「企業サイトランキング2009」』の結果、
ご覧になりましたでしょうか？

このランキングは、日経BP社から発売される「日経パソコン」誌が、
国内の主要696サイトの有用性を比較したもの。

2年連続首位に、富士通のサイトが選ばれていましたね。

調査は今回で3回目。
この調査結果は非常に興味深いものでした。

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

上記ランキングにおけるサイトの評価基準は、調査結果をデータで購入しなければ正確には分かりませんが、
おそらくWebサイトの日本工業規格（ウェブコンテンツJIS【JIS X 8341-3】）の指標をもとにしているのでは、
とささくらは考えています。

「ウェブコンテンツJIS」というのは、一言で言うとWebサイトをバリアフリーにするための日本標準化規格のこと。

障害者や高齢者、誰であってもWebサイトで情報を得ることができるようにするため、
2004年に発効された規格です。
（ちなみに、年内に改定版JISが発表される予定♪）

特に、自治・公共機関・企業にとっては、Webサイトは誰にとっても使いやすいものである必要があります。
そのような、「誰でも接触・利用・操作ができる状態、機能」のことを『アクセシビリティ』といいます。

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

日経産業新聞では、ランキング対象企業サイトの中で、このウェブコンテンツJISに準拠し
アクセシビリティを確保したサイトがあまりに少ないことを問題視していました。
（たとえば、「企業概要ページに電話番号がないサイト」は、48%もあるのだとか。）

年内に改定されるという改訂版JISでは、運営するWebサイトがJIS規格に対応しているかどうかを文書化し、
サイト上で告知することを求めるそうです。

実は、いくつかの企業がすでに自主的に行っています。

1位にランクインしている富士通は、
『FUJITSUのアクセシビリティに対する考え方』というページを用意しています。

ほかにも大学や電機メーカー、金融機関などで同じようなページが用意されていることがあります。
このページはかなり参考になることが書いてあることが多く、
今Webの勉強している方にはとっておきのマニュアルになりますので、
ぜひ探してみてください。

Webサイトの企画書を書くとき、
コンテンツ内に統計データを書くとき、
様々なときに活躍するのが『グラフ』。

そんな、大切なグラフを簡単に書くことができるサイトが『ChartGo』です。

これを使えば、ブラウザ上でグラフの種類やデータを入力するとさくっとグラフ画像を生成してくれます。
ExcelやPowerPointいらず！

非常に便利です。

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

”人間は、生活の8割の情報を視覚から得る”と言われているからこそ、
視覚的なプレゼンテーションはビジネスには必須。
そこで、グラフの活用はもちろんのこと、せっかくならばグラフそのもののデザインにも高めたいですよね。

上記の『ChartGo』はExcelを使わずしてグラフを作れるサイトですが、
本家本元のExcelソフトでオシャレなグラフを作りたい！！
という方にはこちらのサイトがオススメです。

『73 Free Designer Quality Excel Chart Templates』

このサイトで、パターンを使用したりカラフルにデザインされたグラフの
テンプレートファイルをダウンロードすることができます。

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

仕事に慣れてくると、作業的にグラフを作ってしまいがちです。

でも、実はグラフはとても重要度が高いもの。
なんとなーく作ってしまうと、伝えたい情報が伝わりづらくなってしまい、
そもそも見られていない、なんてことに陥ってしまいます。

Webサイトも同じですが、一番大事なのは『見てもらう』こと。
そして、見てもらうことができたら、次は『印象にとどめてもらう』ことが大切です。

とあるプロデューサーは『いくつかグラフを作ってみて、
もっともメッセージが伝わりそうなものを使う』と言っていたぐらいですから、
明日から作成する企画書のグラフ、ちょっと凝ってみてはいかがですか？

インターネット・アカデミーがお届けする
ブログをリニューアルいたしました。

この【webism】では、
私インストラクターの「ささくらはなび」が
”Web”をもっと知りたい！
という全ての人に向けて
業界の最新情報からサイト制作の小ネタ、
クリエイターだけが知っている裏話などまで
お届けしていく予定です。

よろしくお願いいたします。

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

今日は第1号として、デザインのヒント。
『日本人の嗜好色から学ぶサイトの配色』のお話をします。

嗜好色とは、”色から受ける雰囲気への好み”のことで、対象とする人たちによって異なります。

たとえば。
日本人は下記のような嗜好があるようです。

【全体的な傾向】
・鮮やかな青と白
・色相一般としては青系がトップ、次に赤系が好まれる。
・青、赤、黄、緑等の基本色相が好まれるが、
色みの乏しい色、濁った色、暗い色は好まれない。

嗜好色は、年齢や性別によっても違いが出ます。

【年齢差】
・学生　…　学習や経験により、男性は寒色系や緑、女性は暖色系や紫を好む。
・若者　…　社会人への過渡期に、黒を好む傾向がある。

【性差】
・男性　…　寒色系や緑系、濃い色や暗い色
・女性　…　暖色系や紫系、デリケートな色みで明るい色や淡い色

などなど。

これを見てて、なんとなく私も納得。

私はインストラクターなので、授業で生まれて初めてWebサイトを作った！という方の
サイトのデザインチェックする機会が多くあります。

そんなときよく見かけるのが「ビビッドで鮮やかな色」がメインになってしまっているサイト。

Webサイトは光を使って色を生み出しているので、
日本人が全般的に好む「明るくて鮮やかな色」で配色をしてしまうと、
見ていて目が疲れるサイトになってしまうのです。

だから、ビビットな色の商品を扱っている会社のサイトでも、実はわざと渋めな色が使われていたりします。
文章量が多いサイトなんかは特にそうですね。

自分が好きな色はどうしても使いたくなってしまうものです。
しかし”Web”という特性を考えた上では、使い勝手も気にしなければいけない重要な要素。

ユーザーの為に嗜好色が何色か、を把握して色を選ぶことももちろん大事ですが、
それが「自分の嗜好」にはまらないようにと私も自分をよく戒めています。

…そういえば、この【webism】のメインカラーも青色ですね。
みなさんに愛されるブログになりますように。