SQUARESPACEテンプレートをブランドに合わせてカスタマイズする方法：StorytellerのDIY事例
Atelier NoorオリジナルのSquarespaceテンプレート『Storyteller』は、使い手が自由に「DIY」することを前提に設計されています。
写真、文章、カラーパレット、そしてフォント。これらを入れ替えるだけで、テンプレートが、使い手の世界観を最大限に引き出すWebサイトへと生まれ変わります。
「実際に自分の写真を入れたら、どんな風に変わるんだろう？」
そんな疑問に答えるため、今回は架空のフォトグラファー「NOOR PHOTO」 （ウエディングフォト撮影）をモデルに、デザインをDIY（カスタマイズ）したステップとポイントを公開します。
ステップ1：ブランドの核（コア）を言語化する
DIYの第一歩は、ブランドのアイデンティティを言語化することです。ブランディングにおいて、視覚要素はすべてここから導き出されます。
テーマ（コンセプト）：「光の記憶を、編む。」
ターゲット： ウェディングやマタニティなど、人生の大切な節目を、確かな記録として残したいと願う人々。
ビジュアルスタイル（視覚）： エレガント、温かみ、華やか
トーンオブボイス（言語）： 誠実、親しみやすさ
ステップ２：サイトスタイルを設定する
① カラーパレット
Storytellerのカラーはシックで洗練されていますが、少し冷たい印象もあります。 今回は、肌馴染みが良く温かみのあるサンドベージュ（#F7F5F0）を基調に。テキスト色には、真っ黒ではなく、わずかに赤みを引いた墨色（#3E3A39）を選びました。 これだけで、サイト全体に「温かみ」が宿ります。
② タイポグラフィ：
見出し・段落ともに、ミニマルでベーシックな Open Sans を選びました。 ポイントは、文字間（レタースペーシング）を広げること。 余白をたっぷり持たせることで抜け感が出て、洗練された印象になります。
ステップ３：写真と文章を自分のもとと置き換える
①写真
テクスチャとしての写真： 花のアップや布の質感など、あえて被写体を特定させない「寄り（ディテール）」の写真を背景やアクセントに配置し、サイト全体に手触り感を与えています。
メインの写真： 引き（風景）の中に人物が佇む写真をメインに据えることで、見る人の想像力を広げる余白を作ります。
「寄りの写真」と「引きの写真」を交互に、あるいは重ねて配置することで、るドラマチックなリズム感が出ます。
②文章
文章も、最初に決めたトーンオブボイスに沿ったテイストで言葉を選びます。
ここが一致していることで、Webサイト全体にそのブランドらしさが出ます。より早く信頼を築き、感情的なつながりを生み出し、訪問者を行動へと導くことができます。
③レイアウト調整
写真と文章を変えるだけでも大丈夫ですが、今回は少しの余白やレイアウト変更も行いました。
SQUARESPACEは直感的なドラック＆ドロップで操作できるので、レイアウト変更もしやすいです。
ビフォーアフター
(左：元のテンプレート 右：DIY後）
テンプレートは土台となる骨組みは全く同じですが、カラーパレットやフォント、そして写真や文章が変わるだけで、サイト全体の「世界観」がこれほどまでに変化します。静寂な佇まいから、光と幸福感を纏った場所へ。
コストを抑えて、自分だけの世界観あるWebサイトを
ゼロからオーダーメイドで制作するのではなく、洗練されたテンプレートをベースに「自分らしさ」を加えて、自分だけの世界観やサービスを反映したサイトを作る。それは、今の自分にとって最もスマートで、納得感のある選択かもしれません。
活動を始めたばかりで、まずは名刺代わりのサイトが欲しいとき。
サービスの内容を、もっとわかりやすく、自分らしい言葉でお客さまに届けたい。
個展やプロジェクトに合わせて、フットワーク軽く特設サイトを作りたいとき。
プロにフルオーダーする段階ではないけれど、デザインには妥協したくないとき。
「自分の世界観をどう表現すればいいかわからない」 「予算は抑えたいけれど、安っぽく見えるのは避けたい」
そんなふうに感じていたら、まずは『Storyteller』テンプレートを手にとってみてください。
あなただけの新しいオンラインホームを、ここから一緒に作りましょう。
