Blogger にTwitter Follow Badge を導入する方法

このエントリの目次

1. Twitter Follow Badgeとは
2. コードを生成する
3. Bloggerに設置する
4. さいごに

1.Twitter Follow Badgeとは

←これのコトです。

クリックすると、その人のツイッターにアクセスできます。

前から他のブログでよく見かけていましたが、今回、ようやく当ブログに導入するコトにしました。

2.コードを生成する

Twitter "Follow" Badge for your site/blogにて、自動でコード生成できます。


上記サイトにてツイッターアカウント、「Follow me」などの文字列、背景色、左右のどちらに表示するか、などを入力していきます。

そして、キャプチャの「UPDATE CODE」ボタンをクリックします(赤丸で囲んだ部分)。

すると、貼り付けるべきコードが表示されます。
あとはBloggerに設置するだけ！

3.Bloggerに設置する

テンプレートのHTMLを直接編集して設置します。

まずは、Bloggerの設定ページで「テンプレート」を選択し、「HTMLの編集」ボタンを押します。


すると、下記のような画面になります。
「上級ユーザーにのみおすすめします」という怖い注意書きがありますが、いつでもデフォルトに戻せるので気にせず、「続行」ボタンを押します。


以下のようなHTMLエディタが表示されます。


いよいよコードの貼り付けです。
</body>というタグを見つけ、そのすぐ上に先ほどのコードをペタリと貼り付けるのですが…。

でもコードを二箇所だけ、修正する必要があります

Bloggerで使うには、ちょっと修正が必要です。

<script>タグの直後の<!--と</script>タグの直前の-->を、それぞれ&lt;!--と--&gt;に修正します。

具体的に言うと…。

修正前。

<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript">
<script charset="utf-8" type="text/javascript"><!--
tfb.account = 'ico_mob';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
-->
</script>

修正後。

<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript">
<script charset='utf-8' type='text/javascript'>&lt;!--
tfb.account = 'ico_mob';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--&gt;
</script>

あとは、「テンプレートを保存」ボタンを押して、完了です！

4.さいごに

今更感はありますが、流行にのってみました。

よろしければフォローして下さい。
それでは。

参考にさせて頂いたサイト。
Twitter Follow BadgeをBloggerで使う方法 | 試行錯誤

UXデザインのプロセス その3

今回はスケッチとプロトタイプ、そして実装(本ブログのデザインリニューアル)です。

前回までの記事で、ストーリーボードの作成まで行いました。
今回はスケッチとプロトタイピングを行い、最後に本ブログを実際にリニューアルしてこのシリーズを終わりとします。
このエントリがアップされた時点では既にリニューアル後のデザインになっています。

このエントリの目次

1. スケッチとプロトタイプとは
2. まずは提供するべきデータと機能をリストアップ
3. スケッチとプロトタイプの作成
4. で、今のデザインになりました。新旧比較
5. さいごに

1.スケッチとプロトタイプとは

どちらもUXデザインの初期の具現化ステップです。
が、以下のような違いがあります。

• スケッチ
  アイデアの創出・具現化が目的で「探求」のステージ。より多くのアイデアを素早くたくさん具体化することが目的で、より良いものを選択していきます。
• プロトタイプ
  実際の見た目に近いものを作成してフィードバックを得る「検証」のステージ。関係者へのプレゼンやユーザビリティテストなどを目的とします。

2.まずは提供するべきデータと機能をリストアップ

まずは、前回の記事で作成したストーリーボードの各ステップで、ユーザに提供するべきデータと機能をリストアップします。

当ブログでは下のようになりました。

まず第一に提供するべきなのは「分かりやすい本文」で、この点については考えるべき階層構造があまりないので、シンプルなものになりました。

3.スケッチとプロトタイプの作成

本来、スケッチは紙に書きだすなどして大量にアイデアを生み出すのがよいのですが、今回は 目的がシンプルなため、またBloggerのテンプレートデザインなどを使って実現したいUIがすぐに反映できるため、プロトタイプをスケッチと同時に行いました。

そのときに検討した項目を書いていきます。

配置するデータについて

1. デザインの原則に従って、記事の本文を左側に、ナビゲーションを右側に配置する
2. 記事本文のカラムについて
   1. 記事本文の下には、その記事のラベルを配置する。
   2. 各記事の最下部には、それ以外の要素を配置する。
   3. と思ったけど、なぜかその辺りの順番変更できないね…。
3. 他エントリの導線となる要素以外は極力排除する。
   1. 美人時計とか旬が過ぎたし、本ブログで見る必要はないので削除する。
   2. Android関連のニュースのブログパーツは、英語だし見られていないはずなので削除する。
   3. 当ブログの読者一覧は特に知りたくないと思うので削除する。
4. ナビゲーションの要素は使ってほしい機能の順に上から配置していく。
   1. 検索窓は最重要ではないけど、縦幅が狭くシンプルすぎて見落としやすいので一番上に配置する。
   2. 同じような内容の記事は割と近い日付で並び、タグ一覧よりも記事同士の関連性が高いので、月別の記事一覧を上に配置する。
   3. タグ(ラベル)一覧はPV順に並べたいけど方法が分からないので、とりあえずタグクラウドで妥協。
   4. よく検索されているエントリも配置したいが、それぞれ関連のないエントリが並ぶので下の方に配置する。
   5. 自己紹介は所詮おまけなので、ナビゲーションの下に配置する。

ビジュアルデザインについて

1. ブログのメインカラーを青系の色にする。今までは緑だったのだけれど。(ブログのタイトルがWorld Wide Windblueなのに！ 個人的にはこれが一番意味の分からないデザインでした)
2. 記事本文は白背景に黒テキストにする
3. 記事を読むときに目障りにならないように、全体を主張しすぎない色でまとめる
4. 気楽に読んで欲しいので、パステル系の色を使って柔らかい雰囲気を出す
5. 記事本文の構成がぱっと見で分かるように、タイトルと見出しの区切りを大きく分かりやすくする

記事の文章構成について

1. タイトル
   1. 正確にシンプルで端的なものにする。検索にひっかかったときのタイトルの全文表示を目指すよりは、正確さを優先する
2. 本文
   1. 小難しい印象を持たれないために、地の文は丁寧語で分かりやすい言い回しをする。ひらがなを多く使う。
   2. 検索エンジンで表示されたときに記事の内容が分かるように、概要を本文の一番上に書く。でも記事本文にスッと入ってほしいので、できたらアイスブレイク的なことも書く。
   3. アイスブレイクの効果を狙って、各記事の一番上にはイラストや写真を入れる。
   4. サンプルコードとキャプチャ画像をたくさん入れて、ユーザが迷ったり悩む回数を減らす。
   5. 各見出しの内容が一画面を超える長さの場合は、できるだけ分割する

これらのコトを意識し、Bloggerのテンプレートデザインでトライアンドエラーを繰り返しました。

4.で、今のデザインになりました。新旧比較

だいぶすっきりとした印象になりました。
右側のタグクラウドなどはまだ気に食わないですが、できたら随時修正していこうと思います。

旧バージョンのキャプチャを貼ります。







見出しと地の文がパッと見で区別がつきにくくて、ゴチャコチャしている感じです。
ざっとスクロールしたとき、記事の構成がわかりづらいです。
ここが今回なおしたかった最大のポイントです。

素人が中途半端にデザインするもんじゃないですな。

ちなみに本文の横幅は 前のバージョンでは意図的に狭くしてたのですが(視線の横移動がだるい)、それだとサンプルコードが見づらくなるので、今回は仕方なくデフォルトの幅にしています。

ていうかなんでメインカラーを緑に選択したのか…(ブログのタイトルがWorld Wide Windblueなのに！)(二回目)。
まあ単純に緑色が好きだからだったんですが。

5.さいごに

これで、UXデザイン入門―ソフトウェア&サービスのユーザーエクスペリエンスを実現するプロセスと手法を参考にしたシリーズを終わります。

「当ブログが見やすくなった」っていう人がいらっしゃいましたらコメント頂けると嬉しいです！

UXについてはまだまだ初心者レベルですので、これからも勉強していきます。
情報アーキテクチャも勉強していこうと思っています。

また、ソーシャル系やモバイル系も最適化していこうと思っています。

それでは。

参考書籍

(追記) UXデザインのプロセス その2

追記

このエントリではUXデザインのプロセスのうち、ストーリーボード作成まで実施しています。
次のスケッチ、プロトタイプ、実装についてはコチラ！

今回はUXデザインとしてストーリーボード作成をします

前回の記事ではデザイン調査とペルソナ作成をしてみました。
このエントリでは、ストーリボードの作成をしていきます。

このエントリの目次

1. ストーリーボードとは
2. ストーリーボード作成の目的
3. ストーリーの作成
4. ストーリー作成のコツ
5. ストーリーボードの作成
6. さいごに

1.ストーリーボードとは

映像作品のプロセスでいう、「絵コンテ」にあたります。

2.ストーリーボード作成の目的

それは、ペルソナがしたいコトを提供する際、どのようなUXを提供するといいのか を追求するコトです。
このプロセスでは、実現可能性はそこまで深く考えず、とにかくペルソナが喜ぶようなシナリオを検討します。
そうするコトで、ペルソナが求めるUXに近づくことができるのです。

3.ストーリーの作成

ストーリーボードを作る前に、まずはそれのもととなるストーリーを考えます。
ペルソナの行動や関心を一区切りとして分割していきます。

このサイトを対象として、以下のように考えてみました。
ペルソナの名前を「太郎」とします。
ストーリー名：エントリの閲覧

1. 太郎はあるワードで検索、結果に表示された記事の概要を見て当サイトへのリンクをクリックする
2. 太郎はエントリを「ザッと」見て、目的に合致する内容だと「すぐに」思い、きちんと閲覧するコトにする
3. 太郎はエントリに書いているサンプルコードや手順を、書いてあるとおりに「簡単に」試す
4. 太郎は同じ話題を扱っているエントリを発見し、見に行く
5. 以下、3. → 4. のループ

4.ストーリー作成のコツ

上でも述べましたが、コツは 実現可能性を無視しない程度に、とにかくユーザーにとって最高のシナリオを考えるコトです。

また、秘書型システム(このワードでググる)、道具型システム(このワードでググる)という考え方を知っていると、ストーリー作成の助けになります。

5.ストーリーボードの作成

以下のような絵を作成しました！


作成するときの注意点として、サービスの画面内容は書き込まないようにします。
なぜなら、書きこんでしまうと実際の画面を想定しまい、UXに集中できないからです。

6.さいごに

今回のエントリで、考えてなかった問題点が見えてきました。
エントリの出だしや当サイトの右カラムについて、検討の余地がありそうです。
「右カラムに美人時計が表示してるけど、誰得だよ…！」って思いました。

スケッチ、プロトタイプのプロセス に続く？！

参考書籍

HTTP Status Code を見るUIWebView のサンプルコード

はじめに

iOSの開発に手を出しました。
Objective-C は初でしたが、最初は意味不明でしたね。
特にメソッド呼び出しとデリゲートについて。

まあそれは置いておいて。

UIWebViewは簡単にWebページをブラウザできるのでよいのですが、なんとHTTP Status Codeを見れないようです。
404 Not Foundみたいな表示がそのまま出ちゃうと。
それはよろしくないので、HTTP Status Codeを見て、その後の処理を制御するサンプルコードを書いてみました。

このエントリの目次

1. GitHubにあげたiOSプロジェクト
2. ソースの重要な箇所
3. 閑話休題 「GitHub for Mac」について
4. さいごに

1.GitHubにあげたiOSプロジェクト

コチラになります。

2.ソースの重要な箇所

以下に貼付けます。
GitHubのソースの47〜77行目にあたります。
コメントを読めば処理の概要は分かると思います。

- (void)kick:(NSString *)url
{
    NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    
    //UserAgentをセットします
    NSString *userAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
    [urlRequest setValue:userAgent forHTTPHeaderField:@"User-Agent"];
    
    //urlにアクセスします
    NSHTTPURLResponse *response;
    NSError *error;
    NSData *responseData = [NSURLConnection sendSynchronousRequest:urlRequest
                                                 returningResponse:&response 
                                                             error:&error];
    //何らかのエラーが出たとき
    if ([response statusCode] >= 400 || error) {
        UIAlertView *alert =
        [[UIAlertView alloc] initWithTitle:@"エラー" 
                                   message:[NSString stringWithFormat:@"HTTP STATUS CODE:%d", [response statusCode]]
                                  delegate:self 
                         cancelButtonTitle:@"確認" otherButtonTitles:nil];
        [alert show];
    }
    //正常なレスポンスのとき
    else {
        [webView loadData:responseData MIMEType:[response MIMEType] 
          textEncodingName:[response textEncodingName] 
                   baseURL:[response URL]];
        [self setView:webView];
    }
}

参考にしたサイト

1. How do I get the last HTTP Status Code from a UIWebView? | Stack Overflow
2. Changing the userAgent of NSURLConnection | Stack Overflow

3.閑話休題 「GitHub for Mac」について

Mac向けにGitHub for Macというクライアントツールがあります。
GUIでソースのコミットなどがとても簡単にできます。

操作方法はデザイナーのためのGithub for Mac の使い方「リポジトリ作成編」 | KUROIGAMEN(黒い画面)が詳しいです。

さてGitHub for Macですが、このオクトキャットの仕草や表情がめっちゃ可愛い！！


普通のオクトキャットはまぁまぁくらいですが、この絵は衝撃的可愛さ！
アイコンもこの絵なので、Dockに追加すれば いつでも見られます。

あと、いろんな格好をしたオクトキャットがいるサイトを見つけました。
マリオとかロックマンとかゼルダのリンクの格好したやつもいます。

4.さいごに

GitHub for Macのオクトキャット可愛い！

(追記) UXデザインのプロセス その1

追記

このエントリではUXデザインのプロセスのうち、デザイン調査とペルソナ作成まで実施しています。
次のストーリーボードの作成についてはコチラ！

UXとは

UXとはユーザーエクスペリエンスのこと。
UIとUXの違いとは？――日本で第一人者の話を聞いてみたい人へ | 自分戦略@IT研究所より引用させて頂くと、

UXとは一言で言うと、ハードやソフトなどのシステムを利用者が使用した時に経験する「使いやすい！」や「便利だ！」「気持ちいいー！」などの感情を、利用者に提供する際の価値として重要視するコンセプトです。

UIはインタラクションやデザイン、それに対しUXはサービスの使い心地(デザインだけじゃなくサービスの内容も含む)、といったところでしょうか。
よいコンテンツと美しいUIは、感動や気持いいといったUXを提供する、というコトです。

このシリーズのエントリはUXデザイン入門―ソフトウェア＆サービスのユーザーエクスペリエンスを実現するプロセスと手法という本を参考に書いています。

このエントリの目次

1. UXデザインのプロセス
2. デザイン調査
3. ユーザーモデリング(ペルソナ) 準備
4. ユーザーモデリング(ペルソナ) 3つのペルソナ作成
5. ユーザーモデリング(ペルソナ) 3つのペルソナまとめ
6. 最後に

UXデザインのプロセス

UXデザインをきちんとすることで、ユーザの満足度を高めることができるはずです。

UXデザインのプロセスはこんな感じです↓

1. デザイン調査
2. ユーザーモデリング
3. ストーリーボード
4. スケッチ
5. プロトタイプ
6. 実装

以下に、各プロセスの大まかな内容や目的を示します。

・1.デザイン調査とは。

「ユーザがある状況である目的を達成しようとするときに、どのように振る舞うのか？」といった現状を調査し、そして「ユーザのニーズ」を掘り起こしていきます。

・2.ユーザーモデリングとは。

デザイン調査から得られたデータをもとにユーザーの特徴やニーズのパターンを検討し、デザイナたちが想定するターゲットを共有していきます。
手法としては「ペルソナ・シナリオ手法」や「5つのワークモデル」などがあります。

・3.ストーリーボードとは。

考えたペルソナをもとに、そのペルソナがそのサービスでやりたいコトをできるまでのストーリーを考えます。
これにより、デザインコンセプトを決定します。

・4.スケッチとは。

これまで得たデータをもとに、デザインを考えて色々なパターンを作っていきます。
デザインの「発散」です。

・5.プロトタイプとは。

作ったスケッチたちの中から良かったものを選び出し、より詳細に検証していきます。
デザインの「収束」です。

・6.実装とは。

ガンガンいこうぜのプロセス。

本エントリでは、

1. デザイン調査
2. ユーザーモデリング(ペルソナ)

を実施します。

2.デザイン調査

当サイトをサンプルに、デザイン調査をやってみます。

サイトに訪れて下さった方に直接お話を聞くのはコストが高いので、Google Analyticsからアクセス解析をしてユーザ層の把握をしていきます。

サイト訪問者の状況。

1. アクセスが多い時間帯:
   平日の18:00〜26:00。ピークは0:00
2. OSのシェア:
   Windows 60%(そのうち7が50%、XPが40%)、Mac 25%、Linux 10%
3. ブラウザのシェア:
   chrome 40%、Firefox 30%、IE 20%、Safari 10%、Opera 2%。
4. アクセスもと:
   Google 90%、Yahoo 8%、bing 1%
5. アクセスが多い地域:
   東京 50%、神奈川 10%、大阪 5%、愛知 5%

サイトを訪れた目的。

1. 検索ワードの話題と割合は「tizen」関連 33%、「Android」関連 30%、「JavaScript」関連 22%

パッとみ、MacやLinuxでChromeやFirefoxを使う、夜型のIT関係の人が仕事終わりに家からこのサイトを見ていると思われます。

これで訪問してくれる人たちの状況を洗い出しました。

3.ユーザーモデリング(ペルソナ) 準備

さて、ここからペルソナを考えていきます。

まず、世間のOSのシェアと比べます。

Windows XPのシェアが再び回復 - 3月デスクトップOSシェア | マイナビニュースによると、
2012年3月 時点で、Windows 92%、Mac 7%、Linux 1%
となっています。
当サイトのシェアは、それと比べると
Windows 約0.7倍、Mac 3.5倍、Linux 10倍
です。

Linuxのシェアが世間よりずば抜けて高いので、訪問してくれるのはギークな人が多いようです。

続いて、世間のブラウザのシェアと比べます。

ブラウザシェア推移グラフ (StatCounter Global Statsより) |Let's HSPによると、
20121年5月1日 時点で IE 53%、Firefox 20%、Chrome 18%、Safari 7%、Opera 2%
となっています。
当サイトのシェアは、それと比べると
IE 0.4倍、Firefox 0.7倍、Chrome 2.2倍、Safari 1.4倍、Opera 1倍
です。

IEのシェアが世間よりとても低く、ちょっと前までイケイケだったFirefoxもなかなか低いです。
Safariが多いのはMacユーザーの訪問者が多いからでしょう。
やはり、ネットに対して感度が高い人が多いようです(当ブログの話題を考えると当たり前か)。

最後に、世間の検索エンジンのシェアを比べます。

GA-Proによると、
2012年5月20日 時点でYahoo 52%、Google 46%
となってます。 あれ、bingは？？
当サイトのシェアはそれと比べると
Yahoo 0.2倍、Google 2倍、bing 測定不能だが多い
です。

Googleが圧倒的に多くなっています。
予想通りです。

さて、今回最も重要だと思ったのが、検索ワードの話題と割合です。

もう一度 結果を書くと、

• 「tizen」関連 33%
• 「Android」関連 30%
• 「JavaScript」関連 22%。

この3つの検索ワードをもとにペルソナを作っていこうと思います。

4.ユーザーモデリング(ペルソナ) 3つのペルソナ作成

まず「Tizen」で検索するペルソナについて。

Tizenとは、サムスンやLinux Foundationたちが推進するオープンソースのスマフホ向け新OSで、まだまだマイナーなワードだと思われます。
このワードで検索するのはいわゆるイノベーターでしょう。
CEATECなどのイベントにもよく行くのでは。
かなりの確率で男性でしょう。
年齢は20代後半〜30代でしょうか。

また、PCは複数台持っていて、Linuxをよく使ってそうです。
なぜならこのTizen、前まではUbuntu向けにしかSDKが提供されてなかった(今はWindows 7/XPでも提供されているようです)からです

平日の夜にアクセスが多いことを考えると、仕事だけでなく趣味でもプログラムをやっていると思われます。
このブログの訪問者の中でもトップクラスのスキルを持っていると思います。
Chrome使いが多そうです。
スマホは多分Android派で(Linuxユーザが多いはずなので)、もしかしたら2台持ち3台持ちなんてのもあるかも。

デザインよりも機能面を重視するタイプか。
基本的にツールやガジェット類は「便利に使えればメーカーなどにはこだわらない」というスタンス。。かな？
そして、「最初に結論を言え」というようなせっかちな性格。。か？

次に、「Android」で検索するペルソナについて。

当ブログでAndroidにきちんと触れたのは、MacでAndroid開発環境を構築する方法を書いたときだけです。
なので、Androidに興味を持ち始めた感じ。

Android開発をするのにMacを使うというのは、個人的にはけっこう珍しい選択肢だと思います。
ということはMacをメイン機で使用しているのではないでしょうか。
iOSの開発は既にしたコトがありそうです。

業務で「MacでAndroid開発」というのはあまりないと思いますので、こちらも趣味でプログラミングをやっているギークのはずです。
いわゆるアーリーアダプターで、かなりの可能性で男性だと思います。
使っているブラウザはChromeもしくはSafariでしょうか。

Apple製品が好きで、機能性はもちろんデザインにも重きをおくのでは。
ミニマルなアクア風デザインが大好き。
年齢は20代後半が多い気がします。
割とリア充(「Mac好き」の個人的なイメージ)。

最後に、「JavaScript」で検索するペルソナについて。

検索ワードを詳しく見ると「JavaScript 再描画」や「JavaScript 性能」などがあるので、AjaxバリバリのRIAを開発している中級者くらいのWebデベロッパでしょうか。
RIA開発にかかせないHTMLとCSSの知識も持ってるでしょう。
また中級者というコトで、Windowsユーザが多そうです。


また、超便利なWeb開発ツールであるFirebugがあるのでFirefoxユーザが多そうです。
年齢層は「Tizen」や「Android」のセグメンテーション(←「クラスタ」的な意味です)と比べて若そうです。
20代前半〜20代半ばが多いですかね。

プログラミングの話題なので、こちらも男性でしょう。

という訳で、「Tizen」「Android」「JavaScript」で分類したペルソナを作ってみました。

5.ユーザーモデリング(ペルソナ) 3つのペルソナまとめ

こんなんなりました。

・ペルソナ1 (「Tizen」のセグメンテーション)

20代後半〜30代の男性でイノベータなギーク。Android使いで、メインPCはLinuxとWindows。メインブラウザはChrome。サービスは機能面を重視する。割とせっかち。

・ペルソナ2 (「Android」のセグメンテーション)

20代後半の男性でアーリーアダプターなギーク。iPhoneを持っているけどAndroidに興味がある もしくは 最近Androidを買った。メインPCはMac。メインブラウザはWebkitベースのやつ。サービスはデザイン・機能面ともにこだわる。KISSなUIが好き。リア充。

・ペルソナ3 (「JavaScript」のセグメンテーション)

20代前半〜20代半ばの男性。メインPCはWindowsでメインブラウザはFirefox。HTMLやCSSのコーディングもできるけど一番得意なのはJavaScript。性格や考え方は…検討できませんでした！(涙)

6.最後に

たかが個人Blog一つの調査＆まとめに2時間くらいかかってしまった…(HTMLの整形は除く)
でもなかなか楽しかったです。

ペルソナってみんなやってるんでしょうかね、工数の都合で省略されているイメージです…。

今回検討した3つのペルソナ、皆さんには当てはまっているでしょうか！
当てはまってる、当てはまってない関わらずコメント残してくれたら嬉しいです！
また、こんな感じでいいのか自信はないので「こんな風にしたらいい」などの意見がありましたら、そちらのアドバイスも頂けると幸いです。

ちなみに本エントリのタイトルに「その1」って書いてますが、続くかは未定です！ ストーリーボードの作成に続きます

それでは。

参考書籍