EC studio デザインブログ » ニュース

今から作るiFrame対応Facebookページの作り方 Part.1

新免孝紀 — Thu, 30 Jun 2011 03:49:34 +0000

最近は、企業や製品・サービスなどで
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ページのデザインまでを説明しました。
次回は、デザインしたページの実装方法について説明します。

お楽しみに！

関連した記事：

効率的にサクサクスライス！Fireworks CS5スライス書き出しTips

赤堀　巴絵 — Tue, 14 Sep 2010 02:48:14 +0000

Fireworks CS5 でのスライス書き出しTipsをまとめてみました。
スライスするときによく使う、使えそうな小技をご紹介します。

スライスの作成

長方形スライスの作成

オブジェクトを選択した状態で、
右クリックから「長方形スライスを挿入」を選択すると、
選択した画像を覆うスライスオブジェクトを作成できます。

複数オブジェクトを選択した場合は選択したすべてのオブジェクトの
画像を覆うスライスオブジェクトを作成できます。

多角形スライスの作成

オブジェクトを選択した状態で、
右クリックから「多角形スライスを挿入」を選択すると、
オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。

イメージマップを設定するときに便利な書き出し方です。

※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、
右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
が表示されません。
「ツール」の「スライスツール」からスライスを挿入してください。

効率化ポイント

「長方形スライスを挿入」はよく使う機能なので、
ショートカットキーを覚えるのをオススメします。
複雑な複数オブジェクトをスライスしていくのに非常に便利です。

長方形スライスを挿入
Alt + Shift + U

プレビュー方法

「ファイル」の「画像プレビュー」

選択した画像形式での画像プレビューが確認できます。

「オプション」タブの「ファイルサイズの最適化」という機能は
納品などでファイルサイズが決まっている場合にターゲットサイズを指定すると、
指定サイズ以下になるようにFireworks側で調整してくれる機能です。

他にも「ファイル」タブの「拡大・縮小」、「書き出し領域」で
ファイルのサイズや範囲を変更することができます。

このプレビュー方法はひとつのオブジェクトを書き出すときに向いています。
（例えば、バナーなど）

ワークスペース上のプレビュー

プレビュー、2アップ、4アップを選択することで
選択した画像形式での画像プレビューが確認できます。

ドキュメント全体を指定していると全体、
選択したスライスを指定してると選択したスライスの最適化をプレビューできます。

その画像にあった書き出し形式がわからない時は、
4アップで各画像形式を比べるのが非常に便利です。

このプレビュー方法は複数のオブジェクトを書き出すときに向いています。
（例えば、ウェブページなど）

効率化ポイント

よく使う画像形式をプリセットとして保存すると、使いやすくなります。

最適化メニューの1番右側のオプションから
「書き出し設定を保存」を選択して、名前をつけて保存すると
現状選択されていた最適化の形式がプリセットとして保存されます。

スライス書き出し方法

選択したスライスオブジェクトの書き出し

「ファイル」から「書き出し」を選択すると、
画像は書き出しできますが、その場合すべての画像が書き出されるので、
不要なものも書き出されることがあります。

そこでオススメする書き出し方は
書き出したいスライスオブジェクトを選択した状態で、
右クリックして「選択したスライスの書き出し」を選んで書き出す方法です。

Shiftを押しながら選択すると複数のスライスオブジェクトを
簡単に書き出すことができます。

シンボルのステートの書き出し

ボタンなどシンボル内のステートを書き出す場合は、
右クリックで「選択したスライスの書き出し」を選択後、
下のプロパティの「現在のステートのみ」のチェックをはずしてください。

※CS5から書き出しファイルの名の名前の付け方が変わりました。
今まではプロパティのスライス名にいれた名前が書き出したときに
ファイル名として書き出されていましたが、CS5はデフォルトで
つけた名前の後ろに「_s1」「_s2」という文字列が挿入されます。

この設定を解除したい場合は「HTMLの設定」の「ドキュメントの詳細」の
ステート名をカスタムに選択後、編集をクリックしてください。

その後、自分が設定したいステート名に変更してください。

効率化ポイント

スライスしたい範囲が重なった場合は
切り出したいスライスの重ね順を最前面に表示させて書き出ししましょう。

書き出したいスライスが背面にある場合は
選択範囲が分割して切り出されてしまうので注意しましょう。

関連した記事：

Firefox 3.5.7が起動しない問題が発生中。（YSlowが原因かも？）

谷拓樹 — Wed, 27 Jan 2010 02:15:57 +0000

Twitterで「Firefoxが起動しない！頻繁にクラッシュする」というつぶやきが増えてきています。原因はパフォーマンス計測・検証をするアドオン「Y!Slow」の2.0.5というバージョンが原因かもしれません。

対処法

下記のいずれかの方法で対処することができます。

Firefoxをセーフモードで起動してY!Slowをアンインストールする

「Firefox（セーフモード）」でFirefoxを起動し、Y!Slowをアンインストールしてください。その後、通常のモードでFirefoxを起動すればOKのようです。

Firefoxのセーフモードが分からない方は、下記の方法を参照してください。
セーフモード（Firefox サポート）

フォクすけの Firefox 情報局 – Firefox の調子がおかしくなってしまった時は？（セーフモードの使い方）
http://foxkeh.jp/howto/1140/

新しいプロファイルを作成する

下記の手順でプロファイルマネージャーを起動し、新しいプロファイルを作成してください。
こちらは壊れていないプロファイルで起動するので、初期化された状態になります。こちらの方法よりは、前者のセーフモードでY!Slowをアンインストールする方が賢明かもしれません。

プロファイルの管理（Firefox サポート）

新しいバージョン、Y!Slow 2.0.6 では大丈夫な様子

2010年1月26日現在、この問題が修正されたと思われるバージョンが出ていました。
今のところ僕のWIndows7環境では問題ないようです。

関連した記事：

困った時の強い味方！Fireworks「Kuler」の使い方

新免孝紀 — Tue, 17 Nov 2009 14:13:06 +0000

今まで知っていたけど、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を立ち上げてみてはいかがでしょうか。

関連した記事：

HTML5、きちんと。CSS Nite 4周年記念イベントにいってきました

谷拓樹 — Wed, 11 Nov 2009 09:43:49 +0000

イベントのテーマはHTML5。最近になってまた熱があがってきましたね。今回のこのイベントでは矢倉眞隆さんが「HTML5、きちんと。」と基調講演的な内容からはじまり、実践するところまでをしっかりと各スピーカーさんからお話を聞けたので非常に充実していました。

HTML5、きちんと。

HTML5というと、多くのマークアップエンジニア、コーダーの方々が「新しい要素が増えた！」というところに目が向いてしまっているんじゃないかと思うのですが、こちらのセッションではなぜHTML5なのか、その経緯・背景は何だったのかをわかりやすく解説されていました。
今多くのサイトで採用されているXHTMLは、HTMLからより拡張性・汎用性の高いXMLへの移行過程で生まれたわけなのですが、実際にはXMLとしては普及せず、XHTMLという形での展開は2009年で終了となります。

こうした背景でブラウザベンダーたちがW3Cの勧告するXHTMLとは別の形で、GmailのようなWebアプリケーションの機能を実現できるHTMLの拡張を望み、W3Cの管理外でWHATWGという団体を設立しました。
このベンダー発信のHTML5は多くのWeb開発者からも支持を受けて開発が進み、2007年にはW3CにもHTML WGが設けられて共同で開発を進めていくことになりました。
（この流れで、XHTMLではなくHTML5の開発に集中するために、前述の通りXHTMLは本年で終了となったのです。またXHTMLの最終形である2.0は既存のHTMLとの互換性を持っていなかったことも終了となった要因かもしれません、という話です。）

HTML5は前向きな姿勢

と、いうような形でHTML5が登場してきた流れがあるのですが、素晴らしいと思うところは、これまで各社で同時実装をすることはあるものの、基本的にW3Cの勧告などを待っていたベンダーからの発信により、それにWeb開発者も続いてHTML5の実現に協力して進んでいく流れというのは、Webを進化させていく上では良い流れを感じました。

実際HTML5はまだまだ策定段階で、勧告候補（実務的に使ってもいいかなぁ、といえるレベル）となるのは早くても2012年、というような話ですから、今だからこそ色々僕たちが提案を投げていけば、それが自分たちにとっても良いHTMLを作ることになるんじゃないでしょうか。
もちろんユーザーという存在も忘れずに。

あとHTML5に付随して、話の中にもありましたが別にXHTMLが「無くなる」というわけではないです。今XHTML1.0とか1.1で書いて動いているものはそのままでもいいです。それにHTML5はXHTML的な書き方もできるので、たとえばbr要素ようなから要素に対して、スラッシュで閉じても問題ないし、閉じなくても問題ないです。
またHTML4.01のサイトももちろんそれでサイトが機能していればそれで問題ないと思います。

とはいえ、間違いなくブラウザベンダーの方向はHTML5には向いているので、今から色々挑戦するのは早くないです。個人サイトでも何でもよいので、手を動かしてみることが、理解を深めるのに一番良い方法と思います。

もうちょいコード的な話を補足

HTML5はとしてマークアップをするにはDOCTYPEとかどうすればいいのかというと下記のDOCTYPEでOKです。

また下記も省略することができます。

HTML5は下記でOK。

新しい要素を使えばそれがHTML5というわけでは無いということですね。
実際の例として、UX LONDONというサイトがあります。

このサイトのソースコードを見ればわかりますが、先ほどの記述などを除いては特別なことはしていません。これでもHTML5です。でもこのサイトから学べるポイントとして、実際に

や

といったHTML5の新要素は使っていないものの、これらの要素名をclassにして利用しています。

これだとHTMLの新要素に対応していないブラウザであっても閲覧に支障はありません。まずはこのように無理して新要素を使うのではなく、divにclassを使うような形で、HTML5で定義されているセクション/アウトラインといった概念を実践してみるのはどうでしょうか。

と、そういえばここまでにセクションやアウトラインといった話は省いてしまいましたが、これらについては今回のイベントの3人目、小山田さんのセッションを振り返りながら改めて記事にしたいと思います。

今回の記事はこのあたりにして、次回は２人目のスピーカー、山田敬美さんのセッションを元に色々書きたいとおもいます。

※HTML5への移行にあたっての参考に、矢倉さんの翻訳したページをどうぞ
HTML 5 ― HTML 4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

関連した記事：

デザインブログに顔アイコンが追加されました

赤堀　巴絵 — Wed, 11 Mar 2009 10:19:22 +0000

今まで投稿者が表示されなかったため、
投稿者誰なのかわかりにくいという要望がありました。
そのため今回デザインブログのサイトバーと記事タイトル部分に
顔アイコンを追加してみました。

人それぞれの得意分野の記事をこれから投稿していく予定ですので、
簡単に顔アイコンを紹介していきたいと思います。

グリーンアイコンは谷拓樹
コーディング・CSS、またサイト監修などもおこなっています。
ライフハックが得意で新しいツールの導入の仕方などを発見するのが好きです。
谷拓樹の記事はこちら

グレーアイコンは新免孝紀
デザイン、Webだけでなく紙のデザインも手がけています。
フォントやレイアウトに強いこだわりをもっています。
新免孝紀の記事はこちら

ピンクアイコンは端山佳枝
デザイン、様々な新規サイトを手がけています。
Fireworksの機能を使いこなし、イラストなども描いてくれます。
端山佳枝の記事はこちら

ブルーアイコンは西口誠二
Flash、ほとんどのFlashを手がけています。
Flashだけでなくデザイン、コーディングもこなしています。
西口誠二の記事はこちら

オレンジアイコンは赤堀巴絵
コーディング、様々なサイトのコーディングをおこなっています。
コーディングに便利な正規表現やマクロなどを探すのが好きです。
赤堀巴絵の記事はこちら

パープルアイコンは植月由紀子
コーディング、デザインをおこなっています。
まだ記事はないですが、これからの記事に期待です。

また技術ブログにも近日中公開予定ですので、
これからもデザインブログ・技術ブログをよろしくお願いいたします。

デザイン部記事のリクエストはこちら

関連した記事：

タイポグラフィの基礎 – 文字の扱いで印象が変わる -

新免孝紀 — Mon, 02 Feb 2009 10:36:36 +0000

こんにちは。新免です。

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

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

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

フォントの統一

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文字のジャンプ率

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

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

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

見出しをつける

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

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

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

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

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

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

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

関連した記事：

「Web Directions East 2008」にいってきました

谷拓樹 — Sun, 16 Nov 2008 16:16:39 +0000

11月7～9日に東京で開催された『ユーザーに優しいウェブサイトの提供』をコンセプトに開催されたWeb Direction Eastにいってきました。
アジアでは初開催となりましたが、そろったスピーカー陣は非常に豪華でした。
講演内容の詳細については、各プレスのサイトにてレポートがありますので、今回は感想ということで感じたことなどをまとめてみます。

『ブラウザの多様化でみる最良のウェブ開発』

CSSの開発に大きく関わり、Reset.cssなど開発者の人では知らない人がいないであろうツールやテクニックを考案したエリック･メイヤーによるお話。
今回のカンファレンスではそういったCSS中心の話ではなく、Google Chromeというウェブブラウザの登場の話からはじまり、これからのウェブ開発、ウェブがどうあるべきかという話でした。

HTML5、とくにCanvasの可能性についての話から、今の段階でもCanvasを採用できる術としていくつかのJavascriptライブラリが紹介されました。

結局こういった表現を拡大できるものはブラウザがネイティブで実装されていなければ、Web開発者の人たちはなかなか採用できないし、Javascriptライブラリを採用しても重くて使えないという思いがあります。しかしSafariや次期firefoxなどはそのJavascriptエンジンを搭載するということで、紹介されたJavascriptライブラリを気兼ねなく採用して表現の可能性が広がると感じました。

また今後大きく期待されるのはモバイル/モバイルブラウザの発展で、本当の意味でのWebアクセシビリティ＝誰でもアクセスできるウェブが実現であるということでした。

この点について、氏は冒頭で、Google Chromeが Webkit（Safariに採用されているレンダリングエンジン）を採用した点というのは、WebkitがiPhoneというモバイルに採用されているからだと述べていました。

GoogleのAndroid + Webkit 、また何かあたらしい動きがあるかもしれませんね。

『あらゆるデバイスに対応できるウェブデザインの考え方』

スピーカーのダン・セダーホルム氏はMTV.comなどの制作実績もあるSimplebitsのデザイナーです。

今回はhttp://icedorhot.com/というサイトをモデルにして、Webデザインにおける「A」から「Z」（実際には「U」まで）までのテクニックやノウハウの紹介です。

最近の制作トレンドとしてあるclearfixの活用や、jQueryの採用、グリッドを意識したレイアウトから、CSS3を採用したテクニックなどのサンプルが紹介されており、どれもすぐに使えそうなものばかりだと感じました。

しかし実際にはIE6といった今や古いバージョンだけどユーザーが多いブラウザに対しては反映されないものも多いわけなのですが、重要なのは「Progressive Enhancement」という考え方であると感じたセッションでした。

どのブラウザでもWebページの見た目が一緒であるという必要はなく、情報を損なわれない範囲で、最新のブラウザに対しては最新の機能を提供するというのが可能性を広げるのに重要なことです。
この取り組みについては、弊社でも直ぐに取り入れていきたいと思います。

『使い勝手と見やすさを両立するAjaxを使ったサイト設計』

ジェレミー・キース氏は後に出てくるアンディ・バド氏と同じイギリスのコンサルティング会社「Clearleft」に所属するWeb開発者です。
Ajaxのエキスパートとして標準化を進めている氏は、あらためてAjaxは「サーバーとコミュニケーションし，新たな情報をユーザーに提供しつつ，ページがリフレッシュされないこと」という再定義をし、何かしたら格好の良いエフェクトをすることなどがAjaxではないということからセッションがはじまりました。

このセッションにおいても「Progressive enhancement」という考え方があり、Javascriptオフ環境や未対応環境であってもコンテンツが提供できるように実装しなければならないということが強調されていました。
まずはHTML+CSSでサイトをつくり、そこにAjaxを実装するというのが必要だということです。

大きなところに実装するのではなく、ブログのコメントの投稿がページ更新なしに表示されるというような小さなところに実装することで、ユーザーに待ち時間を与えない・感じさせないようなところに大きな効果があるということでした。

要は使いどころということで、Ajaxの実装がマイナスとならないよう考えるということですね。

『高効率・低コストで行うユーザビリティテストの仕組み』

アンディ･バド氏はジェレミー・キースと同じ「Clearleft」社のクリエティ部･ディレクターで、デザイナーとしてもたくさんの経歴があり、ユーザビリティのエキスパートでもあります。

本セッションでは日常にあるシステムに対してユーザーはどう考えているかという話から、ユーザビリティテストをおこない大きな売上をあげた事例の紹介がありました。

またユーザビリティテストと一般的に呼ばれるものは、高額なアイトラッキングシステムや、ラボを利用した研究的で大きなものを想像してしまうのですが、氏はもっと手軽にどこでもできるテスト手法について話をしてくれました。

質ももちろん重要ですが、できるかぎりテストの回数をこなし、すぐにそのフィードバックをシステムに反映させるスピードの方がもっと重要になります。そのためゲリラユーザビリティテストと名付けられた簡単にテストをおこなう方法を進めています。

それを便利におこなうツールとして、Clearleft社のSilverbackというソフトを紹介されていましたが、これについては EC studio で販売しているカムタジアスタジオというソフトでもこれはおこなうことができるのではと考えています。

『Web標準的ブラウザのグラフィックのススメ』

SVG・Canvasについての可能性は、エリック・メイヤー氏も語られていたのですが、ダグ・シェパーズ氏はW3CのメンバーとしてSVGの開発と普及の先頭に立って引っ張っている人物です。

HTMLとjavascriptで2D,3Dのベクターグラフィックスを描画できる技術ですが、正直なところ「これをどこに使えば」という気持ちがないわけではありません。たとえば単純にFlashに成り代わるというものでもなく、成り代わる必要も感じないわけでもありません。

しかし実際にすでにGoogleMapにもSVGは採用されており、同じように地図の描画やグラフの描画などが、ユーザーの環境におけるFlashPlayerの有無やバージョンに左右されず、ブラウザの環境で表現できるならそれにこしたことはありません。
EC studio でも数値データを提供するツールをいくつか提供していますが、それにこういった技術が採用される日は遠くないかもしれません。

『Web上における情報データの可視化』

マイク・ミジャースキー氏はステイマンデザインという会社のCTOとしてデータビジュアライゼーションと呼ばれる分野での実績を非常に多くあげています。
代表的なものとして、Oakland Crimespottingというオークランド州の犯罪状況マップサイトがあります。

その他数々の実績の紹介やデータビジュアライゼーションの実例を取り上げていたのですが、データビジュアライゼーションにおいて重要なのは「Live, Vast, and Deep」という点で、データが最新かつ広く深いことであると述べていました。それらを可視化する上で、さらにユーザーが利用しやすいようユーザビリティが求められるということです。

彼らの実績にはただ使えるだけでなく、表現の心地良さというところではユーザーエクスペリエンスというものも欠かせないようになっていると感じます。
データに対して関心を持つユーザーが集まるわけですが、どんどん使ってデータを掘り下げていく上でこういったストレスのないリッチな体験を与えることもまた重要なのでしょうね。

まとめ

今回のカンファレンスで話された内容は、近しくすぐに仕事に取り入れられるものから、遠い技術であるように思えるものもありました。
しかしいずれにせよこうした場で、Webの先人たちの話を生で聞くというのは大きなインスピレーションを得る非常に貴重な機会でした。

その翌日、翌々日のワークショップではエリック・メイヤー氏、アンディ・バド氏から直接CSSやユーザビリティテストの指南を受け、これらもまた大きく勉強になりました。

また来年も開催されるということで非常に楽しみにしています。

その他当日の詳しいレポートは下記もご覧ください。
レポート：「Web Directions East 2008」カンファレンスレポート｜gihyo.jp … 技術評論社

関連した記事：

セマンティックXHTML、クロスブラウザ設計、CSSレイアウト中級講座

新免孝紀 — Fri, 10 Oct 2008 03:08:11 +0000

前回参加させていただいたallWebクリエイター塾主催の
「XHTML＋CSS講座」の中級講座が10月25（土）、26日（日）の
2日間開催されます。

前回のXHTML+CSS基礎講座レビュー記事はこちら

中級講座は大阪での開催の予定していなかったそうですが、
前回の初級講座が好評だったこともあり、
今回、大阪で開催していただけることになったようです。

================================================================
セマンティックXHTML、クロスブラウザ設計、CSSレイアウト中級講座
================================================================
「allWeb」は、XHTML+CSSによるWeb標準のウェブサイト制作の
スキルを学んでいただける講座を実施しています。
東京で2004年より開催し、好評高い講座となっています。

XHTMLとCSSの基礎的内容を理解している方が対象になります。
CSSソースをコピペしてなんとなくCSSレイアウトができているが
きちんと理解していない方や
CSSハックなど本当はどんな意味か解らない方などに
最適な講座となっています。

理屈がわかる講座なのでとても理解しやすい講座です。

■講習名
セマンティックXHTML、クロスブラウザ設計、CSSレイアウト中級講座

■講習日時
2008年10月25.26日（土・日）9時30分～17時30分

■料金
定価39,000円

■定員
16名（残り僅かとなっています。）

■会場
NECPCカレッジ東梅田校

■講師：菊池崇
マイクロフォーマッツJapan代表
株）Actlink Webディレクター
技術評論社ウェブサイト連載

▼詳細・お申込み▼
allWebクリエイター塾
http://osaka.all-web.org/
================================================================

前回の初級講座もそうでしたが、非常に理屈がわかりやすく、
理解がしやすい講座だと思います。カラム落ちしてしまう方や
ブラウザごとのレンダリングの違いに悩んでいる方など、
もう一度、自分のCSSレイアウトを見直す良い機会では無いでしょうか。

大阪での開催は非常に貴重ですので、興味のある方は是非ご参加ください。
弊社からは2名デザイナーが参加します。

関連した記事：

Web制作を勉強したい人へのセミナーのすすめ！ IN 関西

赤堀　巴絵 — Thu, 09 Oct 2008 02:54:49 +0000

こんにちは、赤堀です。
関西では東京ほどセミナーはおこなわれていませんが、
刺激を受けるセミナーはもちろんおこなわれています。

知識を広げるためにもモチベーションをあげるためにも
一度セミナーを受けてみてはいかがでしょうか。

新しい発見で業務も効率化、スキルアップできますよ。

Web制作セミナーに行くときのおすすめ

おすすめなのが必ず名刺をもっていくことです！
ない人は安い名刺屋さんでつくっちゃいましょう。

新しい出会いが新しいビジネスチャンスです。
いつかビジネスすることもあるかも知れないですし、
新しい良き相談相手を見つけることもあります。

ぜひとも名刺をお供にセミナーへ出かけてみませんか。
以上「Web制作を勉強したい人へのセミナーのすすめ」でした。

関連した記事：

EC studio デザインブログ » ニュース

今から作るiFrame対応Facebookページの作り方 Part.1

Facebookページとは

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

Facebookページの構成を考える

Facebookページの基本設定

Facebookページをデザインする

効率的にサクサクスライス！Fireworks CS5スライス書き出しTips

スライスの作成

長方形スライスの作成

多角形スライスの作成

効率化ポイント

プレビュー方法

「ファイル」の「画像プレビュー」

ワークスペース上のプレビュー

効率化ポイント

スライス書き出し方法

選択したスライスオブジェクトの書き出し

シンボルのステートの書き出し

効率化ポイント

Firefox 3.5.7が起動しない問題が発生中。（YSlowが原因かも？）

対処法

Firefoxをセーフモードで起動してY!Slowをアンインストールする

新しいプロファイルを作成する

新しいバージョン、Y!Slow 2.0.6 では大丈夫な様子

困った時の強い味方！Fireworks「Kuler」の使い方

Kulerパネルの開き方

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

カラースキームでの利用

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

RSSフィードの配信

HTML5、きちんと。CSS Nite 4周年記念イベントにいってきました

HTML5、きちんと。

HTML5は前向きな姿勢

もうちょいコード的な話を補足

デザインブログに顔アイコンが追加されました

タイポグラフィの基礎 – 文字の扱いで印象が変わる -

フォントの統一

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

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

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

文字のジャンプ率

見出しをつける

「Web Directions East 2008」にいってきました

『ブラウザの多様化でみる最良のウェブ開発』

『あらゆるデバイスに対応できるウェブデザインの考え方』

『使い勝手と見やすさを両立するAjaxを使ったサイト設計』

『高効率・低コストで行うユーザビリティテストの仕組み』

『Web標準的ブラウザのグラフィックのススメ』

『Web上における情報データの可視化』

まとめ

セマンティックXHTML、クロスブラウザ設計、CSSレイアウト中級講座

Web制作を勉強したい人へのセミナーのすすめ！ IN 関西

おすすめのWeb制作セミナーピックアップ

CSS Nite

Re:Creator’s Kansai（リクリ）

ソフト産業プラザ iMedio

Web制作セミナーに行くときのおすすめ