tumblrは妙に敷居が高いけど

tumblrの第一印象は、おそらく大多数の皆様が感じたのと同じく「ぜんぜん意味がわからない。。」でした。

とにかくとっつき辛いというか、説明不足というか、一見さんお断りな空気を醸しているtumblrですが、やること自体は実はシンプル。

1. web上にある動画、画像、音声、リンク、チャット、テキスト、引用を自分のtumblrページに転載する。
2. フォローしているユーザーの投稿を自分のtumblrページに転載する。

これが全てです。

当然の疑問として、テキストと引用とリンクは何が違うんだと思われるでしょうが、そんなこと知らなくてもtumblrは使えます。
いばることじゃないですが、未だに何が違うのかよく知らないです。

tumblrはその不親切さと表裏を成す形で、ある種投げやりな懐の深さを持っていますので、それぞれ好きに使えばいいんだと思いますよ。

僕の使い方

さてここからが本題。
僕がtumblrをどう使っているかをご紹介します。
ひとことで言うとこんな感じ。

好きなデザインイメージのインプット兼アウトプット

曲がりなりにもデザインを生業としていますので、日々の情報収集はマメに行っているつもりです。

これまではGoogleリーダーに登録した国内外のグラフィックデザイン、建築、インダストリアルデザイン、フォトグラファーのサイトから日夜配信されるRSSフィードを流し見ながら、自分のアンテナに引っかかるものを日々ちまちまと収集し続けてきました。

でも、Googleリーダー上でスターをつけたり共有したりといった方法だと、過去の投稿の一覧がしにくくて、いまいち実用性に乏しかったんですよね。

tumblrはwordpressのようにテーマを変更することができます。
テーマは無料で配布されている物が多く、とくに凝らなければ自分で作る必要はありません。
中には一覧性の高い「アーカイブ表示」に対応したテーマも存在します。

そう、これ！これですよ欲しかったのは。

さらに言うと、タグ検索から#design、#architecture、#industrialなどのタグがついた投稿を見て、自分とセンスが近い投稿を繰り返しているユーザーをフォローしたりすると、思いがけなくいいイメージに出会ったりすることもあって、なかなか良い感じです。

アーカイブをあとから眺めていると、自分のクセといいますか「あー、俺こういうの好きなんだー。」という発見があって面白い。外側から自分の嗜好に気付かされるってあまりない体験だと思うのでおすすめですよ。

Evernoteでやればいいじゃんという意見もあると思いますが、今の時代こんなのはお互い共有してなんぼでしょう。

他の方はどんなふうに使っているのか、気になるところです。
興味ある方はフォローしてください。

http://snufkuni.tumblr.com/

ユーザーがGoogleにログインした状態で+1ボタンをクリックすると、ログインしているアカウントのGmailのアドレス帳に登録されているユーザーやGoogleリーダー等でフォローしているユーザーが関連のあるキーワードで検索した場合にオススメとして表示される。

というもんだそうで。

Googleはソーシャルが弱いとずっと言われているわけですが、ここにきて本丸の検索に絡む形でソーシャルフィルタを実装してきたようですね。

Facebookはソーシャルから検索の領域に、Googleは検索からソーシャルの領域に侵攻をかけているみたいですが、いまのところはややFacebookが有利か。といった状況。

「友達のオススメは、赤の他人のオススメよりストライクゾーンに入る可能性が高いだろう」という基本理念に基づいているようですが、これは周りの友人がGoogleのアカウントを持っていることが前提になるので、人によっては精度にバラつきがでるんだろうなーというのはある程度予測できます。

このバラつきを解消するには「どの程度仲良しなのか」っていう情報とか、「どんなクラスタの知人なのか」といったパラメータが必要になってくると思うんですが、その手の情報は既にある程度Googleに吸われてたりするんですかね。

僕はiPhoneのアドレス帳もGoogleと同期しているので、「ほう。こいつはこの番号にしょっちゅう電話かけてるな。時間帯は夕方か…帰るコール的な通話かも。姓も同じだし、夫婦だなこれ。」みたいなノリで推測されて情報握られててもなんら不思議じゃないです。

今はアノテーション（友達のオススメ）が表示されるのは英語版google検索のみですが、順次各国語の検索結果に反映されてくるものと思われますので、このサイトにも設置してみました。
今のところは全面的になんともいえない状況です。徐々に浸透してきてから有用性を見極めたいと思っています。

設置方法は+1ボタンカスタマイズページからコードを取得してHTMLに貼り付けるだけです。

+1ボタンに関するFAQは+1 ボタンに関するよくある質問にありました。
あいかわらずヘルプってのはどこも読みづらい。。

どこに需要があるのかわからない厳選。プラグインシリーズ第三弾。
最後は[縁の下の力持ち編]です。

見た目になにか変わる点があるわけではなく、サイトを裏方から支える野球のベンチウォーマーと言おうか、信長のぞうりを温める秀吉と言うか、そういうポジションのプラグインです。

では行ってみましょう。

WordPress Database Backup

データベースを定期的にバックアップ、圧縮してメールで送信してくれるプラグイン。
幸運にもまだお世話になったことはありませんが、転ばぬ先のなんとやらですから。

WordPress Database Backup プラグインページ

Ultimate Google Analytics

Google Analyticsをトラッキング IDを設定するだけで簡単に設置することのできるプラグインです。
PDFやZIPファイルなどのトラッキングにも対応しているとのことですが、そのあたりは実際に試していないのでわかりません。

Ultimate Google Analytics プラグインページ

Head Cleaner

ヘッダで読み込むCSSやJavascriptなどを最適化したりキャッシュさせたりすることで、ページの読み込み速度を上げるプラグイン。

できることはこちらに詳しく書いてあります。

Googleのウェブマスターツールで大まかにサイトのパフォーマンスを確認することができますが、Labsにあるサイトパフォーマンスのグラフによれば、Head Cleanerを導入した直後から表示速度があからさまに速くなっています。ある程度効果はあると言えるでしょう。

最近ではサイトの表示速度もGoogleでの検索順位に影響を与えるとのことなので、だまされたと思って入れておいてもいいかも知れません。

設定によっては他のプラグインのスクリプトが動かなくなる場合もありますので、最適な設定を探してみてください。

Head Cleaner プラグインページ

Google XML Sitemaps

サイトマップを検索エンジンに送りつけることで、インデックスされやすくなります。
Google XML Sitemapsはこのサイトマップ(xmlファイル)を自動的に作成して検索エンジンに送信してくれるプラグインです。

Google XML Sitemaps プラグインページ

All in One SEO Pack

どこへ行ってもとりあえず入れとけといわれる定番のプラグイン。

WordPressでは投稿記事名とページタイトル()はデフォルトで同一になっているところを、タイトルにユニークな文字列を入れることができたり、ページごとにメタデータやディスクリプションを書き換えることができます。

上記がSEO的に持つ意味の説明は割愛しますが、SEOだなんだと言っても結局のところページを訪れるユーザーにとって価値のあるサイトこそが優れたサイトであるという事実は揺るぎません。
プラグインを入れたからといって過信は禁物です。

All in One SEO Pack プラグインページ

実際に使ってみて、良いと思ったwordpressのプラグインを紹介する記事第2弾。
[表示機能拡張編]です。
wordpressに様々な表示機能を追加するタイプのプラグインを集めてみました。

Audio player

音声ファイルの簡易プレーヤーを表示するプラグインです。

サーバにアップロードしたmp3などの圧縮音源をFlashで読み込む形になっており、管理画面から挿入できます。

かなり秀逸なUIで色のカスタマイズも可能。この記事などで実際に使っています。

Audio player プラグインページ

Breadcrumb NavXT

パンくずリストを生成。ド定番。

表示させたいテンプレートに以下のコードを追加します。

<?php if(function_exists('bcn_display')){bcn_display();} ?>

Breadcrumb NavXT プラグインページ

Contact Form 7

フォームを生成。ド定番。
導入方法はここを参照してください。

Contact Form 7 プラグインページ

Dagon Design Sitemap Generator

サイトマップを生成。
サイトマップページで使用しています。

表示させたい記事やページ、テンプレートに以下のコードを記述します。

<!-- ddsitemapgen -->

Dagon Design Sitemap Generator プラグインページ

Google Maps Anywhere

投稿記事中にGoogleMapを表示します。ストリートビューの表示も可能になりました。
使うにはAPIキーが必要です。APIキーはこちらから取得できます。

Google Maps Anywhere プラグインページ

Picasa Image Express

GoogleのフォトサービスであるPicasaオンラインアルバムの画像を表示するプラグインです。
このページなどで使用しています。

Picasa Image Expressr プラグインページ

Post-Plugin Library と Similar Posts

これまたド定番。
関連性のある記事を表示するプラグインです。これを入れておくとユーザーの回遊性が高まって平均閲覧ページとかPVとかが少し上向きます。
Similar Postsを入れる前にPost-Plugin Libraryをインストールする必要があります。

表示させたいテンプレートに以下のコードを追加します。

<?php similar_posts(); ?>

Similar Posts プラグインページ

Post-Plugin Library プラグインページ

SyntaxHighlighter Evolved

<?php
echo"Hello world";
?>

投稿記事内でコードを記載する場合に便利なプラグイン。
たとえば上のように表示したい場合は、下に書くように[ ]でphpとかhtmlを括ってあげればOKです。

1

SyntaxHighlighter Evolved プラグインページ

実際に使用してみた上でこれは使える！と感じたプラグインだけに絞って紹介します。

自分で使ってもいないものをしたり顔で紹介しちゃうのは、amazonなどの「発売日はまだ先ですが期待を込めて★五つです！」的な無責任レビューと同じ香りが漂うので、避けたいとおもいます。

今回の[ソーシャル編]に加えて、[表示機能拡張編]と[縁の下の力持ち編]がございますので、後ほど更新します。

では行ってみましょう。

AddThis Social Bookmarking Widget

国内・海外含めて多くのソーシャルサービスに対応。
必要十分なUIで設置スペースも少なく、言語を選択することでお国柄にあわせたソーシャルサービスを先頭にソートします。配置は投稿記事の上下のほか、下記のコードで任意の場所にも表示可能。

<?php do_action( 'addthis_widget' ); ?>

AddThis Social Bookmarking Widget プラグインページ

Facebook Like

なにがいいのかはよくわかりませんが「いいね！」という気分を表明するfacebookのボタンを設置します。

目下の悩みとして、日本ではほとんど誰もfacebookを使っていないということがあげられますが、今後の国内におけるソーシャルグラフの普及を願って★五つです。

テンプレートの表示したい場所に下記のコードを追加しましょう。

<?php //For the count button
if(function_exists('Count_Button'))
{echo Short_Button();}
?>

Facebook Like プラグインページ

Twitter Tools

twitterのつぶやきを表示するプラグイン。
ブログの公開をtwitterにポストしたり、逆にその日のつぶやきをまとめてブログの記事にしたりする機能を持っています。バージョンアップしてからtwitter側にアプリとして登録申請をしなくてはいけなくなり、多少手続きが煩雑ですが安定しています。

複数tweetを表示

複数tweetを表示する場合、表示する数の変更などは管理画面の設定から行います。

テンプレートの表示したい場所に下記のコードを追加しましょう。

<?php aktt_sidebar_tweets(); ?>

デフォルトでは各tweetの下部に、ポストした時間を「***hrs ago」という形で表示しますが、特に必要なかったのでtwitter-tools.phpの一番下にある下記の部分をコメントアウトして非表示にしています。

	// Return relative date and add proper verbiage
	#return sprintf(__('%s ago', 'twitter-tools'), $relative_date);
}

?>

直近のtweetを表示

テンプレートの表示したい場所に下記のコードを追加しましょう。

<?php aktt_latest_tweet(); ?>

Twitter Tools プラグインページ

ソーシャル対応もデザインとのバランスが難しいですね。

jsで画面下から半透明のツールバーがせり出してくるタイプのものが流行ってますが、あれもインタラクションとしては面白いんだけど、全体を通しての使い勝手からみると相当イケてない感じがして実装しませんでした。

WEBサイトは家と同じく使われてなんぼの存在ですから、なるべくユーザーの望む動作からはずれないような設計を心がけたいところです。

M⁺ FONTS(Free)

M⁺フォントは、個人利用、商業目的での利用、内容の改変、改変後の再配布もOK。自由の国アメリカライクなライセンスで公開されています。

M+ FONTS ダウンロード

District Thin(Free)

District Thin ダウンロード

Steiner(Free)

Steiner ダウンロード

AXIS font

最後にデザイン誌「AXIS」のために開発された書体。その名もずばり「AXIS Font」。そのまんまです。

有料ですがとても美しく、WEBデザインでもDTPでもマルチに使えます。

このページでAXISフォント制作の経緯などについて知ることができますが、フォント一つの中にも物語ってあるんですね。

ちなみにこのサイトでも一部、タイトルなどにAXISフォントを使用しています。

AXIS Font

紹介する数が少ないのは、厳選してるからです。

余談ですが、最近ブログの「○○を××する40の方法」みたいなタイトルが蔓延している傾向にウンザリしています。
端から全部書いてるだけだろそれ！もうちょい絞れよ！

フォントのことをもう少し知りたい場合は、以下のリンク先に比較的わかりやすい解説が載っています。

書体について学ぶ

環境NGO ezorockでは、昨年からソーシャルネットワークサービス(以下SNS)を使った情報の共有化/流動化をすすめてきました。もともとはメーリングリスト(以下ML)や個々のダイレクトメールを利用して情報を共有していましたが、組織の規模が大きくなり活動のスピード感も増していく中で運用の見直しが必要となり、オープンソース型のシステム(OpenPNE)の導入を提案したものです。ML運用時に問題だった点とSNSによる改善、今後の展望をまとめます。

ML運用時の問題点

1. 一つの話題を追いにくい

   MLには様々な話題が平行して流れます。繁忙期になってくるとみんながみんな自分の担当しているセクションの情報を共有しまくるので、まさに怒濤のようにメールが送られてきてしまい、自分に関係する話題を拾うだけで一苦労です。

2. 発言の訂正が大変

   メールは一度送信してしまうと訂正が出来ないため、一部間違った情報を流してしまった場合には訂正のためにもう一度メールを送らなければならず、同じ情報のバージョン違いが発生し混乱のもとになります。前述の繁忙期にはなおさら問題です。

3. データの取り扱いが心配&面倒くさい

   MLは最終的に各自のローカル環境にログを保存することになり、セキュリティ的にもアクセシビリティ的にも不自由です。具体的に言うと、メールを保存していたノートパソコンを家に忘れてきちゃったり、最悪の場合無くしたりと言ったリスクがつきまといます。

4. 進捗状況や活動内での位置づけを表す情報がない

   NGOやNPOにおける活動は、営利企業のそれとは異なり理念や過程が重要なファクターになります。企業内活動以上に自分の行う活動が他の活動とどのように関係し進捗はどうなっているのかを共有する必要があります。しかしメールでのやりとりにおいては、前後関係や従属関係を示す付加的な情報を付けることが難しく、結局口頭による伝達で補完しなければなりません。その口頭伝達もログが残っていないので、後から見返すこともできないのです。

SNS導入後の改善

1. 情報のコントロールが可能に

   カテゴリ＞コミュニティ＞トピックと3段階のディレクトリを保持できるようになったので、情報が整理され、「コミュニティへの参加」というゲートを設けることで情報の流れを自分の意志でコントロールできるようになりました。

2. 発言の訂正が容易

   書き込んだ情報を直接修正できるので、常に最新の情報を共有することが可能になりました。またレスポンス先を明確にできるようになったためWEB上での議論が効率的になり、議論はSNS上で行い最終的な意思決定のみミーティングで決めるワークフローが実現しました。

3. データへのアクセスがより簡単に、多少セキュアに。

   SNSはデータを全てサーバのデータベースに保存するので、インターネット回線につながった端末であれば、どこからでも情報にアクセスが可能になります。また携帯電話からのアクセスにも対応し、若年層メンバーの比率が高いezorockの実情にもうまく合わせることができたのでは無いかと思います。
   もっとも、人材の育成が団体の根幹となる活動であることから、コンピュータリテラシーの向上は今後力を入れなければいけないところだとは思います。

   当然SNSにはログインが必要になるため、セキュリティ的にもローカルにPOPメールが保存されているよりは安全になっています。

4. 個々の活動(話題)の相対的位置が明確に

   繰り返しになりますが、カテゴリ＞コミュニティ＞トピックと3段階のディレクトリを保持できるようになったため、スレッド形式で情報をまとめることでプロジェクトの進捗が把握しやすくなり、前述のディレクトリ構造によって組織における活動の位置づけを体系的に整理することができるようになりました。

5. その他

   全ての活動をSNS上に反映させるため、知りたいと思えばだれでも全ての活動内容を把握できることになります。意思決定の透明性を確保する上でも重要なアドバンテージになります。

   メールを流すほどの話題でもないけど・・・という雰囲気で表に出てこなかった情報が気軽に発信できるようになったとの意見もありました。

今後の展望

• Google Appsのドキュメントと連携してオンラインでの共同作業をもう一歩踏み込みたい。
  ※現状はまだ一部の人がドキュメントの共有をしているのみ
• プロジェクト終了、もしくはある程度成果がまとまった段階でスレッドの中身を簡単な報告書としてまとめられるようなワークフローを作っておくと、色々便利なんじゃないかと思う。

導入当初の目的はだいたい達成できたと踏んでいるので、運用を続けながら少しずつ改善していこうと思います。
いきなりネタ切れそうなんで、次回はインタビューでもしてみようかな。

札幌を拠点として、様々な活動を行う環境NGO ezorockのWEBサイトを制作しました。

環境NGO ezorockの広報戦略と密接に結びつくこのサイトは、おそらく多くのNGOが抱える課題や問題点のいくつかを解決することが可能です。しかし残念ながら全ての問題を完璧に解消するには程遠い状態であることも事実です。

今後mumrik.jpではこの環境NGO ezorockのWEBサイトの制作・運用を通じて、広義でのデザインが社会とNGOの橋渡しをするツールとして、どの程度有効に機能できるのかを検証してみたいと思っています。

頭良く見せたいという願望が働いた結果、正しいのか正しくないのかわからない難解な日本語になってしまいがちなのがこっぱずかしいんですが、要するに

1. 問題・課題の提起
2. 解決方法の考案
3. 実装・実証
4. 結果報告

もしくは

1. やべえ、良いこと思いついた
2. 実装許可申請
3. 実装
4. 失敗
5. 隠蔽

というプロセスを繰り返すことで、よりNGOの運営に最適化されたWEBサイトの形をあぶり出そうという企画です。

リニューアルの背景

環境NGO ezorockは今年度大きな組織改革を行い、それに伴ってより効率的な情報の発信と外部からの評価(フィードバック)がこれまで以上に重要となりました。サイトに求められる要件として従来のプッシュ型情報発信に加えて大きく以下の4つが挙げられます。

• 更新の簡便性
• 検索性の向上
• 情報発信チャネルの追加
• 今後の拡張を見据えた設計

更新の簡便性

更新時の費用、人的コストを押さえるため、wordpressを用いたCMSサイトとして設計しています。

検索性の向上

サイト内おける検索には、googleカスタム検索を導入しています。
wordpressにもともとついているサイト内検索も有用だとは思うのですが、他に目論みとのトレードオフもあってこちらを選択しました。

googleやYahoo!等検索エンジンからの流入に関しては、現状ではそれほど重要視していませんが、アクセス解析の結果からフィードバックを得るための仕組みがいくつか、バックエンドで動いています。
今後は記事数（キーワード）を増やすことによりロングテールキーワードで各ページへの多様な流入を狙う方向性を考えています。

情報発信チャネルの追加

twitterや各種SBMを始めとするWEBサービスを活用することで、情報発信チャネルの増加を図っています。
課題は更新側のリテラシーの向上が必要だということでしょうか。。ここは別の意味でかなりのコストがかかります。

今後の拡張を見据えた設計

CMSを導入したことで、更新にかかる労力が抑えられる反面、機能の拡張に関してはある程度の制限ができてしまいます。
今回は団体のロードマップを詳細にヒアリングすることで、今後必要となりそうな機能を公開の段階で実装してしまうことにしました。さて、吉と出るか凶と出るか。。。

今後の課題

スタートアップから約2週間を経過し、なんとなく次の課題が散見されるようになってきました。備忘録的に書いておきます。

• 記事の制作、推敲はどうするのか
• ezorock側の作業が思っていたよりも特盛りだった件
• 団体内部だけでは作業にかかる人的コストを吸収しきれないかもしれない

mumrik.jpではこれら課題をすっきりさっぱり解決するナイスアイデアを募集中です。
おそらくサイトの規模的にそういうアイデアは集まらないであろうことも多いに予想されますので、その場合は僕が無い知恵しぼって考えます。