Portfolio

APLA (Alternative People’s Linkage in Asia)/ あぷら

  • Co
  • De
  • Ph
  • Il
  • Ot

URL:http://apla.jp

今回はちょっと詳しく紹介してみたいと思います。
トージバの神澤さんの紹介でいただいたリニューアル案件でした。

担当窓口となったAPLAの野川さんとはすぐ意気投合。
活動も骨太で紙媒体でのアウトプットや雰囲気のあるイラストも充実していたので私と考藤はただ素直に組み立てていけば良いサイトが出来ると確信できました。

サイトリニューアルの目的を次のように定めました。

  1. 他の支援団体とは違うAPLAの方法を見せる
  2. コンテンツの管理・更新のしやすさと活動それぞれの関わりをわかりやすく見せることを両立させる
  3. 時事に対応できる拡張性・即応性をもたせる

写真をどんとトップに持ってくる

良い写真をたくさんお持ちでしたのでそれを頭に持ってこようと思いました。
この写真を見るとAPLAさんが現地の人達とどんな目線で交わっているのか明らかです。

なぜAPLAさんはわざわざ海外の支援を行なっているのか?(日本も色々大変ななかで)という問いに対する答えはもちろん言葉で説明するべきですし根幹をなす部分なんですが、初めてAPLAを知る人にとってそれをいきなり読ませるのはおもてなしに欠けるぞ、と。

おいしそう、きれい、かわいい、おもしろそう、カッコイイ、などなど
単純にそう感じてしまう、そういうビジュアルをまず押し出してお出迎えしよう!

しかも、ただの写真集になっていないところがすばらしい!
気の利いた、現地に入り込んでいないと絶対紡ぎ出せないような一言が写真に添えられています。
この一言一言を読んだ時にこれをもっと生かせないかというのが今回の企画の原点になっています(既存のサイトでも写真プラス一言というのは展開されていました)。
私も写真を撮りますのでコメントを添えるというのがどれだけ労力がかかることなのかよくわかります。

まさしく愛と信念がないとできないことです。

ちなみに、この写真集をフィールドノートと名づけました。名付け親は考藤です。気が効いたネーミングだと思います。今回の趣旨にぴったりです。

リンケージタグ

これが今回のサイトの仕掛け的には一番の売りです笑。
まずこの図をご覧ください。

APLAさんの活動はアジアと言っても広く複数の場所に広がっています。
その上、それぞれの地域で培った経験・ノウハウを人の交流を促進させることで流通させ、おのおのが切磋琢磨し深化していくことを目指しています。

こういう活動の様をサイトに整理すようとした時に単純な静的ツリー型の整理の仕方では破綻することが明白でした。

例えば、地域ごとにツリーを立てて整理をし始めたとして、
「東ティモールとフィリピン・ネグロスの人たちが交流しました」
というコンテンツが出てきた時にどう収めるのか?

当然、これは東ティモールとフィリピン・ネグロスそれぞれのツリーに含めたいわけですが、同じコンテンツで2つのページを作っては効率が悪いし、かと言って両者から手動でリンクを張っていたのでは手間はともかく、だんだんサイトの構造が複雑になってきて増改築を繰り返した老舗旅館になってしまいます。(個人的にはこの手の旅館はワクワクするんですが笑)

そこで、タグ付け(Tagging)をしっかりやることで自動でリンクが貼られるようなしくみにしました。

最近のブログやCMSには当たり前のようにカテゴリやタグの機能はありますが、両者を効果的に使いこなすには行き当たりばったりでは難しいのです(このあたりの話はまたあらためて書こうと思います)。

今回はタグが貼られると貼られた同士の記事が自動的に相互リンクされるようにしました。この仕組みはサイト全体のすべてのコンテンツに仕込まれていて自由自在に相互リンクを貼ることが出来きます。
この相互リンクが各記事の下部にある「もっと知る」以下に表示されます。

ちなみにタグとは荷札のことです。個人的には空港に荷物を預けた時にくっつけられる”あれ”こそタグらしいタグだと思います。こういう具体的なイメージを描けることは抽象的なものを扱う上で決定的に大切です(また脱線しそうだからこれ以上はやめときますが笑)。

このタグのことを今回はリンケージタグと名づけました。
これはもちろんAPLA(Alternative People’s “Linkage” in Asia)からとっています。
APLAさんのあり方から必然的に必要とされる機能だったと思います。
自分でいうのはあれですが、一言言わせてください。
ああ、なんて美しいのだろう!
この仕掛を思いついた時に今回の仕事は無事終わったと思いました笑。

これぐらいのコンテンツ量だとサイト内検索をつけることも考えるのですが
検索にはやはり利用者にリテラシーを要求しますし、おもてなし感に欠けます。
リンケージタグで次々とストーリーを追ってもらうというというのがAPLAさんらしいかなと考えました。
(検索するならグーグルさんに預ければ良いと思います。日本語は揺らぎも多いので安易なサイト内検索は役に立ちません。)

実はこのリンケージタグにはもう一つ仕掛けありまして、別サイトにあるAPLA SHOPの商品へもリンクを貼られるようにしてあります。商品の説明やタイトルとタグがマッチすれば表示されます。外部サイトだったので結構強引なことをしましたがうまくいきました。

フローさせたい情報とストックしたい情報を分ける

ソシアルメディアへの対応はもう必須ですが、どう使うかある程度方針を定めないと労力が分散するだけでうまくないです。

今回はフェイスブックを事務局だよりとして更新情報的なものはすべてそちらに移行させました。

少しでも多くの方に知ってほしいものについてはフェイスブックに流す。きちんとアーカイブしていきたいもの(あとから参照できないと困るもの)についてはサイト内に置くという方針です。

また、今回のサイトはケータイやスマートフォンに最適化させていませんが、フェイスブックやツイッターであれば対応していますし現地の通信環境の限られた場所からの更新にも対応しやすいです。

以上です。今回は割りと詳しく書いてみました。

「自分たちのやってきたことが整理できて振り返りやすくなった」

とおっしゃっていただいたのが個人的にはかなり嬉しかったです。
外部に対してみせるためのサイトであっても社内の情報共有(引き継ぎとか理事さんたちへの説明とか)にも役に立ちます。これは直接利益を生む要素ではないですが、社内の風通りをよくするにはだいぶ役に立ちますね。

WordPress上での構造

今回もWordPressで作りましたがどう構築したかメモしておきます。

ポストタイプ(post_type)
page(デフォルト) post(デフォルト) events field-notes publications
活動内容・APLAとは など WHAT’S NEW? イベント・ツアー情報 フィールドノート 読みもの
各ポストタイプのカテゴリ(taxonomy)
なし category(デフォルト) events-cat field-notes-cat publications-cat
リンケージタグ(taxonomy)
linkage(すべてのポストタイプを貫通)

ポートフォリオも大作になってしまったね笑。

使用CMS:Wordpress
制作ツール:Fireworks CS5,Photoshop CS4, Illustrator CS4