Style Guide

スタイルガイド作成

Web サイトの世界観を保ち、運用をスムーズに進めるためのスタイルガイドを作成します。

まずはスタイルガイドのサンプルを下記よりダウンロードください。

ダウンロードコンテンツに含まれるもの

  • カラー
  • タイポグラフィー
  • アイコン
  • ボタン
  • コンポーネント

スタイルガイドを作成する重要性とメリット

Web サイトをローンチし、運用を行う際に必要となるのがスタイルガイドです。 入稿する担当者が複数いる場合、人によって入稿の仕方が違い、Web サイトの世界観やトーン&マナーが一定に保てなくなることがあります。

このフェーズでは、Web サイトの世界観を保ち、運用をスムーズに進めるためのスタイルガイドを作成します。スタイルガイドを作成することで、表現の品質を一定に保つことが可能になります。

スタイルガイド作成で行うこと

デザインで使用している以下の要素を定義し、一覧化して納品いたします。

  • カラー
  • タイポグラフィ
  • アイコン
  • ボタン
  • hover、click
  • テキストリンク
  • ビジュアルリンク
  • タイトル
  • Hタグ(H1/ H2/ H3/ H4/ H5/ H6)
  • リスト(ul, ol)
  • テーブル
  • フォーム
  • ヘッダー
  • フッター
  • メニュー
  • ソーシャルアイコン
  • コンポーネントを入稿したページサンプル

スタイルガイド作成を行う場合の注意点

ご自身で要件定義・設計を行っていただく場合、下記の3点を意識すると良いでしょう。

1. 入稿に必要な情報は網羅し、いつでも見られる場所に置いておくこと

作成したコンポーネントはすべて一覧化し、誰でも見られる形式のデータにしておくなど、編集担当者やライターがいつでも見られる状態にしておきましょう。

2. コンポーネントを利用しているサンプルイメージも作っておくこと

デザインに使用しているコンポーネントが網羅されていることは必須ですが、それぞれのコンポーネントをどう使うかがわかるものも作っておくと良いでしょう。例えば、記事サンプルのようなものです。

3. Web サイトローンチ後に適宜見直すこと

スタイルガイドは作って終わりではありません。Web サイトローンチ後に、当初の想定と異なる表現を使用し、それが定着することがあります。そのような場合には適宜スタイルガイドを見直し、実際の運用に即した内容にしておきましょう。


スタイルガイドサンプルダウンロード

フォームの送信後、スタイルガイドのサンプルをダウンロードできます。

Flow

Web サイト制作のプロジェクト進行フロー

お問合せ/お見積り

Web サイトの目的やご依頼内容をヒアリングし、概算費用をお見積もりいたします。

仕様/要件定義

正式なご依頼後、要件定義を行い、仕様・設計を詰めていきます。

製作開始

デザインやコーディング、WordPress テーマの開発を行い、当社でテストを行います。

運用/保守

お客様の検収が終了しローンチが完了したら、サイトの運用開始となります。

FAQ

よくある質問

Web サイト制作について

Webサイトを新規制作したいと考えています。ワイヤーフレームやデザインの制作からお願いしたいのですが、可能ですか?

可能です。ただし、WordPress に即した設計や手戻りを防ぐため、要件定義/設計からご依頼いただくことをおすすめしています。

デザインは自社で準備する予定です。デザインデータの提供形式に指定はありますか?

Figma、Sketch、Adobe XD、Adobe Photoshop に対応しています。それ以外の形式についてはご相談ください。

新規で Web サイトを作ろうと考えていますが、まだ具体的な内容が固まっておらず RFP がありません。相談可能ですか?

可能です。お問い合わせフォームのほか、チャットもご用意しておりますのでぜひお気軽にお声がけください。なお、要件定義/設計(RFP作成支援)から RFP のサンプルがダウンロードいただけます。よろしければご活用ください。

Contact

当社へご興味をお持ちいただきありがとうございます。
「こんなことやってみたい!」と、ぜひ気軽にご相談ください。
担当者よりご連絡差し上げます。