概要

• 業界/業種：文具

• テイスト：スタイリッシュ/シンプル

• 制作会社：necco inc.

第一印象

上質な写真や動画といったビジュアルで商品の良さを訴求。全体的に破線など手帳を連想させるようなあしらいを使って、実際の商品イメージと統一感のあるトーンに仕上がっている。

ターゲット/目的

「編集者のための」という名前ではあるが、商品概要からスケジュールに追われるすべてのビジネスマンに刺さるように作られていることが分かる。
日々〆切に追われる編集者たちが開発したことから、機能性にも期待できる説得力がある。さらに、「開発ストーリー」といったコンテンツを盛り込むことで商品に対する強いこだわりを伝える設計となっている。

使用フォント

• 日本語：TsukuGoPro

• 英語：DINNextLTPro

日本語フォントは書籍でも活躍する筑紫ゴシックを使用。モダンなシャープさとクラシックで柔らかな雰囲気を絶妙なバランスで演出されている。
筆脈にこだわって作られているフォントだからこそ、今回の「手帳＝書く」というテーマに相応しい選定だと感じる。

配色

• ベース：＃FBFAF8（ほぼ白だが若干グレー）

• メイン：＃393939（柔らかい黒）

• アクセント：なし

• フォント：＃393939/＃231815/＃000（濃淡の違う黒を使い分けている）

ベースは初見で白ベースだと思われたが、よく見ると少しグレー寄りで紙の質感を感じさせる色味となっていた。

テキストの使用箇所によって黒を使い分けていたことに驚いた。コントラストを上げる表現のひとつとして有効だと学びを得た。

デザインポイント

• FVはまるで本の帯のようなデザインとなっていて、ユニークなアイデアだと思った。

• 本サイトは派手なアニメーションはないが、アニメーションの使いどころが巧みで、「購入するボタン」と「購入を後押しする商品詳細上部」にアクセントとしてさりげなくアニメーションを取り入れて世界観を引き立てている。

• 〆切手帳の使い方セクションでは、見出しをほかのテキストより濃い黒を使うことでコントラストを上げている。そのため、文字情報が多くなってしまったコンテンツであっても分かりやすく整理することができている。

• 手帳モチーフのあしらいをさりげなく使っている。

• 派手なCTAはないものの、かなり大きくて存在感のある購入ボタンがある。サイト全体の世界観を崩さないように慎重に設計されている。