SeleneのWEBクリエイター日記

ケータイサイト制作事情

ケータイコンテンツ

ケータイサイト制作の効率化は「同意」がカギ

効率化を阻害しているのは「サイトの動作確認」

ケータイサイトの案件は表現のサイズが小さいためか、PC向けのWebサイトよりも付けられる予算が少ない。そのうえ、キャリア別、機種別の表示確認がこれまでは必須とされており、動作テストを延々とこなさなくてはならない。数百機種の端末テストともなると、検証作業に膨大な時間がかかり、効率も費用対効果もよくない。しかし、そのままでローンチするわけにもいかない。以上の理由から、ケータイ案件は請け損だという判断になる。ケータイサイト制作では、動作確認の作業が大きなボトルネックになっていることがわかる。

制作作業に入る前が効率化の重要ポイント

• 対象機種の絞り込み

クリエイターが実際に手を動かす制作手法を取りつつ、先にクライアントと協議して、対象とする携帯端末を絞り込む方法。携帯端末は機種の世代によって、可能な表現方法が大きく異なる。すべてに対応させると手間も動作確認も膨大な量になる。そこで、対応機種を最新のものに限定する同意を得ておく。

• 制作作業のオートメーション化

ケータイ専用ツール（ASP）を活用すること。専用ツール（ASP）は独自にキャリア横断、端末横断での表示の最適化を確認してからサービス提供をしている。ASPの利用を前提に、サポート対象としている機種については実機を使った動作確認をしなくてもよい、という同意をクライアントと結ぶ。ノーチェックというわけにはいかないので、制作の現場では各キャリアの代表的な機種での表示確認を実施することになるが、手間や時間は劇的に短縮できる。

ケータイサイト制作を効率化する重要スキル

日本型のケータイサイトとスマートフォン対応Webサイトのバランスは、徐々に変化していくだろうが、少なくともあと数年はそれぞれが発展的共存をしていく。いずれも携帯端末通信を前提としているため、コンテンツ最適化は必須であり、GPSや認証番号をはじめとする端末機能とWebとの連動など、ケータイサイト専用の構築スキルが求められる。そして、それらはモジュールやツールとして提供されるようになっていく。必要なのはWebコーディングのようなスキルだけではない。時にはダイナミックに考え方を切り替え、他社の制作ツールを利用したり、モジュールを活用するという判断を下せるだけの知識も必要だ。ケータイ端末の状況を俯瞰したうえで、クライアント企業に説明して同意を取り付けるコミュニケーションスキルや、携帯端末（モバイル）を利用するユーザーの要求をくみ、楽しませるサイト設計ができるスキルも必要とされる。

LAMPに代わる動的なFlashサイト制作

数年前からFlash生成エンジンが普及しはじめ、特に2008年に入ってからは、多くの企業が積極的にFlash生成エンジンの販売を開始した。そして、Flash生成エンジンを活用したケータイサイトも増えてきている。この「動的Flashサイト」活用が、LAMPに代わる新たな効率化手法として、この先定着することも考えられる。データベースと連動して動的にSWFファイルを生成するため、Flash Liteの表現力とインタラクティブ性を保ちながら、速報情報や個別コンテンツの提供を可能にする。テンプレートを修正すれば、一括したデザイン変更も容易だ。そして、何よりFlash Liteが携帯キャリアや機種を超えた表現を維持できるため、実機による動作確認が不要という点が画期的だ。現在利用されている日本型携帯端末のほぼすべての機種でFlashが動作する。Flash生成エンジンの利用価格はLAMPのように「ほぼ無料」とまではいかないが、動作テストの手間とコストが省けるメリットは大きい。Flash Liteと同時に、Flash生成エンジンを活用できるスキルは今後大いに求められていく。

ケータイサイト制作で必ずそろえるべき基幹ツール

ケータイサイト制作をするうえで、Webサイトを生成する「CMSツール」と「メール配信」機能、「アクセス解析」機能だけはそろえておきたい。

CMSはHTML／CSSを活用したデザインが可能かをチェックしておきたい。2010年はdivタグを利用した、一部背景色変更などPCサイトのようなデザインの利用ができるCMSが主流になるだろう。現在、実装していないサービスならば、実装の予定があるかどうかも確認しておきたい。また、SEOのためのメタタグ編集機能や検索エンジンへのサイトマップ登録がスムーズにできるかなども必ずチェックしておきたい点だ。メールマガジンの配信機能では「空メールによる登録機能」、「時間指定配信機能」、「HTMLメールの配信機能」、「迷惑メールブロック対策の自動配信停止機能」などはそろっていないと効果的かつ効率的運用ができない。アクセス解析については「Google Analytics」が最近ケータイサイトへの対応を発表した。ASP提供企業が利用できる環境を用意するまでには時間を要するかもしれないが、すぐにケータイでも高度なアクセス解析が標準的にできるようになるだろう。マーケティングでの活用を前提にするなら、アクセス解析の品質にこだわってサービスを選ぶというのもよい。

ケータイ専用ASPの選び方

1）

“クライアント企業の身の丈に合った無理のない予算のものを選ぶこと”

将来の拡張性を考え、価格の高いものより極力安いものを利用したい。まずは、利用予定のある機能を満たす手ごろな価格のサービス利用をお勧めする。また、いずれ拡張するときのためのマイグレーション（引っ越し）の段取りを考えながら運用するとよい。

2）

“包括的なサービスから始め、徐々に機能拡張をしていくこと”

最初は安めの価格のCMSを中心に、さまざまな機能を一括提供するサービスを利用する。機能や使い方が企業ニーズに適合するかを観測しながら、不足があれば他社製品の追加や乗り換えを検討していく。また、ケータイサイト運用経験のない企業が大型システムを導入することは、無駄な投資になる危険性が高いので注意したい。

3）

“実績あるサービスこそ懐疑的になること”

現在、ケータイサイト制作をめぐる環境や価格帯は激しく変化している。単に実績あるツールが最良の選択になるとは限らない。息が長く、同時に利用者が絶賛するサービスなら「買い」だ。

4）

は、“新登場サービスは「運用のユーザビリティ」で選ぶこと”

たとえば、Flash生成エンジンなど最近一斉リリースされたサービスは、価格帯も機能も似たものが多く、違いがよくわからないものもある。結局のところ決め手となるのは「運用の使い勝手の良さ」だ。具体的には複数のサービス提供会社にデモを見せてもらったり、トライアル利用させてもらったりして使い勝手を検証する。クライアント企業の担当者とも使い心地を共有して選択できれば、それがいちばん良い手段となる。

Permalink | コメント(0) | トラックバック(0) | 10:52

WEBに関わる職種の定義

その他

デザイナー

Webサイトコンテンツにおけるパーツのひとつひとつから、全体のビジュアルまで、その制作を一括して行います。クライアントからのリクエストを細かく受け止め、企画したプロジェクトのデザイン上のコンセプトを提案していきます。まさに、デザイナーがいなければ何も生まれない…必要不可欠な存在であるといえます。

• 主な業務

・Webサイトコンテンツ素材制作

・ビジュアルデザイン制作

・Webサイトコンテンツ実装

• 必要とされるスキル

・デザインに関する知識

・Web標準言語（HTML、CSSなど）に関する基礎的知識

・Javascriptなど、スクリプト言語に関する基礎的知識

アートディレクター

Webサイトコンテンツのビジュアルデザインに関するディレクションを行います。クライアントからのリクエストをきっちりと消化して、デザイナーに細かいコンセプトの方向性などを指示する役割を担います。アートディレクターがうまくコンセプトを提示できないと、デザイナーは制作の方向性を見失うことになりますし、結果的にそれはクライアントのニーズにうまく答えられない結果を生むことに。そういった意味で、ある程度の経験とコミュニケーション能力も必要とされます。アートディレクターは、Webサイトデザインの“現場監督”的な職種だといえるでしょう。

• 主な業務

・Webサイトコンテンツのビジュアルデザインに関するディレクション

• 必要とされるスキル

・デザインに関する高度な知識

・Web標準言語（HTML、CSSなど）に関する基礎的知識

クリエイティブディレクター

Web制作の現場を統括管理する進行役です。どんな仕事でも、クライアントがいる限り、納期は守らなければなりません。期間内にクライアントに満足してもらえる制作物を作り上げるために、チームのスケジュール管理をきっちりと行っていく……なにか滞っている案件があれば、すかさず解決の糸口を見つける。同時にクライアントの要求を的確に把握し、チームに伝えていく。クリエイティブディレクターは、いわば制作チームの“現場マネージャー”的存在です。

• 主な業務

・企画立案、プレゼンテーション

・Webサイトコンテンツ制作・全行程の管理

• 必要とされるスキル

・Webサイトコンテンツ制作技術に関する全般的な知識

・Webサイトにおける表現手法や技術の最新トレンド

プランナー

Webサイトコンテンツ制作のプランニングを行います。Webサイトのサービス方針や仕掛けなどを具体的に提案していく立場となります。クライアントが予想もつかないような新鮮で魅力的なプランを提示することができるのが、優秀なプランナーだといえるでしょう。そのため、Webに関する技術や表現手法についての広範囲な知識を必要とし、業界の動向も把握しておく必要があります。プランナーが職種として独立しているケースはまだまだ少なく、ディレクターが兼任することも多いのが現状です。

• 主な業務

・企画立案、プレゼンテーション

• 必要とされるスキル

・Webサイトコンテンツ制作技術に関する全般的な知識

・Webサイトにおける表現手法や技術の最新トレンド

プロデューサー

プロジェクトの統括責任者です。プロジェクトに関わる人・お金をすべて管理・把握し、きっちり成果をあげていく責任があるマネジメント職です。クライアントのリクエストに応じて納期までにWebサイトコンテンツ制作業務を遂行するために、あらゆる問題点を解決していく必要があります。また、会社としての利益をちゃんと確保するというのも重要な役割。プロジェクトの勝敗を決めるのも、プロデューサー次第といえるでしょう。

• 主な業務

・要件定義

・企画立案、プレゼンテーション

・予算・工程管理

・制作チームの構成

• 必要とされるスキル

・クライアントの業界に関する知識、トレンド

・コミュニケーション能力

・Webサイトコンテンツ制作技術に関する全般的な知識

コーダー

デザイナーが作成したデザインを基に、実際にコーディングしていく役割を担うのがコーダーです。デザイナーのラフ通りにブラウザにページが反映されるよう、具体的にはHTML、XHTMLなどのWeb標準言語を扱い、文書構造の定義付けを行います。また、デザインワークとしてスタイルシート（CSS）の制作も行います。さらにデータ管理（ディレクトリマップ）まで手がける場合もあり、その職域は組織によっても少々異なる場合があります。スタイルシート（CSS）の制作をする職種として、「CSSエディター」という呼び方も存在します。

• 主な業務

・デザインを基にCSSページレイアウト作成

・Webコンテンツの実装

• 必要とされるスキル

・Web標準言語に関する専門的知識

・Javascriptなど、スクリプト言語に関する専門的知識

・Webサイトコンテンツ制作技術に関する全般的な知識

フラッシャー

フラッシャーは、Flash案件についてコンテンツの仕様策定から実際のオーサリングまでを手がける、Flashに関するスペシャリストです。時にはアニメーションやゲーム的な視点が必要な場合もあり、動的な演出力が要求される職種です。近年は特にリッチコンテンツの需要が目覚ましく、今後はさらにFlashに関する専門家が必要とされる局面は増えていくに違いありません。他に「Flashオーサライザー」「Flashクリエイター」「Flashデベロッパー」という呼び方も存在します。

• 主な業務

・リッチコンテンツの仕様策定

・Flashの制作

• 必要とされるスキル

・ActionScript、XHTML、CSSに関する専門的知識

・画像処理技術

Permalink | コメント(0) | トラックバック(0) | 11:07

ベーシック認証 〜アクセス制限〜

CGI

htaccess.txtの作成

AuthUserFile フルパス/.htpasswd
AuthGroupFile /dev/null
AuthName "Input ID and Password."
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
    deny from all
</Files>

修正必須

1行目の「フルパス」の部分は「.htpasswd」の設置場所に合わせて修正が必要です。

サーバーのルートディレクトリからのフルパスを記載しなければ動作しません。

「フルパス」は通常のホームページを表示する時のパスと異なる場合が多いので注意が必要です。

例えば、下記のようにIPアドレスやアカウント名を挿入しなければならない場合があります。

　例1）AuthUserFile ~/255.255.255.255/home/data/.htpasswd

　例2）AuthUserFile /home/chama/.htpasswd

　例3）AuthUserFile /web/cgi-bin/cargo/data/.htpasswd

フルパスが分からない場合は、サーバー管理者にお問い合わせ願います。

修正可能

3行目の

AuthName "Input ID and Password."

はパスワード入力画面に表示される文字ですので、「”」（ダブルクオート）間については、自由に修正することができます。

htpasswd.txtの作成

hoge:B2hQuDFRtpdLA

修正必須

コロンの前が「ID」になり、後ろの記号などが「パスワード」になります。

この時点で「パスワード」は暗号化して記入してください。

複数のID、パスワードを設置する場合は、複数行に貼り付けて下さい。

FTPでサーバーへ転送しファイル名を変更する

修正必須

• パスワード制限を行ないたいディレクトリに「htaccess.txt」と「htpasswd.txt」を転送します。

• 次に転送したファイル名をFTPで変更します。

「htaccess.txt」を「.htaccess」に、

「htpasswd.txt」を「.htpasswd」に修正します。

• アクセス権の設定

アクセス権は604に設定して下さい。

（604で動作しない場合はサーバー管理者にお問い合わせ願います。）

以上で設置完了！

Permalink | コメント(0) | トラックバック(0) | 15:41

リダイレクトの設置方法

その他

リダイレクトの種類

リダイレクトにはサーバ側で行う、

サーバーサイドリダイレクト（301リダイレクト）と、

サイト側で行うクライアントサイドリダイレクト（meta refresh）があります。

301リダイレクト

.htaccessの生成

テキストエディタで「htaccess.txt」というファイルを作り、

下記の「.htaccess の中身」を記述後、サーバーにアップロードします。

サーバー上で「htaccess.txt 」のファイル名を「.htaccess 」 に変更します。

※すでにサーバ上に「.htaccess」ファイルがある場合は、

そのファイルをダウンロードし追記します。

.htaccess の中身

【サイト全体を他のドメインへリダイレクトする場合】

Redirect permanent / http://新ドメイン/

※転送元のトップディレクトリに .htaccessファイルをアップロード

【ディレクトリのURLを変更した場合】

Redirect permanent /seo/ http://www.seo-blogs.biz/search/new/

seoのディレクトリにアクセスした際に、newディレクトリに転送されます。

※seoディレクトリ内に .htaccessファイルをアップロード

【個別ページをディレクトリへリダイレクトする場合】

Redirect permanent /seo/wrodpress01.html http://www.seo-blogs.biz/wp/

Redirect permanent /seo/wrodpress02.html http://www.seo-blogs.biz/wp/

wrodpress01.html とwrodpress02.htmlにアクセスした際に、/wp/に転送されます。

※seoディレクトリ内に .htaccessファイルをアップロード

同一サイト内で飛ばす場合、転送元と転送先に同じディレクトリ名があると、無限ループに陥ってしまいますので注意が必要です。

.htaccessの「Redirect permanent」の部分は「Redirect 301」でもOKです。

リダイレクト設定の確認

リダイレクト設定が完了したら、

実際に旧URLにアクセスし新URLに飛ばされるかのチェックしましょう。

301リダイレクトは、View HTTP Request and Response Headerでも確認することができます。

Website Explorerでは、サイト全体のリダイレクト状況を確認できます。

リダイレクト設定後おおよそ2〜3ヶ月でリンク情報などが新URLへ移動するようです。

リダイレクト設定が有効である期間のみ被リンク効果も有効ですので、

リンクが引き継がれた後も旧ドメインを破棄してはいけません。

301リダイレクトと302リダイレクトの違い

完全なる移転では、前述のとおりhtaccessに301と記述するのですが、一時的な移転の場合には302と記述します。

【301リダイレクト】

URLが完全に移転する場合 (301 Moved Permanently)

検索エンジンは転送元URLが完全に移転したと認識。

【302リダイレクト】

URLが一時的に移転する場合 (302 Moved Temporarily)

検索エンジンは転送元URLが一時的な移転と認識。

URLの正規化（wwwありなし、index.htmlありなし）

http://www.seo-blogs.biz/

http://seo-blogs.biz/

http://www.seo-blogs.biz/index.html

http://seo-blogs.biz/index.html

上記の4つのURLは、ユーザにとっては同じページとなりますが、検索エンジンは別のページと見なす可能性があります。表示されるページは同じでも、www無しのURLに張られたリンクとwwwありのURLに張られたリンクとでは異なるページに張られたリンクとしてカウントされてしまいます。

この同一ページなのに異なるページへの被リンクとしてカウントされてしまう事を防ぐ為の施策がURLの正規化です。サイト内リンクが統一されていればそこまで気にする必要は無いのですが、被リンクが分散してしまっている場合には、統一した方が良いかもしれません。

.htaccessによる301リダイレクトを利用すると、「wwwなしURLからwwwありURLへの転送」、「index.htmlありURLからindex.htmlなしURLへの転送」を簡単に行う事ができます。

設定方法については海外SEO情報ブログさんの記事が参考になります。

• 「301リダイレクトを使った「WWWあり」と「WWWなし」の統一」
• index.html「あり・なし」のURL正規化 – 301リダイレクト

※URLの正規化はできる限り行った方が良いのでしょうが、統一したことによるSEO効果を実感したことは無く、個人的にはcanonical属性同様、一般的な企業サイトやブログではあまり必要性を感じていません。

meta refreshによるリダイレクト

SEOの面では301リダイレクトがベターなのですが、無料サーバなどで.htaccessが利用できない場合には、metaによるリダイレクトを行います。metaによるリダイレクトはサーバではなくクライアント側で行う方法であり、ブラウザ上では一瞬旧URLが表示される可能性があります。

即時（0秒）に指定のURLにジャンプします。

旧ページ表示3秒後に指定のURLにジャンプします。

Yahooはゼロ秒リダイレクトを301リダイレクトと同様に処理する事を明言しています。

リダイレクトとは？ − Yahoo!インフォセンター

この値を「0」とした場合、YSTは301リダイレクト（永久的なリダイレクト）、「0」以外の値を指定した場合には、302リダイレクト（一時的なリダイレクト）と扱います。

Googleではゼロ秒＝301という事が公式に発表されていませんが、301が利用できない環境のリダイレクト設定は、metaによるゼロ秒リダイレクトを行う他ないでしょう。

meta refreshの場合には、旧URLのコンテンツ部分に新URLへリダイレクトする旨の文章と新URLへのリンクを記述した方が良いでしょう。

Permalink | コメント(0) | トラックバック(0) | 11:34

魅力が伝わるサイト制作

WEBディレクション

コンセプトワーク

CREATIVE BRIEF（クリエイティブ・ブリーフ）

• 背景/競合状態

プロジェクトの背景や経緯、競合の状態を記載する。

• 競合に対する優位性/現状の問題点

競合に対する優位性、または現状の問題点を記載する。

• プロジェクトの目的

クライアントが明示する目的を整理し、

プロジェクトの目的を記載する。

• ターゲット

プロジェクトのターゲットおよび、ユーザー像を記載する。

• ターゲットが感じている本音

現状、ターゲットが感じている本音を客観的に記載する。

• 公開後、ターゲットに期待する効果

プロジェクトの公開後、ターゲットに期待する効果を客観的に記載する。

• PROPOSITION コンセプト/具体的なアイデア

「コンセプト」には、プロジェクトのコンセプトを記載する。

ここで立案するコンセプトが、全体の提案に貫かれている事が重要。

「具体的なアイデア」には、コンセプトを実現させるためのアイデアや表現を具体的に記載する。

• トーン＆マナー

対象となるプロジェクト（企業や商品ブランド）の雰囲気、感じ、カラー、社風、文章のタッチ、デザインイメージなどを記載する。

• その他、留意点

備考欄として、予算やスケジュールなどを記載する。

企画・設計フェーズ

目的とターゲットユーザー設定の重要性

• Webサイトの目的（Webサイト制作者側が意図する目的）は何か？
• ユーザーにどのようなアクションを起こさせたらゴールか？
• 想定されるユーザーはどのような人か？
• ユーザーは何を求めてWebサイトを訪れるのか？
• ユーザーはいつ、どこから、どのような状況でWebサイトを訪れるのか？
• ユーザーはどのように行動し、最終的にゴールに到達するのか？

効果的なヒアリング

ヒアリング項目

• 目的

ビジネスや経営戦略におけるWebサイトの目的や役割、位置づけ。

• 背景

企業の内部要因と外部要因を中心に市場のポジショニングや競合との関係性、現状の課題など。

1. SWOT分析
2. PEST分析（政治的環境、経済的環境、社会的環境、技術的環境）
3. 3C分析

• ターゲット

想定ユーザーに関する情報。

人口動態的なでもグラフィック変数や、地理的変数。

サイコグラフィック変数を含めた幅広い情報が必要。

また、ユーザーの閲覧環境（OS、ブラウザ、画面サイズ、プラグインの有無）の情報も要把握。

• コンテンツ

現在のコンテンツ構成や、今後つくりたいコンテンツに関する情報。

ログ解析データがあれば、PV（ページビュー）や離脱率といった各コンテンツの数値的な特性も聞き出す。

• デザイン

参考サイトをピックアップしてもらうなど、具体化しておく。

CIや写真素材の有無、利用にあたっての制約も聞いておく。

コーディングガイドラインなどの情報も含む。

1. SD法（躍動的＆落ち着いた、男性的＆女性的、先進的＆伝統的、都会的＆自然的、高級な＆素朴な、かっこいい＆かわいらしい、シンプル＆にぎやか）
2. マトリックス法

• システム

サーバOSや実装しているミドルウェア、DBの情報など、サーバサイドの情報を聞き出す。

• 運用

プロモーション状況、ログ解析やSEOの実施状況など、さらには運用体制や運用スタッフのスキルなど。

• 予算

予算が決まっているのであれば、予算を超えない提案を。

予算が決まっていなくても、過去に制作したコンテンツの予算を聞くなどして、クライアントの予算感覚を掴んでおく。

• スケジュール

納期を聞くだけでなく、それが必須なのか、フェーズ分けなどの段階的リリースが可能なのかも聞く。

Permalink | コメント(0) | トラックバック(0) | 12:49

CSSのborder要素で斜線が引けるっ？！

CSS

CSSのborderプロパティでtableのセルに斜線を引く

hahaha…そんな斜線なんてできるわけ…で、できてるっ！！

と、驚愕した私。

つまり、あれです。

borderで、topやleftを例えばそれぞれ100px指定すると、

その境界は斜線になる、と。

今までそんな大きい幅のborderを指定した事がなく、

色違いの指定もした事がなかった私としては、

盲点でありましたorz

これ活用すると、吹き出しにも使えるよね。

HTML

<table summary="data">
  <thead>
    <tr><th>&nbsp;<span class="arrow"></span></th><th class="column">a</th><th class="column">b</th><th class="column">c</th></tr>
  </thead>
  <tbody>
    <tr><th class="record">x</th><td>1</td><td>2</td><td>3</td></tr>
    <tr><th class="record">y</th><td>4</td><td>5</td><td>6</td></tr>
    <tr><th class="record">z</th><td>7</td><td>8</td><td>9</td></tr>
  </tbody>
</table>

CSS

* {
    margin: 0;
    padding: 0;
    font-family:Verdana,Arial,sans-serif;
}
table {
    font-size:16px;
    margin: 30px 0 0 30px;
    border: 1px solid #ccc;
    border-spacing: 1px;
    line-height: 2;
}
th {
    width: 50px;
    color: #444;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
td {
    padding: 2px 5px;
    text-align: center;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.column {
    background-color: #ccffcc;
}
.record {
    background-color: #ffcccc;
}
.arrow {
   width: 0;
   height: 0;
   line-height: 0;
   border-top: 32px solid #ccffcc;
   border-left: 50px solid #ffcccc;
   border-right: none; 
   position: absolute;
 
   /* ie6 */
   top: 0px;
   left: 0px;
}
html>body .arrow {
   top: 32px;
   left: 32px;
}
*:first-child+html .arrow { /* ie7 */
   top: 0;
   left: 0;
}

※IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認済み。

Permalink | コメント(0) | トラックバック(0) | 12:26