私自身も２冊目の編集メンバーとして参加させて頂いたプロダクト「ニューワーク手帳」。公式サイトの制作をご提案したところ、コンテンツ制作から実装まで一気通貫でお任せいただけました😊

設計期間も含めると、トータル１ヶ月ほどで完成しています。サイト制作に限って言えば、PM様と手帳の使用例コンテンツにご協力いただいたお二方と私の計４名で完結したプロジェクトです。

1.制作時のプロダクト課題

• 有志のフリーランサー陣で手帳プロダクトを開発しているが、プロモーションにあまり力を入れられていない

• 仲間との繋がりで楽しんでいるところから少し手を広げて、程よく認知度を上げていきたい（※不要な人にまでは広げたくない）

2.当方のご対応

🗺️全体設計、ワイヤーフレーム

• まずPM様や動画制作クリエイター様と方向性MTGを行うことになったため、初期段階の構想ワイヤーフレームとイメージボードをFigmaデータで準備して伺い、掲載内容の整頓をさせていただきました。

• 並行していた2025年版手帳の開発進捗に応じて、見せ方を変える箇所などを適時調整してからデザイン制作に入っています。

🎨デザイン制作

• 公式サイト着手の前に表紙デザインを担当させていただけたため、そちらの制作時のキーポイントだった【女性に寄せすぎたテイストだと男性が持ちづらい】点を考慮し、シンプルな白黒ベースにあしらいとして赤色やブラウンを添えるカラーリングに。各ページ紹介の背景にはコルクの質感も入れて、中性的でモダンなテイストにしました。

• ジャンルの詳細としてはLPでもホームページでもなく『ブランドサイト』のため、ファーストビューには手帳の表紙を並べたモックアップ画像を大きく入れて魅せています。

• 制作ツール……レイアウト：Figma

✍️ライティング

• 本件ではプロダクトのページを掲載できるため、画像コンテンツは充分。加えるならばライティングでの魅力伝達が重要だと考え、全セクションの文章を書き起こしました。

• さらに手帳サイトに多い人気コンテンツ「手書きの使い方例」をぜひ入れたいと思い、編集メンバー間で声を掛け合って実現。各人のコメントやアイコン・お名前も入れて、『どんな人がどんな風に使っているのか』イメージが掴みやすくなり、購買意欲の高まりや手帳への愛着が深まることを意識しています。

💻Studio構築

• プロダクトの現段階的にできれば固定費を増やしたくない・というご要望から、当方の個人サイトに下宿のような形で実装するのはどうかご提案したところ採用いただき、CMSで記事更新もできるプランでの構築が叶いました😊（Studioにおけるサブディレクトリにて実装）

• 完成した動画もYouTubeリンクにて設置させていただき、画像コンテンツと併せてブランドの魅力を大幅アップ。

• 2025年版の自由ページおよび表紙が方眼デザインのため、Studio上でも方眼を固定背景にして共通デザインに。これにより、文具好きにはたまらない世界観を演出できました。

📝記事ページも方眼デザインに

• TOPページだけでなく、記事一覧と記事詳細ページも一貫して方眼背景にしています。

• 赤色のペンアイコンをアクセントにすることで、手帳を開くように気分よく記事を読んでもらえればと思いました。

• 記事内の見出しデザインは左下に赤色枠を設けて背景を白色にすることで、視認性高く、前後の文字とのメリハリも付いた形で一呼吸おいて読み進めやすくなることを意識しています。

🔗該当サイトはこちら📔

3.表紙デザインやECバナー制作も担当

Webサイトとの共通デザインで、販売ページ（ECサイト）用のバナーも制作。
自由枠としてご提示いただいた3枚目の画像（📎添付一番右）には文言も加えて、購入検討中の方へのメッセージ性を強化しました。

このように、公式サイトの中でのポジション越境だけでなく、表紙・企画ページ（ご縁帳）・公式サイト・バナーという「印刷デザインとWebデザイン」の越境もでき、制作に携われたことがひたすらに楽しいプロジェクトでした😊

編集メンバー陣のユーモアがたっぷり詰まったニューワーク手帳。もし本記事からもご興味を持っていただけた際はぜひ、あなた様の大切な日々のお供としてお迎えください💐📔

🔗販売ページはこちら🛍️