最近は、企業や製品・サービスなどで
Facebookページをもつことが増えてきています。

EC studio でも先日チャットワークのFacebookページをリリースしました。

そこで、今回はFacebookページの作り方について書きたいともいます。

Facebookページとは

すでに知っている方も多いかもしれませんが、
Facebookページとは何かということを少し書きたいと思います。

Facebookページは、旧ファンページのことを言います。
企業や団体、製品やサービス、芸能人やアーティストなどが
情報を発信する、コミュニティページのことです。

ユーザーは、お気に入りのFacebookページに対して
「いいね！」をクリックすると、最新の情報がウォールに流れてきたり、
そのページに対し、自由にコメント投稿できます。

また、「いいね！」をクリックすると、自分の友達にも「いいね！」をした
Facebookページの情報が流れるので、企業、製品やサービスの
プロモーションにもつながります。

国内のFacebookページの事例を調べる

まず、Facebookページを作る際に、他の企業や製品などの
Facebookページは、どうなっているのか事例を調べる必要があります。

ただし、検索窓から企業名などをいれて検索する必要があるので、
どんな企業や製品がFacebookページをやっているのかを知らないと
見つけにくいということがあります。そこで人気のFacebookページを
見つけるのに便利なアプリやサイトを紹介します。

・likenavi

Facebookページの「いいね！」数を独自に集計し、
ランキング表示をしてくれるFacebookアプリケーションです。

・フェイスブックなう

最新のFacebookページの「いいね！」数や、
記事ごとの「いいね！」数をみることができるサイトです。

これで、人気のFacebookページも見つけやすくなり、
国内の事例も調べやすくなります。

Facebookページの構成を考える

次に、Facebookページの構成を考えます。
「ウォール」「基本データ」のページはデフォルトで用意されていますが、
そのほかに、オリジナルでどんなページが必要か決めていきます。

チャットワークのFacebookページでは、
以下のページをオリジナルで作ることにしました。

・ウェルカムページ
はじめて訪れたユーザーに対し、「いいね！」をクリックしてもらうように促すページ

・チャットワークの紹介
Facebookでチャットワークの存在を知ったユーザーに向けたページ
基本的なチャットワークの紹介

・ガイドライン
Facebookページを運営するためのコミュニティガイドライン
運営者の情報、投稿されたコメントの削除基準などを記載し、
よりよいコミュニケーションがとれるようにしている

Facebookページの基本設定

構成まで決まれば、いよいよ製作にはいっていきます。

（1）Facebookアカウントの取得
これがないとはじまりません。まずはFacebookのアカウントを取得しましょう。

（2）Facebookページの作成

「Facebookページを作成」ページにアクセスします。

「カテゴリ」=>「サブカテゴリ」を選択し、「Facebookページ名」を入力します。
Facebookページ名は後からでも変更が可能です。
※ただし「いいね！」が100人以上になった場合は変更不可になります。

Facebookページ規約に同意し、「利用開始」ボタンをクリックすると
Facebookページが作られます。

3.基本データの設定

Facebookページの概要を入力します。
企業などのFacebookページの場合は会社概要や所在地などを入力します。

4.ウォールの設定

ウォールでは管理者とユーザーの双方が投稿・閲覧できます。
ユーザーが投稿・閲覧できる制限を設定します。

Facebookページの基本的な設定は以上になります。

Facebookページをデザインする

構成が決まり、基本的な設定ができれば、
次は、オリジナルページのデザインに入ります。

（1）プロフィール画像を作る

上記画像の場所に表示される画像を作ります。

プロフィール画像の最大サイズは幅180px、縦540pxです。

プロフィール写真のページからプロフィール画像を追加できます。

ウォールなどに表示されるサムネイル画像はプロフィール画像から
自動で生成されますが、「サムネイルを編集」で、
サムネイル画像に使う位置の調整が可能です。

（2）コンテンツ部分のデザイン
真ん中のカラム、メインのコンテンツになる部分をデザインします。

上記画像の部分のデザインになります。

プロフィール画像の最大サイズは幅520px、縦800pxです。
縦が800pxを超えるとスクロールバーが出てしまいます。
スクロールバーはJavaScriptで消すことも可能です。

詳しい方法は下記のブログ記事に掲載されていますので、是非参考にしてください。
iframe版 Facebookページのスクロールバーを消す方法

今回は、基本的な設定からiframeページのデザインまでを説明しました。
次回は、デザインしたページの実装方法について説明します。

お楽しみに！

• 今から作るiFrame対応Facebookページの作り方 Part.2
• Facebookのウォールでちょっとアピールする方法（OGP）
• Facebook コメントプラグインをWordPressに設置する手順とコメントを管理する方法

Webサイトのデザインをしているときに
「あ、このグラデーションって、どういう色だったかな？」
「ここのフォントはなんだっけ？」ってことがあります。

そういう時に便利なのがFireworksのスタイル機能です。

スタイル機能って何？って人のために、少し解説したいと思います。

スタイル機能とは、Fireworksに登録されている
スタイルパレットのことで、グラデーションスタイルや
フォントのスタイルを、選択したオブジェクトに対して
一括で変換してくれる機能のことです。

このスタイル機能を活用することで次のようなメリットが得られます。

• デザイン作業の手間が軽減される
• 同じスタイルを適用する際に、色やグラデーション、
  ドロップシャドウなどの値を覚えておく必要がない
• デザインの表現の幅も広がる

スタイル機能の使い方



このように、Fireworksにはいくつかスタイルが
登録されています。

試しに1つスタイルを適用してみましょう。


このように、それぞれ別の形のオブジェクトを準備しました。


これらのオブジェクトに一括で「木目」のスタイルを指定してみます。


ワンクリックでそれぞれのオブジェクトが変換されました。

オリジナルのスタイル登録方法

スタイルはあらかじめ登録されているものだけでなく、
自分で作ったスタイルを登録することもできます。


このようにボタンに使うために作ったグラデーションのスタイルも登録可能です。
登録方法は、登録したいオブジェクトを選択し、
「スタイル」のオプションメニューから、「新規登スタイル」をクリックします。


「現在のドキュメント」に登録したスタイルが表示されます。
これで、他のオブジェクトに対しても同じスタイルを適用することができます。
※角丸は適用されないのでご注意ください。

このように、他のオブジェクトなどに同じスタイルを
適用したい場合に登録しておくと、値を覚える必要もなく、
デザイン作業の手間も軽減してくれます。

配布されているスタイルを使ってデザインの幅を広げる

デフォルトのスタイルのデザインは、
少し癖が強く、なかなか使いにくいものも多いですが、
他にスタイル自体を配布しているサイトがあります。

そういったものを活用すると、デザインの幅も広がります。
使えそうなものを少し紹介しておきます。

15 Fireworks CS4 Text Styles Pack 1

文字を手書き風のスタイルに変えてくれます。
ダウンロードはコチラ
※「DOWNLOAD」ボタンからはファイルがダウンロードできないのでご注意ください。
　ページ下部の「HR Text Outlines.stl」をクリックし、ダウンロードしてください。

Drawing

写真を手書き風のスタイルに変えてくれます。
ダウンロードはコチラ

Dynamic Bokeh styles

色を調整すればきれいなぼかし効果が簡単に付けられます。
ダウンロードはこちら

キラキラメタリック

メダルやメタリックなアイコン作りに便利ですね。
ダウンロードはコチラ

最後に紹介させていただいた、Fireworksマニアさんの
サイトにはダウンロードしたスタイルの追加方法なども
詳しく掲載されていますので、ぜひ参考にしてみてください。

このようにスタイルをどんどん追加して、
作業の効率化＆デザイン表現の幅を広げてみてはいかがでしょうか。

• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ
• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• FireworksCS4が重い・固まる現象を改善する方法

今回のテーマは
「2009年のデザイントレンド総括?トレンドをチェックして
2010年のデザイン業務に取り込め！」というテーマで、
原 一浩（karadesign/fxb）さん、矢野りんさんによるトークセッションでした。

セッションの内容は、下記のような感じです。
・2009年のデザイントレンドを実際のサイトを用いて紹介
・矢野りんさんによる、デザイン解説を交えての紹介
・2010年のデザイントレンド大予想！

まず、お二人の自己紹介から始まり、「トレンドとはどういうことか？」という
話になったのですが、ここで原さんが考える「トレンド」という言葉の意味が
紹介されました。

“トレンドとは最先端ではない時代に最適化されつつある現象である”

この言葉はすごく納得の行く言葉で、確かにトレンドと言うのは、
最先端を追いかけるということではなく、その時代にあったデザインを
みんなが選択して使うことで発生する現象のことなんだ。
というのがすっと頭の中に入ってきました。

前置きが長くなりましたが、ここから本題の紹介に入りたいと思います。

2009年のデザイントレンド（海外）

■アイコンのシンプル化

今まではMac OS のアイコンのようなリアルなものが主流だったが、
最近は、ピクトグラム化し、単一色の物が増えてきている。

[参考サイト]
MUTANT LABS
Eastern Ranges
Mochimedia

■見立てのデザイン

見立てのデザインとは、背景を風景などに見立てたデザインのこと。
現在は増加傾向にあるので、見立てのデザインにチャレンジするのであれば
今後1～2年くらいは大丈夫だろうということです。

このデザインが流行った背景には、ディスプレイが大きくなり、
背景として見せる領域が大きくなったことも関係しているのではないか、
ということでした。

[参考サイト]
BLOSSOMES VILLAGE RESORT
Hull Digital Live hd
Blue Acorn

■流行りの色は青

様々なサイトを見ていると、青を基調色としたサイトが多く、
TwitterやFacebookといったサイトの影響も大きいのでは
というお話が出ていました。

[参考サイト]
Mobile My Site
Oyster
Unuidesign

■テクスチャ

テクスチャに使用する素材は、ステッチ、皮、紙などを
使用したサイトが多く見られるようです。

[参考サイト]
Mark Hadley
Ulredesign
Daniel Marino

■巻き込みリボン

見出しのデザインなど、背景に巻き込み立体的に見せているサイトが多く
「W3C」のサイトもこのデザインを採用しており、
「今後のデザインの標準になっていくのでは！？」との
大胆予想も飛び出しました（笑）

[参考サイト]
CuisineSaine
Open Source Design Network
World Wide Web Consortium

■テキストはシステムのアンチエイリアス前提

海外のサイトはテキストはより大きくなり、
システムフォントを使用し、アンチエイリアスをかけた
サイトが多くなっているとのことでした。

ただし、アンチエイリアスで表示可能な
OSのシェアの普及が少ないのと、
日本語のシステムフォントで表示した場合も、
見栄えがあまり良くないので、日本での実用は
まだ難しそうとのことです。

[参考サイト]
BIG SPACESHIP
Boag World
Pw Studio

■フォームは大きく、見やすく、美しく

フォームのインプット部分は、大きくすることで、
ユーザーは使いやすく、見やすくなり、
またデザインする側も、フォームが大きくなったことで、
アイコンを表示させるなどより多彩なデザインが
出来るようになりました。

[参考サイト]
Tea Round
CULINAR
Google

■メインイメージはインタラクティブに

ペラペラとページがめくれるような動きのものが多くなっています。
また、これらはFlashで開発されているのではなく、jQueryのライブラリを
使って開発されています。

[参考サイト]
THINGS THAT ARE BROWN
Point Zero
ROBERT ALAN

■吹き出し表現

ビジュアルの要素として、吹き出しを使用しているサイトも
多く見られます。こちらもTwitterの影響もあるのではないかという
お話をされていました。

[参考サイト]
Catholic Chaplaincy
Evan Bowers Design
F91W

■小さな段組

小さなボックスで区切られたレイアウトです。
ボックスで区切られているので、意外と入る情報は少なく
コピー量を極力減らすなどバランスも必要になります。

[参考サイト]
D&DEPARTMENT PROJECT
CreativeDepart
Reform&Revolution

その他、グローバル企業や、上場企業のサイトデザイン（国内）の
傾向などの紹介も有りましたが、今回はデザイントレンドの紹介ということで、
あえてここでの紹介はやめておきます。

また、このようにデザインを分析するために原さんは
独自で開発した「Vaqum」というツールを使いサイトの
キャプチャを取り分析しているようです。

昨年キャプチャしたサイトの数は約19,000サイト！
サイトを見て、分析している量が全然違います。

改めて、いろんなサイトを見て分析することは
重要なことだなと思いました。

2010年のデザイントレンド大予想

■原さん予想
・アイコン付きフォームの普及
・グレーアウトにより操作対象の明確化
・リキッド型（100%幅）のセパレートを超える何か
・アプリケーション化したデザイン
・クリック領域の拡大、文字のノングラフィック化

■矢野さん予想
・微調整しやすいデザイン
・ABテストなど、運用しながら微調整を繰り返す公開方法
・ボックスを並べたレイアウト
・ボックスを並べたレイアウトは文字情報が削られ、文章が減少する
・スマートフォンなどの小さいサイズのディスプレーに最適化されたレイアウト

以上が、お二人の2010年のデザイントレンド予想になります。
曖昧なものもありますが、今年はどのようなトレンドが生まれるのか楽しみですね。

今回のセッションのスライドと音声は下記よりダウンロード出来ます。
CSS Nite in Ginza, Vol.43フォローアップ&メッセージ

• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 企業のTwitterページのデザインをまとめてみた
• デザインしやすい環境
• タイポグラフィの基礎 – 文字の扱いで印象が変わる -
• セマンティックXHTML、クロスブラウザ設計、CSSレイアウト中級講座

今まで知っていたけど、Firework CS4 で使わなかった機能
「Kuler」が便利そうなので、機能をまとめて紹介します。

Adobe Kuler とはプロジェクトのインスピレーションとなる
カラーテーマを作成できるアプリケーションです。
ビジュアルを作成するときに、カラーバリエーションを簡単に試すことができ、
また、Kulerコミュニティにある何千ものテーマを閲覧することも可能です。

KulerはCS4（Photoshop、Illustrator、InDesign、Fireworks、Flash）に
組み込まれていて、利用することができます。

また、上記のアプリケーションを持っていない方でも
Webアプリケーションとして無償で提供されています。

Kulerの詳細はこちら

Webアプリケーション版でもいいのですが、
弊社ではFireworksをよく利用するので、Fireworks版をご紹介します。

Kulerパネルの開き方

まずパネルを開くには、「ウインドウ」メニューから
「エクステンション」→「Kuler」を選ぶと、Kulerパネルが開きます。

カラーテーマをスウォッチに登録

検索フィールドに検索したいキーワードを入力します。
カラーテーマのタイトル／タグ／制作者などで組み合わせを探せます。

今回は「japanese」で検索しました。

和風の配色が検索されました。

上記のボタンで選択したカラーがスウォッチに登録されます。

スウォッチに追加されました。
これで選択したカラーテーマを利用することができます。

カラースキームでの利用

こちらはキーワードで組み合わせを探すのではなく
カラースキーム（色彩計画）のルールで色の組み合わせを
探すことができます。

今回は「類似色相」で探してみます。
基本カラーの黄色に合わせ似たような色の組み合わせを
作ってくれます。

逆に青系のカラーに基本カラーを持って行くと
青系の類似カラーで構成してくれます。

こちらのカラーの組み合わせもスウォッチに登録が可能です。

オリジナルのカラーテーマを作成する

なかなか気に入ったカラーテーマが見つからなかったり、
少しカラーテーマの配色を変更したい場合は、
オリジナルでカラーテーマを作ることができます。

「ルール」の部分を「カスタム」に変更します。

「カスタム」に変更すると、個別の色を自由に
変更できるようになります。

オリジナルで作成したカラーテーマはスウォッチに
登録できることはもちろん、「Kuler」のWebサイトにも
アップロードできます。

上記のボタンをクリックすると、
Webサイトが開きアップロードすることができます。
※WebサイトへのアップロードにはAdobe IDが必要です。

Kulerのサイト上にアップしておけば、
サイト上でも、Kulerのパネル上でも検索可能になります。

お気に入りのカラーテーマができたら是非アップロードしましょう。

RSSフィードの配信

KulerはRSSフィードを配信しているので、最も人気が高いテーマ、
最も評価が高いテーマ、および最も作成日付が新しいテーマの
RSSフィードをKulerのWebサイトを通じて購読できます。

このように、Kulerは配色に困ったときの
強い味方になってくれるアプリケーションです。

なかなかWebサイト全体の配色がまとまらないなど、
困ったときは、Kulerを立ち上げてみてはいかがでしょうか。

• 自動化のすすめ（Fireworks CS4 コマンドでより効率化！）
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• 自動化のすすめ（FireworksCS3バッチ処理編）
• 知ってるようで、実は知らない?！ Fireworksの小技

切り抜きツールではサイズを指定したり、
トリミングスケールを縦方向や横方向に
変形させることで任意のサイズで
画像を切り抜くことができます。

そんな切り抜きツールのちょっとした小技を紹介します。
弊社ではFireworksをよく利用するので、
今回はFireworks CS4 での紹介です。

マニュアルの画面キャプチャなど作成する際に、
指定のサイズで、トリミングすることがあるのですが、
その際に、トリミングスケールをドラッグして
指定のサイズにあわせる方法もあるのですが、
うまくサイズがあわなかったりと結構めんどくさい作業です。

その際は、知っている方も多いと思いますが、
プロパティに任意のサイズを入力すれば
トリミングスケールが指定したサイズに変形します。
サイズが決まっている際には便利です。

また「あと1pxだけ横に伸ばしたい」とか「縦を2px縮めたい」と言うときは
いつもサイズを入力していたのですが、微調整には便利なショートカットを
発見したので、ご紹介します。

知っている方は、そのまま流していただいて結構です。
その方法とは

[Shift]+[方向キー]

これだけです。例えば右に3px伸ばしたい場合は
[Shift]キーを押しながら[→]キーを3回押せばOKです。

その他の方向についても同じです。
サイズ入力が面倒の方や、微調整が必要な場合に
覚えておくと、以外に役立つかも知れません。

• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• Fireworksで立体的なアイコンを作る方法
• Fireworksで立体的なアイコンを7分で作る方法
• CSS Nite LP, Disk 14にいってきました!

「福助」などの企業が公式アカウントを持っていたり、
「朝日新聞社」や「CNET Japan」などはTwitterを通して
情報を発信しています。

そうした中、Twitterのビジネス活用法などは
よく記事で見かけるのですが、企業がTwitterを活用するにあたり、
どのようなデザインをしているのか、気になったのでまとめてみました。

背景デザインに画像を活用

Yahoo！JAPAN広報

Yahoo!のトップページを背景に使用しています。
わかりやすいですね。

Google

Googleの色のオブジェクトを背景に使用しています。
モチーフはただの球体でも色を工夫するとGoogleのページになりますね。

福助株式会社

Twitterのシンボルである鳥をモチーフにしたイラストを使用。
Twitterとのコラボレーション感が出ています。

Poken Japan

商品であるPokenが背景いっぱいにデザインされ、
PokenのTwitterページというのがすぐにわかります。

CocaColaPark

コカコーラの赤に「Park」をモチーフにしたイラストが楽しげです。

カブドットコム証券

躍動感あふれる株価の画像が背景いっぱいに並んでいます。

背景デザインにロゴマークを活用

wordpress

ロゴマークを大胆に背景のモチーフにしています。
ロゴマークのこういった使い方もありですね。

Opera Software Japan

Operaはロゴマークをタイル状に配置したデザインになっています。
ロゴマークが印象づけられます。

サイゾー

シンプルにロゴのみを配置。
ロゴが90度回転しているのは、ディスプレイが小さくても
ロゴが隠れないよう配慮されているからでしょうね。

デザイン全体にコーポレートカラーを使用

Skype

スカイプの色と言えばこの青色です！

TSUTAYA

ひと目でTSUTAYAと分かる配色。上手い配色ですね。

HMVジャパン

コチラもすぐにHMVとわかる配色です。

キャラクター

TBSチャンネル

手書き風のイラストで、キャラクターのブーブとも
相性バッチリです。

ガチャピン

企業では無いですがキャラクターということで・・・
かわいらしいイラストがイイ感じです。

フォローしてしまったら、なかなか個別のページを
見に行くことは無いですが、たまにはページを覗いて、
どんなデザインをしているか見るのも面白いですね。

それぞれの企業の特長や色を活かして上手くデザインされてます。
他にも沢山の企業が活用していますので、いろいろなデザインを
探してみるのも良いかも知れません。

もちろんEC studio でも製品の最新情報の配信など
Twitterを活用しているので、よろしければフォローを
よろしくお願いします！

Web Analyst をTwitterでフォロー

• Twitterフォローの第一歩！つぶやくweb業界の人々まとめ
• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• 簡単にCSS3を使おう！お役立ちCSS3ジェネレーターまとめ
• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips

EC studio のデザイン部では、Illustrator CS2 を
使っているのですが、データの受け渡し上、CS以前の
バージョンで保存しなければならない場合があります。

その際に困ってしまうのが、CS以前のバージョンしたデータを
編集しようと思うと、テキストがバラバラに分割されてしまう
場合があります。

今回は、テキストがバラバラになった際にラクに
連結する方法を見つけたので、メモしておきます。

これは、IllustratorのCS以降のバージョンと
CS以前のバージョンではテキストの扱いが違う
ということが大きな原因のようです。

連結されているテキスト

バラバラのテキスト

その際にバラバラに分割されたテキストを以下の
方法で簡単に連結することが可能です。

テキスト連結方法

（1）連結したいテキストを選択
（2）コピー(Ctrl + C)
（3）文字ツールで任意の場所にペースト(Ctrl + V)

これだけで、簡単にバラバラになったテキストが連結できます。
面倒だった作業も少しラクになります。

• 自動化のすすめ（イラストレーター編）
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips

全ては紹介しきれないですが、いくつかピックアップして紹介したいと思います。

Google マップのアドバイザーにガチャピンが就任！？

どうやらあの人気キャラクター、ガチャピンが
Google マップのアドバイザーに就任したようです。
特設ページでは、ムックと参加したGoogleの会議の様子や
Google マップの使い方を説明してくれています。

ガチャピンがストリートビューのアイコンに！
これはカワイイ！やっぱりガチャピンはアクティブです。

Googleの検索結果に川柳が表示（Google 川柳）

検索したキーワードに関連した川柳が検索結果に表示されるようになりました。

例えば「健康」というキーワードで検索すると
「花を生け　脳の活性　健康を」という川柳が表示されます。
全てのキーワードに対応しているわけではないですが、
どんな川柳が表示されるか探してみるのも楽しいかも知れません。

動画再生は新時代に（YouTube）

オンライン動画の再生環境を改善する様々な提案が出されています。
斬新なレイアウトが沢山紹介されてます！

やる夫がMovable Type 4にアップグレードした理由（six apart）

自宅警備員のやる夫さんは、このたび意を決して
Movable Type 4 にアップグレードしたようです。

面白法人カヤックさんの面白ネタ

カヤックさん発のキャラクター「コンチ」が
全世界をジャックしたそうです。
ちょっと、お下品なキャラクターですが、愛嬌ありますね。

こちらは定額給付金の代わりに
カヤックさんと明和電機さんが共同で開発した
「YUREX」を支給しますというネタ。

4月1日に家入一真氏が面白ラボBM11の
正式メンバーに加入決定だそうです！

それにしても、どれもクオリティが高い！！

ロリポップが業務内容を飲食業に変更

その家入一真氏が先日CCOに就任された
株式会社 paperboy&co. が提供しているレンタルサーバーサービス、
「ロリポップ」がカレー屋「ロリ亭」に業務内容を変更！！

「ヘテムル」はリニューアルして、
大変なことになっちゃってます（笑）

はてなでは定額給付スターが始まる

本日限定で、はてなユーザーを対象に
はてなスターの「カラースター」を給付してくれるそうです。

給付されたカラースターは、「自らのブログに煌々と輝かせるもよし、
気になるあの子のエントリに告白代わりに貼り付けてもよし」だそうです＾＾

エヴァンゲリオン実写ドラマ化計画

エヴァンゲリオンとYahoo!JAPANのコラボレーション企画。
実写ドラマ化計画のスケジュールまで記載されています。

トレンドGyaOがGIGAZINEに買収

「トレンドGyaO買収」のニュースの続報が動画で発表されたとのことです。

TSUTAYA online上に記載されている「嘘情報」の個数は？

TSUTAYA online上に記載されている「嘘情報」の掲載個数を
当てると、豪華賞品が当たるそうです。

豪華賞品は、本当の情報なのか！？

新生livedoor「史上最低の会社にします」

ライブドアへの侵入者を撃退したことをきっかけに、
社長の出澤氏から経営権が移ったようです。

「トロピック・サンダー　史上最低の作戦」と
上手くかけていますね。

Impresso Watch、猫専門ニュースサイト「猫Watch」を創刊

Impresso Watchが猫に役立つかもしれない情報を配信するメディア
「猫Watch」と猫Watchの豪華別冊付録として、フェレットとフェレットに
仕える人々のための日本最大級の情報サイト「いたちWatch」を創刊したとのことです。

イソプレス、捏造サイト「窓の社（まどのやしろ）eco」をリニューアル公開（窓の杜）

上部のバナーに堂々と「USO」の文字が！
右側の写真も良い感じです。

オバマ米大統領、インターリンクでドメイン.obamaを申請！

オバマ米大統領がインターリンクで
ドメイン.obamaを申請したことが明らかに！？

アパマンショップのこだわり物件

「父母付き物件」や「犬・猫専用物件」など
ユニークな物件が揃っています。

個人的には「キャッスル物件」が気になります（笑）

嘘みたいな邦題特集 (タワーレコード)

エイプリルフールにちなんで「嘘みたいな邦題」を特集しています。
ほんとに「嘘」みたいな邦題ばかりです。

10万本のソフトを一括で落とせるダウンローダ登場（Vector）

10万本のソフトを一括で落とせるダウンローダを新開発？
リリース記念で10万本を無料でGETできるそうです。

最速公開！ オバマ生アーカイブ！ニコニコ動画

高速プレイヤー試験運用でオバマ米大統領の
ニコニコ生放送を見ることができます。

シーサー映画株式会社、映画『22世紀中年』の制作を発表

Seesaaが映画の制作と配給ならびにウェブプロモーションを
一貫して行う新会社「シーサー映画株式会社」を設立したそうです。

そして「22世紀中年」の制作を発表。
このあとすぐに制作中止のお知らせも出ていました（笑）

eiga.comのピックアップ映画がネタに

ピックアップ映画や新着情報が全てネタになっています。
ネタと言うより、これはダジャレですね。

非モテSNSの管理人えがちゃんに・・・

非モテの神・えがちゃんに彼女ができたそうです。
皆さん、とりあえず頑張って生きてくださいとのことです。

こうやって見ると、エイプリルフールに便乗したり、
エイプリルフールと関係あるのかわからないような企画まで、
様々なネタで、ブランディングやプロモーションを行っていますね。

沢山おもしろい発想があり、見ているだけで勉強になります。

まだまだ、他にもエイプリルフール限定サイトはありますので、
いろいろ探してみてはどうでしょう。

• デザインのひらめき（フィードを公開！）
• その角丸に意味はあるの？
• 「Web Directions East 2008」にいってきました
• EC studio 入社2日目。端山です。
• EC studio の企画デザイン

普段から私たちは沢山の文字を目にする機会があります。
文字は身の回りに溢れており、私たちに様々な情報や
印象を与えてくれます。

文字はただ読み物として情報を伝えるだけではなく、
文字をデザインに落とし込むことで様々な印象を
与えることになります。そのため、デザインをする上で
文字の扱は非常に気をつけなければいけません。

そこで今回は、文字の扱い方で気をつけていることの
基本的な部分をまとめてみようと思います。

フォントの統一

フォントは和文フォントの中に「明朝体」「ゴシック体」、
欧文フォントの中にも「セリフ体」「サンセリフ体」という種類があり、
その中にも様々なフォントがあり、選ぶのに迷ってしまうほどです。

ただし、いろんな種類のフォントがあるからといって、異なるフォントを
多数使ってしまうと、イメージに違和感が出てしまいます。
フォントは作るビジュアルの雰囲気にあわせ統一すると、
違和感も生じず信頼感のあるイメージに仕上がります。

和欧混合のフォントの組み合わせ

デザインをする上でタイトルやキャッチコピーを作る場合に、
日本語と英数字が混ざる場合があります。

例えば「Webサイト」という言葉でも 「Web」「サイト」と和欧混合になっています。
和文フォントだけでも入力できますが、 英数字は欧文フォントの方がバランスの
とれた文字になっているので、英数字の部分は「欧文フォント」 日本語の部分は
「和文フォント」を混ぜて使うとバランスのとれたものになります。

和欧混合でフォントを使う場合は「明朝体とセリフ系」「ゴシック体とサンセリフ系」
という組み合わせで使うと非常にバランスが良いです。
ただし、和文フォントの方が大きく見えるので、フォントの高さや太さなど
欧文フォントのサイズ調整が必要です。

※フォントの高さや太さの調整が必要

行間は140％～150％で設定する

Webサイトは読み物系のコンテンツも多く存在します。
読み物系のコンテンツであれば必然的に文章が多くなりますが、
そこで気をつけたいのが行間です。

行間が狭いと詰まっているように感じ、読みにくくなり
ユーザーの離脱の原因にもなってしまいます。
狭くなりすぎないよう行間に気をつけましょう。

また、横画面いっぱいに伸びている文章も読みにくいので、
適度な箇所での改行も必要です。

アンカーテキストはわかりやすい色を指定する

アンカーテキストの色はスタイルシートを設定すれば
色を変更することができますが、 リンクだとわかる色にしましょう。

赤などに設定してしまうとリンクなのか、強調された文章なのか
判別できなくなってしまいます。 アンカーテキストの色は通常、
青色で表示され文字の下に線が表示され、訪問後は紫で表示されます。

文字のジャンプ率

文字のジャンプ率とは、文字の大きさの大小比率のことです。
大小比率が大きいほどジャンプ率は「高く」なり、
大小比率が小さいほどジャンプ率は「低く」なります。

大きなジャンプ率でデザインする場合は、
元気、躍動的、目立つ、楽しい、広告的、飛ばし見しやすい、などの
印象を与えます。新聞、週刊誌、中吊り広告、ファッション誌などで
ジャンプ率の高いデザインのものがよく見られます。

低いジャンプ率でデザインする場合、は
上品、気品がある、説得力、知性的、堅い、目立たない、などの
印象を与えます。教育関連書、週刊誌などでジャンプ率の低い
デザインのものがよく見られます。

見出しをつける

見出しの目的は、紙面・画面上にリズムを作り、ユーザーの視線を引きつける
という目的があります。 ただしユーザーの視線を引きつけるからと言って、
ただ単純に目立つものにすればいいと言うことではありません。

見出しをデザインする際、上記で述べた「フォントの組み合わせ」や
「ジャンプ率」なども気をつけることが必要ですが、デザイナーが
一番気を付けなければならないことは、過度なグラフィックを用いないことです。

あくまで主役は本文ですので、過度なグラフィックを用い
「本文を読んでもらえない」ということが無いようにしましょう。

また、見出しの内容も本文で何が書いてあるのか完結に
わかるものが好ましく、本文の内容を反映した具体的な内容や、
ユーザーに記事を読みたいと思わせる文章にしましょう。

例）
×　→　パソコン機能
○　→　5年間使える充実のスペック

文字の扱いでデザインの印象は変わってしまいます。
サイトの雰囲気にあったフォントを選び、統一させることで、
ユーザーに狙い通りの印象を与えることも可能です。

またWebサイトは読み物なので、ユーザーの事を考え、
読みやすい「行間」「文字量」「大きさ」をしっかり考慮することも大切です。

• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 企業のTwitterページのデザインをまとめてみた
• フォント選びのコツ
• デザインしやすい環境
• 【実例】デザイン初心者が学んだちょっとしたコツで変わる！バナーの小技

サイトの制作者や、サイトの運営者の方なら、
購入フォームや登録フォームって、みなさん気にされますよね。

商品の購入や、お問い合わせ、会員登録など、
サイトが目標としていることをゴールとすれば、
そのゴールにどうすればスムーズに到達するかを考えなければなりません。

その中でも、難しいのが購入フォームや登録フォーム。

購入フォームまで来たけど、入力項目の数が多すぎるのでフォームを
見た瞬間にそのサイトから離れたり、なんだかわからないけど、
エラーばかり出るので途中で購入を諦めたりと、
フォームにたどり着くまでは欲しいものがありテンションが上がってたけど、
フォームに来たとたんユーザーのテンションが下がったのでは
ゴールにたどり着けません。

いかにユーザーのテンションを下げずにゴールをさせるかが重要になり、
そのためにはユーザーに不安感を与えたり、ストレスを与えたりしてはいけません。

そこで今回は、ユーザーに不安感や与えたり、ストレスを与えないようにする
フォームにおいてのポイントをまとめてみました。

フォームに安心感や信頼感を与えるポイント

■入力項目を極力減らす
文字を入力したり、選択項目を選ぶ作業はユーザーにとって非常に面倒な作業です。
特に、PC初心者などはキーボードでの入力を嫌がる傾向があります。
しかし、企業側は反対に多くの顧客情報をほしがり、
ユーザーと企業の間に矛盾が生じてしまいます。
入力項目が増えればその分、ユーザーのテンションも下がり離脱が増えますので、
本当に必要な情報を吟味し絞り込む作業が必要が重要です。

■必要なもの以外は必須にしない
「できれば入力して欲しい」というものは必須にする必要はありません。
例えば「どうしてこの商品を知ったか？」などは、企業側が知りたい情報であり、
ユーザーが商品を購入したり、サービスを利用するには必要の無い情報です。

後から営業ができるからといって、余分なものまで必須にしないで、
その情報がないとサービスが利用できないという最低限の情報を選んで
必須にすると良いでしょう。

■いきなり入力させない
購入ページなどで、いきなりユーザーにフォームへ
入力させようとすると、ユーザーは身構えてしまいます。

フォームの上部、フォームへリンクするページなどに

・会員登録をすると何ができるのか？
・ユーザーにとってのメリットはなんなのか？
・有料なのか無料なのか？

など、購入や登録をすることのメリットなどを記載すると、
不安感の軽減、目的意識の向上、ゴールの明確化につながります。

■プライバシーポリシー（個人情報保護指針）
個人情報の漏洩を心配している消費者が多い。
法律上でWebサイトで個人情報を集めるページにはプライバシーポリシーへのリンクを載せないといけない。
日本企業は多くの場合そのリンクをフッターの目立たないところに配置している。
これでは、お客様の不安を取り除く役割を果たせていない。

個人情報を気にするのは個人情報を入力する時。
フォームの最初に設置するのがお客様の信頼を得るには最適。

■暗号化通信（SSL）のページにはその旨を明示する
鍵マークをつけたり、暗号化通信であることがわかる文章をつけるなどして、
個人情報を登録するユーザーに少しでも安心感をもってもらう。

購入時や登録時のミスを減らすポイント

■メールアドレスの入力ミス
メールアドレスは、英数字で細かく入力ミスの多い箇所になります。
そのため、メールアドレスを2回入力させ、入力ミスが無いか確認しますが、
メールアドレスを２回入力するのはどうせコピペされるし、
ユーザビリティ的にもよくないという意見もあります。

しかし、2回入力した方が入力ミスが減るという統計も
株式会社ビービットさんのユーザビリティテストで
とれているそうです。

また、メールアドレスやユーザーIDをコピー＆ペーストで入力した時に、
末尾にスペースが入ってしまってエラーになる場合があります。
これは先頭と末尾のスペースをシステム側で削除できるようにすると、
ミスも減り、親切かと思います。

■全角・半角英数字
メールアドレスが全角で入力された場合「半角英数字で入力してください」と
エラーが表示されますが、PC初心者の方はここで心が折れる場合が多いです。

サーバー側やJavascript自動変換してあげた方が親切です。

■ログインIDはメールアドレスで
サイト独自IDよりも普段使うメールアドレスの方が
覚えやすく記憶忘れ防止になります。
また、サイトの独自IDを無くすことでフォームの
入力項目も減り、一石二鳥です。

ユーザビリティの向上のポイント

■ボタン
フォームで一番重要なボタンは「進む」ボタンです。
サポートしたいのはクリアをする人ではなく次へ進む人ですので
クリアボタンはいらないかもしれません。
どうしてもクリアボタンなどが必要な場合は左下に目立たない形で設置するのが好ましいです。
※Webサイトの閲覧は通常左→右の順に行われるため。

また、次へスムーズに進んでもらうためには「進む」ボタンは大きく、
目立つ色にし、クリアボタンから離しはっきりわかるようにします。

そして、ボタンのテキストは「クリックしたらどうなるか」が分かるように
「購入」や「登録」といった単語だけにしないで、
「この商品を購入する」「この内容で登録する」のように
「そのボタンをクリックすることで何が起こるか」が
伝わりやすいような文章を設定するとユーザーもボタンがクリックしやすくなります。

■画面遷移
３画面以上の場合、現在位置とステップをナビゲーションで見せると、
フォームの一連の処理でどれだけのステップがあるかが
ユーザーが見た際に明確になります。
また現在、自分のいるページはステップのどの部分かをもわかりやすくなります。

■チェックボックス/ラジオボタン
チェックボックスやラジオボタンはfieldset,label要素でくくると、
チェックボックスやラジオボタン部分だけでなく、
テキスト部分をクリックしても選択されるようになります。
そうすることで、ユーザーは選択しやすくなります。

■生年月日
生年月日はセレクトボックスで選択させがちですが、
セレクトボックスにすると、非常に長くなり、選択が困難になります。
テキスト入力にすると4桁の入力で済むため、テキスト入力の方が早い場合もあります。

ただし、シニア向けのサイトの場合はユーザー層の年齢が高いために
入力が苦手なユーザーが多く、セレクトボックスの方が良い場合もあります。
その際はプルダウンの初期値をユーザーの平均値にあわせておけば選択が簡単になります。
また年の表示に関しても「1981（昭和56）」とすると非常にわかりやすくなります。

■入力例
例えば郵便番号の入力などの入力例では、
「－（ハイフン）」がいるのか、いらないのかを入力例で
わかりやすくする必要があります。

また、ユーザーが情報を入力している時は、入力欄に注目しています。
そのため入力例を入力欄の遠くに書いては意味がありません。
入力例は入力欄のすぐ近く（横や下）に表示しましょう。

■エラー画面
ページの上部にエラーメッセージが表示される場合、
ユーザーは実際に入力欄に目を向ける傾向があります。
ページ上部にエラーを出すと、気づかない場合が多かったり、
エラーを繰り返す場合があります。

フィールドのラベルに色をつけるだけでエラー箇所を示す場合は、
色覚障害のユーザーがエラー箇所を把握できませんので、
アクセシビリティ上の問題が生じてしまいます。

良い例としては、エラーだとわかる印とともに、
どう対処すればエラーから脱出できるのかを具体的に
記述することが重要です。

■郵便番号検索を付ける
あると無いとではかなり利便性が変わってきます。
あると非常に便利なので、設置する方が好ましいです。

上記のようにに長々とまとめましたが、
どれを改善すれば必ず成約数が上がるというものはありません。
しかし、ユーザーのテンションを下げず、離脱を減らすべき注意点が数多くあります。

また、サービスや製品により、狙うターゲット層も違い、
ターゲットにあわせたフォームが必要になりますので、
繰り返し仮説を立て、検証・改善しサイトにあったフォームを作ることが重要です。

• 成功するホームページを作る8つのポイント
• 【実例】デザイン初心者が学んだちょっとしたコツで変わる！バナーの小技