調査概要

• レスポンシブWebデザインのサイトのブレークポイントの数値を調べる
• サイトはMedia Queriesより100サイトをピックアップ
• 調べ方は各サイトのCSSで"@media"で検索をかけて目視で該当箇所をピックアップ
• レイアウトの切り替え、一部コンテンツのみの切り替えに関わらず全てブレークポイントとして取得
• ヒューマンエラーは想定範囲

調査結果

世にレスポンシブWebデザインのサイトがいくつあるのか分かりませんが、
100サイトは決して多い数ではないと思います。
なので今回の結果だけで安易に判断はできないのですが、
それでも大まかな流れが見えてきます。

まとめた結果をGoogle Docsに公開しました。

breakpoints on Google Docs

元のエクセルファイルはこちらです。
breakpoints.xlsx.zip

共通するブレークポイント

共通のブレークポイントに順位付けすると下記の様になります。

iPhone、iPadを基準にした数値が目立ちます。
レイアウトをPC、タブレット、モバイルで変更すると考えた時に、
代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。

しかし、例えばブレークポイントをiPad基準にした768pxにすると、
幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。

ブレークポイントの数

少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。

ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、
ごく一部のコンテンツのみ調整するといった使い方をしています。

例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。
Remodelista: Sourcebook for Considered Living

個人的見解

全体の統計としてブレークーポイントに480pxや782pxがよく使われてますが、
そこにこだわる必要はないと思います。

上記でも述べたようにこの数値はiPhone、iPadを基準にした数値であり、
他のスマートフォンやタブレットはこれに当てはまらないものもあります。

そもそもレスポンシブWebデザインはデバイスではなくウインドウサイズを基準に判断するので、
「このウインドウサイズではこのように見せたい」と言う考え方が自然な気がします。

例えば下記の記事はブレークポイントの提案をしています。
その数値は520pxや760px だったりとデバイスの境目を基準としてる訳ではありません。

A Simple Device Diagram for Responsive Design Planning

この考えでいくと、スマートフォン、タブレットであっても機種によって異なるレイアウトが表示されます。
それでもそのウインドウサイズで見せたいと思ってるデザインなので問題はありません。

更にはもっとコンテンツ中心で設計してもいいと思います。
ブレークポイントの数値は下記のようなpx指定が一般に普及してますが、

@media only screen and (min-width: 400px)

最近ではem指定も見られるようになってきてます。

@media only screen and (min-width: 25em)

下記のサイトはem指定です。

James Chambers – Artificial Defence Mechanisms

テキスト量に最適なレイアウトを提供する考え方です。
またemベースのメリットは文字サイズを拡大した時にそれに応じてレイアウトも変更されます。

もちろんデバイスによって回線速度や使われる環境が異なってきます。
その点も考慮する必要はありますが、
例えばあまりにモバイルに特化したコンテンツを提供したいケースであるならば、
それはモバイル用の専用サイトを作る選択が最適となります。

レスポンシブWebデザインの設計以前に、
どのような構成にするか、まずはそこが重要だと思います。

毎度思いますがレスポンシブWebデザインの設計は簡単ではありません。
でもコンテンツを主において、デザイン・レイアウトには若干の緩さを許容できるのであれば、
それも大分解消されて制作側も気が楽になるのではないでしょうか。

Similar Posts:

• レスポンシブwebデザインで制作する時のポイント
• Web制作者は知っておきたいwebサイトのレイアウト7選
• Appleが推奨するSkeuomorphic Designとそのメリットデメリット
• Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
• viewportの動作検証（iPhoneのみ）

• レスポンシブwebデザインで制作する時のポイント
• Web制作者は知っておきたいwebサイトのレイアウト7選
• iPhone4の新機能8+1
• Appleが推奨するSkeuomorphic Designとそのメリットデメリット
• iPhone4のカレンダーと複数のgoogleカレンダーを簡単に同期する

Paymo

Paymoはプロジェクト管理や複数ユーザーでの共有、請求書の発行まで行えるタイムトラッキングツールです。

Free Time Tracking Software – Paymo

Paymoで出来ること

• タイムトラッキング
• プロジェクト管理
• マイルストーン
• 複数ユーザーでの共有
• 請求書作成
• クライアントの管理
• データのエクスポート

1ユーザーの場合は無料で利用できます。
その他内容に応じて2つの有料プランが用意されてます。
データはクラウド上に保存され、期間は無期限です。

webブラウザ上での管理の他、Mac、Windows用のデスクトップアプリもあります。
iPhoneアプリ、Androidアプリもありますので、
外出時のタイムトラッキングも心配ありません。

Time Tracking Mobile Application – Paymo

ただ、基本的にビジネスでの使用を目的としてるので、
個人のライフログ的な使い方には向かない点もあることは最初にお伝えしておきます。

余談ですが…フリーランスに向けた紹介もあります。

登録&セットアップ

アカウント作成

Pricing&Sign upページからアカウントを作成します。
（Google、YahooのOpen IDにも対応）
Signup | Paymo.biz

メールが送られてくるので記載されているURLをクリックでアカウントが承認されます。

セットアップ

My Account

太字の部分が必須項目です。（※以降の入力画面も同様です）

Timezoneは日本に合わせます。

言語設定は、現在のところ日本語は用意されてませんのでEnglishにしておきます。
多言語化に力を入れてるようなのでいずれ実装されるのではないかと思います。

Company Setting

右の歯車アイコンから行けます。
会社情報を入力します。

サブドメインをオリジナルに変更できます。
ここで入力したURLが管理ページのURLとなります。

使い方

タイマー

タイマーをクリックするとサブウインドウでタイマーが表示されるので、
プロジェクトとタスクを選択して「start」で計測開始、「stop」で計測終了です。
デスクトップ、モバイルアプリでも同様です。

ダッシュボード

全体の統計やマイルストーン、最近の活動が一覧できます。

レポート

初期の段階では何も表示されてません。
「Create Report」ボタンよりレポートとして表示したい内容を設定して新規レポートを作成します。
レポートには作成した時点での記録を表示する静的なStatic Reportと、
アクセスした時点での記録を表示する動的なLive Reportがあります。
かなり細かく設定できるので目的に応じて使い分けるといいです。

レポートの書き出しは、Excel、PDF、CSV、GoogleDocsに対応してます。

請求書

今のところ英語なので使うことはないのですが、請求書も作成できます。

タスクの設定方法

Paymoの構成は「クライアント⇒プロジェクト⇒タスクリスト⇒タスク」になります。

具体的には下記のような使い方になります。
どこまでタスクを細かくするかはプロジェクトにより調整するといいと思います。

この様な構成なので上流から順に設定していく必要があります。

クライアント

Clientsメニューの「Add Client」ボタンよりプロジェクトを新規作成します。
会社名と担当者名は必須です。

Has Accessにチェックを入れてEmailとパスワードを設定すると、
このクライアントに関わるプロジェクトのレポートや請求書を閲覧できるページが用意されます。
send client〜にチェックを入れると設定したEmail宛にログイン画面のURLとパスワードを送信します。

プロジェクト

Projectsメニューの「Add Project」ボタンよりプロジェクトを新規作成します。
Nameにプロジェクト名、Clientでクライントを選択します。
Budget Hoursは予想時間。空白の場合は無期限となります。
Price Per Hourは一時間辺りの作業料金です。
現在は円表記はできないので、単純に×100とか考えるといいです。

タスクリスト

Projectsメニューから先ほど作成したプロジェクトをクリックします。
サブメニューのTasksを選択します。

既にDefault Task Listが設定されてるのでこれを編集して名前を変更するか、
右上の「Add Task List」より新規タスクリストを作成します。

タスク

タスクリストと同じ画面で操作します。
既にDefault Task が設定されてるのでこれを編集して名前を変更するか、
上記の画面の「Add Task」ボタンより新規タスクを作成していきます。

おわりに

僕は以前まではTogglを使ってたのですが
Paymoを試用して数週間、今では完全にPaymoに乗り換えました。

とにかく機能が豊富でここで紹介し切れてない機能も沢山あります。
かゆいところまで手が届くと言った感じであり、
コミュニティも活発で常にバージョンアップしてるようです。

機能から分かるようにPaymoはビジネス向けのタイムトラッキングツールなので、
ライフログを取るといった目的には向かないと思います。
僕の場合は複数のツールを使い分けるのは面倒なので、
自分自身をクライアントととして日常の行動をプロジェクトにしてます。
例えばクライアントを「自分」タスクリストを「日課」とし、タスクを「ランニング」といった具合に。

ツールは人それぞれ合う合わないはありますが、
無料なのでまずは試しに使ってみてもいいと思います。

Similar Posts:

• MAMPインストール後の初期設定
• 「関連するエントリー」を表示するプラグイン Similar Posts
• OGPタグの設定やいいねボタン、コメントを簡単に設置できるWordPressプラグイン「Facebook Tools」
• WordPress内の人気の記事を表示するプラグイン Popular Posts
• ページをスクロールしたらオススメの記事を紹介してくれるSimpleReach THE SLIDE

• WordPress内の人気の記事を表示するプラグイン Popular Posts
• 「関連するエントリー」を表示するプラグイン Similar Posts
• macでweb制作するなら入れておきたいQuick Lookプラグイン10選
• MAMPインストール後の初期設定
• facebookのsocial plugin(ソーシャルプラグイン)一覧

1. 多数の形式のファイルをプレビュー
2. サブフォルダ内の表示
3. ファイル名のリネーム
4. ワークスペースの切り替え
5. キーワード・レート・ラベルの追加
6. フィルター
7. スマートコレクション
8. スタック
9. フルスクリーンプレビューやレビューモード
10. Mimi Bridge

Adobe Bridge

Adobe Bridgeは写真や制作ファイルの管理・閲覧が簡単にできるメディア管理ツールです。

Adobe Bridgeは単体では販売されておらず、
Adobe Creative Suiteまたは、
photoshopやIllustratorなど代表的なソフトに同梱されてます。

基本的な操作は一般的なメディア管理ツールと同様で、
フォルダを指定して中のファイルをプレビューします。

よくアクセスするフォルダはお気に入りとして登録しておけます。
（フォルダを右クリック→「お気に入りに追加」選択）

※MacユーザーでiPhotoを使ってる方は、iPhoto Libraryアイコンを右クリックで「パッケージの内容を表示」を選択し、「Originals」のエイリアスを作ってアクセスできる階層に置くことでBridgeからもアクセスできます。
ただしこの場合はBridgeからは閲覧だけにとどめ、変更や移動はiPhotoから行ったほうがいいです。

右下のスライダーでサムネイルのサイズを変更できます。
スライダー横のボタンでは、サムネイル表示、詳細表示、リスト表示に切り替えられます。

ファイルを選択すると、そのファイルのメタデータも参照できます。

UIのカラー変更は「環境設定」→「一般」から行えます。

サムネイル下部に表示する項目は「環境設定」→「サムネール」から行えます。

基本操作は直感的に操作できるのですぐに使えると思います。
以下にAdobe Bridgeのお勧めのポイント挙げていきます。

多数の形式のファイルをプレビュー

Adobe製品なので当然、photoshopやIllustrator形式のファイルはもちろんのこと、
eps、swf、flvの各ファイル、またQuickTimeのバージョンでサポートされている動画ファイルも
プレビューできます。

eps形式のファイルのプレビュー

swf形式ファイルのプレビュー

サブフォルダ内の表示

「表示」→「サブフォルダー内の項目を表示」を選択すると
サブフォルダー内のファイルも一度に表示されます。
または、ファイルパスの > からも選択できます。

ファイル名のリネーム

選択したファイルのファイル名をリネームできます。

ファイルを選択した状態で左上のリファインアイコンから「ファイル名をバッチで変更」を選択。

リネームの設定画面が表示されます。
最低限の機能は備わってるので簡単なリネームであれば十分に役立ちます。

ワークスペースの切り替え

特定のパネル構成またはレイアウトのことをワークスペースと言います。
このワークスペースを使えば目的に応じてレイアウトを簡単に切り替えることができます。
ワークスペースはメニューの「ウインドウ」→「ワークスペース」で選択できます。

「フィルムストリップ」大きなサイズで写真を確認するのに最適です

「メタデータ」ファイルのメタデータを一覧するのに最適です

「出力」コンタクトシートの作成が簡単に行えます。一覧を印刷したい時に便利です

また、オリジナルのワークスペースを作成して保存しておくと
いつでもそのワークスペースに戻れるので便利です。
（「ウインドウ」→「ワークスペース」→「新規ワークスペース」）

キーワード・レート・ラベルの追加

Adobe Bridgeにはそのファイルに最初からあるメタデータの他に、
キーワード、レート、ラベルなどのメタデータを追加できます。

キーワード

レートやキーワードを付けた状態

ラベルの設定は、「環境設定」→「ラベル」で変更できます。
ショートカットを割り当てておくと便利です。

ここで追加したメタデータは後述のフィルターやスマートコレクションで活用できます。

フィルター

フィルターパネルには現在表示されてるコンテンツの情報が表示されてます。
ここで条件を選択するとその条件に合ったコンテンツのみを表示することができます。
元から備わってるメタデータの他にキーワード、レート、ラベルでの絞り込みもできます。

通常の表示

フィルターで特定の項目にチェックを入れるとそれに該当したファイルのみ表示されます

スマートコレクション

特定の条件に合うファイルを自動的に収集してくれます。

例えば下記は僕のスマートコレクションの一つです。
検索対象「現在のフォルダを使用」
検索条件「ドキュメントの種類」「次と等しい」「photoshopファイル」
すべてのサブフォルダーを含むにチェック
インデックスされてないフォルダーを含むにチェック

このスマートコレクションを使用すると開いたフォルダ内で、
サブフォルダ内まで含めてphotoshopファイルのみが表示されます。

複数のファイル形式が混在するフォルダを開いた状態

スマートコレクションを適用した状態

フィルター条件は細かく設定できるので用途にあった設定を幾つか作っておくと作業が捗ります。

スタック

1 つのサムネールの下にファイルをグループ化することができます。
ほぼ同じファイルはまとめておくと整理されて目的のファイルが探しやすくなります。

スタックとしてまとめたいファイルを選択し、右クリック→「スタック」→「スタックにグループ化」

スタックとしてまとめられます。
左上の数字クリックで中身が表示されます。

フィルターなどの対象は一番上のサムネイルのみとなります。
一番上のサムネイルへの設定は、ファイルを選択して右クリック→「スタック」
→「スタックの最上位にプロモート」で行えます。

フルスクリーンプレビューやレビューモード

スペースキーを押すとフルスクリーンで表示されます。
また、フルスクリーン状態でもマウスホイールで拡大縮小ができます。

「表示」→「レビューモード」（またはcommand+B）で疑似3Dでファイルが表示されます。
この画面上でレートやラベル付けも可能です。

Hキーを押すとショートカットキー一覧が表示されます。

Mimi Bridhge

photoshopやIndesignではmimi Bridgeが使えます。
mini BridgeはBridgeとほぼ同じ機能ですが、各アプリケーション上で開けるので、
作業効率は上がります。

photoshopの場合は、「ウインドウ」→「エクステンション」→「Mini Bridge」です。

ドラッグ&ドロップでドキュメント内に配置もできます。
複数ファイルを選択した場合は順番に配置していきます。
この操作中にescキーを押すとそのファイルの読み込みを中止にできます。

あとがき

Adobe Bridgeはwebだけでなく、DTPやフォトグラファー、映像など多ジャンルの制作者が使用することを想定されているので、各用途に合わせて使えるような柔軟な仕様になってます。

僕自身もっと便利な使い方があるのではと模索中ではありますが、
上手に使いこなすことで作業効率の大幅なアップが望めるのでお勧めのツールです。

ちなみにCS6では64bitに対応するので、よりサクサク動くのかなと期待してます。

Similar Posts:

• 私がwebサイトのラフデザインを制作する時の流れ
• 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選
• Contributeの基本的な使い方
• macでweb制作するなら入れておきたいQuick Lookプラグイン10選
• 無料のベクター素材を提供しているサイト40選

• macでweb制作するなら入れておきたいQuick Lookプラグイン10選
• 私がwebサイトのラフデザインを制作する時の流れ
• 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選
• Contributeの基本的な使い方
• 無料のベクター素材を提供しているサイト40選

※理解8割程度なので間違いありましたら指摘して頂けると助かります

1. セマンティックWeb
2. Microformats
3. RDFa
4. Microdata
5. schema.org
6. リッチスニペット
7. パンくずリスト表示

セマンティックWeb

通常のHTMLやXHTMLでは文書構造を表すことができますが、
個々の意味までは伝えることができません。

例えば以下のようなHTMLがあります。

<div>
	私の名前は吉良吉影です。
</div>

人はこの文章から「吉良吉影」は"人名"であると理解できます。
しかし、コンピュータは「吉良吉影」が何を意味するか分かりません。

そこでこのHTMLを構造化データで以下のようにマークアップします。

<div itemscope itemtype="http://data-vocabulary.org/Person">
	私の名前は<span itemprop="name">吉良吉影</span>です。
</div>

このようにするとコンピューターも「吉良吉影」が"name"であると理解できます。

このように情報に適切な意味を与えることで、
検索エンジンなどコンピューターが意味を理解できるようにする構想をセマンティックWebと言います。

代表的な構造化データのマークアップ規格には下記の3つがあります。

• Microformats
• RDFa
• Microdata

Microformats

既存のHTML(XHTML)に少し手を加えるだけで容易に導入できます。
通常Microformatsはclass属性を使用します。

Microformatsの構文の主な種類には以下のようなものがあります。

• hAtom…標準のHTML内にAtomフィードをつくる
• hCalendar…イベント情報
• hCard…連絡先情報
• hReview…書評などのレビュー

など。

その他リンク先がそのページと無関係であるとことを表すrel="nofollow"もMicroformatsの一つです。
参照：Microformats Wikiにようこそ！

IE8以降に搭載されている「WebSlice」機能も、
MicroformatsのhAtomを簡略化した「hslice」を使ってます。

Webスライスを利用すると [お気に入り] バー から直接コンテンツの変更をチェックでき、
Webページの更新された部分を表示することができます。
参照：Web スライスを使用したコンテンツの購読

WebスライスはFirefoxでもアドオンで対応できます。
（実際あまりWebスライスって耳にしませんが使われてるんですかね…）
Mozilla Re-Mix: IE8のWebスライス機能をFirefoxにも欲しい方へおすすめのアドオン「WebChunks」

マークアップサンプル

MicroformatsのhCardでマークアップしたHTMLは、次のようになります。

<div class="vcard">
	私の名前は
	<span class="fn">吉良吉影</span>です。
	<span class="adr">
		<span class="region">M県</span>
		<span class="locality">S市杜王町</span>
	</span>
	に住んでおり、
	<span class="org">カメユーデパート</span>に勤めてます。
	父親は<a href="http://.example.com" rel="parent">吉良吉廣</a>です。
</div>

解説

1行目のclass="vcard"で、<div>で囲まれた HTML が連絡先情報について記述していることを示します。（連絡先情報について記述する Microformats は hCard ですが、HTML ではvcard と指定します）

上記サンプルでは、名前（fn）、住所（adr）、所属（org）について記述しています。

プロパティの中には他のプロパティを含めることができ、
上記の例ではlocalityとregionはadrのサブプロパティとなります。

rel="parent"プロパティは、 XFN(Xhtml Friends Network リンク先との人間関係を表すフォーマット)であり、ここでは吉良吉影の親であることを示してます。

RDFa

メタデータをXHTMLで書かれた文書に埋め込むための仕様です。
W3CがXHTMLに対する仕様として策定を進め2008年10月に勧告として公開しました。

通常 RDFa では、XHTML タグ（主に <span> や <div>）内でシンプルな属性を使用して、
簡潔でわかりやすい名前をデータの集まりやプロパティに割り当てます。

OGP(Open Graph protocol)もRDFaをベースにしてます。
The Open Graph protocol

マークアップサンプル

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
	私の名前は
	<span property="v:name">吉良吉影</span>です。
	<span rel="v:address">
	<span typeof="v:Address">
		<span property="v:region">M県</span>
		<span property="v:locality">S市杜王町</span>
	</span>
	</span>
	に住んでおり、
	<span property="v:affiliation">カメユーデパート</span>に勤めてます。
</div>

解説

1行目で XMLネームスペースを使用して、どのスキーマを使用するかを宣言しています。
人物、レビュー、製品、場所のデータをマークアップするときは"http://rdf.data-vocabulary.org/#"のスキーマを使用できます。（末尾に必ずスラッシュと#を付けます）
また、"http://rdf.data-vocabulary.org/#"にvを割り当て、
それを接頭辞として用いるよう定めています。

typeof="v:Person"は、マークアップしたコンテンツが人物であることを示しています。

各プロパティには、propertyを使用してラベル付けします。

上記のサンプルは、住所が記述されており、吉良吉影とその住所の関係を示すようにします。
吉良吉影の住所typeof="v:Address"をtypeof="v:Person"に含めるために、
relを使用して、吉良吉影（v:Personのコンテンツ）と住所（v:Addressのコンテンツ）の関係を示しています。

Microdata

HTML文書の中にメタデータを埋め込むための仕様であり、HTML5の仕様とは独立してます。
HTML5で使用できます。
2012年4月現在では、連絡先情報に関する語彙を規定したvCard、
カレンダーのスケジュールに関する語彙を規定したvEvent、
著作者に関する語彙を規定したLicensing worksの3つが用意されています。
参照：5 Microdata — HTML Standard

またMicroformatsとMicrodataの比較については下記サイトが参考になります。
MicroformatsとMicrodataの違いについて : Web Design KOJIKA17

マークアップサンプル

<div itemscope itemtype="http://data-vocabulary.org/Person">
	私の名前は
	<span itemprop="name">吉良吉影</span>です。
	<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
		<span itemprop="region">M県</span>
		<span itemprop="locality">S市杜王町</span>
	</span>
	に住んでおり、
	<span itemprop="affiliation">カメユーデパート</span>に勤めてます。
</div>

解説

1行目のitemscopeは、<div>で囲まれたコンテンツがアイテムについて記述していることを示します。itemtype="http://www.data-vocabulary.org/Person"は、
そのアイテムが人物であることを示しています。

このサンプルでは、人物のプロパティとして、名前、所属などを記述しています。
人物のプロパティをラベル付けするため、これらのプロパティのいずれかを含む各要素（<div>、<span>など）に、プロパティを示すitemprop属性を割り当てます。

プロパティはアイテムに他のアイテムを含めることができます。
上記の人物の情報には、住所（itemtype="http://www.data-vocabulary.org/Address"）とそのプロパティ（localityとregion）が含まれています。

schema.org

schema.orgは、Google、Microsoft、Yahoo!が共同で開発・サポートしている
構造化データマークアップの標準化の取り組みです。

アイテムタイプやプロパティ等を共通化することで、

• WebマスターはセマンティックWeb導入が今まで以上に容易になる
• 検索エンジン側は多くのサイトが提供する構造化データを使って検索サービスをもっと便利する
• ユーザーは優れた検索体験を享受できる

これらの効果を狙いとしてます。
データのフォーマットはMicrodataを採用してます。
参照：検索3社が協力してセマンティックウェブを促進、schema.orgイニシアティブを発表::SEM R

マークアップサンプル

schema.orgを使用してMicrodata でマークアップした HTML コードは、次のようになります。

<div itemscope itemtype="http://schema.org/Person">
	私の名前は
	<span itemprop="name">吉良吉影</span>です。
	<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="addressRegion">M県</span>
		<span itemprop="addressLocality">S市杜王町</span>
	</span>
	に住んでおり、
	<span itemprop="corporation" itemscope itemtype="http://schema.org/Corporation">
	<span itemprop="name">カメユーデパート</span>
	</span>
	に勤めてます。
</div>

schema.orgを使用したマークアップについては下記のサイトが参考になります。
初心者向けschema.org講座 « NAVER Engineers' Blog

リッチスニペット

Googleでは、検索結果にレシピページであればレシピの合計時間、写真、レビュー、
製品ページであれば価格やレビューなどが表示されることがあります。

このような通常の本文抜粋のスニペット以外の情報をリッチスニペットと言います。
リッチスニペットはユーザーに有益な情報を提供できるだけでなく、
これらの情報が表示される事でクリック率増加にもつながります。

リッチ スニペット作成の3ステップ

リッチスニペット作成に対応したフォーマットで適切にマークアップすることで
リッチスニペットを表示させることができます。

1. マークアップ形式を選ぶ

以下の形式が使用できます。

• Microdata
• Microformats
• RDFa

2. コンテンツをマークアップする

現在Googleでは、次のコンテンツ タイプのリッチスニペットがサポートされてます。

• レビュー
• 人物
• 製品
• 会社と組織
• レシピ
• イベント
• 音楽
• 動画

3.マークアップをテストする

リッチ スニペット テストツールでマークアップしたデータをGoogleがどのように読み取るかテストできます。
URL、またはソースを入力して検証できます。

Webmaster Tools – Rich Snippets Testing Tool

このように、リッチ スニペットに対応したマークアップを施しておくと、
サイトが次にクロールされたときにマークアップが Google に認識されます。

注意点

• リッチスニペットが表示されるまでには時間がかかる
• 必ず表示されるとは限らない
• 以前までは専用フォームからGoogleにマークアップ完了を申請する必要がありましたが、
  現在そのような表記は見当たりません。
  申請は下記ページからできるのでやっておいた方が確実かなとは思います。
  リッチ スニペットに関心がある – ウェブマスター ツール ヘルプ
• リッチスニペットはGoogle独自の提唱です。

検証

下記のHTMLを Rich Snippets Testing Toolで検証してみます。

<div itemscope itemtype="http://schema.org/Review">
	<span itemprop="name">TRATTORIA</span>
	レビュー: <span itemprop="author">虹村億泰</span>、
	<time itemprop="datePublished" content="2009-01-06">1 月 6 日</time>.
	<span itemprop="headline">食えば食うほど食いたくなる</span>
	<span itemprop="description">娼婦風スパゲティーは赤トウガラシが入ってて辛いのだけど、辛いのが苦手な俺でも一度口にしたら止まらなくなる程クセになるうまさ！</span>
	評価: <span itemprop="reviewRating">5</span>
</div>

そうすると下記の結果を返されます。
Googleの検索結果には、レビューと投稿者、投稿日が表示されるのが確認できます。

Googleの検索結果にパンくずリストを表示

現在(12.04.19)はリッチスニペットがサポートされているコンテンツは限られており、
ECサイトやレシピ、レビューサイト以外はその恩恵をあまり感じられないと思います。

ただし、リッチスニペットと同様の手法で、
Googleの検索結果にパンくずリストを表示できるので
一般サイトのwebマスターの方はまずこちらを導入してみてはどうでしょうか。

※特にリッチスニペットに対応したマークアップをしてなくても最近の検索エンジンは、
サイト上のパンくずリストを自動的に検出して検索結果で表示するようです。
パンくずが特殊だったり正しく検出されてない方はこのマークアップを試してみるといいと思います

パンくずリスト作成の3ステップ

基本的にはリッチスニペット作成の手順と同じです。

1. マークアップ形式を選ぶ

以下の形式が使用できます。

• Microdata
• RDFa

2. コンテンツをマークアップする

下記はmircodataでマークアップした例です。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="http://www.example.com/dresses" itemprop="url">
	<span itemprop="title">JOJO</span>
	</a> ›
	</div>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="http://www.example.com/dresses/real" itemprop="url">
	<span itemprop="title">スタンド</span>
	</a> ›
	</div>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
	<span itemprop="title">キラークイーン</span>
	</a>
</div>

3.マークアップをテストする

リッチ スニペット テスト ツールでマークアップしたデータをテストします。
URL、またはソースを入力して検証できます。
Webmaster Tools – Rich Snippets Testing Tool

具体的な方法はGoogleウェブマスターツールで解説されてます。
参照：パンくずリスト – ウェブマスター ツール ヘルプ

Similar Posts:

• seo業者がバックリンクを集める4つの方法
• Facebook・Twitterなどソーシャルボタン設置方法まとめ
• WordPressでsitemap.xmlを自動生成するプラグイン
• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• twitter APIとjQueryでtwitter widgetを作成する

• Facebook・Twitterなどソーシャルボタン設置方法まとめ
• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• twitter APIとjQueryでtwitter widgetを作成する
• Dreamweaverのテンプレートで特定のページのみにスタイルをつける
• WordPressでソースコードを整形表示するプラグインSyntaxHighlighter

Skeuomorphic Designとは

まずskeuomorphという言葉から。

skeuomorph
語源：ギリシャ語のskeuos（容器、実装）morph（フォーム）から。

skeuomorphは、様々な目的のために用いることができます。
デジカメのシャッター音もその一例です。
人は経験的にカメラのシャッター音で撮影されたのを知ることができます。
そこでデジカメでも撮影した時に人工的にシャッター音を入れることで、
写真が撮影されたことをより理解することができます。
また、その音がユーザーエクスペリエンスを高めることもあるでしょう。

Skeuomorphic Designは要約すると、
機能的に必要であるないに関わらず、似たような人工物・工芸品・芸術品からコピーされたデザインです。

このSkeuomorphic Design はデザイン手法の一つとしてAppleで推奨されてます。

アプリケーションのリアルさ、物質的な質感はできる限り高めるようにします。
多くの場合、アプリケーションの外観と動作が実物そっくりであればあるほど、ユーザはアプリケーションがどのようにに機能するかを理解しやすくなり、より楽しく使うことができます。
たとえば、iPadの「連絡先 (Contacts)」が表示するリアルなアドレスブックの使いかたはすぐに分かります。
via:iOSヒューマンインターフェイスガイドラ イン

例えばiPhoneの「ボイスメモ」は、その機能と使い方をすぐに理解できます。

Skeuomorphic Designのメリット

視覚的にリッチで魅力的

細部まで作り込まれたデザインは視覚的にリッチであるだけでなく、
使ってみたい・触ってみたいなど高いユーザーエクスペリエンスも提供します。

身近に感じる

コピーの元になったものをよく知っているのなら、
Skeuomorphic Designされたものはそれが初めて手にする場合でも身近に感じます。
どのような役割か、どのような機能があるのか理解しやすくなります。

iBooksはその外見から現実世界の本であるかのような感じが味わえ、
それが本を読むアプリであると理解できます。

操作方法を想像しやすい

上記と似てるのですが、現実のものから機能を理解できるということは操作方法も予測できます。
どこをどのように動かせば良いのか、ボタンには何の意味があるのか、など。
iBooksの例でいうならページを捲るという操作を予測できます。

デザインを楽しめる

デザイナーにとっては新しいデザインに挑戦でるチャンスです。
特にwebではミニマルな方向に進んでるので、
テクスチャをふんだんに使ったりノイズや汚れを加えたり、
存分に凝ったデザインができるチャンスになります。
（それを楽しめるかどうかは人によるのですが…）

Skeuomorphic Designのデメリット

ユーザービリティを低下させることもある

現実のものと同じにしようとするあまり、シングルタップで実装できるものをマルチタップにしたり、
簡単にできる動作を敢えて難しくしてしまうことがあります。

ダイヤル電話のアプリはダイヤルを回すという懐かしい体験が得られます。
しかし最初は楽んで使ってたユーザーも一つ一つの入力に時間がかかる効率の悪さに
フラストレーションがたまるでしょう。
（※このアプリは体験を提供するのが主なのでそれも織り込み済みでしょうが）

現実と操作が違うとストレスを感じる

Skeuomorphic Designのメリットは操作が容易に想像できることですが、
逆にその想像通りに操作できないとユーザーにストレスを与えることにもなり得ます。

iCalやiBooksでは右下をドラッグしてカレンダーを捲ることができます。
しかしアドレスブックでは右下をドラッグしてもページを捲ることはできません。

ドラッグしてページを捲れることを学んだユーザーは
アドレスブックで同じ動作を行う可能性があります。
想像通りに機能しないことはストレスであり混乱も招きます。

技術革新を遅らせる

そもそも現実世界のものと平面であるスクリーンでの表現を完全に一致することは不可能です。
平面には平面なりのメリットやそこでしかできないこともあります。
表現手法にこだわるあまり、固定観念に捕らわれて新しい手法を見いだす可能性を
無くすことにもなりかねません。

余分である

機能的に必要でないものも現実世界のモチーフを表現するために取り込みますが、
単純にそれは余分なものです。
その余分な要素を入れることでメインとなるコンテンツ部分の領域が狭まることになります。
特に画面領域の少ないモバイルに取ってそれは顕著です。

流行に応じて古くなる

コピーした現実世界のものが最新のデザインだったとしても、
それは流行とともに古くなっていきます。
それにつられてコピーしたデザインも古く感じられていきます。

JamBoxxのデザインは意図して古いラジカセをモチーフにしてると思いますが、
このようにそのモチーフの流行と共にデザインは古く感じられていきます。

理解できるかどうかはユーザーの経験値次第

現実世界のものをモチーフにデザインすれば理解してくれるだろうと言うのも
開発者の一方的な目論見であり、理解するかどうかはそのユーザーの経験値によります。
一般的に知られてないものをモチーフにする時はその点も注意する必要があります。

水平が計れる水準器も知ってる人からすればすぐに使い方は理解できますが、
水準器を知らない人にとっては見ただけでは何に使うのかすぐには理解できません。

Metro UI

Skeuomorphic Designに相反してると言えるのがMetro UIです。
Metro UIはWindows Phone 7やWindows8で採用されてます。

Metro UI は、スイスのクラシカルなデザインを基にしている。
Microsoft の設計チームによると、Metro UI はロンドンの地下鉄の標識を基調にしている。ロンドンの地下鉄は大きなフォントと読みやすさに重点をおいている。Microsoft はこれは、「お洒落、わかりやすい、モダン」と評しており、Android や iOS などのアイコンベース UI を「リフレッシュ」するものだとしている。
Metro UI – Wikipedia

常にコンテンツがメインであり、
余分なグラフィックや効果はありません。

アフォーダンスが低いなどの欠点もありますが、
シンプルで洗練されてて美しく個人的にはこのデザインも好きです。
平面らしいデザインとも言えるでしょう。

最適なデザインは？

全てのUIを完全なSkeuomorphic Designで表現しようと考えるより
もっと柔軟に使っても良いのではないかと思います。

iBooksは現実の本を模倣した外見で、
右下から指をドラッグする事でページを捲るという現実と同じ体験を得られます。
ただし、初めて体験するユーザーには良いですが、
何百ページもその動作を繰り返すことは煩わしいと感じるユーザーもいるでしょう。
そこでiBooksでは紙のエッジをタップするだけでもページが捲れるようになってます。
Skeuomophic Designを主としながらもユーザービリティも保つ工夫をしてます。

結局つまらない答えになってしまうのですが、
どのようにデザインするかは適材適所でしょう。
機能やコンセプト、ターゲットによって手法は変わってくると思います。

同じデザイン手法でもコンセプトによって良い時も悪い時もあるので、
どの手法が優れてるかは答えようのないことだと思います。

新しいデザイン手法も次々に生まれてきているので、
それらの特徴、メリットデメリットを抑えつつ
どのデザインがそのコンセプトに最適なのか選択できる力を養うのが大切かなと思います。

参考にしたサイト

本記事を書くにあたり下記のサイトを参考にしました。

• Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know | MediaLoot
• Skeuomorphic Design: The Tactile Illusion | We are Embedded
• Skeuomorph, Pt II
• Skeuomorph, Pt III

Similar Posts:

• Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
• レスポンシブWebデザインのブレークポイント調査
• 「Webデザイン」とはなにか？じっくり考えてみた（2012年）
• 「Webクリエイターの誇り」CSS Nite in Vol.60のまとめと雑感
• DreamweaverとWordPressを連携させてテーマを編集する方法

• Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
• レスポンシブWebデザインのブレークポイント調査
• はじめてのWebfonts
• 「Webデザイン」とはなにか？じっくり考えてみた（2012年）
• iPhone4の新機能8+1

ご挨拶

4月1日より完全にフリーランスになりました。

正確には去年からフリーとして活動はしてたのですが、
3月までは派遣と並行しており、4月からはフリーランス一本になります。

屋号はツクリベ(TSUKURIBE)です。
いちクリエイターであり続けたいという思いからです。
TSUKURIBE

数ヶ月は仕事がない可能性も考慮してたのですが、
幸い仕事がある状態でスタートを切れました。

こうして好スタートが切れたのも周りの方達のおかげであります。
本当に感謝してます。

周りの方に助けられたり刺激を受けながら精進していきます。
今後ともよろしくお願い致します。

以下はこれまで経緯や今後の話です。
長文なので興味のある方は読み進めてください。

発端

昨年一月にそれまで勤めていた職場を退職しました。
割と自由がきいて恵まれた職場でしたけど、
その頃の自分はその場で満足してる"井戸の中の蛙"のようなものでした。
「大海に出なければ」という焦りにも似た気持ちで退職を決めました。
この時はフリーランスではなく希望の職場に転職するつもりでした。

しかし、この転職が失敗に終わります。
「さて、これからどうしようか」と考えてる時に、
知り合いにフリーランスにならないかと声をかけてもらいました。

フリーランスを始めたきっかけはそんな軽いものでした。

ただ、なってはみたものの知り合いから貰える仕事は単価は低めであり、
仕事も定期的にらえる訳でもありません。
低価格でも馬車馬のように働けば何とかなるかも知れませんでしたが、
そのスパイラルに陥ったら抜け出すのは容易ではないと思いました。

一度立ち止まって、
しっかり計画を立てることにしました。

そもそもこの時点ではフリーランスになることにまだ迷いがありました。
結局自分がやりたいことができるのであれば、
企業に属するのも選択肢の一つです。
フリーランスより企業で働いた方がいい点は幾つもあります。

準備期間

まず数ヶ月仕事が無くても生活できる資金を貯めるために派遣の仕事を始めました。
派遣のメリットは拘束時間が決まってるところです。（契約条件によりますが）

そして派遣で働きながら、
自サイトを制作したりブログを更新したり、
セミナーや勉強会に出席して人との交流を広げていきました。
知人には自分が独立する考えがあることを伝えました。
自分をもっと高く売るためにスキルも磨いてきました。
私が利用してるWebデザイナー向け勉強会・セミナー情報サイト

また、この派遣先は大手企業だったのですが、
大手なりのメリットデメリットを学べたのも収穫でした。
具体的には、メリットはブランド力、安心感、
デメリットは縦割り社会、フットワークの悪さ、などです。
ここで仕事をしていく中で、
自分には大手のような体制で働くより、
フリーランスの方が向いてると確信しました。

今年に入ってから地道に蒔いてきた種が芽を出し始めました。
勉強会・交流会で知り合った方から仕事の紹介して頂けるようになりましたし、
サイトからも数件ですがお問い合わせが来るようになりました。

時間的に二足のわらじが厳しくなってきたのと、
資金も貯まったこのタイミングで一本化を決意しました。

方向性

始めた頃はワンストップであることを売りにと考えてましたが、
フリーランスのweb制作者でそれを売りにしてる方は多いです。
何か抜きん出た強みがあった方が仕事は取りやすいです。
なので自分は全体的なスキルも上げつつデザインを伸ばそうと考えてます。
外見・UI・UX含めたデザインです。

自分より優れた方は大勢いるのは百も承知ですが上を見てたらキリがありません。
難しい部分ですが今までの自分を振り返るとそれが最適な答えかなと。
好きなことでもありますし、力を注げることなので。
今まで経験から身につけた事をもう一度体系的に学んでます。

また学んだ事や素材を提供していくことで、
デザイン業界へ貢献していきたいと思ってます。
よくデザインの参考などでお世話になってる海外デザイナーの方々は
無料で高品質の素材を提供したりしてます。
殆どの方がその理由にデザイン業界の発展のため、恩返しのためと言ってます。
自分もその考えに感銘を受け同じように行動しようと考えてます。

今後

後のち法人化を考えてます。
自分で全部やりたいタイプなのですが、
仲間と協力した方が数倍の成果が上がることを最近改めて実感してます。

数年前にはフリーランスすら頭になかった人間ですので、
まさか自分が法人化まで考えるとは思ってなかったです。

夢に一直線に向ってる人は凄いと思うし尊敬します。
逆に自分はその時々でやりたい事が変化して色んな方向行ってます。
それが嫌だと思った時期もありましたが、今は受け入れてます。
その時その時で情熱を注げるものに打ち込む。
その考え方は世間の成功法則とかから外れるのかも知れませんが、
無理に自分を型にはめようとすると挫折します。
自分に素直なやり方が楽しく継続できるので
今後もそのスタイルは変わらないと思います。

人

via flickr Denise Mayumi

社会で生きる限り一番大事なのは人との繋がりだと思います。

取り敢えず今は一つ一つの仕事をしっかりこなす事で
依頼してくれた方には応えようとしてます。
でもまだ全体的に貰うばかりなので、
与える事も増やしてく事が今後の課題です。

また、仕事での人脈も大事ですが、
支えてくれる人、応援してくれる人の存在はそれ以上に必要です。
その存在がある限り、挫折しても乗り越えられると思います。
当たり前のように側にいる人程その存在の大きさに気付かないものです。
失って気付く前に大切にしたいと思います。

今後フリーランスでやってけるかは未知ですが、
成功も失敗も共有できたらなと思います。

常に「なんとかなる」というよく分からない思い込みがあるので、
相変わらずな感じでやってくつもりなのでよろしくお願いします。

最後まで読んで頂きありがとうございました。

Similar Posts:

• Flickr Badge: Flickrの写真をサイトに掲載するブログパーツ
• web制作者が印刷物を制作するときにチェックしたい10項目
• Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
• WordCampTokyoにスタッフとして参加してきた

• Flickr Badge: Flickrの写真をサイトに掲載するブログパーツ
• web制作者が印刷物を制作するときにチェックしたい10項目
• Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
• WordCampTokyoにスタッフとして参加してきた

jQuery Mobile スマートフォンサイト デザイン入門

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

前半は基本的な使い方、後半はカスタマイズの方法という構成になってます。

主なターゲットは、HTML、CSSを理解していて
jQuery Mobileは初めて〜カスタマイズをしたい。といった層だと思います。

幾つかの章は、僕も学ばせてもらったASCII.jp：西畑一馬のjQuery Mobileデザイン入門
がベースになってます。
ただ、やはり書籍の方が細かく解説されてますし、
検証環境の作り方や、Theme Rollerの紹介など付随した情報も多いです。
全体的に読みやすく分かりやすいです。

カスタマイズの章は

• CSSでカラーテーマを変更するだけの「プチカスタマイズ」
• jQuery MobileのUIパーツを利用しながら背景やロゴなど細かくカスタマイズする「セミカスタマイズ」
• jQuery MobileのUIをほとんど無視してオリジナルデザインにする「フルカスタマイズ」

の3つに分かれてます。

カスタマイズのサンプルで作れるデザイン

単純にカスタマイズの方法を解説するだけではなく、
サイトの設計から考えて解説してるので実践向きな内容になってます。

jQuery Mobileはどれも似た様なデザインになると思われがちですが、
フルカスタマイズの章まで学べばjQuery Mobileを使ってると気付かないほどデザインを変える事ができます。

先日jQuery Mobileを使った国内サイトがまとめらてましたのでこちらも参考になると思います。
ASCII.jp：jQuery Mobileを使った国内スマホサイトまとめ

また、jQueryMobileのカスタマイズにおいてはCSSを変更するケースが多いので、
それに伴いCSS3の使いどころや書き方も細かく解説されてます。
この点はjQuery Mobileでなく通常のスマートフォンサイト制作においても役立ちます。

今のところ実務での利用がなかったとしても本書に目を通す価値はあると思います。
本書の中で次のように書かれています。

あまりカスタマイズしすぎると逆に手間がかかり、JQuery Mobileを使うより1からHTMLとCSSでサイトを作成したほうが簡単な場合もあります。
JQuery Mobileを利用する場合は、事前にどこまでカスタマイズするかを見極めて、工数の削減が見込める場合に利用するとよいでしょう。
–中略–
本書を通じてjQuery Mobileでできることを事前に把握し、実際の業務での利用範囲を判断するとよいでしょう。

確かにその通りで、jQuery Mobileを使うには最適でないケースもあります。
しかしその判断を下すにも、
何ができて何ができないのか、簡単に実装できるのか、時間がかるのか、
そのようなことを知っておく必要があります。
また、それらを知ることで今後のスマートフォンサイト制作の時に選択の幅も広がると思います。

jQuery Mobileを学ぼうと思ってる方は本書を検討してみてはいかがでしょうか。

最後に、ASCII様にはこの書評をもって献本の御礼とさせて頂きます。
ありがとうございました。

Similar Posts:

• 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• CSS3のセレクタとjQueryの書き方
• wordpressでjQueryを使う時の注意点
• twitter APIとjQueryでtwitter widgetを作成する

• 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• CSS3のセレクタとjQueryの書き方
• wordpressでjQueryを使う時の注意点
• CSSのセレクタを活用しよう

はじめに

全てを網羅するのは逆に手間だと思うので、
この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。
また、サイトによってはphotoshopの素材とベクター素材を扱ってるサイトもあり、
無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45で取り上げたサイトはこちらには載せてません。
上記エントリーのサイト説明に「ベクター」と書いてあるサイトはベクター素材も扱ってます。

サイト一覧

freepik.com

無料のベクター素材を検索できます。
ライセンスは素材によって異なるので要確認です。

Vecteezy!

ベクター素材のコミュニティサイトです。数・種類とも豊富です。
デザイナーは自分で制作した素材を提供できます。
ライセンスは素材により異なります。

Pixeden

サイトもきれいであり素材の質も高いです。
ベクター以外にもphotoshopファイルも扱ってます。
個人・商用利用可能です。

Free Vectors

個人・商用利用が可能なベクター素材を提供してます。

ARS FRAFIK

photoshopのブラシや背景画像も提供してます。
個人・商用利用可能です。

QVectors

素材の数が豊富で質も高めです。
ライセンスは素材によって異なります。

CoolVectors

素材の数が豊富で質も高めです。
ライセンスは素材によって異なります。

Vectors On Fire

質の高い素材が揃ってます。
ライセンスは素材により異なります。

VECTOR-FINDER

素材の質が高いです。
カテゴリかタグクラウドを利用すると探しやすいです。
素材の提供も可能です。
ライセンスは素材により異なります。

DryIcons

blog形式の素材提供サイトです。
素材の質は高いです。
ライセンスは素材により異なります。

DragonArtz Designs

blog形式の素材提供サイトです。
素材の質は高いですが、商用利用は不可です。

Free Vectors Daily

日替わりでベクター素材を紹介しています。
素材の提供もできます。
ライセンスは素材により異なります。

Vector Valley

数は少ないですが質は高いです。
素材の提供もできます。
ライセンスは素材により異なります。

Vectorilla

ベクターだけでなくフォントも提供してます。
質は高いです。
ライセンスは素材によって異なります。

Vectorious.net

素材をダウンロードするにはユーザー登録が必要ですが、素材の質は高いです。
無料アカウントでダウンロードできる素材は「Free vectors」カテゴリです。
また、商用利用は有料となります。

VECTORART.ORG

数は多くないですが、質の高い素材が揃ってます。
ライセンスは素材によってに異なります。

Bing Gallery

ベクター以外にもphotoshopファイルも提供してます。
ライセンスは素材によって異なります。

VectorStock

ベクター素材のストックサイトです。
素材をダウンロードするにはユーザー登録が必要です。
またアカウントにはグレードがあり、グレードにより使用できる素材も異なります。
「Free Vector」カテゴリが無料ですが、商用利用は有料です。

Vector 4free.com

扱っている量も種類も豊富です。
サイドバーのタグクラウドを利用すると探しやすいです。
素材の提供もできます。ライセンスは素材によって異なります。

Free-Vectors.com

扱っている量も種類も豊富。
ライセンスは素材によって異なります。

VECTORS

シンプルなデザインの素材提供サイトです。
質はまちまちです。ライセンスは素材によって異なります。

Vecto2000

種類も数も豊富です。パターンやphotoshopブラシも扱ってます。
ライセンスは素材によって異なります。

Vector NET

いろいろなテイストの素材を提供してます。
ライセンスは素材により異なります。

Free Vector Download

可愛いらしいテイストのイラストが多いです。
ライセンスは素材により異なります。

Love Vector Free

イラストからエレメンツ、背景まで扱ってる素材の種類が豊富です。
ライセンスは素材により異なります。

VECTORLEADY

人物のシルエットや派手目の素材が多いです。
ライセンスは素材により異なります。

VECTOR-EPS

blog形式の素材提供サイトです。
DTPで使いそうな素材が多い気がします。ライセンスは素材により異なります。

iDesign * Vectors

カテゴリが細かく分けられてて目的の素材を見つけやすいです。
ライセンスは素材により異なります。

GwebStock

背景に使えそうな抽象的な素材が多いです。
ライセンスは素材により異なります。

Uberpiglet vectors

シンプルで見やすいサイトですがカテゴリ分けされてないので目的の素材が探しにくいです。
ライセンスは素材により異なります。

Vector madness

数はさほど多くないです。
ライセンスは素材により異なります。

Vector Junky

細かくカテゴリ分けされてて探しやすいです。
素材の提供もできます。
ライセンスは素材により異なります。

VECTOR PORTAL

種類が豊富です。若干古いテイストの素材が多いと思います。
個人・商用利用可能です。

花・植物系ベクター素材集 flode

国内サイトです。
花や植物のベクター素材を提供してます。
個人・商用利用可能です。

クリップアートファクトリー

レポートやプレゼンに使えそうなクリップアート提供サイトです。
素材はEPS形式も用意されてます。

Silhouettes

ベクトル形式のシルエット素材提供サイトです。
photoshopのカスタムシェイプ形式でも提供してます。
ライセンスは個人・商用利用可能です。

商用フリーで使える影絵素材サイト シルエットデザイン

国内サイトです。
シルエットの素材を提供してます。商用利用も可です。

seeklogo

企業のロゴを検索できます。
またロゴはベクター形式で取得できます。
※企業のロゴのため利用の際は注意が必要です

Brands of the World

企業などのロゴのベクターをメインに扱ってます。
※企業のロゴのため利用の際は注意が必要です

TM-R

ロゴ・マーク等のファイルを共有・提供するデータベースです。
掲載されているロゴ・マーク等は、それぞれ各企業・団体等の商標および登録商標ですので、
商用での利用は、事前に各企業・団体等の許可が必要です。

Similar Posts:

• 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選
• Adobe Bridgeの使い方と便利な10機能
• WordPress3 正式リリース
• web制作者が印刷物を制作するときにチェックしたい10項目
• はじめてのWebfonts

• 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選
• Adobe Bridgeの使い方と便利な10機能
• はじめてのWebfonts
• WordPress3 正式リリース
• web制作者が印刷物を制作するときにチェックしたい10項目

当ブログでは殆どデザインしてませんが、
公式のwidgetに近いデザインにする場合の制作方法を書きました。

サンプル

ベースはA jQuery Twitter Ticker | Tutorialzineを参考にしてます。
また複数ユーザーのツイートを表示したい場合は上記サイトが参考になります。

ソース

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

jQueryはgoogleのCDNを利用してます。
jScrollPaneはスクロールバーの機能を提供するスクリプトです。
jScrollPane – cross browser styleable scrollbars with jQuery and CSS
のダウンロード→download a zipから一式取得できます。
mousewheel.jsはスクロールバーをマウスホイールに対応させます。
mousewheel.jsもjScrollPaneの一式に入ってます。
jScrollPaneのスタイルを適用させるためjquery.jsrollpane.cssも読み込みます。

<script type="text/javascript">
$(function(){
	var screenName = 'barchin';	//初期設定1：スクリーンネーム
	//twitter API
	var twitAPI = "http://api.twitter.com/1/statuses/user_timeline.json?callback=?";

		//JSON取得
		$.getJSON(twitAPI,
		{
			screen_name: screenName,
			count: '20',			//初期設定2：書き出すツイート数
			exclude_replies :true	//リプライ表示・非表示
		},
		function(data){
				//プロフ取得
				var userName = data[0].user.name;
				var userId = data[0].user.name;
				var userPic = '<img src="'+data[0].user.profile_image_url+'" />';
				$("#userName").html(userName);	//ユーザー名出力
				$("#userPic").html(userPic);	//アイコン出力
				$("#screenName").html('<a href="http://twitter.com/'+screenName+'">'+screenName+'</a>');	//スクリーンネーム出力

				var container=$('#tweet-container');
				container.html('');
				//#tweet-containerの初期化

				//ツイートごとに処理
				$.each(data, function(i, item){
					var str = '	<div class="tweet">\
					<div class="txt">'+formatTwitString(item.text)+'</div>\
					<div class="time">'+relativeTime(item.created_at)+'</div>\
					<div class="action"><a href="http://twitter.com/intent/retweet?tweet_id='+item.id_str+'">retweet</a>│<a href="http://twitter.com/intent/favorite?tweet_id='+item.id_str+'">favorite</a></div>\
					</div>';				

					//ツイートをソースに追加
					container.append(str);
				});
				//jScroll
				container.jScrollPane();
		});
		$('#tweet').show('slow');
});

// ツイート本文フォーマットfunction
function formatTwitString(str)
{
	str=' '+str;
	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
	// URLにリンクを付ける
	str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
	// メンションにリンク
	str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
	// ハッシュにリンク
	return str;
}
// ツイートの時間を割り出す
function relativeTime(pastTime)
{
	var origStamp = Date.parse(pastTime);
	var curDate = new Date();
	var currentStamp = curDate.getTime();
	var difference = parseInt((currentStamp - origStamp)/1000);

	if(difference < 0) return false;
	if(difference <= 5)			return "Just now";
	if(difference <= 20)			return "Seconds ago";
	if(difference <= 60)			return "1 minute ago";
	if(difference < 3600)		return parseInt(difference/60)+" minutes ago";
	if(difference <= 1.5*3600) 	return "1 hour ago";
	if(difference < 23.5*3600)	return Math.round(difference/3600)+" hours ago";
	if(difference < 1.5*24*3600)	return "1 day ago";
	// 1日前の場合はその日付を

	var dateArr = pastTime.split(' ');
	return dateArr[1]+' '+dateArr[2]+
	(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>

まずTwitterAPIを使ってツイートのストリームをJSON形式で取得します。

初期設定として、スクリーンネームを入力します。
表示するツイート数、リプライの表示設定などもします。

プロフィール情報もJSONから取得します。
各ツイートにはそのツイート発言者の情報が含まれており、
今回は全てのツイートが同一ユーザーなので一番目のツイートから情報取得してます。

各ツイートごとに処理を行います。
ツイート文はそのままの状態ではURLなどにリンクが貼られてないので、
formatTwitStringを使ってリンクを付けます。
投稿時間はそのままでは投稿した時間となるのでrelativeTimeを使って、
現在時間との差を割り出しどのくらい前の投稿か表示します。

jScrollを実行してスクロールバーの機能を実装します。

HTML

<body>
<div id="top-bar">
	<a href="http://twitter.com/barchin"><img src="img/img_topBar.jpg" alt="follow me!" width="300" height="110" /></a>
</div>
<div id="twitter-widget">
	<div id="prof">
		<div id="userPic">Loading...</div>
		<div id="screenName">Loading...</div>
		<div id="userName">Loading...</div>
	</div>
	<!--stream-->
	<div id="tweet-container">
	Loading...
	</div>
	<!--/#streem-->
</div>
</body>

#profでは、twitterのアイコンやユーザー名を表示します。
#twee-container内にストリームを表示します。

CSS

<style type="text/css">
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
#top-bar{
	width:300px;
}
/* widget*/
#twitter-widget{
	padding:0 5px;
	width:290px;/*300px*/
	height:350px;
	background:url(img/bg_ticker.jpg) no-repeat #50340d;
	color:#666666;
	/* 角丸 */
	-moz-border-radius:0 0 6px 6px;
	-khtml-border-radius: 0 0 6px 6px;
	-webkit-border-radius:0 0 6px 6px;
	border-radius:0 0 6px 6px;
}
/* ツイートのストリーム */
#tweet-container{
	height:270px;
	width:100%;
	overflow:auto;
	background:rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 1px 1px 3px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset 1px 1px 3px 0px #000; /* Firefox用 */
	box-shadow: inset 1px 1px 3px 0px #000; /* CSS3 */
}
/*プロフィール*/
#prof{
	padding:0 8px;
	height:60px;
	overflow:hidden;
}
#userPic{
	float:left;
}
#userPic img{
	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
#screenName{
	margin:0 0 0 55px;
	font-weight:bold;
	font-size:14px;
}
#screenName a{
	color:#fff;
	text-decoration:underline;
}
#userName{
	margin:0 0 0 55px;
	color:#fff;
}
/*tweet*/
.tweet{
	margin:5px 8px;
	padding:5px 0;
	color:#fff;
	width:auto;
	overflow:hidden;
}
/*post時間*/
.tweet .time{
	display:inline;
	text-transform:uppercase;
	font-size:10px;
	color:#aaa;
	white-space:nowrap;
}
/*retweet&favorite*/
.tweet .action{
	display:inline;
	padding-left:1em;
}
/*text*/
.tweet .txt{
}
/*scroll bar*/
.jspTrack{
	background-color:#fff;
	-webkit-box-shadow: inset 1px 1px 1px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset 1px 1px 1px 0px #000; /* Firefox用 */
	box-shadow: inset 1px 1px 1px 0px #000; /* CSS3 */
}
.jspDrag{
	background-color:#805400;
	-webkit-box-shadow: inset -1px -1px 1px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset -1px -1px 1px 0px #000; /* Firefox用 */
	box-shadow: inset -1px -1px 1px 0px #000; /* CSS3 */
	background-image: linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -o-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
}

Similar Posts:

• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• Facebook・Twitterなどソーシャルボタン設置方法まとめ
• 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
• twitterを使用した求人
• [書評]jQuery Mobile スマートフォンサイト デザイン入門

• CSS3のセレクタとjQueryの書き方
• WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
• CSSのセレクタを活用しよう
• Javascriptでhtml中のテキストを変更する
• facebookのsocial plugin(ソーシャルプラグイン)一覧

普段聞くことのできない貴重な話が聞けました。

始めに

このエントリーはセミナーで取ったメモを元に僕なりにまとめています。
 Gabe Campodonico氏の発言の詳細は安藤日記さんがまとめられてたのでそちらをご覧ください。
安藤日記

Gabe Campodonico氏

Gabe Campodonico氏は、現在Evernoteのクリエイティブディレクターです。
その経歴はポスターや本などのグラフィックデザインから始まり、
少しずつWebサイトに移り、モバイルに移ってきました。
その中でCoca Cola、Disney 、Apple、HP、Nikeなどのブランドを担当してきました。
Gabe Campodonico氏いわく「スペシャリストではなくジェネラリストを目指してる」とのこと。

ロゴ

ロゴのデザインに着手する前に、できるだけ多くの情報を集めます。
Evernoteであれば、「永久」「記憶」「ノート」「何でも」「どこでも」「アプリ」…。
たくさんの社員と話し、何に熱意を持ってるのか、何を目指してるのか聞きます。

アイコン

収集した情報をもとに数十の案を考えます。
この時点では「象」の他に、「無限」や「ノート」を表した案もありました。

その案の中からブランドを高めるために、ユニークで他社との差別化を図れる「象」を選択しました。
ちなみに西洋には「Elephants never forget」（ゾウは決して忘れない）ということわざがあり、
そこから"永遠に記憶する"と言う意味で「象」を使いました。

via flickr micamica

「象」をメインの形に決めてから、更に数十の案を出します。
幾何学的なものからリアルなものまで様々な案を。
しかしあまりにシンプルなものはつまらないものになってしまいます。
なのでここに「ノート」の意味も付け加えました。
ダブルミーニングです。

そして辿り着いたのが今のロゴです。
誰にでもそれが「象」であると分かるシェイプで、
耳の折れは「ノート」を意味してます。
シンプルではありますが、二つの意味を持たせることで覚えやすくなります。

カラー

まずアイコンは象なのでグレーに決まりました。
当初のカラーは赤か青の予定でしたが、
その色をロゴに使ってる企業は世に多数あります。
それらと差別化をするためにあまり使用されてないグリーンを選択しました。
App Storeの紹介のときに必ずEvernoteのロゴが使われますが、
グリーンのロゴはEvernoteだけです。
アイコンで並べたときもすぐにEvernoteは目に付くようになりました。

またロゴにもトレンドがあります。
例えば「Web2.0系ロゴ」と言えばどんなものかイメージできるでしょう。
トレンドを取り入れることで最新の感じを持たせることはできますが、
逆に時間が経てばつまらないものになってしまいます。
Evernoteのロゴは長年使われるようにトレンドを取り入れることはしてません。

また、Evernoteのロゴ制作の仮定は下記のページで見られます。
英語ですが他のアイコンデザインも見れて興味深いと思います。
The Evernote Logo & Icon – Brand Identity Process

パッケージデザイン

殆どの企業はパッケージに機能を載せます。
しかしアップルはパッケージも広告と考えます。
顧客がその商品を購入して持って歩くとそれは「歩く広告」になります。

via flickr mattwitmer

また、外観だけでなく中身もデザインします。
アップルの製品は箱を開けたときもワクワクを体感できる様にデザインをします。
このパッケージングのデザインはアップルだけが優れてる訳じゃありません。
食品や宝石などのパッケージでそれはよく見られます。
特に日本のパッケージングのデザインは優れています。

via flickr squareintheteeth

UI&ブランド

ブランドは見た目のデザインだけで表すものではありません。
それは理解しやすいのか？
反応が素早いのか？
安心できるのか？
満足感が得られる？
などの要素も同時に重要です。
故にEvernoteのアプリケーションは、Mac、Windows、iPhone、iPad、Android各々の
プラットフォームに最適化されたデザインにしてます。

ソフトウェアの機能性

機能を増やすより削る方が難しいです。
開発者が陥りがちな間違いをあげます。

• AとBのどちらがいいか迷ったとき両方つけてしまいユーザーに選択を委ねる。
• ボタンなどを置く位置に迷って全てメニューに入れてしまう。迷うのはいらないもの。
• 競合よりもたくさんの機能があることが優れていると思いこむこと。

機能を選ぶとき

多くの開発者は初心者のことを忘れてしまいます。
しかし初心者向け、上級者向けとターゲットで判断するより、
その機能がそのソフトウェアのコアとなりうるかどうかで判断します。
全ての人にいいものではなく優先順位を付けて高いものに対応します。
最初はシンプルなものから始め、あとから機能を付け加える余裕を持ちます。

User Interface

UIのアイデアが生まれるのはモバイルからです。
特にiPadのUIは素晴らしいです。

Immersive Experience

UIを感じさせない、コンテンツのみに集中させる手法です。
例えば、コンテンツをフルスクリーンで表示しUIは非表示にし、
タッチした時だけ表示させるような。
ただ、これは初心者には優しくありません。
始めのうちは解説やUIを表示し、慣れてきたら隠す。など工夫は必要です。

Fluid Interface

自分がどこからきて、どこにいて、どこに行くか把握できるようにします。
アニメーションなどを使い移動の痕跡を残します。
webなどではとにかく早く表示することが優先されましたが、
モバイルデバイスのUIでは今はどこからどこに行ったかが分かる様にすることが重要です。
例えばtwitterではリンクをクリックしてもタイムラインは同じ場所そのまま表示されてます。
iPad標準アプリのフォトは、あけると横に広がりクローズするとアニメーションしながら
元の位置に戻ります。
コンテンツがどこから出てきたのか？どこに戻るのか分かるようになってます。

via flickr johnscotthaydon

感想

世界中で使われてるアプリのクリエイティブディレクターが
どんな考えでどんな意識でデザインをしてるかが生で聞けて非常に刺激的な体験でした。

振り返ってみれば決して目新しいことはなく、デザインにしろUIにしろ聞いたことはある内容です。
ただ、それを知識としてではなく、高いレベルで実践しているなと感じました。

モバイルのアプリのUIから学べる点は多いなと思いました。
今まではただアプリを使ってただけですが、この日以降UIに注目しています。
あと、非常にiPadが欲しくなりました。

Similar Posts:

• レスポンシブWebデザインのブレークポイント調査
• Appleが推奨するSkeuomorphic Designとそのメリットデメリット
• Facebook・Twitterなどソーシャルボタン設置方法まとめ
• Flickr Badge: Flickrの写真をサイトに掲載するブログパーツ
• web制作者が印刷物を制作するときにチェックしたい10項目

• レスポンシブWebデザインのブレークポイント調査
• レスポンシブwebデザインで制作する時のポイント
• Appleが推奨するSkeuomorphic Designとそのメリットデメリット
• iPhone4の新機能8+1
• Flickr Badge: Flickrの写真をサイトに掲載するブログパーツ