篠原紙工はカタログや取扱説明書など、紙を使った制作物の製本・加工を行う製本会社だ。2010年10月に行われたサイトの全面リニューアルではMovable Typeをベースに数々のクリエイティブな試みが行われている。有限会社篠原紙工 専務取締役の篠原慶丞さんと高橋由紀さん、そしてサイト構築を担当した合同会社アライアンス・ポート、デザイナーの櫻木拓也さんに詳しく話しをうかがった。
サイトリニューアルの理由
篠原紙工は紙の加工を専門に行う製本会社だ。中でも会社案内やカタログ・パンフレットなどの商業印刷物を得意とし、「のり綴じ」や「プラップ折り」といった自社開発の技術を多数有するなど、ベテラン職人の技と最新の機械の両方を活かした高い技術力が業界内で評価されている。 また、数年前までは印刷会社からの受注がほぼ100％だったが、最近は評判を聞いた一般企業やデザイン会社などから直接受注するケースが増えてきているという。 注文内容も単に指定された加工作業を行うだけではなく、企画の段階から印刷までトータルで請け負う場合も増えてくるなど、以前より業務内容が広がってきたことから、サイトリニューアルの必要性を感じていたそうだ。
「直接のきっかけはアライアンス・ポートの山辺さん（技術担当業務執行社員 CTOの山辺真幸氏）とJAGDA（日本グラフィックデザイナー協会）の『日めくりカレンダー』というお仕事でご一緒したことです。打ち上げの席でいろいろ興味深いお話しを伺い、こういう会社に頼んだらおもしろいサイトができるかなと思ったのです。」（篠原さん）
その後リニューアル作業が2009年末からスタートし、翌2010年の10月29日にMovable Type 5を使った新しいサイトの運用が開始された。
JavaScriptを多用した動きのあるビジュアル
サイトには「トップページ」の他に、様々な製本技術を紹介する「製本サービス」、仕事の流れを紹介する「制作の流れ」、ユニークな制作物を紹介する「制作事例」、ベテラン職人のノウハウが活かされた最新の機械について紹介する「職人と機械」、篠原紙工が独自に開発した技術を紹介する「自社開発」、そして最新の情報を更新する「お知らせ」と6つのコンテンツが用意されており、内部的にはそれぞれ独立したブログとして運用されている。
また、更新頻度があまり高くない「会社案内」、「お問い合わせ」、「アクセス」のページは静的なページを作成するMovable Typeの「ウェブページ」機能によって作られている。
トップページのメインビジュアルは、上下にスクロールするイメージ写真と、左右にスクロールする製作事例を組み合わせて構成されており、シンプルながらも動きのあるおもしろい効果を出している。この部分は一見Flashに見えるが、すべてJavaScriptで表現されている。
「弊社ではなるべくFlashを使わずにJavaScriptやCSS、HTMLを駆使して開発をおこなっています。業界的にはマイノリティーですが、トップページがiPhoneやiPadで見られないのは寂しいですからね。」（櫻木さん）
JavaScriptを使用したエフェクトは「製作の流れ」、「職人と機械」のコーナーでも見ることができる。
また、サイトの右下にはTwitterへのリンクバナーが配置してある。会社公式ではなく篠原さんの個人アカウントであるため、あえて控えめな扱いにしているとのことだ。
「Twitterはあるプロジェクトで無理矢理やらされたのですが、始めてみると今まで知らなかった世界が広がりますし、実際Twitter経由で仕事を頂くこともでてきたため、最近はもうどっぷりはまっていますね。」（篠原さん）
親しみやすい管理ページ
管理ページのわかりやすさは、Movable Typeをチョイスする際の大きなポイントだったそうだ。
「以前一度他のCMSを薦められたことがあったんです。そのCMSはコストも安く作業も簡単とのお話しだったのですが、管理ページが取っつきにくいという印象があり、自分や会社の人間が作業するとなるとちょっとどうなんだろうと思い見送ってしまいました。それに比べるとMovable Typeは画面の印象がとてもやさしく、我々にもできるかなと思いました。」（篠原さん）
現在更新作業はこれまでブログツールを利用した経験のなかった篠原さんと高橋さんのお二人が、管理ページから直接入力して行っている。
「最初は少し不安でしたが管理ページがとてもわかりやすいので問題なく更新できました。、今日もお知らせページを作ったんですよ。」（高橋さん）
現在のところ「制作事例」と「お知らせ」が更新のメインだが、今後は他のコンテンツも積極的に更新していくという。
デザイン
サイトのデザインはどのように作られていったのだろうか。
「アライアンス・ポートさんには、見やすい、わかりやすい、デザインにしてほしいとリクエストしました。『かっこいいんだけどボタンがどこにあるかわからない』といったサイトにはしたくなかったのです。」（篠原さん）
「いちばん重視したのは、篠原紙工さんの高い技術や企画提案力が見た人にきちんと伝わる情報設計ですね。」（櫻木さん）
と、お二人が語るように、デザインを始める前にコンテンツの内容やボタンの位置、画面の遷移などの情報設計を入念に行ない、詳細な設計図を完成させることから始めたそうだ。
その後ようやくデザイン作業に入るのだが、篠原さんの理想は高く、かなり時間がかかったようだ。
「正直すごくハードルが高かったです。製作期間を3ヶ月頂いたのですが、デザインに2ヶ月ぐらいかかってしまいました。逆に言えばここまで突き詰めてやらせてくれるクライアントさんはほとんどいないため、わたしとしてもうれしかったです。」（櫻木さん）
具体的にはどのように進行したのだろうか。
「最初にこのようなサイトを作りたいと、5つくらい既存のサイト名を出していただきました。その中から篠原さんが求められているエッセンスがどこにあるかというのをああでもないこうでもないと悩んで提案していきました。」（櫻木さん）
そこからでき上がってきたデザイン案を何度もやりとりし、完成度を高めていく作業が続いたそうだ。その際篠原さんはフォントの種類や大きさといった具体的な指示は出さず、あえて抽象的な言葉をぶつけていったそうだ。これにはどのような意図があったのだろう。
「業界は違えどわたしもモノを作ることに携わっているのでわかるのですが、お客様からこういう物を作ってくれと言われるとそれしかできないんですよ。ですからあえて具体的な指示は極力避け、漠然としたイメージだけを言い続けたんです。失礼なこともたくさん言いましたが、何度もそのやりとりを繰り返していくうちに、お互いなんとなくわかりあえてくるんですね。」（篠原さん）
確かに効率は悪いが、そのぶんまさにデザイナーと二人三脚で作り上げたデザインと言えるだろう。
「できあがりにはとても満足しています。それに、これだけ時間をかけて作ったものなのでサイトに愛着が持てますね。こんなに苦労して作った物を使わない手はないので更新のモチベーションになります。」（篠原さん）
訪問者の変化
リニューアルの反応にはどのようなものがあったのだろうか。
「リニューアルのお知らせを出すと多くの人に見に来ていただけました。実際にそこから案件や見積もり依頼も頂いています。これを継続していくためにも定期的な更新が必要だと感じています。」（高橋さん）
閲覧者の傾向も変わっているようだ。
「以前のサイトを見に来てくれたのは、もともと我々のことを知っている印刷会社の方ばかりだったのですが、リニューアルしてからの問い合わせを見ていると、検索やリンク、Twitter経由で来てくれた一般の会社の方がとても増えています。」（篠原さん）
検索経由の訪問者が増えてくるとなると、SEOチューニングも必要となってくるだろう。
「そうですね。そういう意味では制作事例が特に重要になってくると思います。篠原さんには他社が持っていない独自に開発された技術がたくさんあります。これらに特に注力して展開していくべきだと思っています。」（櫻木さん）
これからの展開、やりたいこと
今後の取り組みについてはどのようなことを考えているのだろうか。
「まずは製本という技術を知ってもらうためにも制作事例をどんどんアップしていきたいと思っています。いい物を載せることができれば励みにもなりますし、お客様の宣伝にもなるので営業ツール的にも使えますしね。」（篠原さん）
携帯やスマートフォンへの対応についてはどうだろうか。
「iPhone・iPadは使ってますけど現在のところ予定はないです。ただ、必要があればやりますよ。その時はアライアンス・ポートさんにお願いすればすぐに作ってくれますよね？(笑)」。（篠原さん）
「もちろんです。」（櫻木さん）
このサイトは合同会社アライアンス・ポートとエムロジック株式会社が運営するソフトウェアレーベル「3rd Focus(サード・フォーカス)」から販売されているMovable Type専用プラグインパック「MTPlu::s for Web」を導入し、下記のプラグインを使用している。
「MTPlu::s for Web」にはこのほかにもMovable Typeに便利な機能を追加する多数のプラグインが同梱されている。
左から篠原紙工の高橋由紀さん、アライアンス・ポート フロントエンド・プログラマーのピエールランリ・ラヴィンさん、篠原紙工専務取締役の篠原慶丞さん、アライアンス・ポート プロジェクト・マネージャーの早瀬将一さん、アライアンス・ポート グラフィック・デザイナーの櫻木拓也さん。
事例データ
- Movable Type 5.03
- サイトを公開したのは：2010年10月
- はじめた理由：業務範囲拡大の周知
- 制作を担当したのは：合同会社アライアンス・ポート
