「編集者のための〆切手帳」サービスサイト

Creative Direction

手帳の質感をゆっくりと味わえるサイト体験を目指して

経営者と企業を「言葉」でサポートするエディトリアル・エージェンシー「WORDS」さんが手がけた「編集者のための〆切手帳」のサイトデザイン、写真・動画撮影、実装をneccoでお手伝いしました。

表紙が厚めの紙で耐水性もあり質感がとても良いので、写真も質感が伝わるようにしました。紙面は断ち切りのデザインがとても珍しく、WORDSさんらしい、まっすぐな線が美しいです。

写真と同じ構図で動画も作成。サイトは動き過ぎず、動かな過ぎず。優しく強く。手帳の質感をゆっくりと味わっていただけるサイトを目指しました。

Design

手帳の特徴とビジュアルを押し出し、魅力を余すことなく伝えるデザイン

こだわりの手帳を撮影した写真や動画をメインに使用し、質感や使い心地が伝わるようなデザインとしました。

メインビジュアルでは手帳のデザインや使用時のイメージが湧くような写真を複数見せつつ、販売時に付属する帯をイメージしたエリアに商品情報をまとめることで、全体を手帳に見立てています。
中面のスケジュール欄の罫線やドットのあしらい、インデックスなどの構造を踏襲し落とし込むことで、実物の手帳と雰囲気をリンクさせてコンテンツへの没入感を高めました。

手帳の使い方や特徴など機能面を示しながら、こだわりのポイントや制作ストーリーまで盛り込むことで、〆切手帳の魅力を網羅できるサイトを目指しました。

Photograph / Movie

手帳の多彩な魅力を、写真と動画で表現

WORDSさんが何種類もの中から選び抜いた紙の質感、手帳本体の厚さ、箔押しのロゴなど、「編集者のための〆切手帳」が持つ多彩な魅力を伝えるため、さまざまな角度・距離から写真撮影を行いました。また、手帳をめくる動画を制作し、スケジュールとプロジェクトが同時にわかるガントチャートの使いやすさや、ページのめくりやすさを表現しています。

サイトを訪問した人に、まるで自分が使っているかのような楽しい気分になっていただければ幸いです。

Web Development

Astro+Tailwind CSS+GSAPを採用

フロントエンドのフレームワークにはAstro、CSSフレームワークにはTailwind CSSを採用しました。ホスティングには、Vercelを使用しています。

アニメーションには、アニメーションライブラリのGSAPを採用し、やさしくテキストが現れる動きや手帳に線を引くかのようなホバーインタラクションを実装し、手帳の魅力が伝わるような演出に仕上げました。

Client Voice

紙の風合いや手触り感も伝わってくる感じがします。

手帳の世界観をWEB上にうまく表現していただきました。紙の風合いや手触り感も伝わってくる感じがします。ただ「モノを売る」という範囲に留まらず「〆切手帳を買うとこんなに素敵な人生になりますよ！」という部分までうまく伝えていただき、ワクワクするサイトになりました。コーポレートサイトでもお世話になりましたが、今回もありがとうございました！

株式会社WORDS
代表取締役 竹村 俊助