2008-09-17

Drill 苦戦・・・

自習

今日は仕事でひたすらCMSで修正作業をしていた・・・
頭がパンパンだ〜

昨日からやっているドリルの課題。
まず、イラストを描くのに苦戦し（重ね順の考え方が、イラストレーターと全く違う？）、
動きは楽勝と思いきや、全然楽勝じゃなかった。。

2008-09-14

■

◆meta◆

検索結果のサイトの説明文

●googleは
ディスクリプション

●yahooは
ディスククリプション
＋　＜p＞タグのキーワード

つまりなるべくページの上の方に＜p＞の拾われたいキーワードを置いておくこと

※ディスクリプションの量があればそれで3行埋まる。
文章は長くせず、検索されたいキーワードを先頭にした文章を3つ作ると良い。

カテゴリーリンクの一番上も検索に強い。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【SEO対策】
・内的要因…30％

・外的要因…70％
（質の高いサイトからキーワードを含んだテキストリンクをされること！！）
↓
誰もがリンクしたくなるような、使いたくなるようなリンクにする。
（例）Wikipedia

※リンクファーム（ハイパーリンクによってページを相互にかつ大量にリンクしているウェブサイト群。）←アダルトサイトがよくやってる

★＜h1＞〜＜h4＞
★ページの最初にある＜p＞
★リストのアンカーリンク
★meta keywords （キーワード5個が限度。入れすぎるとスパム扱いになる）
meta description（キーワードを含めた3行）

※リンクの中にキーワードを入れる
※yahooのカテゴリー登録すると上位になりやすい
※ブックマーク

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

YST（Yahoo検索）でヤフーディレクトリの紹介文が転載されてしまう問題

ASY!ディレクトリ型検索エンジンのヤフーに登録されたサイトは、その紹介文がヤフー検索でも使われる。これを拒否するメタタグ。
＜META NAME="Slurp" CONTENT="NOYDIR"＞
　又は
＜META NAME="ROBOTS" CONTENT="NOYDIR"＞

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

◆title◆

★キーワードカテゴリ（サービス）｜会社名（商品）
titleにキーワードを沢山入れると、重要度が分散される。
最大3個まで
単語の羅列はしない方がよ良い

（例）
キーワードを5個入れると5分の1になる。

複数のキーワードで上位になりたいときは
レンタルサーバーを複数借りる

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

KAGOO
http://www.kagoo-rattan.com/c1rattan-box/c2laundry/OF89K18.html

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

media="all"
古いブラウザ対策

★モダンブラウザ以外に対し、CSSを適用できなくする。
★PC, ハンドヘルド（携帯のこと）,TV, プロジェクタ, 印刷

＠import ←　media="all"

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

キャッチコピーを＜h1＞にする。
名が知れていない中小企業が会社名のロゴを＜h1＞にしても意味ない。（ブランドがある会社ならOK)

第27回横浜開港祭
http://www.kaikosai.com/

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

◎定義型リスト（日付があったら＜dt＞にすること）
迷ったら使わないこと（レイアウトが崩れやすいから)

◆基本◆
＜dl＞
＜dt＞―日付、単語＜/dt＞
＜dd＞―内容、説明＜/dd＞
＜dt＞―日付、単語＜/dt＞
＜dd＞―内容、説明＜/dd＞
＜dt＞―日付、単語＜/dt＞
＜dd＞―内容、説明＜/dd＞
＜/dl＞

◆応用◆

＜dl＞
＜dt＞―日付、単語＜/dt＞
＜dd＞―内容、説明
＜ul＞
＜li＞
＜/dd＞
＜/dl＞

※divだらけにしないため
定義型リストの使い方、考え方は制作会社による。

（例）寺子屋
 http://www.t-medico.jp/

＜dl＞
＜dt＞アシストメニュー＜／dt＞
＜dd＞

＜ul＞
＜li＞＜a href＝”sitemap／index．html”＞サイトマップ＜／a＞＜／li＞
＜li＞＜a href＝”faq／index．html”＞よくある質問＜／a＞＜／li＞
＜／ul＞
＜／dd＞
＜／dl＞

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＜h1＞は基本＜body＞に1回だけ。
h2、h3は複数あってOK。

＜h1＞銀座の美味しい店＜/h1＞

＜h2＞中華＜/h2＞
＜h3＞〜中華店＜h3＞
＜p＞店の情報＜/p＞
＜h3＞〜店＜/h3＞
＜p＞店の情報＜/p＞

＜h2＞和食＜/h2＞
＜h3＞〜中華店＜h3＞
＜p＞店の情報＜/p＞
＜h3＞〜店＜/h3＞
＜p＞店の情報＜/p＞

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

HTMLが200行越えてしまう場合は、
検索されなくなってしまうので、
重要でないナビゲーションを下に持ってくる。

ケンコーコム
 http://www.kenko.com/

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

◆ユーザビリティー◆

●中小企業はトップページ自体にサービス内容を置く

●お客様別ナビとかは、トップページに置く

●アマゾンなどオンラインショップは
3クリックで買い物カートに行かなきゃだめ

●セールスばかりでなく、
ログインページ、新規ログインページを分かりやすい場所へ

●紙ベースで、目的の場所へ到達するのに何ページかかるかチェックする

●リピーターにとって毎度毎度のトップの同じフラッシュは邪魔。
特に小さい画面だとそれしか見えない

●新着情報、ニュースリリースはあくまで投資家向け情報。
“商品が欲しい”という人が見るものではない。
それを意識した内容を載せないと意味が無い。

ヤマハ
 http://www.yamaha.co.jp/

●トップの会社の情報的なものは使う人にとっては・・・

●サービス、商品は人目で分かりやすいものでなければ伝わらない。
フリー画像と文字だけだと、どんなサービスか分からない。
新規の顧客が欲しいなら、誰でも分かるような言葉で！！
自分たちの業界用語みたいな難しい言葉は使うな！（難しいカタカナ言葉とか）敷居が高くなると、新規顧客はしり込みしてしまう。
カッコよく無くても分かりやすい言葉で。

●同じページに飛ぶものでも
・難しい言葉のボタン
・簡単な言葉のボタン
複数あるべき。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

イラストレーターで始めにワイヤーフレーム作ってから
DWでid、classをつける。

2008-09-13

デザインワークス

自習

アートディレクター（ビジュアル中心）

クリエイティブディレクター（コピー中心）

“風が吹けば桶屋が儲かる”
「マインドマップ」
〜らしさをどう作るか
WEBで検索されるのは「〜らしさ」

デザインはストーリーが求められる。
A1以上のポスターなら商品の説明しない。

売っていく商品の相反するイメージを作ると伝わりやすい。どうやって見せていくか考える。
人は対比があると連想を働かせる。
※補色と同じ

（例）
扇風機
暑い夏の風景

■写真をイラスト的に使う
解像度に依存しないで使える

写真を配置

オブジェクト→ライブトレース→トレースオプションで色の数を指定できる
ぼかしもかけられる

オブジェクト→透明部分を分割→ダイレクト選択ツール→選択→共通→カラー（塗り）

================================

フラミンゴスタジオ
http://flamingostudio.com/top.html

ペンギンスタジオ
http://www.myu-k.co.jp/~p-studio/

浅葉克己
http://ja.wikipedia.org/wiki/%E6%B5%85%E8%91%89%E5%85%8B%E5%B7%B1

田中一光
 http://ja.wikipedia.org/wiki/%E7%94%B0%E4%B8%AD%E4%B8%80%E5%85%89

●コピーライター

仲畑貴志
 http://ja.wikipedia.org/wiki/%E4%BB%B2%E7%95%91%E8%B2%B4%E5%BF%97

* タコなのよ、タコ。タコが言うのよ。（サントリー・マイルドウォッカ樹氷）
* みんな悩んで大きくなった。（サントリー・サントリーゴールド900）
* トリスの味は人間味。（サントリー・トリスウイスキー）※カンヌ国際広告映画祭金賞受賞
* 働いているお父さんより、遊んでるお父さんのほうが、好きですか。（サントリー・オールド）
* ウイスキーも音楽もなかったら、心がグシャグシャになってしまうなぁ。（サントリー・ホワイト）
* 初めて会ったのに、親友だと思った。（同上）
* いい曲は、企画書からは生まれない。（同上）
* 知性の差が顔に出るらしいよ……困ったね。（新潮社・新潮文庫）
* 知性って、すぐ眠りたがるから……若いうちよ。（同上）
* おしりだって、洗ってほしい。（TOTO・ウォシュレット）
* やっぱり、おしりは締まり屋さん。（同上）
* 好きな人のもにおうから。（同上）
* カゼは社会の迷惑です。（武田薬品工業・ベンザエース）
* ベンザエースを買ってください。（同上）
* キミがつらそうだと、あのヒトもつらい。（リクルート・Bing）
* キミが幸せになっても、誰も困らない。（同上）
* キミが幸せだと、よろこぶヒトは多い。（同上）
* 夢中になれば、みんな少年少女だね。（ニチイ・現マイカル）
* 私は、あなたの、おかげです。（岩田屋）
* できれば、あなたと、くっつき虫。（同上）
* にんげん、岩田のつもりです。（同上）
* 昨日は、何時間生きていましたか。（パルコ）
* 荒野に出ることだけが、冒険じゃない。（同上）
* 学校じゃ教えてくれなかったけど、知りたいこと、知りたかった。（同上）
* 目的があるから、弾丸は速く飛ぶ。(同上）
* ケンカはやめた。だから、もう負けない。（同上）
* 心を動かしても、汗を流せることを知った。（同上）
* 賛成1、反対9。どちらも、まちがいじゃない。（同上）
* 奇麗なものと奇妙なものは、どこか似ているね。（同上）
* あなたも、わたしも、ちょっとずつ狂っています。（同上）
* 死んだらどうなるのだろう。考えていたら涙が出ちゃった。（同上）
* 毎日の、毎日が、変わる。（毎日新聞社・毎日新聞）
* なんだ、みんな人間のせいじゃないか。（同上）
* 歴史はあっちこっちでつくられる。（朝日新聞社・朝日新聞）
* 勝つのは、負けるより大変だ。（講談社・CADET）※現在は廃刊。
* 好きだから、あげる。（丸井・1980年キャンペーンCM）
* ソニー製ではない。ソニー生まれである。（SONY・AIBO）
* 反省だけなら猿でもできる。（大鵬薬品工業・チオビタドリンク）
* 目のつけどころが、シャープでしょ。（シャープ）
* ではどこで選ぶか? お答えします。（同上）
* 世の中バカ（お利口）が多くて疲れません?（エーザイ・チョコラBB）
* 人はみな強いようでいて弱いね。（同上）
* 今日、私は街で泣いている人を見ました。（同上）
* 人類はアブナイものをつくり過ぎた。（農協）
* 農業が壊れたら、日本人は全員会社員になるのだろうか?（同上）
* 痛いのはイヤだ。苦しいのはイヤだ。殺されるのもイヤだ。（アムネスティ・インターナショナル）
* 仲良くしていれば、ケンカにならない。（住友林業）
* 会社、コンクリート。帰ったら、木の家。妻、美人。（同上）
* 愛とか、勇気とか、見えないものも乗せている。（JR九州）
* 夢とか、希望とか、見えないものも乗せている。（同上）
* 顔を見ないと話せない。顔を見たら話さなくていい。好きなふたりは、行ったり来たり。（同上）
* 一緒なら、きっと、うまく行くさ。（セゾンカード）
* 生きるが勝ちだよ、だいじょうぶ。（同上）
* いわゆる、キミの味方になれそうだ。（同上）
* 技はいろいろ、カードはひとつ。（同上）
* 百年、貯めたっていい。（同上・永久不滅ポイント）
* ココロも満タンに、コスモ石油。（コスモ石油）