アドビの学びを稼ぎに変えるWebデザインの技術: 2008年8月アーカイブ

集客施策｜SEMと検索連動型広告

MovableType

(2008年8月24日 11:38) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

広告クリエイティブやリンク先ページを任意に設定することが可能である。

コンバージョンやCPAなど具体的な数値目標を決めて運用することが大事である。

設定するキーワードと広告の内容だけでなく，ランディングページの内容にも配慮する。

検索連動型広告のマーケット｜クリック単価の高い順

就職・転職／教育サービス
金融・保険サービス
自動車・オートバイ
専門サービス／その他サービス
本・音楽・映画・チケット
不動産サービス
旅行・交通サービス
通信・インターネットサービス
ショッピングモール・総合小売・その他専門店
化粧品・生活用品・健康食品・健康器具
コンピューティング
娯楽・エンターテイメントサービス
インテリア・ガーデニング・DIY用品
アパレル・ジュエリー
電化製品・家電
ギャンブル
業務用製品ほか
スポーツ用品
資料・情報源
ギフト・贈答品
玩具・趣味・コレクション

集客施策｜SEOと検索エンジン対策

MovableType

(2008年8月24日 11:32) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

自然検索の順位は数々のルールを検索アルゴリズム技術で分析しており，関連性が高い順序で並ぶ。

SEOとは，Webサイトに検索エンジンが理解・評価しやすい構造・仕組みを導入することである。

リンクが自然に増える仕組みを取り入れることが大切である。（リンクポピュレーション）

集客施策｜キーワードマーケティング

MovableType

(2008年8月24日 11:23) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

検索キーワードは，ユーザーの「いま，欲しいもの」を表わした言葉を用いる。

キーワードに広告を関連付けることで「興味がある人」にだけ広告を「有効な情報」として届けることが可能になる。

キーワードを分析することで消費者の潜在的ニーズの発掘も可能になる。

ユーザーの「気持ち」を基準にターゲティングする

このキーワードターゲティングの代表例といわれる検索連動型広告市場は，世界的には2006年までで1兆円超，2010年には4兆円に達する（パイパー・ジャフレイ2006年調査）といわれるほど成長を続けている。

集客施策｜生活者のネット行動と消費マインド[2]

MovableType

(2008年8月24日 11:13) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

「ターゲットセグメンテーション」とはユーザーを属性で分類して捉える方法のこと。

ターゲットセグメンテーションには行動や価値観による分類，世代による分類などがある。

セグメントのどこを狙うか?どのように攻略するか?を各セグメントの特性から検討する。

集客施策｜生活者のネット行動と消費マインド[1]

MovableType

(2008年8月24日 11:06) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

メディア接触では，雑誌の力が弱まり，インターネットの力が強まっている。

インターネットの利用目的のトップは「情報収集」。

口コミマーケティングが製品支持を獲得するひとつの手段となりつつある。

制作（デザイン・実装）｜アクセシビリティ関連規格およびガイドライン

MovableType

(2008年8月17日 20:40) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

JIS X 8341-3は，Webサイトの制作者・開発者だけでなく，運営者も理解すべきガイドラインである。

JIS X 8341-3の「6.情報アクセシビリティの確保・向上に関する全般的要件」を理解して実践することが大事である。

海外のWebサイト制作では，W3CのWCAGがデファクトスタンダードになっている。

JIS X 8341-3の構成

序文

適用範囲
引用規格
定義
一般的原則
開発及び制作に関する個別要件
情報アクセシビリティの確保・向上に関する全般的要件

附属書（参考）ウェブコンテンツに関する例示

附属書（参考）関連規格

制作（デザイン・実装）｜アクセシビリティの基礎

MovableType

(2008年8月17日 20:26) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

Webコンテンツは，画面表示だけでなく，音声や点字にも変換することができる。

Webコンテンツは，マウスを使わなくても，例えばキーボードだけでも同じように操作できる。

ユーザーのさまざまな利用特性を踏まえ，多くのユーザーが利用できるようにして機会損失を防ぐ。

想定すべき様々なユーザーの利用特性

高齢者: 画面が見えづらい，音声が聞こえづらい，マウスキーボードが操作しづらい，操作を忘れたり混乱しやすい
全盲: 画面を見ることができない
弱視: 画面が見えづらい，画面がぼやける，画面がまぶしい（または暗い），視野が狭い
色覚障害: 色の違いを区別しづらい
聴覚障害: 音声が聞こえない／聞こえづらい
死体不自由: マウスやキーボードを操作できない／操作しづらい

制作（デザイン・実装）｜(X)HTML+CSSによるページ制作

MovableType

(2008年8月17日 20:15) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

Webページの制作では，重要事項を予めルール化した「ルールセット」を用意し，それに基づいて作業することが品質確保のために重要である。

Webページのひな形である「テンプレート」は，Webオーサリングツールで作成するのが一般的である。ページごとに異なる部分を「編集可能領域」とする。

ソースコードの構文的な正しさを検証することを「バリデーション」という。さまざまなツールを利用して実施する。

CSS Filters and Hacks: http://dithered.chadlindstrom.ca/css_filters/index.html
W3C Markup Validation Service: http://validator.w3.org/
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

制作（デザイン・実装）｜(X)HTML+CSSの基本設計

MovableType

(2008年8月17日 19:58) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

（X）HTMLの設計には，「フィールド化からはじめるアプローチ」と「マークアップからはじめるアプローチ」のふたつがある。

CSSの設計では，スタイルブロックごとにまとめて記述し，コメントを記述するなど，管理しやすい工夫が必要である。

CSSをどのようにコンポーネント化するかは案件ごとに異なるため，基本的な設計方針や手法をr理解する。

制作（デザイン・実装）｜Web標準とページ制作

MovableType

(2008年8月15日 11:55) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

（X）HTMLでWebページを構造化し，CSSで見栄えを指定する。

CSSレイアウトには，SEOやアクセシビリティ，メンテナンス性などの面で，テーブルレイアウトにはないメリットがある。

すべてをWebオーサリングツールにまかせず，ソースコードレベルで作業できることが，より高い品質のページを制作するのに不可欠である。

クロスブラウザのチェック工程

CSSサポートのよりブラウザでチェック
Firefox1/2，Opera8/9，Netscape7
CSSサポートにやや問題があるブラウザでチェック
WinIE7
CSSサポートにそれなりに問題があるブラウザでチェック
WinIE6
CSSサポートにかなり問題があるブラウザでチェック
WinIE5.x，MacIE5
CSSの適用対象に含めないブラウザでチェック
WinIE4，MacIE4，Netscape4

モダンブラウザを想定する場合でも，WebブラウザごとにCSSの解釈やレンダリングが異なる分，実装不備や実装不足があり，このような問題には「CSSハック」というテクニックで対処するのが一般的である。特にフルCSSレイアウトの案件ではCSSハックの習熟度が作業効率に大きく影響する。

制作（デザイン・実装）｜レイアウトパターンとグリッドデザイン

MovableType

(2008年8月13日 13:09) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

カラムの構成でレイアウトパターンを作る。

カラムには左右の余白設定を含めておく。

1カラムの幅サイズは均等割やサイトIDの幅に合わせるなど臨機応変に行う。

カラムレイアウト

以下の3パターンが多い

1カラム+複数カラム
2カラム
3カラム

制作（デザイン・実装）｜タイポグラフィ

MovableType

(2008年8月13日 12:52) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

フォントは「ゴシック体」と「明朝体」の2つに大別される。

タイポグラフィには文字間の調整が不可欠であり，ゴシック体は視認性が高いが，単調でメッセージ性が伝わりにくい。

クライアント環境に応じてフォント使いを検討する。明朝体は漢字とひらがな，カタカナとの区別が付けやすいが，小さな文字には適さない。

Sans－無し

Serif－ひげ

制作（デザイン・実装）｜インタラクティブデザイン

MovableType

(2008年8月13日 11:36) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

色，形，動きの変化を状況に応じて使い分ける

UIとしてボタンを利用する場合，引き金は「離す」。

ユーザーを導くためのシナリオ作りが先決である。

制作（デザイン・実装）｜ビジュアルデザイン

MovableType

(2008年8月13日 10:55) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

グリッドなどのガイドラインを構図の決定に役立てる。

遠近法などビジュアルの描画テクニックを知っておく。

ゲシュタルト要因など，人間の知覚のクセなども理解してビジュアル表現を考える。

構図の取り方

グリッド

対角線

奥行きの表現

線遠近法

空気遠近法

擬似的な立体の表現

線による作図方法

色や描画に工夫する方法

ドロップシャドウ
カットアウト
ベベル

制作（デザイン・実装）｜音声素材

MovableType

(2008年8月 9日 20:37) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

音声のデータ形式にはテキストとバイナリの2種類がある。

サンプリング周波数は内容と必要な質のバランスを考え，適切なファイルサイズを意識する。

データ形式によっては，環境によって再生結果が変わる点に注意する。

音声のデジタル化: 音源のデジタル処理化を「サンプリング」と呼び，アナログ音声の周波数をデジタルのビットに割り当てることで，ビット数の多さがサンプリングのきめの細かさにつながる。

制作（デザイン・実装）｜写真素材

MovableType

(2008年8月 9日 20:19) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

写真は用途を定めてから取り扱う保存形式を決める。

撮影時はモードと光量に注意する。

切り抜き写真はサムネールサイズまでが妥当である。

作業工程で異なるフォーマット: ハイエンドの一眼レフ・デジタルカメラでは，RAW形式による撮影が可能である。; RAW形式はカメラに付属のアプリケーションや画像処理ソフトウェアで現像処理を行う。; JEG形式の画像は上書き保存でも圧縮がかかり，加工作業をJPEGのまま行うと画質劣化につながる。
取り込み（撮影）時の注意点（デジタルカメラ）: デジタルカメラによる写真の取り込みには，¹撮影モード，²光量の2点に注意が必要である。
取り込みの注意点（スキャナー）: 雑誌やポスター，パンフレットなど，印刷原稿から写真を取り込む場合，網点が発生する。; 網点は使用原寸から拡大スキャンして，ピクセル寸法を縮小することで目立たなくないように工夫が必要である。

制作（デザイン・実装）｜画像素材

MovableType

(2008年8月 9日 20:09) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

透明効果を使いたい場合，元素材の保管にはPNGが適している。

写真画像にはJPEG，単純なグラフィックにはGIFが適している。

画像の特徴と処理方法の違いを把握する。

制作（デザイン・実装）｜テキスト素材

MovableType

(2008年8月 9日 19:50) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

テキストコンテンツの制作プロセスは，執筆⇒編集⇒校正。

WebコンテンツのテキストにはSEO+読み手のリテラシーを考えたライティングが必要である。

テキストコンテンツの改善ポイントとして特に重要なのは，見た目のボリューム，フォント，コントラスト，図表・リスト，そして見出しである。

テキストの執筆・編集・校正プロセス: 執筆; 「ら抜き表現」「い抜き表現」，間違いやすい表現，差別用語・禁止用語などへの注意が必要である。; Webページ「売り」となるキーワード，専門用語や難解語，外来語に関するターゲットユーザーのリテラシーレベルに合わせたライティング・スキルが重要である。; 校正; 通常，初校・再校・念校のように数回にわたって校正される。

制作（デザイン・実装）｜Webコンテンツを構成する素材

MovableType

(2008年8月 9日 19:38) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検定，Webリテラシー

今日のポイント

素材は，情報構造に含まれる内容と，装飾要素に当たる内容に振り分けられる。

ユーザーがどのように素材にアクセスするのかを考えることが第一。

視覚要素が聴覚要素になる可能性にも考慮する。

情報としての画像: Webサイトの情報における図版は個人的な再利用が行われやすい状態であることが望ましい。

WebクリエイティブのためのiPod｜Apple Store

MovableType

(2008年8月 2日 22:58) | 個別ページ | コメント(0) | トラックバック(0)

Apple Storeが下取りサービス査定額15％アップキャンペーン中であったため，Apple Store下取りサービスの申込と同時に，新しい iPod redとBelkin Micro Grip for 3G iPod nano(レッド)を同時購入してみた(○∇○) ドキッ

下取りサービス査定額15％アップキャンペーンのおかげで，査定額だけで購入できたし，さらにおつりまで返って来た（（＾へ＾）v

<買取受付番号>
　B000xxxxx
<お預かり品査定結果>
合計査定額　 34160円
-------------------------
現金支払額　 34160円
<査定詳細>

01 iPod 30GB (2006/Black) MA446J/A
上限金額 14500円
増減金額 2180円
査定金額 16680円
査定内容
IPOD

キャンペーン
Apple　Srore　下取サービス　査定額15%アップキャンペーン
+2180

添付付属品
「クイックリファレンス」「イヤホン」「Universal Dock用Dockアダプタ」「ケース」「USB 2.0 ケーブル」
02 iPod 60GB (ホワイト) MA003J/A
上限金額 16000円
増減金額 1480円
査定金額 17480円

査定内容
IPOD

状態減額
傷ボディ背面中央軽い傷あり -800

キャンペーン
Apple　Srore　下取サービス　査定額15%アップキャンペーン +2280

添付付属品
「iPod+iTunesクイックスタート」「インナーイヤー型ヘッドフォン」「ソフトケース」「Dock用アダプタ(Universal
Dockと共に使用)」「iPod+iTunesソフトウェアCD」「USB2.0ケーブル」

■買取対象外品■

・iPod クリアケース２個

贈答品や記念品にも。iPod パーソナライズサービス。

Σ(ノ°▽°)ノハウッ！

Webサイトの企画・設計｜情報構造設計

MovableType

(2008年8月 2日 15:48) | 個別ページ | コメント(0) | トラックバック(0)

ネット人口7,000万人時代に差がつくWeb検，Webリテラシー

今日のポイント

情報アーキテクチャとは，複雑なものをシンプルにして，状況や目的に合わせて，ユーザーにとって分かりやすく，たどり着きやすくすること。

Webサイトのビジネス目的とユーザー目的を明確にし，これら両方を満たす最適なサイト構造の設計を計画的に行う。

情報の組織化と構造化を行い，ユーザーがWebサイト内を迷わないように明確な導線設計を行い，対象ユーザーがわかる言葉でラベル付けする。

情報アーキテクチャの構成要素