Design Spice

印刷物などに使われているフォントを調べるiPhoneアプリ

hiro — Mon, 23 Jan 2012 13:08:42 +0000

印刷物などに使われているフォントを調べる「WhatTheFont」というiPhoneアプリを紹介します。

ちょっとした小ネタ記事です。

WhatTheFont

既に知ってる方も多いと思いますが、
画像で使用したフォントを調べるWhatTheFontというwebサービスがあります。
WhatTheFont! « MyFonts

画像をアップロードすると画像で使われているフォントを調べてくれるサービスです。
WhatTheFont for iPhoneはこのサービスのiPhoneアプリ版です。

App Store – WhatTheFont

WhatTheFont for iPhoneの使い方

WhatTheFontはフォントを検索するために画像をサーバーにアップロードするので、
Wi-Fi環境での使用が条件となります。

まず調べたいフォントをカメラで撮影します。
またはカメラロールから写真を選んでもオーケーです。

調べたフォントの部分だけをトリミングします。
左上から右下にドラッグするとエリアが選択されます。

読み込んだフォントとアルファベットを対応させます。
今回の様に分かりやすくハッキリした画像は自動的に正確なアルファベットを読み取ってくれます。
不鮮明な画像の場合はアルファベットが間違ってたりするので
その時は正しいアルファベットを入力します。

アルファベットの対応が全て終わったら「次へ」をクリックすると、
画像で使われてるフォントに近いフォントを一覧で表示してくれます。

フォントの詳細も見れます。

使ってみた感想

使用してみた感想としては、精度はあまり良くないと思います。
今回の例のように文字がハッキリした画像なら良いのですが、
背景にテクスチャが入ってたり明暗の差が小さい画像は読み取りの精度が落ちます。

あと、ぶっちゃけてこのアプリ入れてから2、3回くらいしか使ってません…
そもそも使う機会がないと言うか、どちらかと言うと仕事柄web版の方が使いますね。

ただ、印刷の仕事されてる方や、印刷物からインスピレーション受ける場合とかには使えるかも。
無料アプリなので興味ある方は試してみてください。

App Store – WhatTheFont

Similar Posts:

Similar Posts:

無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45

hiro — Mon, 16 Jan 2012 00:15:32 +0000

photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。

個人のブクマを整理してる段階でまとめたものですが、
共有します。

はじめに

photoshopの素材を紹介しているサイトは多いので、
主にphotoshopの素材の提供を主としてるサイト、
またはそのようなカテゴリを持つサイトのみを集めました。
紹介文の後のリストはそのサイトで扱ってる素材の種類となります。

また、ライセンスについては分かる範囲で記載しましたが
間違いがありましたら指摘頂けると助かります。

サイト一覧

deviantART

アーティストとアートを愛する人達のコミュニティサイト。
素材を探していてこのサイトに辿り着くことは多いのではないでしょうか。
メンバー登録するとメンバーは自分のファイルを提供したり販売したりもできます。
photoshopファイル以外に、ベクター素材、GIMP素材、Flashなどもあります。
photoshopの素材へは左のメニューから
「Category」→「Resource&stock Images」→「Application Resources」を選択。
ライセンスは各素材ごとに異なります。

photoshopファイル
ベクター素材
テクスチャ・背景
photoshopチュートリアル
ブラシ
webエレメンツ
パターン
カスタムシェイプ
アクション

download PSD

カテゴリが豊富で細かく分けられてて良いです。
一覧で表示されるので探しやすいですが、一番上の行は他サイトへのリンクとなってます。

photoshopファイル
アイコン
webサイトテンプレート
ロゴ
webエレメンツ
カスタムシェイプ
レイヤースタイル

365psd

365日日替わりでphotoshopファイルの素材を提供してます。
個人で始めたプロジェクトですが現在は Designmooに買収されて運営してます。
素材は個人・商用利用可能です。

photoshopファイル
アイコン
webエレメンツ

Ps Galaxy

photoshopファイルを提供するサイトです。
分かりにくいですが左上にプルダウンメニューがあります。
ライセンスは各素材ごとに異なります。

photoshopファイル
webエレメンツ
カスタムシェイプ
グラデーション
アクション

PSD Graphics

素材の質は高いです。
商用利用にはライセンスの購入が必要です。
Commercial Use | psdGraphics

photoshopファイル
テクスチャ・背景
アイコン
webサイトテンプレート
photoshopチュートリアル
ロゴ
webエレメンツ

PSD.CO

取り扱っているファイルの種類が豊富です。
download PSD とデザインが似ています。
ライセンスはオープンソースファイルと書いてあります。

photoshopファイル
テクスチャ・背景
アイコン
photoshopチュートリアル
ブラシ
webエレメンツ
パターン
カスタムシェイプ
レイヤースタイル
グラデーション
アクション

Photoshop Files

豊富なphotoshop素材があります。
ファイルをダウンロードするにはユーザー登録する必要があります。
ユーザーは自分のファイルを配布することもできるユーザー参加型の素材サイトです。
ライセンスは素材ごとに異なります。

photoshopファイル
webエレメンツ
アイコン
webサイトテンプレート
ブラシ
ロゴ
パターン
カスタムシェイプ
レイヤースタイル

Free Photoshop

扱ってる素材の種類が豊富です。
全ての素材はロイヤリティフリーです。

photoshopファイル
テクスチャ・背景
ブラシ
パターン
カスタムシェイプ
レイヤースタイル
グラデーション
スウォッチ

FREE PSD FILES

photoshop素材の種類が豊富で印刷物のテンプレートなどもあります。
ライセンスは素材ごとにことなります。

photoshopファイル
テクスチャ・背景
アイコン
webサイトテンプレート
ロゴ
webエレメンツ
レイヤースタイル
アクション

Free PSD Arena

カラフルな色合いの素材が多いです。数はそれほど多くないです。
個人・商用利用可能です。

photoshopファイル
webサイトテンプレート
ロゴ
webエレメンツ
グラデーション

favbulous

デザインもすっきりしてて見やすいです。
UIやボタンなどのwebエレメンツが多い気がします。
アカウント登録すると素材の提供ができます。
ライセンスは素材ごとに異なります。

photoshopファイル
ベクター素材
アイコン
webサイトテンプレート
webエレメンツ

Freebies Booth

デザインがきれいで見やすいです。
自分のファイルも提供できますが審査があるようです。
故に高品質の素材のみが揃ってます。
素材は個人・商用利用可能です。

photoshopファイル
ベクター素材
アイコン
webエレメンツ

Graphic Clouds

デザインがきれいで見やすいです。
photoshopファイルのほかに、GIMPのブラシも提供してます。
ライセンスは素材ごとに異なります。

photoshopファイル
テクスチャ・背景
アイコン
ブラシ
webエレメンツ
パターン

Free Photoshop Download

素材の種類が豊富です。
自分の素材をアップロードして提供することもできます。
ライセンスは素材ごとに異なります。

photoshopファイル
テクスチャ・背景
アイコン
webサイトテンプレート
ブラシ
webエレメンツ
パターン

PixelsDaily

ミニマルなデザインで見やすいです。
毎日素材やチュートリアルを提供してます。
高品質なコンテンツと自負してるだけあって品質は高いです。

photoshopファイル
アイコン
photoshopチュートリアル
webエレメンツ

Design Kindle

デザインがきれいで見やすいです。
高品質の無料のwebデザイン素材を提供することを目標としており、
この活動に貢献したいデザイナーは素材を提供することができます。

photoshopファイル
ベクター素材
テクスチャ・背景
アイコン
webエレメンツ
パターン
レイヤースタイル

Dezignus.com

個人のブログで素材の提供をしています。
photoshoopファイルだけでなく、ベクターファイルも提供してます。

photoshopファイル
ベクター素材
テクスチャ・背景
アイコン
photoshopチュートリアル
webエレメンツ
カスタムシェイプ

GraphicsFuel.com

グラフィックデザイナーが運営してるブログです。
オリジナルの素材を提供しています。
素材は個人・商用利用可能です。

photoshopファイル
テクスチャ・背景
アイコン
webサイトテンプレート
photoshopチュートリアル

Purty Pixels

海外デザイナーの運営するサイトです。
素材の質は高いです。
個人・商用利用可能です。

photoshopファイル
アイコン
webサイトテンプレート
webエレメンツ

Sallee Design

エンジニア出身のデザイナーが運営するサイトです。
素材の数は少ないですが、サイトのデザインやコンテンツは興味深いです。
ライセンスは素材ごとに異なります。

photoshopファイル
アイコン

Le Freebies by Breezy

代理店のサイト。数はそれほど多くありません。
多分ですが、デザイナーに素材を提供してもらい、
代わりにサイト上でデザイナーのプロフィールを載せてるみたいです。
個人・商用利用可能。

photoshopファイル
webエレメンツ

Pixel Pixel Pixel

フリーの素材を提供するブログです。
素材の提供も受け付けてます。
個人・商用利用可能です。

photoshopファイル
ベクター素材
テクスチャ・背景
アイコン
ブラシ
ロゴ
webエレメンツ
パターン

GuuHuu

英国のデザイナー&デベロッパーのサイトです。
素材の数はまだ少ないです。
個人・商用利用可能です。

photoshopファイル
webエレメンツ

Blaz Robar.com

オーストラリアのグラフィックデザイナーのサイトです。
webサイトのテンプレートの提供を目的としてるので、サイトのエレメント素材が主です。
個人・商用利用可能です。
禁止事項として、パンツを履かずにサイトの閲覧は禁止されてます。

photoshopファイル
アイコン
webサイトテンプレート
webエレメンツ

Kb’s portfolio

Googleで働いているUIデザイナーのブログです。
UIの素材が多いです。
数は少ないですが高品質でモダンなデザインです。

webエレメンツ

Icon Deposit

サイト名の通りアイコン素材がメインです。
また素材だけでなく、css3やjQueryのチュートリアルもあります。

photoshopファイル
ベクター素材
アイコン
photoshopチュートリアル
webエレメンツ

psdchest

ポーランドのwebデザイナーが運営してるサイトです。
UIやwebwebエレメンツが主です。
個人・商用利用可能です。

photoshopファイル
webエレメンツ

Premium Pixels

英国のwebデザイナーが運営してるサイトです。
サイトもきれいで見やすいです。
個人・商用利用可能です。

photoshopファイル
アイコン
webエレメンツ

1000PSD.COM

ミニマルなサイトで見やすいです。
ライセンスは明記されてません。

photoshopファイル
テクスチャ・背景
アイコン
webサイトテンプレート
webエレメンツ

Colorburned

デザインブログです。素材の提供だけでなくチュートリアルや記事も書いてます。
サイト上で何かを得て、創造性を高めてくれることを望みとしてます。
個人・商用利用可能です。

photoshopファイル
ベクター素材
テクスチャ・背景
photoshopチュートリアル
ブラシ

Designbum

デザイナーのポートフォリオサイトです。
プロジェクトのファイルを提供してます。
商用利用は不可なのでファイルは学ぶために使用されることを希望してます。
Designbum: Living Today's Tomorrows

photoshopファイル
ベクター素材

PS Brushes.net

photoshopブラシを専門で紹介してるサイト。
無駄な情報を省いてるので探しやすいです。
ライセンスは素材ごとに異なります。

ブラシ

Brusheezy!

ブラシを専門で紹介してるサイトですが、パターンやシェイプなどその他の素材も提供してます。
ライセンスは素材ごとに異なります。

photoshopファイル
テクスチャ・背景
アイコン
ブラシ
webエレメンツ
パターン
カスタムシェイプ
レイヤースタイル
グラデーション

BrushLovers.com

ブラシを専門で紹介しているサイトです。無料も有料も扱ってます。
個人・商用利用可能です。

ブラシ

BrushKing

ブラシを専門で紹介しているサイトです。
ライセンスは素材ごとに異なります。

ブラシ

FBrushes

photoshopのブラシ、パターン、テクスチャをメインに扱ってます。
ライセンスは素材ごとに異なります。

テクスチャ・背景
ブラシ
パターン

myPhotoshop Brushes

photoshopブラシがメインですが、パターンやシェイプなども扱ってます。
ライセンスは素材ごとに異なります。

ブラシ
パターン
カスタムシェイプ
レイヤースタイル
グラデーション

Get Brushes.com

photoshopのブラシを紹介するサイトです。
個人で運用してるみたいです。
紹介してるブラシは基本的に個人・商用利用可能です。

ブラシ

QBrushes

ブラシを専門で紹介しているサイトです。
ネット上から情報を収集してるみたいなので、このサイトオリジナルはないかも…。
ライセンスは素材ごとに異なります。

ブラシ

iDesign * Brushes

ブラシを専門で紹介しているサイトです。
毎日ブラシをアップしてます。
ライセンスは制作者に要確認。

ブラシ

Brush Directory.com

ブラシ、パターン、アクションをメインに提供してます。
自分の素材を提供することもできます。
ライセンスは素材ごとに異なります。

ブラシ
パターン
アクション

Brushes Download

ブラシがメインですが、グラデーションやレイヤースタイルなど他の素材も提供してます。
自分のファイルを提供する事もできます。
ライセンスは素材ごとに異なります。

ブラシ
アイコン
photoshopチュートリアル
レイヤースタイル
グラデーション

Free-Brushes.com

ブラシを専門で紹介しているサイトです。
photoshopだけでなく、GIMP、Paintshop Proのブラシも扱ってます。
ライセンスについては明記されてませんが制作者に確認と思われます。

ブラシ

Shapes 4 Free

カスタムシェイプの提供をメインにしているサイトです。
個人・商用利用可能です。

photoshopファイル
アイコン
パターン
カスタムシェイプ

Free Photoshop Patterns

photoshopパターン素材の提供をメインにしているサイトです。

パターン

おわりに

最近はかなり高品質の素材も無料で使える様になりました。
デザイナーの方は制作で使う以外でも時間があれば、ファイルをダウンロードして
どのように作られてるかを調べるだけでもかなりの勉強になるでしょう。

また多くの素材はデザイナーの方によって提供されてます。
そして彼らが無償で素材を提供するのは、概ね他のデザイナーの効率やスキルアップのためであり、
ひいてはデザインコミュニティへの貢献を目的としております。
いち制作者としてその信念に感銘を受けると共に、自分も少しずつでも提供していこうと思います。

Similar Posts:

Similar Posts:

「Webデザイン」とはなにか？じっくり考えてみた（2012年）

hiro — Wed, 04 Jan 2012 03:24:55 +0000

年末年始は何かと振り返ったり考えたりするものです。
昨年後半から「webデザイン」について考えており、
自分なりに出した考えを書いてみます。

またタイトルに2012年を入れたのは
時間と共にwebのあり方や自分の考えも変わってくるので、
"今現在の考え"であることを示すために入れてます。

はじめに

この記事は僕の考え方であって、それが正解とは思いませんし異なる意見があって当然だと思います。
そのくらいwebデザインという言葉の持つ意味は多様化してると思います。
読んでくれた方が「webデザイン」について考える一つのきっかけになったら良いなと、
そのくらいの気持ちでいます。

問題解決のデザイン

webデザインする時にはそこには必ず目的が存在します。
その目的を達成するための手段としてデザインをします。
全てのデザインはここに収束されます。

目的は、情報を伝えることであったり、商品の購買を促すこと、サービスを利用してもらうこと、
ブランドを認知してもらうこと、
などなどサイトにより様々です。
そして目的が異なればデザインの手法も異なります。
場合によっては敢えて視覚的なデザインや機能の一部を削ることもあります。

どのような判断を下すか。
それには幅広い知識、豊富な経験が必要不可欠であり最も難しい部分ではないかと思います。

視覚的なデザイン

webデザインと言ったら真っ先にこれを思い浮かべる人が大多数でしょう。
かっこいい、かわいい、おしゃれ、クール、POPなど
見た目でイメージを表現します。
直感的に感じる部分です。

視覚的なデザインは配色や、グラフィック、タイポグラフィなどの使い方、
レイアウト、質感などの要素が組み合わさって表現されます。
またwebデザインにもトレンドがあり、トレンドを取り入れることで新しいイメージを伝えることができます。

時に人は「デザインが良いから」という理由で物事を選択することがあります。
「見た目」に重点を置いたサイトは疑問視されることも増えてきましたが、
サイトのコンセプトによっては「見た目」を優先するケースは十分にありえます。

視覚的なデザインの技術については今後掘り下げて記事にしていこうと思ってます。

機能のデザイン

誰にとっても「易しく」「優しい」デザインをします。

優れたUI（ユーザーインターフェイス）は説明が僅かでもユーザーは直感的に理解できるものです。
簡単で分かりやすいUIをデザインすることでユーザービリティは高まります。
webの特性を活かし、インタラクションも積極的に取り入れたい部分です。

また年々webの需要は高まっており、webは一部のユーザーだけのものではなくなりました。
老若男女、障害のある人ない人、誰もがアクセスしてきます。
誰もが情報を取得できるアクセシビリティも求められてます。

参考
ユーザインタフェース – Wikipedia
ユーザビリティ – Wikipedia
ユーザーエクスペリエンスデザイン – Wikipedia
インタラクションデザイン – Wikipedia
アクセシビリティ – Wikipedia

体験のデザイン

ユーザーエクスペリエンスには前述のUIやインタラクションデザインも含まれます。
ユーザーが満足を得られるには使いやすさや分かりやすさは外せません。

その他の要素の一つに面白い・楽しいも関連すると思います。
優れた体験はユーザーに強い印象を植え付けます。

例えばパララックス効果もその一つでしょう。

音声や動画、ゲームなどのリッチなコンテンツもユーザーエクスペリエンスを高めてくれますが、
内容によってはユーザーに不快感を与えてしまうこともあるのでよく考えて使用する必要があります。

参考
ユーザをサイトに長居させるもの–それはデザインの魅力と楽しさだ

情報のデザイン

「Contents is King」(コンテンツが王様)という言葉がありますが、
デザインはその王様を活かすことも殺すこともできます。
またここでいうデザインとは視覚的なデザインだけではなく、
コンテンツをどう扱うか、「計画」の意味でのデザインも含みます。

コンテンツをどのように見せるか、どのように分類するか、どのように構成するか。
どんなに優れたコンテンツでもユーザーの目に留らなければ意味がありません。
情報が適切な正しく伝わる工夫も重要です。
それらを実現するために上記で述べてきたデザインが必要です。

戦略のデザイン

広義で考えるならこれもwebデザインに含まれると思います。

現在ではwebも当然のように広告のメディアとして捉えられており、
マーケティングや収益モデルの部分も考えて制作する必要がでてきます。

戦略を実現するために視覚的デザイン、UI設計、ユーザーエクスペリエンスなど
前項までに述べてきたデザインも活用していきます。

マーケティングに関しては制作とはまた違ったスキルになってきます。
それ故にそこまで考えるのは厳しく感じますが、
ここまで意識して取り組むことでそのサイトは永続的なものになっていくのだと思います。

参考
4大既存メディア広告とインターネット広告の推移をグラフ化してみる(2011年12月発表分)

まとめ

これら全てのデザインは独立したものではなく相互に関連してます。
お互いを高め合うこともあれば、一方を重要視すると他方が損なわれる場合もあります。
丁度良いバランスを見つけたいところです。

現実として全てを高い品質で実現するには費用や時間の面で厳しいこともあるでしょう。
しかしながら限られた条件の中で最善を尽くすのもまた求められるスキルだと思います。

webを閲覧できるデバイスもPC、タブレット、モバイルから家庭用ゲーム機など多様化し、
それぞれの環境や状況にあったデザインもまた必要になってきます。

今後ますますwebデザインが求められる状況は広がっていくことは確実です。
学ぶことは増えますが、逆に学んだことが活かせる環境が広がっていくということです。
その可能性を前向きに受け入れたいと思います。

あとがき

つらつらと書きましたけど、
「お前はできてるのか？」と言われれば実行できてない訳で、まだまだ勉強不足だと感じてます。

僕のデザインに対する考え方は経験やwebの記事から学んだ部分がほとんどであり、
確固たるベースがあるわけではないです。
それでも敢えてこのような記事を書いたのは自分の状況を見直すため。
今の自分の考え方を、そして今の自分に何が足りないのか知るためです。
今年は自分の考えに信憑性、正確さを持たせるために
デザインに関しても理論的に学んでいこうと思ってます。

それと今までは当たり障りのない内容で書いてましたが、
今後は自分の意見を含めた記事も書いていくつもりです。

そういった意味を含め今年最初の記事に最適の内容だと思ってます。
一年後にはもっと濃い内容の記事が書けるように精進します！

Similar Posts:

Similar Posts:

facebookのsocial plugin(ソーシャルプラグイン)一覧

hiro — Thu, 22 Dec 2011 00:15:14 +0000

facebookの機能をサイト上で使えるfacebook social plugin。
僕が知らないだけかも知れませんが、
今ではいろんな種類が出てるんですね。
今後も使用する機会があると思うので、
調べるついでに一覧にしてみました。

Activity Feed
Comments
Facepile
Like Box
Like Button
Live Stream
Login Button
Page title
Recommendations
Registration
Send Button
Subscribe Button

はじめに

“Registration”以外のsocial pluginはSocial Plugins – Facebook開発者よりコンフィギュレータを使用することで簡単に設置コードを取得できます。
設置コードはHTML5版、XFBML版、IFRAME版の3種類あり、
プラグインによって使用できる種類が違います。
コードの貼り付け方は、「Get Code」ボタンで表示される各プラグインコードの説明に従ってください。

プラグインによっては、アプリIDが必要なものがあります。
アプリIDの取得方法は過去記事 Facebook・Twitterなどソーシャルボタン設定項目まとめのfacebookの項をご覧ください。

「いいね」ボタンなどの表記が英語になる場合があります。
その場合はソースコード内のen_USの部分をja_JPに書き換えると日本語で表示されます。

Activity Feed

Activity Feedプラグインは、そのサイト上でのアクティビティを表示します。
facebookユーザーがログインしている場合、友人がサイトで「いいね」ボタンクリックや、
facebookでシェア、コメントボックスでコメントしたコンテンツが表示されます。
ログアウトしている場合はActivity Feedはおすすめを表示してログインボタンを表示します。

フィードを埋めるのに十分な友達のアクティビティがない場合は、おすすめで埋められます。
Recommendationsにチェックを入れると、下半分はおすすめで埋められます。
上半分を埋めるのに十分なアクティビティがない場合は、おすすめの量が増えます。

DEMO

設定項目

Activity Feed – Facebook開発者

Domain: サイトのドメインを入力
Width: ボックスの横幅を指定
デフォルト値は300px
Height: ボックスの高さを指定
デフォルト値は300px
Header: facebookのヘッダーを表示するか選択
Color Scheme: 色味を選択
Link Target: リンクをどのウインドウで表示するか選択
_blank…新規ウインドウ
_top,_paretnt…同じウインドウ
Border Color: ボーダーの色を#FF0000などの16進数で指定
Font: フォントを選択
Recommendations: おすすめを表示するか選択
チェックを入れるとおすすめされた記事が表示される

トラフィックがサイト上のどのプラグインからか知りたい場合は

のように記述します。

ユーザーがクリックすると、リファリURLにfb_refパラメータが含まれます。
http://www.facebook.com/l.php?u=&fb_ref=homepage

Comments

facebookのコメント機能をサイト上に設置できます。
またモデレーションツールを使用して、コメントの管理もできます。

DEMO

設定項目

Comments – Facebook開発者

URL to comment on: コメントを設置するURL
Number of posts: 表示するコメント数を指定
デフォルトは10、最小は1
Width: 幅を指定。最小値は400px
Color Scheme: 色味を選択

Moderation tools

管理者はコメントをデフォルトの"すべてのユーザーに表示"か、
コメント投稿者とその友人だけに公開する"限られた公開"のいずれかを選択できます。
またブラックリストで禁止ワードの設定もできます。

Facepile

そのページを「いいね」している友人の写真を表示します。
該当するユーザーがいなければ何も表示されません。

DEMO

設定項目

Facepile – Facebook開発者

URL: 設置するページのURL
Size: 写真の大きさを選択
Width: 幅を指定。デフォルト値は200px
Num rows: 写真を並べる行数を指定
Color Scheme: 色味を選択

Like Box

facebookページを「いいね」してる人の写真表示の他に、
いいねボタン、ストリームの表示と比較的使い勝手のいいプラグイン。

DEMO

設定項目

Like Box – Facebook開発者

Facebook Page URL: facebookページのURLを指定
Width: 幅を指定。最小値は292px
Height: 高さを指定
写真10枚表示、ストリーム表示の場合デフォルトで556px
写真無し、ストリーム無しの場合63px
Color Scheme: 色味を選択
Show Faces: 「いいね」してる人の写真を表示するか選択
Border Color: ボーダーの色を16進数で指定
Stream: 投稿のストリームを表示するか選択
Header: ヘッダーを表示するか選択

Like Button

ユーザーがそのページのコンテンツをユーザーとシェアするためのボタンです。
ユーザーが「いいね」ボタンをクリックすると、そのページの情報はウォールに表示されます.。
より活用したい場合はOGPタグの設置もお勧めします。

DEMO

設定項目

「いいね」ボタンの設置については過去に記事にしてますのでそちらをご覧ください。
Facebook・Twitterなどソーシャルボタン設定項目まとめ

Live Stream

ページにいるユーザーの活動やコメントがリアルタイムにシェアできます。
リアルタイムなイベントや、コンサート、スピーチ、ウェブチャット、マルチプレイヤーゲームなどに最適です。

DEMO

設定項目

Live Stream – Facebook開発者

App ID: アプリケーションIDを入力
Width: 幅を指定
Height: 高さを指定
XID: 同じページで複数のLive Streamを設置している場合、
それぞれに固有のIDを付けることができる
Via Attribution URL: アプリ名をクリックした時のURLを指定
Always post to friends: 投稿がユーザーのウォールに表示されるか選択

Login Button

アプリケーション登録したサイトにログインさせるためのボタンを表示します。
サインインしてる場合はユーザーの写真を表示します。

設定項目

Show faces: 写真を表示するか選択
Width: 横幅を指定
Max Rows: 写真の行数を指定

Page title

時間かけて調べてみたのですが、どんな機能かいまいち分かりません…
ご存知の方いたら教えて頂けるとありがたいです。

設定項目

Page title – Facebook開発者

Recommendations

ユーザーにパーソナライズされた記事を表示します。
ユーザーがfacebookにログインしてない場合は一般的なお勧め記事を、
ログインしてる場合は友人などの情報を元にしてお勧めを表示します。
精度がどのくらいかは検証してません。

DEMO

設定項目

Recommendations – Facebook開発者

Domain: サイトのドメイン名を入力
Width: 横幅を指定。デフォルト値300px
Height: 高さを指定。デフォルト値300px
Header: facebookのヘッダーを表示するか選択
Color Scheme: 色味を選択
Link Target: リンクをクリックした時のウインドウの開き方を指定
Border Color: ボーダーの色を16進数で指定
Font: フォントの選択

Registration

ユーザは自分のFacebookアカウントを使ってサイトにサインアップできるようになります。
ユーザがFacebookにログインしていれば、ユーザーの情報が登録用フォームにあらかじめ入力されます。
Facebook APIでは取得できない情報（例えば好きな映画）の入力にも柔軟に対応します。
Facebookアカウントを持っていないユーザや、Facebookアカウントを使いたくないと言うユーザに対応することも可能です。

DEMO

設置方法

Registration – Facebook開発者

設置コードを取得するコンフィギュレータは用意されてないので、
解説を読んでサイトにあった適切なコードを入力してください。

Send Button

そのページの情報をfacebookの友人やグループ、特定のEmailアドレスへ送ることができます。
「いいね」ボタンが全員にシェアされるのに対し、
送信ボタンはプライベートなメッセージとして指定した友人のみにシェアされます。

DEMO

設定項目

Send Button – Facebook開発者

URL to Send: 送信したいページのURL
Font: フォントを指定
Color Scheme: 色味を指定

Subscribe Button

facebookユーザーのフィード購読ボタンを設置することができます。
自分がフィード購読されたい場合は設定をしておく必要があります。
詳細は以下の記事をご覧ください。
「フィード購読」を個人ブランド作りに活用しよう

DEMO

サンプルとしてMark Zuckerbergのフィード購読ボタンを設置してます。

設定項目

Subscribe Button – Facebook開発者

Profile URL: フィード購読させたいfacebookのプロフィールURL
Layout Style: ボタンのスタイル
[standard]
テキストをボタンの右に表示し、友だちの写真を下に表示
最小の幅は225px、デフォルト幅は450px
写真なしの高さは35px、写真がある場合の高さは80px
[box_count]
フィード購読合計数をボタンの上に表示
最小幅は55px、デフォルトの幅は55px。高さは65px。
[button_count]
フィード購読されてる数をボタンの右側に表示
最小幅は90px、デフォルト幅は90px。高さは20px。
Color Scheme: 色味を選択
Font: フォントを選択
Width: 横幅を指定

最後に

プラグインによって機能が違うので、
その特徴を理解することでいろいろなサイトの運用に役立ちそうです。
個人的にはアプリ関連のプラグインを理解するのに時間がかかったので、
開発よりの知識も深めいたと思います。

Similar Posts:

Similar Posts:

OGPタグの設定やいいねボタン、コメントを簡単に設置できるWordPressプラグイン「Facebook Tools」

hiro — Tue, 13 Dec 2011 00:15:45 +0000

このブログではOGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、
descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。
このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。
ざっと使い方まとめました。

インストール

インストール方法は通常のWordPressプラグインと同じです。
Facebook Toolsからプラグインファイルをダウンロードして、
/wp-content/plugins/ ディレクトリにアップロードして管理画面より有効化にします。
またはダッシュボードのプラグイン検索で”facebook tools”と検索して有効化にしてもいいです。
WordPress › Facebook Tools « WordPress Plugins

有効にすると左ナビにFacebook Toolsと表示されるので、そこで各種設定していきます。

App ID取得

Facebook Toolsを使用するにはfacebookのApp IDが必要です。
App IDの取得方法は過去記事、Facebook・Twitterなどソーシャルボタン設置方法まとめの
「facebookいいねボタン」→「1.アプリIDを取得」をご覧ください。

各種設定

General Settings

App ID: アプリIDを入力します。
API Key: 入力しなくても問題なし。
API Secret: 入力しなくても問題なし。
Facebook URL: 入力しなくても問題なし。; (※上記三項目が何のために存在してるか調べたけど分かりませんでした…
ご存知の方おりましたら教えてください)
Disable Open Tags: チェックを入れるとOGPタグを出力しません。

OGPのdescriptionは投稿の”抜粋”を使用します。
"抜粋"が空白の場合はmetaタグのdescriptionを使用します。

Like Button

URL: いいねボタンを設置したURLを入力。
空白の場合は自動的にそのページのURLを取得します。
Layout: ボタンのレイアウトを選択します。; [standard]テキストをボタンの右に表示し、友だちの写真を下に表示します。
最小の幅は225px、デフォルト幅は450px。
写真なしの高さは35px、写真がある場合の高さは80px。; [box_count]いいねを押された合計数をいいねボタンの上に表示します。
最小幅は55px、デフォルトの幅は55px。高さは65px。; [button_count]いいねを押された数をボタンの右側に表示します。
最小幅は90px、デフォルト幅は90px。高さは20px。
Width: ボタンの幅を指定します。ボタンのレイアウトを参考に決めると良いでしょう。
Action: 表示させたい言葉を選択します。
“いいね”も”お勧め”もボタンを押した時の挙動は同じです。
Clolor Scheme: 色見を選択します。
Send Button: チェックを入れるといいねボタンの横に送るボタンを付けます。

SendButton

URL: 送信ボタンを設置したURLを入力。
空白の場合は自動的にそのページのURLを取得します。
Font: Fontを選択します。ただし日本語環境では特に意味ありません。
Clolor Scheme: 色見を選択します。
Referral Tracking Name: トラッキングコードを設定できます。どこでクリックされたのか把握できるようになります。

Comment

Global Setting

Use New Comment Box: チェックを入れると新しいバージョンのコメントボックスを使用します。
Number of Comments: 表示するコメント数を指定します。
Width: コメントボックスの幅を指定します。
Clolor Scheme: 色見を選択します。
Referral Tracking Name: トラッキングコードを設定できます。どこでクリックされたのか把握できるようになります。

Legacy Comment Box

"Use New Comment Box"のチェックを外した場合のみ以下の設定は全て有効になります。

Reverse Order: コメントの表示順を逆にします。
Stylesheet: スタイルシートをテーマからのパスで指定します。

設置方法

OGPタグ以外は、テーマ内にphpを記述して使用します。

いいねボタン

テーマのループ内の設置したい箇所に

と記述します。

送信ボタン

テーマのループ内の設置したい箇所に

と記述します。

コメントボックス

テーマのループ内の設置したい箇所に

その他、コメント数を取得するもあるのですが、
僕の環境ではバグが生じたので控えさえてもらいます。
詳細はプラグインのドキュメントをご覧ください。
WordPress › Facebook Tools « WordPress Plugins

Similar Posts:

Similar Posts:

web制作者が印刷物を制作するときにチェックしたい10項目

hiro — Mon, 05 Dec 2011 23:18:24 +0000

Webの制作をしてると一緒に印刷物の制作も頼まれることがあります。
しかしWebも印刷物も同じ制作物として考えられがちですが、必要な知識は全く異なります。
自分の経験も通して印刷物の制作時に気を付けたいポイントをまとめました。
小規模の制作物が主な対象です。

納期の確認
用紙の選択
仕上がりサイズ
使用する色
色校正
印刷の種類
加工
使用する画像
データチェック
見積り

1.納期の確認

個人的に一番か二番目に重要視してます。
僕の仕事がたまたまそうなのか分かりませんが印刷物はタイトな納期が多いです。

直前まで自分で作業できるWebと違って、
印刷物の制作には当然ながら印刷の工程があります。
ここは外部に依頼する工程なので調整が難しい部分です。

更に加工により時間がかかることもありますし、
その後の配送（または受け取り）にも時間がかかります。
また、印刷会社によって入稿データの受付時間や、
営業日の数え方が違うのでその点も気を付けないといけません。
これらを念頭において納期を決めることが大事です。

僕も過去に計算間違えをして胃が痛くなる思いをしたことがあります。
ギリギリではなく余裕を持った計画を立てることが望ましいです。

2.用紙の選択

一言に「白い用紙」といっても用紙の種類によって質感や色味が違ってきます。
また用紙には厚さがあります。
印刷に用いられる用紙の厚さは「kg」で表されます。
これは四六判（788ｘ1,091mm）の用紙を1,000枚積んだときの重さです。
重い程厚みが増します。
厚さと用途の参考：用紙の厚さについて – 印刷通販株式会社

用紙の違いは実物を見ないと想像しにくいです。
印刷会社の中には用紙のサンプルを取り寄せできるところもあるので、
出来る限り実物で確認することをお勧めします。
※取り扱ってる用紙は印刷会社によって異なるので要確認

3.仕上がりサイズ

よく使われる規格はA版、B版です。
参考：用紙サイズ表｜普通紙対応◆大判フルカラープリンタ｜大判出力（大型出力）・図面出力

また、殆どの印刷会社では規格外のサイズも対応しています。
その際に注意したいのは、
注文するサイズはそのサイズを含むことのできる用紙サイズでの注文となります。
例えば仕上がりサイズ縦100mm×横400mmの印刷を注文する時は、
そのサイズを含むことのできるA3サイズでの注文となります。

4.使用する色

RAL Color Card by CoCreatr, on Flickr

印刷物はC(シアン)M(マゼンタ)Y(イエロー)K(ブラック)で制作します。
フルカラー印刷であればCMYKの4色を使います。
それ以外にCMだけ使った2色印刷やKだけのモノクロ印刷もあります。

CMYKはRGBより色空間が狭いので、
Webで使用してた色を再現できない場合があります。
よってRGBをCMYKに変換すると鮮やかさがなくなりくすんだような色味になります。

どうしても希望の色を出したい場合は特色を使います。
特色では蛍光色や金銀も出せます。
またコーポーレートカラー等で特色を指定された場合はそれに従います。
※特色が使えるかは印刷会社によって異なるので要確認

色見本が手元にあるのが理想なのですが、
Web上でも擬似的に色を見ることができます。
DICカラーガイド情報検索(ver 2.0) | DICグラフィックス株式会社
 COLOR FINDER Webレファレンス｜東洋インキ色見本帳シリーズ

5.色校正

printers ink by jonny2love, on Flickr

印刷機での印刷とオフィスでのプリンターでは再現性が全く違います。
また用紙によっても色の見え方が異なります。
品質にこだわる制作物の場合は色校正をした方が良いです。

校正には、本印刷と同じ印刷機で本番と同じインキ・用紙で印刷する本機校正、
カラーマネージメントで本機の色味に近づけたプリンタなどで
疑似的にシミュレーションする簡易校正などがあります。

	本機校正	簡易校正
費用	高額	比較的安い
再現性	高い	本機校正より劣る

参考：色校正の基礎知識 | 印刷の決定版！印刷会社【グラフィック】

色校正をすることで制作物のクオリティは上がりますが、
制作日数や費用がかかることも気を付けなくてはいけません。

6.印刷の種類

VFS Digital Design students visit Hemlock Printers by vancouverfilmschool, on Flickr

印刷の種類には、オフセット印刷、オンデマンド印刷、グラビア印刷、スクリーン印刷、
などがあります。
一般的にはオフセットかオンデマンド印刷を用途に合わせて選択することが多いです。

	オフセット印刷	オンデマンド印刷
部数	大ロットに向く	小ロットに向く
料金	大量部数ほど割安	少部数では割安
品質	高品質	オフセットに劣る・ベタに弱い
期間	ある程度の日数を要する	即日でも対応可能
用紙	数多くの用紙・サイズに対応	対応できる用紙・サイズが限られている

7.加工

Matt black metal business card by Photasia, on Flickr

印刷物には様々な加工を施すことができます。

折り加工: 折り畳む加工を施します
スジ入れ: 折りやすくするためにスジを入れる加工
ミシン入れ: きれいに切り取るために切れ目をいれる作業です
孔開け: 円形に穴を開ける加工です
角丸: 角を丸くする加工です
箔押し: 金、銀などのメタル箔を熱転写で本の表紙やカバーに加工します。
浮出し（エンボス: 凹状の型と凸状の型の間に紙を置き、圧を加えて、紙を凸状に浮き上がらせる加工でエンボス加工ともいいます。
トムソン（型ヌキ）: 特定の型に合わせて打ち抜く加工です。
PP、マットPP加工: 印刷された紙にポリプロピレンのフィルムを圧着させる加工です。耐久性、耐湿性に優れる。
パウチ加工: 印刷物を両面からPETフィルムではさみ熱圧着する加工です。表面保護と防水効果は抜群

など。
参考：加工オプションについて | 印刷の決定版！印刷会社【グラフィック】

加工によって納期と料金が変わってくるのでその点は気を付けます。
また印刷会社によって対応できる加工が変わってくるのでそれも確認しておきます。

8.使用する画像

印刷に使用する画像の解像度は350dpiです。
※正確には制作物により異なります
参考：Illustratorのツボ｜印刷方法によって異なる適正解像度

なのでWebの画像を印刷に使うには、
縮小して適切な解像度にするか、画像を加工して使うようになります。
できれば印刷用に解像度の十分な画像を貰えるように手配した方がいいです。

9.データチェック

どの印刷会社にもデータ作成のガイドラインがあります。
初めて利用する印刷会社の場合は必ずこのガイドラインによく目を通しておきます。

殆どの印刷会社に共通するデータ作成のガイドラインは以下の様な項目です。

フォントはアウトライン化する（または印刷会社指定のフォントを使用）
画像の解像度は350dpi
画像は埋め込む。またはリンクの場合はその画像も一緒に入稿する
CMYK以外の色は使わない（あえて特色を使う場合は除く）
3mmの塗り足しを入れる

これ以外の細かな項目は印刷会社によります。
また対応アプリケーションのバージョンも印刷会社により異なるので、
制作前にチェックしておきます。

データ入稿後は、印刷会社で印刷工程に入る前にデータに不備がないかチェックが入ります。
ここでデータに問題があると修正して再入稿することになり
場合によっては入稿完了日が一日遅れてしまうことがあります。
予定にズレが生じてしまうのでデータチェックは慎重に行います。

10.見積り

印刷工程の見積もりは印刷会社で料金が決まってますので問題ないでしょう。
色校正する場合はその料金と手間も加算します。
問題はデザイン料金ですが、正直ここは僕もまだ頭を悩ましているところです。

基本的には用紙サイズによって料金を算出してますが、
デザインによって作業時間が変わってくるので
作業時間で計算する方法が望ましいかなと最近は考えてます。
合わせて、「この料金内では修正は何回まで」と決めておくのが望ましいです。
下記のページも一つの参考になります。
チラシ制作料金まとめ12個 – W3Q

補足

制作中に気付いた点やおかしいと思った点があったら、
指示されてなくても聞いてみた方が良いです。
印刷物の恐いところは印刷してしまったらWebのように簡単に修正できないことです。
一文字のミスで数百万〜数千万の損害が出ることもあります。

印刷前ならストップはかけられますが、
入稿してから印刷までにも幾つか工程があるため
入稿後のキャンセルには費用が発生すると考えたほうが良いです。

クライアントの校了で発注し、
責任はこちらにないとしても、クライアントとの関係は悪化しますし、
逆にこういう部分に気付くことで信頼関係がより増すことがあります。

また印刷物は名刺・フライヤー・冊子から、封筒、パッケージ、メニュー、
更にはコースター、タンブラー、マグカップなどのノベルティまで幅広くあります。
紙の印刷の知識で対応できる場合もありますし、
そうでない場合もあります。
制作に不安がある場合は専門にやられてる業者に協力を依頼した方が良いと思います。
「餅は餅屋」
その上でいろいろ学ばせてもらうのが最良でしょう。

Similar Posts:

Similar Posts:

WordCampTokyoにスタッフとして参加してきた

hiro — Thu, 01 Dec 2011 14:44:08 +0000

WordCampTokyoにスタッフとして参加してきました。
「ブログ書くまでがWord Camp」と言われてるのもあって
記録を残しておくためにも、
あの日以来ぽけーっとしてる自分にも一区切り付けるためにも書きました。

始めに

スタッフには大きく分けて、

発足から運営、手配、管理、機材設置などメインの部分を担っていた運営スタッフ、
当日の会場であった楽天の社員の方、
運営スタッフのサポートをする当日スタッフ（ボランティア）

がいました。

僕は当日スタッフとして参加しました。
運営スタッフであったなら裏話的な話も書けそうですが、
そういうのは一切無いので
「いちスタッフの視点から見たWord Camp」的なエントリーで書かせてもらいます。

応募の動機

そもそもWordPress関連のイベントは今年7月のWord Bench参加が初めてでした。
それも自分のうっかりミスで勉強会に参加できず、
懇親会の参加だけでした。
WordPress全然触れてないじゃん、っていう。

でもそこでWordPressのイベントの楽しさを知り、
またスタッフの方も楽しそうにやっているのを見て運営側も楽しそうだなと思いました。
その時から機会があればスタッフとして参加してみたいと思っており、
その機会というのが今回のWordCampの当日スタッフ募集でした。

どこで告知を見たか忘れてしまいましたが、
とにかくそれを見た時は直ぐに応募しました。
単純に楽しそうだから、興味があったから。
ただそれだけの理由です。

でも実際に参加してみると、
「成功させたい。来場者に楽しんでもらいたい。」
という気持ちに変わっていきました。

ワクワクして当日を迎えた記憶があります。

via flickr odysseygate

スタッフの方々

Word Campは商業イベントではないので、
スタッフは全員有志の集いです。
誰かに強制されたわけでなく、みな自分の意志で参加しました。

なので意識も高かったし熱意もありました。
運営スタッフ、当日スタッフ、楽天社員の方、
みんなホントに優秀な方ばかりで、
一緒に働いてるのが楽しくてしょうがなかったです。

このような活動に限らず、仕事でも何でも
同じ意識を持ってる方と一緒に働くのは気持ちのいいものです。

よくもまあこれだけの人材が集まったなという感じでした。

800人近くの方が参加された大規模なイベントでありながら、
無事成功できたのもスタッフ一人一人の尽力あったからだと思います。
そしてまた来場された方のご協力もあったことも忘れてはなりません。
本当にありがとうございました。

via flickr MakeGoodTime

人と人との交流

懇親会や休憩時間の合間に一般の参加者の方とも話をしたのですが、
こういう交流もWordCampの魅力の一つです。

お昼時間にスタッフの方とWordPressについて話してる時に、
そばに座っていた参加者の方が「一緒に話し加わって良いですか？」と参加してきて
ちょっとした輪ができたシーンもありました。
こういう場が自然に作れるのもやはり共通のテーマで集まった人達だからでしょう。
今回は余力がなくて出来なかったのですが、
スタッフとしてこういう場をもっと増やせていけたらなと思いました。

また参加されてる方と話をしてると勉強になるだけでなく、
もっといろいろ学びたい、もっと制作したいという気持ちになります。
僕はWord Pressを使い始めて2年くらいになりますが、
制作量は多くないしまだまだスキルは足りません。
色んな人と話して刺激を受けることで制作のモチベーションが上がりました。

WordCampには初心者から上級者まで幅広い層が参加してます。
自分がもっとスキルを磨けば初心者の方の力になれるかも知れません。
そういう協力の仕方もアリかなと思いました。

via flickr TAKA@P.P.R.S

スタッフとして参加するWordCamp

『なんでこんなに楽しかったのだろう？』と考えてみたのですが、
やはり一緒に働けたスタッフの方々が素晴らしい方ばかりで
みんなで力を合わせて一つのイベントを作り上げたからだと思います。

学園祭のような感じでした。
終わった後には心地いい充実感がありました。
今回のスタットと共にでなければ、
同じようなイベントに参加したとしても
このような気持ちは味わえなかったでしょう。

最高のスタッフでした。

今回は終始スタッフとして参加してたので、
一般参加ならではの楽しみは味わえなかったと言うのはあります。

それでも今回スタッフとして参加することを選択して良かったと思ってます。

今回得た経験は、望んでも直ぐに得られるものではありません。
「次もスタッフとして参加したいか？」と聞かれれば、
迷わずYESと答えます。
今回の経験を活かして、次はもっと力になりたい。と思っています。

来年もきっとWordCamp開催されるでしょう。
もしスタッフもやってみたいと少しでも思われた方は、
機会があればスタッフに応募することをお勧めします。

きっと思ってた以上に素晴らしい経験ができるはずです。

via flickr odysseygate

最後に

スタッフの皆さん、協力頂いた楽天の皆さんお疲れ様でした。
一緒に仕事ができて楽しかったです。

素晴らしい講演をして頂いたスピーカーの皆様ありがとうございました。
見れなかったセッションはスライドで学ばせてもらいます。

来場された方、来て頂いてありがとうございました。
有意義な時間を過ごして貰えたなら嬉しいです。

WordCampTokyo最高でした！
今後もWordPressのコミュニティ参加していきます！

Similar Posts:

Similar Posts:

「Webクリエイターの誇り」CSS Nite in Vol.60のまとめと雑感

hiro — Fri, 25 Nov 2011 03:22:48 +0000

先日CSS Nite in Ginza, Vol.60「Web Creators Pride2011」に参加してきました。
webのセミナーというと技術や制作などの話が多いのですが、
今回はwebクリエイターのあり方や志など内面的な内容でした。
この様な話を聞ける機会は滅多にないので
貴重な体験でした。
内容をざっとまとめましたが、
僕の主観が入ってる部分もあることを予め断っておきます。

Web Creators Pride2011

CSS Nite in Ginza, Vol.60
今回のセッションのスピーカーは株式会社アンティー・ファクトリーの中川さん。
とても熱く興味深い内容で終始惹き付けられました。

(※スライドのキャプチャは許可を得て使用してます)

始めに今回のセッションのテーマです。

Web Creators Pride

直訳すると「Webクリエイターの誇り」。

Webに携わるものとしての「誇り」を持ってこの業界を発展させていこう！
このセッションを通してみなが誇りを持ち、
未来と社会のために自分を奮い立たせてくれることを希望する！

これが本セッションのゴールでもあります。

僕は正直「誇り」なんて意識したことはあまりなかったので、
ちょっと戸惑いました。
でもそれこそこのセミナーに出席した甲斐があるもの。

そもそもデザインとは何か？

まずはデザインについて触れました。

デザインとは。ある問題を解決するために思考・概念の組み立てを行い
良い構成を工夫すること。意匠ともいう。

デザインの領域は狭義のデザインと広義のデザインで捉えることができます。

狭義のデザイン

視覚系: グラフィックデザイン、タイポグラフィ、映像、アニメーション
空間系: 環境デザイン、インテリアデザイン、建築デザイン
機能系: プロダクトデザイン、ファッションデザイン、テキスタイルデザイン
その他: 情報デザイン（webデザイン）、空間におけるサイン計画、インターフェイスデザイン、ゲームデザイン

広義のデザイン

コンセプトの具現化、人間の行為をより良いかたちにするために「設計」「計画」

戦略のデザイン: 個人や社会集団における戦略デザイン
組織のデザイン: 組織構造のデザイン
制度: 制度、法律、仕組みのデザイン
プロセス: 業務の流れや工程のデザイン

ソーシャルデザイン

デザインの定義に触れた後、ソーシャルデザインについて。

これまでの社会システムが破綻し、今、ソーシャルデザインが求められています。
より社会を意識して、問題を解決する方法を考えるべき時代へシフトしてきました。

そこで、「Webクリエイターのわれわれに何ができるか？」を考えます。

Webクリエイターの領域

Webクリエイターの領域は多岐に渡ります。
言い換えれば多くの部分で力を発揮する事ができます。

ここで一つの動画を紹介されます。
有名な「Microsoft Productivity Future Vision」です。

Microsoft Productivity Future Vision (Release: 2011)

十数年前であれば夢物語の世界です。
でも確実に我々の社会はこの未来に近づいてます。
そして我々webクリエイターその未来を作るのに大きく貢献できます。

そのためにも、

着眼対局着手小局
全体思考をもち、社会課題を自分の問題として受け止めながら、
自分にできることを一つ一つ積み重ねて行くことが重要！

この意識が大事です。

ソフトウェア至上主義ではなくヒューマンウェア思考

技術・プログラムからではなく、
人間の普段の思考行動をもとに組み立てる

新しい技術を追い求めるのではなく、
まずは人間的に思考、行動し本当に必要なものを考えてみます。
それは今ある技術の組み合わせで対応できるかも知れない。

様々な分野の技術との組み合わせで
次世代のデファクト・スタンダードをつくりあげる、という感覚！
と仰ってました。

具体例として下記の動画を紹介されました。

Apple iPhone 4S Siri

Kinect Effect

SiriもKinectも既に存在してる技術です。
これらの技術の使い方を工夫する事によって新たな問題解決の糸口が見つかるかも知れません。

善行のリブランディング

良いことをするのが楽しくドキドキ感があり儲かる。
GOODであることのリブランディング。

僕自身、善行でお金を儲けても良いと思ってます。
無償の善行でその人が貧困になってしまったら本末転倒ではないでしょうか。
善行をビジネスとして行って、更にそれがワクワクするもので長く続けられて
結果善行を行う人も相手もハッピーになれば、それで良いんじゃないかなと思います。

地域に見たwebのあり方

Webの技術・情報はやはり東京に集中してると思います。
とは言え、各地域には東京にはないそれぞれの特徴があり、
その地域にあったWebの使い方があります。

地域に目を向けて何が求められてるか考えることが必要だと思います。

21世紀社会をデザインしていくためのヒント

最後に、21世紀社会をデザインするためにどういう視点を持ったら良いか、
また最低限抑えておくデザインの原則を教えて頂きました。

モバイルファースト&スクリーン Everywhere

今後もスマートフォンの普及は右肩上がりに増え、
誰もがどこでもインターネットにアクセスできる環境を手に入れる。
モバイルファーストの考え方がますます高まる。

イノベーター理論にみる、時代・流行のポイントの見極め

一歩先というより常に0.5歩先を見据えながらアジャストするぐらいが丁度良い。

Ronald Mace のユニバーサルデザイン7原則

誰でも公平に使えること
使う上での自由度が高いこと
使いかたが簡単で、直感的に理解できること
必要な情報がすぐに見つかること
うっかりミスや危険につながらないこと
身体への負担が軽く、楽に使えること
接近したり利用するために十分な大きさと広さが確保されていること

参照：Ronald Mace のユニバーサルデザイン7原則 —Website Usability Info

ディーター・ラムス：グッド・デザインの10の原則

グッド・デザインは革新的
グッド・デザインは実用的
グッド・デザインは美しい
グッド・デザインは説明不要
グッド・デザインはでしゃばらない
グッド・デザインは誠実
グッド・デザインはながもち
グッド・デザインはディテールまでが完璧
グッド・デザインは環境にやさしい
グッド・デザインはほとんどデザインされていない

参照：ディーター・ラムス：グッド・デザインの10の原則

ヒューマン・センタード・デザイン

ユーザービリティの高い機械/システムを作ることを目的とし、
使う人間の立場や視点に立って設計を行うこと

参照：ヒューマン・センタード・デザイン | ミツエーリンクス

…上手にまとめられなかったのですが、以上です。

終わった後には、中川さんの狙い通り（？）自分を奮い立たせられた素晴らしい内容でした。
ただ、こういう熱気と言うのはその場にいないと伝わらないので、
それを伝えられないのが少し残念ではあります。

個人的感想

Webクリエイターという職種はもっと社会に関われるのだと、
もっと社会に貢献できるのだと改めて感じました。

実際スライドで見せられて、言葉で伝えられると納得なのだけど、
最近そういう意識を忘れていたなと。

できることが多いと言うのは裏を返せば大変なことなのですが、
でもそこにはやりがいがあります。

では、どのように社会貢献していくのか？
その考え方・ヒントは本セッションで中川さんが示してくれました。

そこからは自分の頭で考えてみます。

現実問題、大きな視点で問題に取り組んでも、
金額やタイミングなどの面で実現が難しいこともあるかも知れません。

ただ、常にそういった思考を持ち続けることは大事だと思います。
スポーツと同じように考えることもまた日々の鍛錬で養われるのだと僕は思います。
どんなケースであれ大局を見る姿勢でいることが大切だと思います。

着眼対局着手小局。
自分にできることは小さいけど、この言葉を胸に
大局に届くようコツコツと積み重ねていくだけです。

今の僕の仕事は地域の小さな店舗や企業のサイト制作が殆どですが、
でも仕事の大小と誇りを持つか持たないかは全く別の問題です。
どんな仕事であれ誇りを持って熱意を持って取り組むことはできます。

そもそも誇りを持てるかは自分の意識次第。
であれば同じ仕事をするなら熱意を持ってワクワクしながら
取り組んだほうがいいに決まってます。
またそういう気持ちが伝染してこの業界が盛り上がって行ったら最高だと思います。

今後も高い志を持って仕事に取り組んでいこう。

Similar Posts:

Similar Posts:

ページをスクロールしたらオススメの記事を紹介してくれるSimpleReach THE SLIDE

hiro — Mon, 21 Nov 2011 13:25:41 +0000

最近海外のブログでよく目にする、
画面を下までスクロールすると右下から出現して
オススメの記事を紹介する「THE SLIDE」。
流行ってるのか知りませんが、
取り敢えずこのブログも流れに乗っかって設置してみました。

インストール

THE SLIDEは、そのページを見てる人にお勧めの記事を紹介してくれるウィジェットです。
WordPress、Drupal、Tumblr、Blogger、
その他ブログの様に記事を作成するタイプのサイトに使用できます。

WordPressにはプラグインがあるので、プラグインを利用すると簡単に設置できます。
ちなみにWordPressのプラグイン名は「SimplleReach Slide」です。
Blogger、Tumblr、Drupalについては専用のコードがあり、
これらはサイト上で設置の方法が解説されています。

今回はWordPressの設置について書いて行きます。

まず、The Slide by SimpleReachのトップページよりアカウントを作成します。

The Slide by SimpleReach

アカウントを作成したら、
設置したいブログの管理画面を開きます。

左メニューから「プラグイン」→「新規追加」を選択し、
「SimpleReach Slide」と入力し検索します。

SimpleReach Slideが見つかるので、
“いますぐインストール”をクリックしインストールします。

プラグインのインストール完了画面が表示されるので、
“プラグインを有効化”をクリックします。

左メニューより「設定」→「SimleRrech Slide」を選択します。
SimpleReachのサイトで作成したアカウントのメールアドレス、パスワードを入力します。

※最初は反映されるまで15分ほどかかることがあります。

以上で設置完了です。
下までスクロールすると右からスルスルとウィジェットが表示されます。

ただ、オススメの精度がいまいちだったり画像をうまく拾ってくれところがたまにキズ。

追記

投稿画面の一番下にTHE SLIDEの編集フォームが表示されてました。
こちらからアイコンやタイトル、タグの編集ができます。
入力は必須ではありませんが、これを使えば精度も上がるのではと思います。

設定

1.ヘッダーのテキスト
2.リンクのカラー
3.下から何pixelに表示させるか
4.ページでも表示させるか
5.同じカテゴリより選択するか
6.THE SLIDEのロゴを表示するか

その他、cssやjavascriptを追記することでより詳細に設定を変更できます。

サイトの機能

The Slide by SimpleReachにログインしメニュー「Report」を選択すると、解析も見れます。

メニュー「Manage」を選択し、Nameをクリックするとコンテンツ一覧が表示されます。
Title横の
鉛筆アイコンをクリックすると各記事の設定変更ができます。
リコメンド機能がいまいちな時はこの部分を変更すると改善されるかも知れません。

メニュー「Manage」を選択し、テーブル内の「Get Code」からは他のブログへの設置方法が見れます。

Similar Posts:

Similar Posts:

WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ

hiro — Thu, 17 Nov 2011 03:16:38 +0000

前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので
作業の流れをまとめました。
やり方は人それぞれだと思いますが、
作業の参考になってくれたら幸いです。

ラフの作成
HTMLマークアップ
デザイン（テーマ）のカスタマイズ
WordPressテーマ作成
Tipsなど

1.ラフの作成

一般的なwebサイト制作と同様にまずラフを制作します。
また、jQuery Mobileの特徴でもある画面遷移時の効果や、
表示のされ方などもこの時点で決めておくと良いでしょう。

2.HTMLマークアップ

HTML5でマークアップ

jQuery MobileはHTML5のカスタムデータ属性を使用しますのでHTML5でマークアップします。
マークアップしながらjQuery Mobileの設定を定義するのが理想ですが、
慣れないうちはまずjQuery Mobileは考えずに通常のマークアップをすると良いと思います。
この時点ではCSSは適用させません。

jQueryMobileの設定

HTMLマークアップが完了したら、jQuery Mobileの定義を設定していきます。

最初にCDNからファイルを読み込みます。

コードは、Download | jQuery Mobileより取得できます。

HTMLにdata-roleなどのカスタムデータ属性を追加して行きます。
マークアップの詳細は、ASCII.jp：西畑一馬のjQuery Mobileデザイン入門や
jQuery Mobile 1.0b1 日本語リファレンスが非常に参考になります。




	
		
		
			
				
				Home
				Menu
				Search
				PC
			
			
		
		
		
		デザインスパイスでは、webデザインのtips、tutorial、topicsなどを公開しています。
	
	
	
		
			
				
				
				
				Dreamweaverとwordpressを連携させてテーマを編集する方法
				2011.10.17
				
				dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。。
				
			
		
		
			
				
				
				
				Dreamweaverとwordpressを連携させてテーマを編集する方法
				2011.10.17
				
				dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。

jQueryMobileの機能を実装する為に一部HTMLのタグを変更する場合もあります。
その辺りは臨機応変に対応します。

3.デザイン（テーマ）のカスタマイズ

マークアップが終わったらデザイン（テーマ）のカスタマイズをします。
jQueryMobileにはa～eの5つのテーマが用意されてるので、
それ以外の適当な文字をdata-theme属性で指定します。

今回は、x,y,zの3種類のテーマを併用しました。
それぞれにCSSスタイルを適用して行きます。

また、jQuery MbileのCSSの設定を変更する場合は、
jQuery MbileのCSSの後にオリジナルのCSSを読みこんでスタイルを上書きします。
スタイルの変更はjQuery MbileのCSSを複製して変更すると簡単です。

また、jQuery MobileはJavaScriptでclass属性などが追加されますので、
それらのスタイルを調べる際にはfirebugやsafariのWebインスペクタなどを利用すると便利です。

静的なサイトであればここまでの作業で一通り完成となります。

4.WordPressテーマ作成

作成したhtmlをWordPressのテーマファイルに変更して行きます。

その前に、今回はスマートフォン対応にWordPressプラグインのKtai Styleを使用しました。
WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)

Ktai Styleには独自タグが用意されてるので、
サンプルで使用しているタグの一部はktai styleの独自タグとなります。ご注意ください。

テーマファイル作成

まずKtai Styleでは下記のテンプレートファイルは必須となります。

style.css(テーマの名称、配布元、説明、バージョン、作者を記述)
index.php(トップページ・カテゴリ一覧・検索結果）
comments.php(コメント閲覧・投稿を行うなら必須）

今回はこれ以外に下記の4つのファイルを作成しました。

header.php（ヘッダー部分共通）
footer.php（フッター部分共通）
single.php（個別記事ページ）
function.php（独自関数定義ファイル）
css/ds-style.css（オリジナルcss。style.cssとは別にした）

先ほど作成したHTMLのソース一部をWordPressのテンプレートタグに変えて行きます。
この部分は一般的なWordPressテーマを作成する流れと変わりません。

WordPress テーマ作成の具体的な方法は多くのサイトで紹介されるのでそちらを参照してください。
WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと. net
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

index.phpのソースのみサンプルで掲載します。




	
		Category: 
	
		Tag: 
	

	
	
	
		
		
		
		
			
			', ''); ?>
		
		
		
		
	
	

	
		
		
	

	
	記事が見つかりませんでした。

プラグイン・テーマファイルのアップロード

Ktai Style (携帯対応プラグイン)よりプラグインをダウンロードし展開して、
ktai-style フォルダーごと wp-content/plugins/ に転送します。

オリジナルのテーマファイルは、wp-content/ktai-themes/ ディレクトリーを作成して、
そこに転送します。

WordPressの管理画面よりKtai Styleを有効にし、
「携帯表示」→「テーマ」でiPhone,Android用に先ほど作成したテーマを選択します。

以上でスマートフォンからアクセスした場合に、
jQueryMobileを使用したオリジナルテーマが適用されます。

5.Tipsなど

制作時のtipsや気を付けたい点など羅列していきます。

テキストを省略させない

ヘッダーやフッターなど一部で長いテキストを表示すると、
自動的に末尾のテキストが省略して表示されます。
テキストを省略せずに表示するためにデフォルトのCSSを上書きします。

/* テキストを省略せずに表示する */
.ui-header .ui-title,            /* ヘッダー */
.ui-footer .ui-title,            /* フッター */
.ui-btn-inner,                /* ボタン */
.ui-li-heading,                /* リスト見出し */
.ui-li .ui-btn-text a.ui-link-inherit,    /* リンクリスト */
.ui-li-desc                /* リスト詳細 */
{
    overflow: visible;
    white-space: normal;
}

Ajaxでページ遷移させない

複数ページを包含したページにリンクする場合はリンクに rel=“external” か
data-ajax=“false” を追加する必要があります。
今回殆どのページがこれに当たりましたので全リンクでAjaxを使用しない設定にしました。

jQueryとjQueryMobileのjsの間に記述します。

jQueryでカスタムデータ属性追加

「前の5件」などのリンクはWordPressのテンプレートタグで出力してるのですが、
このリンクのカスタムデータ属性はjQueryで追加する方法を取りました。

//#indexはこのリンクを内包してるpageにつけたID
$("#index").live('pagecreate', function(){
	$("#pageNaviNext a").attr("data-role","button").attr("data-icon","arrow-l").attr("data-theme","x");
	$("#pageNaviPre a").attr("data-role","button").attr("data-icon","arrow-r").attr("data-theme","x").attr("data-iconpos","right");
});

Ktai StyleのTips

※ktai Style固有の内容なので別の方法でスマートフォン対応してる場合は当てはまりません。

viewport

iPhone,Android用のテーマには自動で

が追加されるのでテーマファイルからviewportの記述を削除して問題ありません。

サムネイルのサイズを変更する

Ktai Styleは自動的に小さいサイズのサムネイルを生成しますが、
このサイズを変えたい場合は以下のコードをテーマの functions.php に追加します。
※既に違うサイズでサムネイルを生成してしまってる場合は、それらのファイルを削除する必要があります

function my_thumbnail_max_size() {
	return 280;//サムネイルのサイズpx
}
add_filter('ktai_thumbnail_max_size','my_thumbnail_max_size');

他のプラグインが動作しない場合

ページヘッダの表示用 add_action('wp_head'); を利用しているプラグインの場合、
ks_wp_head() の引数をKTAI_DO_PC_HEAD に変更すると動作するようになります。

同様にページフッタの表示用 add_action(‘wp_footer’); を利用しているプラグインの場合、
ks_wp_footer() の引数をKTAI_DO_PC_HEAD に変更すると動作するようになります。

※それでも他の全プラグインの動作を保障するものではありません

ソーシャルボタンなどのリンク

Ktai Styleではリンクのドメインが省略されます。
ドメインからのURLを取得する場合は頭に bloginfo('url') を付けます。

外部サイトの画像をそのまま表示させる

ソーシャルボタン、バナーなどで外部サイトの画像をそのまま表示させたい場合は、
以下コードをテーマの functions.php に追加します。
http://ecx.images-amazon.com/images/の部分は、
実際に挿入される画像 URL にあわせて適宜修正してください。

function ks_keep_hatena_image($replace, $orig, $src) {
	if (preg_match('#^http://b.hatena.ne.jp/#', $src)) {
	$replace = $orig;
}
return $replace;
}
add_filter('ktai_image_to_link', 'ks_keep_hatena_image', 10,3);

その他Ktai Styleで困ったら目を通すページ
 WordPress Plugins/JSeries » Ktai Style よくある質問と答え
 WordPress › フォーラム » タグ — Ktai Style

終わりに

jQuery Mobileを使ったサイトってどれも似たようなサイトになってしまうと思ってましたが、
結構弄れるものです。
また全体にjQuery Mobileを使うのでなく、フォームやリスト、画面遷移だけなど一部のみに使う方法もアリかなと思います。

個人的にはスマートフォンサイトデザインの知識が不足してるのでそちらも合わせて学んで行かなければなと。

最後に今回のKtai Styleを使ったWordPressのスマートフォン対応はSwapSkillsのセミナー
「スマートフォン+ jQuery Mobile in WordPress」の内容をベースにさせてもらいました。

充実した内容だったのでお礼の意味も込めて取り上げさせてもらいました。
Webプロフェッショナル向け勉強会 SwapSkills スワップスキルズ

Similar Posts:

Similar Posts: