もう2ヶ月ぐらい前になりますが、会社を退職して充電と称しながら、日本ディレクション協会(以下、ディレ協)のサイトをリニューアルを手伝っていました。

今日はどのようなところに力を入れていたのか、しばっち目線で紹介していきます。

メディアサイトとしての運用

ワイヤーフレームはご存知Webディレクターズマニュアルのナカムラです。本人の代弁をすると、これまで仮状態のディレ協のサイトは、基本的な組織概要だけがわかるようなコーポレートサイト的位置づけでした。

今、ディレ協のメンバーが武器がディレ協の内外の個性的なキャラで持っている【バズ】のちから。発信するとすぐに拡散できる状態です。これを利用し、メディアサイトとして運用していくのがディレ協の拡大にはベストと考え、ワイヤーフレームとして書き起こしていきました。

実際ワイヤーフレームを見ると、この段階で大きくできあがっていますね。

このようなワイヤーフレームからビジュアルデザインをしていきました。

全体的なビジュアルデザイン

ロゴは先行して渡辺洋輔さんが行っていました。Webデザインの着手時には仕上がりに近かったので「どこを残すと、ディレ協らしさが残るか」を考え、Webで比較的再現がしやすい太い線、そしてロゴの黒っぽさをディレ協のコアなデザイン要素として捉えビジュアルデザインは制作しました。

ディレ協で見せたいものはなにか。それはデザインではなく、「積極的に活動しているよ!」っていうメッセージです。そのため1にも2にも、写真がしっかり目に入るようなデザインに仕上げました。

メディアサイトとして運用する上でも、これまでのディレ協サイトのテイストを踏襲する上でも、ワイヤーフレームからの大きなレイアウト変更・表現の変更は不要でモックを制作していきました。

複雑なHTMLを書けなくても運営できる仕組み

ここからは見た目の話ではなく、WordPressの裏側のことを紹介していきます。

ディレ協の事務局員はWebディレクターで構成しています。ディレクターは基本的に時間が十分に確保しにくい職域です。そのため、運営に対しての負担を1人でするのではなく、みんなで分担できるようにWordPressを使用しました。

カスタム投稿タイプを使い、トップページ内のコンテンツもディレクターが楽に更新できるように

トップページはほとんどは一覧のまとまりですね。ディレ協の活動や告知の一覧、共感企業・共感メディアの一覧、イベント内容の一覧、写真の一覧。一覧だらけです。

どれも静的にHTMLを書くとしたら、「<li>タグで囲んで、あ、リンクは、、、そして、これはtarget=“_blank”入れるんだっけ?」といざタグを書こうとすると難しいというより面倒くさいところですね。

それで、記事以外の一覧はカスタム投稿タイプを利用し、ディレクターはタグを気にせず追加や削除ができるようにしました。

公開してから数日経っていますが、記事を書くためにディレ協のサイトを開いたら、僕の知らぬ間にいろいろ情報が追加されていて、「やってよかった!」と感激しています。

事務局員の追加削除の手間を最小限にFacebookを利用

事務局員メンバーの管理はWordPressユーザーとは別のものとしました。ID・PASSを管理するのが限られた時間の中で進めるには少し荷が重たいこと、登録した人必ずしもが記事投稿する訳ではないことが主な理由です。

こちらもカスタム投稿タイプを使って、WordPressユーザーと事務局員のユーザーデータは別のものして捉え、カスタム投稿で事務局員のリストは管理しています。

ディレ協の連絡は主にFacebookで進んでいます。そのため、FacebookのIDを全員が必ず持っています。このことに目をつけ、メンバー紹介ページはカスタム投稿で事務局員を追加し、その投稿内にカスタムフィールドにFacebookのIDを設けて、FacebookのIDから顔写真を引っ張っています。

もともと書くメンバーの意気込みなども書きたいということが意見として出ました。しかし、メンバーの追加で写真待ち・原稿待ちとなるとそれだけで公開が延びてしまいがちです。そのため、メンバーの追加には本名とFacebookのIDだけにして、事務局メンバーのリストを簡単に編集できる構造にしました。

意気込みなどの人物紹介に該当するものは、記事を書いた人の紹介欄を設けることで解決し、メンバーの追加削除に伴う手間を最小限に抑え、流れとしてプロフィールが見られるタイミングに配置し、その人に興味が持てるように工夫しました。

管理画面上の情報整理

カスタム投稿タイプやプラグインを入れると、左側のメニューがいろんなものに埋もれてしまいます。Admin Menu EditorというWordPressのプラグインでメニューの並びやラベルは整理し、何を追加したいかさえ管理者が知っていればなんとかなるように管理画面を整理しました。

他にも細かいところで通常カスタム投稿タイプだと管理画面はピンのアイコンが付きますが、何個も並ぶとさすがに見分けが付きにくくなってしまいます。ここは個別にアイコンを作り、スタイルシートを追記しアイコンを違うものに差し替えました。

公開後の気になる反響は?

サイトの公開が11月10日、日曜日の夕方でした。時間としては翌朝のGunosy砲を狙ったはずなのですが、、、公開から3時間以内でいきなり4件、お問い合わせをいただけました!つくづくディレ協の拡散力はすごい…!

加えて、はてなブックマークでもホッテントリーに入っていたりと、事務局の間でも上々の評価です。よかった〜!

日本ディレクション協会とは?

ちなみに日本ディレクション協会とは、デスマーチを無くそう!をスローガンに、講演活動やお話の場を設ける、ディレクターやディレクターを目指す方のためのコミュニティです。

Webデザイナーでも、もちろん参加可能です。Webディレクターも視野に考えている人には、将来参考になる企画の作り方や他のスタッフへのコミュニケーションをうまく回す工夫が聞くことができたり、ディレクターがどんなところで悩んでいるのか知れる少ない機会です。

僕もWebデザイナーという立ち位置のまま、ディレ協で講演やミートアップなどを撮影したり、拡散要員として動いています。

しばっち、フリーで仕事始めました

先日会社を退職してから充電期間と称して約2ヶ月、休み休みでディレ協サイトの制作をゆっくり進めていました。今後はディレ協のイベント終了後に電車の中で楽に読めるスマートフォン、タブレット用の最適化も行いたいところですね。

ディレ協のサイトも一段落ついたところで、フリーランスとして仕事が請けられるようになりました。ブログをいつも読んで下さってる方はご存知の通り、見た目のデザインはもちろん、企画に乗っかってデザインの提案したり、数字の善し悪しを気にするデザイナーです。

ブログを読まれていて、もし「しばっちと一緒に仕事してみたい!」と方は是非ご連絡いただければと思います。

しばっちの制作実績