Francfranc

Design System


Overview

- Guidance

Francfrancデザインシステムとは


Ready

[Purpose / 目的]

Francfrancのデザインシステムの目的は、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確かつ迅速に行えるようになることです。2017年9月にその第1版を公開しました。

その大きな特徴は、情報発信における機能的な価値とブランドイメージの訴求という異なる目的に対して、誰もが認識できる基準を提示したことで、実務者の確認業務の軽減を促進し、スピーディーにクオリティの均一化を実現します。

Francfrancのデザインシステムは、変化する市場や時代の流れに沿って、柔軟性を持ちながら拡張し進化を遂げるものです。そして、ブランドの発祥や企業理念を広く振興するときに必ず参照されるものでなければなりません。

実務者および関係者はガイドラインを尊重し、的確な判断を下し、ブランドにふさわしい、そして創造性に富んだデザインを提供するように心がけてください。

Design System Overview

Essence of Basic Design

- Identity

ブランドを示す


Ready

[Logo / Symbol / Brand Identity]

Francfrancのアイデンティティは、ロゴタイプ、ロゴマークおよびブランドフォントによる文字組みで表現されます。

Francfranc正式ロゴタイプは、ブランドのDNAとなる最高位の基本要素でありブランドの象徴です。

正式ロゴタイプの配置は、掲載される媒体に応じて最適なスペースを確保し、どのような場合においても、ブランドの品位を損なわない、常に一貫した印象を保つものでなくてはなりません。

使用に関しては本ガイドラインを参考にし、使用可能な事業者であるか、媒体としてふさわしいかを熟慮し、成果物のデザイン品質のレベルについても十分配慮し、ブランドイメージを損なわないようにしてください。

ブランドフォントによる文字組み(用語集へ)

Ffbg Identity


Ready

[Logotype / Isolation]

ロゴマークの独立性(アイソレーション)を保った表示は、ブランドイメージを印象づけるうえで非常に重要です。

タグラインやURLと組み合わせて表示する場合においても、ロゴマークの独立性やブランドイメージが損なわれないように推奨された組み合わせを参考のうえ、印象的に配置し、表示するようにしてください。

なお、Francfrancのロゴタイプの詳細については、ロゴマニュアルを参照してください。

Francfrancロゴマニュアル

Ffbg Identity Isolation


Ready

[Logo Type / Prohibition]

ロゴマークの独立性(アイソレーション)を保った表示は、ブランドイメージを印象づけるうえで非常に重要です。

ロゴマークには、余計な装飾物を足したり、ふちをつけたり、変形したり、影をつけた使用は避けるようにします。また、ロゴマークの正しいバランスやプロポーションを損なうような使用は避けるように、どのような条件でも同一のイメージが保たれるようにロゴマニュアルを遵守してください。

Francfrancロゴマニュアル

Ffbg Identity Prohibition

- Typeface

ブランドにふさわしい書体を選ぶ


Ready

[Brand Font / 欧文フォント]

Francfrancのブランドアイデンティティについて、ロゴタイプ、ロゴマーク以外における表示は、ブランドフォントによる文字組みで表現されます。

これは、Francfranc の最新版のロゴと親和性を保つために定められています。(2017年現在)


Ffbg Typeface H1


Ready

[Brand Font / 欧文フォント サンプル]

Francfrancの製品やデザインは、さまざまなスタイルやトレンドを取り入れていきますが、世界中のデザイナーから長きにわたって愛されているHelveticaは、時代を超え、スタイルに合わせて、さまざまな表情を見せてくれます。

新しいデザインシリーズやタイトルに使用する際など、ブランドのイメージを強く印象づけることを主な目的に考えた場合には、ブランドのシナジーという意味において大きな効果を発揮するHelveticaの使用を推奨します。

Ffbg Typeface H2


WIP

[Alternate Font / Windows向け欧文フォント]

Francfrancブランドの情報を発信するあらゆるメディアや印刷物において使用する欧文フォントは、ブランドフォントのHelvetica/Helvetica Neueを推奨します。

ただし、Helvetica系のフォントがインストールされていないWindows OS 使用時には、Arialを使用してください。

Arialはすでに多くのブランドおよび企業において、Helveticaの標準的な代替フォントとして採用されています。本文用として読みやすく設計され、視認性や汎用性も優れています。

Ffbg Typeface Ar1


WIP

[Windows OS使用時の代替欧文フォント]

Helvetica/Helvetica NeueフォントがインストールされていないOSでは、Arialの代替使用を推奨します。

サンプルでは、Arial Bold書体を使用しています。

Helveticaと似ており、小さい文字でもつぶれにくく、読みやすいデザインとなっています。

Ffbg Typeface Ar2

- Japanese Typeface

ブランドにふさわしい書体を選ぶ


Ready

[Brand Font / 和文フォント]

Francfrancの和文のブランドフォントとしては「ヒラギノ角ゴ」を推奨します。これは、Francfrancの最新版のロゴと親和性を保つために定められています。(2017年現在)

Ffbg Typeface Ja H


Ready

[Brand Contents Font / 和文フォント]

主にWindows OS使用時におけるFrancfrancブランドの情報を発信するあらゆるメディアや印刷物において、ブランドフォントのヒラギノ角ゴ、およびヒラギノUD角ゴ以外の選択肢としてメイリオを推奨します。

メイリオの和文文字は、すべて日本語組版で標準的な、いわゆる全角幅デザインを採用しており、本文用として読みやすく設計され、視認性において優れています。

Ffbg Typeface Ja M

- Brand Image

ブランドイメージを大切にする


Ready

[Snapshot]

Francfrancのあらゆるメディアに使用されるイメージ写真は、「上質」「楽しさ」「心地よさ」「自由」など、Francfrancのブランドイメージにふさわしいものにしてください。

特に対象にフォーカスされていない、視点誘導されないイメージ写真や、構図上の工夫がなくテーマが曖昧になっている写真の使用は避けます。

Ffbg Brand Image Snap


Ready

[Landscape]

Francfrancのあらゆるメディアに使用されるイメージ風景写真は「Francfrancにふさわしいストーリー」「提案性のある上質なライフスタイル」などFrancfrancのブランドコンセプトを表現し、「他ブランドなどで既視感のあるもの」「稚拙さを感じさせるイメージ」は避け、他ブランドと差別化を図ります。

特に対象にフォーカスされていない、視点誘導されないイメージ写真や、構図上の工夫がなくテーマが曖昧になっている写真の使用は避けます。

Ffbg Brand Image Landscape


Ready

[Portrait]

Francfrancのあらゆるメディアに使用する人物写真は、ブランドアイデンティティを感じさせる写真を使用します。キーワードとして、「信頼感」「リーダーシップ」「センスの良さ」「魅力的な人物像」などがあります。

特に対象にフォーカスされていない、視点誘導されないイメージ写真や、構図上の工夫がなくテーマが曖昧になっている写真の使用は避けます。

Ffbg Brand Image Portrait


Issue

[Orientation]

なお、マルチデバイス対応・ソーシャルメディアにおける自動トリミング・デジタルサイネージ表示など多様化された媒体環境に一貫したイメージを訴求するため、キービジュアルの縦位置撮影の場合は横位置も撮影することを推奨します。(正方形トリミングされることに配慮します。)

- Color palette ( gold and silver )

意味のある色を選ぶ(金色・銀色の場合)


Ready

[Francfranc Gold / Francfranc Silver]

Francfrancのブランドや商品を表現する金色や銀色には、ブランドにふさわしい洗練された特色(指定色)を統一感をもって使用してください。

金色を使用することで、豊かさ、品質の良さ、おしゃれなイメージをより鮮烈に伝えることができます。また銀色の使用により、洗練された強さやシンプルな上質感などをストレートに伝えることができます。

金色・銀色のカラーマネジメントについては、背景色(その環境のベースとなる色※)やトレンドについても考慮をし、Francfrancのブランドイメージにふさわしいかをデザインディレクターやデザイナーは常にチェックしてください。統一感のない金銀が一紙面に入り乱れたり、軽薄な表現にならないように留意してください。

※その環境のベースとなる色

Gold Color Issue

- Brand Graphic Pattern

ブランドイメージをグラフィックで拡張する


Ready

[ロゴをパターン化したグラフィックの使用について]

Francfrancのブランドイメージをさりげなくかつしっかりと定着させる手法として、ロゴを使用したグラフィック(パターン)の使用を推奨します。

規則性と不規則性を組み合わせたシンプルモダンなグラフィックは、Francfrancのブランド価値や独自性を高めます。

使用については、状況に合わせて、デザインディレクター、デザイナーの判断を優先しますが、これらが全て、Francfrancらしい新しさや楽しさ、ライフスタイルの豊かさに貢献していることが重要です。

他のグラフィックパターンで代用可能なケースでの使用は、デザインガイドラインとして推奨しません。

Style of Information Architect

- Design Elements

機能的なデザインのために


Ready

[Title]

Francfranc のブランドおよび商品のコミュニケーション活動を行うコンテンツにおいて、最上位の階層に位置づけられるテキストコンテンツを「Title(タイトル)」と呼びます。タイトルには、可読性、視認性、デザイン性が求められます。

「Title(タイトル)」には、ブランドフォントの使用を推奨します。詳細は、[ タイプフェイス / Typeface] を参考にしてください。

Ffbg Graphic Elements Ttl


Ready

[Image]

Francfrancのブランドおよび商品のコミュニケーション活動を行うコンテンツにおいて、アイキャッチとなるビジュアルおよびイメージ写真などの要素を「Image(イメージ)」と呼びます。「Image(イメージ)」は、お客様がブランドの信頼感を高めるだけでなく、購入までのプロセスにおいて、他ブランドでは感じられない魅力やブランド体験を呼び起こすために必須となるものです。

Ffbg Graphic Elements Img


Ready

[Summary]

「Summary(サマリー)」とは、Francfrancのブランドおよび商品におけるコミュニケーション活動においての概要文のことです。

Ffbg Graphic Elements Summary


Ready

[Details]

「Details(ディテール)」とは、Francfrancのブランドおよび商品のコミュニケーション活動において、その詳細を説明する機能を持つテキストコンテンツのことです。

Ffbg Graphic Elements Details


Ready

[Specification]

「Specification(スペック)」とは、Francfranc商品の仕様説明文のことです。

Ffbg Graphic Elements Specification


Ready

[Identity]

「Identity(アイデンティティ)」とは、Francfrancのブランドおよび商品のロゴタイプ、ロゴマーク、シリーズ名のことです。コミュニケーション表示面の1面(1フェイス)につき必ず1個だけ表示します。

Ffbg Graphic Elements Identity

Design System of Visual Marketing

- Image Impact

商品を魅力的に見せるデザインフォーマット


Ready

[Image Impact]

Francfrancブランドがお客様とコミュニケーションするときには、Image Impact(イメージインパクト)フォーマットによるコミュニケーションを推奨します。Image Impactフォーマットは、1つのビジュアルにブランドロゴの組み合わせによる最も基本的な情報デザインのひとつです。

印象的な「Image(イメージ)」としっかりとスペースを確保された「Identity(アイデンディティ)」の組み合わせにより、ブランドを魅力的かつインパクトのある表現で訴求します。

Ffbg Ds Image Impact

- Communication

商品の魅力をシンプルに伝えるデザインフォーマット


Ready

[Communication]

Francfrancのブランドや商品が伝えるべき重要な情報がある場合においては、印象的な「Image(イメージ)」のまわりにしっかりとスペースを確保し「Identity(アイデンティティ)」と組み合わせます。そこにキャッチコピーやタグラインを追加します。

この場合のキャッチコピーやタグラインは、お客様の視点に立ち、ブランドの魅力を損なうことなく、情報を伝えるものとしてください。

しっかりとしたコミュニケーションをとるためのデザインフォーマットです。

Ffbg Ds Communication


Issue

[Communication]

大切な「Image(イメージ)」やブランドを示す「Identity(アイデンティティ)」のインパクトを弱め、デザイン性を損なうテキストの羅列を商品や販促物にむやみに入れることは奨励しません。

- Information

商品の魅力を丁寧に伝えるデザインフォーマット


Ready

[Information]

Francfranc の商品情報を伝える際に大まかなイメージから詳細までをしっかり伝える場合には、印象的な「Image(イメージ)」と適切なスペースを確保された「Identity(アイデンティティ)」の組み合わせに加えて、キャッチコピーやタグラインなどの「Title(タイトル)」、さらに詳細を説明する紹介文「Summery(サマリー)」「Details(ディテール)」を追加します。

情報量が多くなっても、動線を考え、デザインの要素は、それぞれの機能を明確に果たしているかを、公開前にチェックをするように心がけましょう。

Ffbg Ds Information

- Catalog

商品の魅力と仕様を伝えるデザインフォーマット


Ready

[Catalog]

Francfrancの商品をその魅力から仕様まで詳細に伝えるべき重要な情報がある場合は、印象的な「Image(イメージ)」としっかりとスペースを確保した「Identity(アイデンティティ)」に、「Title(タイトル)」「Summary(サマリー)」「Details(ディテール)」「Specification(スペック)」を加えます。

「Title(タイトル)」「Summary(サマリー)」「Details(ディテール)」「Specification(スペック)」などのデザインシステムを構成するそれぞれの要素は、その役割を明確にしたことで、ブランドや商品のイメージを損なうことなく、見やすく、分かりやすく表示できます。

Ffbg Ds Catalog

- Line up

商品シリーズを一覧掲載するデザインフォーマット


Ready

[Line-up]

「Line-up(一覧ページ)」はFrancfrancの商品シリーズを一覧したページで、商品群の特徴や各商品の詳細を知ることができます。単に並べるのではなく、Francfrancのブランドイメージと一貫性を持つデザインにしてください。

商品の詳細情報では、特例的なデザインは避けてください。特例的なデザインとは、ふち取り、アンダーライン、強調色などを指します。

また、新商品開発時などに使用する写真入りの企画書などにおいても、見やすくわかりやすい清潔感のあるレイアウトを心がけてください。

Ffbg Ds Line Up

- Identity

ブランドを認知させるデザインフォーマット


Ready

[Identity]

Francfrancのブランドイメージを統合的に伝えていくには、Francfrancのロゴタイプを中心としたコミュニケーションが重要になります。どのような場合においてもブランドの品位を損なわない、常に一貫した印象を保つようにしてください。

掲載される媒体に応じて最適なスペースを保持するようにし、かつそれは視認性に配慮されたものであることが重要です。

Ffbg Ds Identity

Application

- Business environment

ビジネスシーンにおけるデザインガイドラインの活用


Ready

[封筒・用度品など]

Francfrancのブランドイメージを的確に伝えるには、Francfrancのロゴタイプあるいはブランドフォントによる文字組みを中心とした、シンプルかつ洗練された表現が重要になります。

Francfrancのブランドイメージを損なわないように、掲載される媒体に応じて最適なスペースを保つようにしてください。

Ffbg Ds Cbenvelope0 D


Ready

[パワーポイントのテンプレートなど]

Francfrancのビジネスシーン(新商品開発や企画提案シーンなど)でのプレゼンテーション資料の作成時においても、Francfrancのロゴタイプあるいはブランドフォントによる文字組みを中心とした、シンプルかつ洗練された表現を推奨します。

Francfrancのブランドイメージを守り、掲載される媒体に応じて最適なスペースを保つようにしてください。

Ppt Img

- Sales promotion environment

デザインガイドラインの活用サンプル


Ready

[店頭POPなどのデザインサンプル(Communication)]

Francfrancのブランドイメージを的確に伝えるには、Francfrancのロゴタイプあるいはブランドフォントによる文字組みを中心とした、シンプルかつ洗練された表現が重要になります。

Francfrancのブランドが持つ高級感と清潔感を損なわないように、掲載される媒体に応じて最適なスペースを保つようにしてください。

Q:ブランドフォント以外は使用してはいけないのですか。

Ffbg Pop Img


WIP

[グラフィックエレメンツの開発]

Francfrancのブランドイメージを的確に伝えていくには、Francfrancロゴタイプを中心としたデザインが重要になります。これらは知的財産面などのチェックなどが迅速にクリアできるため、グローバルな展開やスピーディーな商品開発の際に有効です。

ブランドのイメージを魅力的にまた正しく伝えるためにも、Francfrancロゴタイプを使用したグラフィックの要素については、今後も開発を推進してゆきます。

- SNS application situations

SNSにおけるコミュニケーションの撮影サンプル


Ready

[SNSにおけるコミュニケーション]

Francfranc の店内や商品を印象的に伝えていくには、商品にフォーカスを当てることが大切です。主役と脇役の概念を取り入れ、主役となる商品を際立たせるようにします。

SNSにおける情報発信では、構図や階調に配慮し、伝えたいメッセージがよくわかる画像を使用してください。

左のサンプルでは、視点が誘導される構図になっています。

右のサンプルは、主役商品がどれなのかわかりにくいためにFrancfrancの世界観も想像しづらい構図になっています。

Instagram Img Products

- Graphic Design

グラフィックデザインにおける品質の向上について


Ready

[ブランドフォーマットとキャンペーンフォーマット]

テキストタイトルにブランドフォントを使用したシンプルでミニマルなデザインフォーマットは「ブランドフォーマット」と呼びます。

「特定の目的」のためにブランドフォント以外のフォントを使用レイアウトは「キャンペーンフォーマット」と呼びます。

特別で非日常的であるからこそキャッチーなビジュアル表現になりうる「キャンペーンフォーマット」が定番表現の「ブランドフォーマット」の露出を超えないようにデザインディレクターはコントロールしてください。

広告効果を最大化するため、クリエイティブの資産は常に生産性・費用対効果の最適化を心がけてください。

Brand Foramt A

Campaign Foramt A


Ready

[機械的センターと見た目センター揃え]

Francfranc ブランドのツールには、クオリティの高いレイアウトを奨励します。

特にブランドロゴの配置には細心の注意を払ってください。

事例のようなケースにおいて、機械的なセンター揃えは錯視により重心が下がってバランスが悪く見えることがあります。

Francfranc ブランドのイメージを守るために、デザインディレクターやデザイナーは原寸や実物に近いサンプルでチェックを行い、ベストバランスでブランドロゴを配置してください。

Human Center Alignment

Mechanical Center Alignment


Ready

[美しいシャドーを入れる]

Francfrancのブランドや商品を伝えるコミュニケーションにおいて、視認性に配慮することはもちろんですが、美しさの配慮に欠けるむやみな文字の縁取りやシャドーの使用を避けてください。

- Catalog and brochure

編集要素を含むデザインにおける品質向上


Ready

[ブランドイメージを大切に]

Francfrancのブランドや商品について情報発信を行う、冊子・チラシなどすべての印刷物において、Francfrancのブランドイメージを大切にしてください。

ブランドロゴを表示する際は、ロゴマニュアルに従い、正しいアイソレーションを保って表示します。


Ready

[コンテンツはわかりやすく、読みやすく]

Francfrancのブランドや商品について情報発信を行う、冊子・チラシなどすべての印刷物において、本文のレイアウトには「見出し」「リード文」「本文」などの機能的なスタイル、美しい文字組を使用します。

装飾的な罫線や箇条書き表現のための記号などの使用は最小限にとどめますが、本文及びテーマに沿った写真やグラフィックは、品質の良いものをしかるべきスペースをとって配置してください。

全体を通して「Francfrancらしさ」を心がけてください。

- Web Design(Digital Media Design)

アクセシブルなコンテンツデザインのための指針


Ready

[マルチデバイス対応]

Francfrancのブランドや商品を紹介するWebサイトやデジタルメディアのデザインは、ユーザの閲覧環境を意識し、パソコンやスマートフォン、デジタルサイネージだけでなくさまざまな表示デバイスにも対応できうるコンテンツ設計を行うよう配慮してください。

サイト内の装飾や作り込みにこだわりすぎるあまり、臨機応変に必要なデザインリニューアルがしづらくなるような設計は避けてください。


Ready

[コンテンツの精査]

Francfrancのブランドや商品を紹介するWebサイトやデジタルメディアのデザインは、紹介されるコンテンツがより多くの閲覧者にとって快適に表示されるよう、配慮ある設計を行ってください。

また、商品やコンテンツを快適に閲覧してもらうために、コンテンツが閲覧できるまでの表示パフォーマンスの高速化(画像ファイルの軽量化など)にも配慮してください。


Ready

[アクセシビリティ向上]

Francfrancのブランドや商品を紹介するWebサイトやデジタルメディアのデザインは、通信環境や表示デバイス、閲覧する利用者の多様性を考慮してアクセシビリティの向上に努めてください。