UIの違い

iPad のカレンダーアプリは、現実のカレンダーに似たテクスチャやデザインがされていて、使い方を迷うことのないように設計されています。

一方 iPhone はというと、デバイスの大きさの問題を差し引いても、現実にあるもののメタファーという設計はされていません。これは、iPad は PC に代わるもので、iPhone は ケータイに代わるものだという違いが現れているのかも知れません。

iPadはパーソナルなデバイスではなかった

iPhone はパーソナルなもので、勝手に友達の iPhone をさわったりはしないですよね？

でも iPad は違いました。UI に関わっている SE の友達が遊びに来たとき（新しいデバイスへの興味の度合いもあると思うけど）、おもむろに iPad を手にとってブラウザを開いてブックマークをみだしました。その友達にはむしろもっと色々とさわってもらい情報交換したかったので、まったく悪い気はしなかったんだけど、その行為には大きな発見がありました。

iPad はパーソナルなものには見えないのかもしれない。それに自分自身も、誰にさわってもらってもいいように考えているし。

テレビでネットができますが、たとえば Twitter がテレビのサイドバーに表示されたとします。テレビは家族や友達と一緒にみることがあるので、そこにパーソナルな Twitter を表示させるのはふさわしくないですね。

デジタルネイティブ

流行の過程として、このような分け方がありました。

• イノベーター（Innovators：革新者）
  新しいものを進んで採用する人。
• アーリーアダプター（Early Adopters：初期採用者）
  社会と価値観を共有しているものの、流行には敏感で自ら情報収集をおこなって判断する人。オピニオンリーダーとなって他の人に大きな影響力を発揮することがある。
• アーリーマジョリティ（Early Majority：前期追随者）
  新しいものの採用には比較的慎重な人。
• レイトマジョリティ（Late Majority：後期追随者）
  新しいものの採用に積極的ではなく、周囲の大多数が使っているのをみてから同じ選択をする人。
• ラガード（Laggards：遅滞者）
  世の中の動きに関心が薄く、流行が一般化するまで採用しない保守的な人。

Facebook や Twitter などは、常に仕様が変わり続けているので、どこか一定の部分でスキルの平均が保たれるものではありません。昔から使っている人も、いま始めた人も、それぞれ違う楽しみ方で SNS を使っているでしょう。変わり続けていくものの前では、このイノベーター理論は崩壊してるのかもと思います。

これから Facebook に子どもたちが入ってくるかもしれません。出会いの場や詐欺などに巻き込まれる事件が増えるかもしれません。しかしそれは無知な子どもたちが巻き込まれるのではなく、デジタルネイティブです。

さんざんネットの耐性をもった子供たちです。安易な事件に巻き込まれるのは大人の方かもしれませんね。デジタルネイティブと一緒に仕事をすることになる日も近いですよ。

「アプリを許可する画面」でなにを許可しているか？

アプリを許可する画面が表示された時に「このアプリが受け取る情報」の項目を確認してください。

• 基本データ
• メールアドレス
• あなたのプロフィール情報: 説明、アクティビティ、生年月日、出身地、趣味・関心、好きなもの、位置情報、政治観と宗教・信仰
• あなたの写真
• あなたと共有された写真

中には、自分の友達の情報へのアクセス許可を求めるものもあります。つまり、友達がスパムアプリをインストールしていると、さらにその友達の情報まで抜かれるっていうことです。アプリの許可というのは、自分の友達の情報までも第三者に受け渡すという意味なのです。

現在利用中のスパムアプリをすべて削除する

見覚えのないというか… 見覚えがあっても信頼できないアプリは削除しておきましょう。Facebookページを管理していたり、他の SNS と連携している以外は、ここにはなにも無いのがベターです。

「アカウント設定 > アプリ設定」に利用中のアプリが表示されます。

友達が利用しているスパムアプリからアクセスされないようにする

もしも友達がスパムアプリをインストールしていれば、スパムアプリはさらにその友達の情報にもアクセスすることが可能です。

まぁおれの個人情報なんてたいしたものじゃないからいいけど、第三者に渡ってしまうのは気持ちの良いものではないので、設定変更しておきましたよ。

悪意もなくスパムアプリをインストールしてしまった友達に、そのアプリの削除を求めるのもなかなか難しいので、こちら側で対処しておくですね。

「プライバシー設定 > アプリとウェブサイト > 他のユーザーが利用しているアプリとの情報の共有」のチェックをすべて外します。

Facebook広告を作成するために必要なもの

Facebook広告では、Facebookページやスポット、外部サイトのURL をリンク先とした広告を作成できます。タイトル、本文、画像があれば広告を作成できますが、Facebook広告の要はターゲットの絞込みにあります。

• タイトル：25文字まで
• 本文：90文字まで
• 画像：100×80px

ターゲット設定でできること

ターゲットを絞り込むことで、よりピンポイントで広告を表示することができます。

• 地域：国や都道府県
• ユーザー層：年齢、性別
• 趣味・関心：ここにキーワードを入力すると、設定可能なキーワード候補がでます。それに加え、たとえば「#料理」とすることで「料理」「料理レシピ」「料理、食べ歩き」などを趣味・関心にしている人をターゲットにすることも可能。もっとザックリとカテゴリから選択することもできる。
• Facebook上のつながり：自分が管理人になっている Facebookページに「いいね！」してくれている人だけに広告を表示したり、逆に除外することもできます。
• 詳細ユーザー層ターゲット：恋愛対象、交際ステータス
• 学歴と職歴：学歴や勤務先

つまり、「恵比寿に住んでいる未婚の30歳女性で料理に興味がある人」や、「今年、都内の大学を卒業する人」だけに広告を表示することができるわけです。

CPMとCPC

ターゲットを絞り込んだら次に、広告を表示する日程や予算の上限を設定します。インプレッション課金とクリック課金があります。

• CPM（Cost Per Mille）は広告が1,000回表示されるたびに課金される金額
• CPC（Cost Per Click）は1クリックされるたびに課金される金額

どちらが良いかは、「広告をたくさん表示したいか、実際にクリックして欲しいか」「クリックされやすい画像か」など広告内容によります。こういった広告は A/Bテストが重要になってくるので、いろいろと試してみるですね。

広告レポートでわかること

• インプレッション数：広告が表示された数
• ソーシャルのインプレッション数：Facebookページを「いいね！」してる人の友だちに表示された数
• ソーシャルの割合：「インプレッション数」に対する「ソーシャルのインプレッション数」の割合
• クリック数：広告がクリックされた数
• CTR：広告の表示に対するクリック数の割合
• CPC：1クリックあたりの広告費
• CPM：1000インプレッションあたりの広告の平均コスト
• 広告費用：現在課金されている広告費
• ソーシャルのリーチ：「ソーシャルのインプレッション数」の中で、実際に広告をクリックした人数

Illustrator

新規ファイル作成

「ファイル > 新規…」から新規ファイルを作成します。カラーモードは必ず CMYK にします。

カラー設定

「編集 > カラー設定」で「一般用 – 日本2」を選択して、作業スペースの RGB は「Adobe RGB（1998）」にします。これには日本の印刷標準色の ISO規格である「Japan Color 2001 Coated」が組み込まれています。

仕上がりサイズの長方形をつくる

今回は名刺サイズの巻き三つ折りを作りたいので、名刺サイズ（55×91mm）の長方形を3つ作ります。巻き三つ折りの内側にくるページは 3mm 逃げて（小さくして）おきます。すべてのページが均等なサイズだと紙の厚みがあるからうまく折れません。

トンボを作成する

長方形の線は「なし」にします。線の太さ分、仕上がりのサイズが大きくなってしまいます。3つの長方形を選択して、「オブジェクト > トリムマークを作成」からトンボを作成します。「効果 > トリムマーク」は使っちゃいかんやつです。次にトンボを選択し、「レジストレーション」となっているところを CMYK それぞれ 100％ にします。表面はこれで良いのですが裏面は1色（ブラックのみ）で印刷したいので、トンボも同じく K100％ にします。トンボは間違って動かすといけないので、別レイヤーにしてロックかけておくといいですね。

ガイドラインを作成する

次にガイドラインを引きます。裁ち落とし（仕上がり）から 5〜10mm 内側とか。今回は名刺サイズの小さなものなので、二段組にはせずシンプルなガイドラインでOKです。同時に、折り線の部分にもトンボを入れておきます。

オーバープリントとリッチブラック

画像の上にスミベタ（ブラック100％）の文字を載せる場合はオーバープリントにします。これは文字だけの話です。画像の背景をブラックにする場合はリッチブラック（C：60％, M：40％, Y：40％, K100％など）を使います。普通にブラック 100％ だけだと深みのある黒にはならず浅い黒（グレー）になります。すべて 100％ にしないのは、インクの乾燥に時間がかかってしまい汚れの原因になるからです。インクの総量は 300％ 以下に収めるのが一般的です。

カラー指定について

5％ とか微妙なニュアンスは色転びの原因になります。最低でも 10％ 刻みで色を設定しましょう。モニターで見ている色や家庭用のプリンターで出力したものは実際の印刷と色味が違うので、カラーサンプル帳があると便利ですね。

フォント指定について

Web には Web の、グラフィックにはグラフィックに適したフォントがあります。入校時にはテキストは全てアウトライン化します（元データは残しておこうね）。フォントが置き換わってしまい、レイアウト崩れの原因にもなります。

孤立点の削除

これはアンカーポイントのゴミや、フォントの情報だけを持っている孤立した点です。印刷時にエラーになる場合があるので「選択 > オブジェクト > 余分なポイント」から選んで一括削除しておきます。

外トンボまで塗りたしを確保する

内トンボが実際の仕上がり（裁ち落とし）、それよりも 3mm 外側に外トンボがあります。印刷の特性上、最大 3mm はズレることがあるからその分を考慮しといてねってことです。配置するファイル名に機種依存文字を使用しないこと。リンクエラーの原因になります。日本語ではなくアルファベットのファイル名にしておくと、Win/Mac 間でも文字化けを防げて良いと思います。

Photoshop

画像のEPS保存

画像処理は RGB のままで進めていいんだけど、Illustrator に配置する前に CMYK に変換します。配置画像は eps保存（バイナリ/jpg）。jpg とか psd を配置したものを入稿しちゃだめよ。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

nav li a {
	display: block;
}
img {
	max-width: 100%;
	height: auto;
}

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|ipad|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /smartphone/ [R,L]
</IfModule>

セブン-イレブンの「ネットプリント」が便利すぎる

「ネットプリント」は、パソコンやスマホから PDF などのデータをアップして、全国どこでもセブン-イレブンのコピー機からプリントできるサービスです。

家庭用のプリンターだと定期的に使っていないとインクヘッドが詰まったり、クリーニングするにしても大量のインクを消費するので意外と不便なことが多いですよね。ネットプリントだとトナーでの4色印刷なので、にじみのないクッキリとしたプリントができます。

ネットプリントのすばらしいところは、一度データをアップしてしまえば全国どこのセブン-イレブンでもプリントできてしまうこと。プリンターのクラウド化といっても大げさじゃないです。

この仕組みを利用して「自分でプリントするフリーペーパー」っていうのもできそう。

グラフィックデザインのカンプ出力でも使えるレベル

セブン-イレブンのコピー機は、どのくらいの頻度でキャリブレーションなどのメンテナンスが行われているのか分かりませんが、とりあえず試してみないことには始まらないのでカラーチャートを作ってみた次第です。ちなみにこのカラーチャートは予約番号「08090095」を入れれば誰でもプリント可能です。

市販のカラーチャートと照らしあわせてみましたが、ほぼほぼ色味は合っていました。

セブン-イレブンでのプリント方法

説明するとややこしいけど、予約番号を入れるだけです。

01_「ネットプリント」を押します

02_「確認」を押します

03_「プリント予約番号」を押します

カラーチャートの予約番号「08090095」を入れてみてください。

04_ファイルの検索…

05_ファイルの受信が始まります

06_フルカラーか白黒を選択して「確認」を押します

07_必要な金額を投入します

A3サイズだと100円です。

08_プリントが開始されます

09_プリントが終わったら「確認終了」を押します

iPhone や Android のアプリもあります

• netprint for iPhone
• netprint for iPad
• netprint for Android

変数

変数は色指定に使えそうですね。less が css のようにコンパイルされます。

/* less */
 
@color: #4D926F;
 
#header {
  color: @color;
}
h2 {
  color: @color;
}

/* css */
 
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

関数と演算

マウスオーバー時の色指定に使えそう。

/* less */
 
@the-border: 1px;
@base-color: #111;
@red:        #842210;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

/* css */
 
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

ネスト構造

CSS をプログラミング的に、入れ子に書いていくことができます。

/* less */
 
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* css */
 
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}