2023.07.18
デザイン
applepleロゴリニューアルの裏話
【実際の手順を公開！】会社案内のパンフレットリニューアルの裏側
こんにちは！デザイナーの浅井です！
この度、アップルップルはアドビ社の「みんなの資料作成」に参加させていただくことになりました。
資料作成と言えば、当社では、会社のロゴをリニューアルするタイミングで会社案内パンフレットの見直しを行いました。 会社案内は、古いまま使用されがちですが、定期的に更新をしておかないと、営業活動や採用活動に影響を及ぼす可能性もあるので注意が必要です。
そこで今回の記事では、実際に行った会社案内パンフレットのリニューアルの流れとともに、修正作業で押さえておくべきポイントをデザイナー視点で解説していきます！ 「印刷物としての配布」「Web上での公開」、この両方を想定した資料作成ノウハウを紹介していますので、ぜひ本記事がお役に立てれば幸いです。
目次
会社案内は定期的な更新が必須！会社案内をリニューアルした背景
今回の会社案内リニューアルのきっかけは、ロゴをリニューアルしたことでした。
当社は今年、会社ロゴおよび提供サービスのロゴをマイナーリニューアルしました。これによりブランドカラーが統一されるなど新たなビジュアルアイデンティティが生まれました。詳しくはこちらの記事をご覧ください。
ロゴは、企業の価値観をビジュアルで表現する重要な要素です。そして会社案内は、お客様や関係者に企業ブランドを伝えるコミュニケーションツールのひとつです。「企業の顔」とも言えます。よって、リニューアル前のロゴを掲載し続けるわけにはいきません。
なお、ロゴのリニューアル等がなくても、会社案内は定期的に更新して最新情報を反映させるようにしましょう。
なぜなら、古い情報を掲載した会社案内を使い続けることは、営業活動や採用活動にも良くない影響を与えかねないからです。
たとえば、会社案内に掲載している業績やサービス内容などが現在の実情と異なる場合、信頼を失ってしまったり、業界や市場の動向に対する理解が不足している印象を与えてしまったりするかもしれません。
目安として、1〜3年ごとに情報を見直し、内容を更新するのが望ましいとされています。 その他、大きな変化（組織構造の変更や新部署の設立、ブランディングの変更、業績の変化など）があれば、その都度更新するのがベターです。
作業の工程・スムーズに進めるためのコツ
それでは早速、当社が実際に行ったリニューアルの流れを解説していきます。
今回は以下のような流れで作業を進めました。
それぞれの作業について、詳しく見ていきましょう！
1. 修正箇所の洗い出し
まず、修正箇所の確認をしていきます。
複数人で作業する際には、各人が気になったポイントを1つの資料にまとめられると、共有しやすくて便利ですよね。ですが、複数人で作業を進める際、同じ修正箇所に気付くと、作業のダブりが発生することも考えられます。
そこで役立つのが Adobe Acrobat オンラインツール の コメント機能 です。こちらを活用することで、同じ資料を共有し、修正箇所の指摘や、それに対する意見などを簡単に追加することができます。他にもPDFに直接ハイライトをつけたり、フリーハンドで描画したりすることも可能なので、言葉だけでは表現しにくいことも簡単に伝えられ、とても便利です。
【コメント機能の使い方】
左のツールバーの吹き出しのアイコンから、「コメントを追加」を選択します。そして、コメントしたい箇所を選択して、右側のテキストエリアにコメントを入れて投稿することで、コメントができます。
今回は下記の内容を更新・変更していくことになりました。
- ロゴや写真の差し替え
- 色の統一
- フォントの統一
- 掲載情報を最新のものにする
- 表記の統一
2. 修正作業
ここからは、修正作業について詳しく解説していきます。
まずは修正作業を始める前に、以下の2点について確認・準備をしておきましょう。
- 既存データの確認
- 最新データの管理ファイルの準備
まずは、PowerPointやAdobe Illustratorなど、既存データがどのソフトで作成されているかを確認します。
当社では、既存データはIllustratorで作られていたので、修正作業もIllustratorで行っていきます。
次に、最新のデータを格納するファイルを用意します。
たとえば、「202308」のように入稿予定の年月で命名したフォルダを新規作成し、その中に写真やIllustratorのデータを格納するようにすれば、どのデータが最新のものか、ひと目でわかり便利ですよ。
3. 確認作業
修正が終わったらデータを確認します。文章を書いた本人が確認をすると、自分の考えや表現に馴染んでおり、間違いや誤りに気づきにくい場合があります。第3者の目でチェックすることで、自分では見落としがちな誤りに気づけます。必ず複数名で確認を行いましょう。
この時も、修正箇所の洗い出しで使用した Adobe Acrobat オンラインツール の コメント機能 を使うと関係者間での共有・確認が簡単です！
会社案内資料リニューアルの全体像は把握できたでしょうか。
では続いて、資料リニューアルで最も重要な「2.修正作業」について、より具体的なポイントを9つ解説していきます。
資料の修正作業で押さえておくべき9つのポイント
【ポイント1】印刷用データを先に作る
企業によっては、会社案内を印刷物（紙）とWeb用（PDFファイル）の2つの形式で用意することがありますよね。当社もそのパターンです。
このように印刷用とWeb用の2種類のデータを作る場合、印刷用データを先に作成することをおすすめします。
理由は、印刷用とWeb用とで、適切な解像度が違うからです。
印刷用では高い解像度（通常は350dpi）が求められますが、Web用の場合は解像度を低く（72dpi）設定することが適切です。なぜなら、高い解像度の画像はファイルサイズが大きくなり、ウェブページの読み込み速度が遅くなる可能性があるからです。そして、一般的に、解像度は上げるよりも下げる方が簡単です。よって、解像度の高い印刷用データを先に作成した方が、解像度の低いWeb用データへの変更作業が楽になります。
左）低解像度 右）高解像度
【ポイント2】適切なカラーモードを選ぶ
カラーモードには印刷用とWeb用の2種類があります。印刷用のデータではCMYK、Web用のデータではRGBというカラーモードを使用します。
※CMYKとは、Cyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）、Key plate（キープレート≒黒、墨）の頭文字をとって表したものです。
※RGBとは、Red（レッド）、Green（グリーン）、Blue（ブルー）の頭文字をとって表したものです。
RGBは画面上の光で色を表現するため、CMYKとは色の表現が異なります。RGBで作成したデータをCMYKに変換すると、色味が変わる可能性があるため、注意が必要です。
当社のガイドラインでは、印刷用（CMYK）とWeb用（RGB）のそれぞれでブランドカラーを定義しています。
【ポイント3】色々な黒を使い分ける
黒を使う際には、印刷用の場合とWeb用の場合でそれぞれ注意するポイントがあります。
印刷用の場合
- 4色ベタは避ける
- 4色ベタとは、CMYKすべての色味を100%の濃度に指定して作り出した黒です。4色ベタを使うと、インキの乾きが悪くなったり、紙同士がくっつくなど様々な印刷トラブルの原因となります。最悪、印刷できないこともあるので、4色ベタの使用は避けましょう。
- 深みのある黒にしたい場合はリッチブラックを使用しましょう
- 印刷した時に黒が薄いと感じる場合があります。そんな時は黒（K）にCMYのインキを加えて深みのある黒にすることができます。ですが、CMYKの合計値が高くなり過ぎると、4色ベタの状態と同じように、印刷トラブルの原因となります。黒を掛け合わせて使用する場合、CMYKの合計値は、300〜350%以内を目安にしましょう。
Web用の場合
- 「真黒：ピュアブラック（Pure Black）、明度0、#000000」は控える
- コントラストが強いほど可読性が上がりますが、極端にコントラストが強いと、目が疲れる原因となります。たとえば、白背景（#ffffff）に真黒（#000000）のテキストを載せると、コントラストが強すぎて、目がチカチカする人もいるのです。真黒の代わりに濃いグレー（#333333程度）を使うのが良いでしょう。
ちなみに、当社の「a-blog cms」のロゴは、目の負担を減らすために、白背景（#ffffff）に対してコントラスト比11.2のBlack（#3E3A39）が設定されています。
【ポイント4】表記を統一する
表記を統一することで、読者が「これとこれって言葉が違うけどなぜなんだろう？」と戸惑うことが少なくなり、文章の本筋が伝わりやすくなります。 たとえば、「Webサイト」なのか「WEBサイト」なのか、それとも「ウェブサイト」なのか、または単に「サイト」なのか。当社では「Webサイト」で統一するのがルールとなっています。このルールが守られているかをチェックします。
また、以下のように似たような言葉が使われていた場合、使い分けがされているのかを確認します。
- 改定
- 改訂
- 改正
さらに、ひらがな表記や送り仮名についてもチェックを行いましょう。
- 取引
- 取り引き
【ポイント5】適切な画像の配置方法を選ぶ（Web用の場合のみ）
画像の配置方法には、「リンク配置」と「埋め込み」の2種類があります。
Illustratorを使っている場合、画像の配置状態は「ウィンドウ＞リンク」を使用すると確認できます。
リンク配置では、写真は外部ファイルとして保存され、Illustratorのドキュメント内にはファイルへのリンク情報のみが含まれます。埋め込みでは、写真がIllustratorのドキュメント内に完全に統合されます。
それぞれのメリット・デメリットを下記にまとめてみました。
リンク配置
| メリット | ドキュメントのファイルサイズが小さくなります。そのため、画像の数が多くなる場合に適しています。 |
|---|---|
| デメリット | 写真ファイルの移動や削除などがあると、リンク切れが発生して写真が表示されなくなる可能性があります。 オフライン環境でドキュメントを表示する際にも写真が表示されないことがあります。そのため、オフライン環境でドキュメントを共有する場合には不向きです。 |
埋め込み
| メリット | ドキュメントが独立しているため、写真のリンク切れの心配がありません。 オフライン環境でドキュメントを表示する際にも写真が表示されます。そのため、オフライン環境でドキュメントを共有する場合に適しています。 |
|---|---|
| デメリット | ドキュメントのファイルサイズが大きくなる可能性があります。そのため、画像の数が多くなる場合には不向きです。 |
写真を埋め込むか、リンク配置にするかは、使用する写真の数や種類、ファイルサイズ、ドキュメントの共有方法などによって選択しましょう。
ちなみに当社の場合、既存データの写真はリンク配置で表示しています。
【ポイント6】ファイルサイズを最適化する（Web用の場合のみ）
Web用データはファイル容量が大きすぎると、ダウンロードやアップロードが遅くなる原因になります。それを防ぐためには、ファイルサイズの軽量化が重要です。ファイルサイズの目安は2MB以下です。メール添付の場合も一般的には2MB程度が適切とされます。ファイルを軽量化する際に役立つのが、Adobe Acrobat オンラインツールの 圧縮機能 です。
【圧縮機能の使い方】
「変換」のタブから「PDFの圧縮」を選び、PDFをアップロードすると3段階（高・中・低）から圧縮率を選択することができます。この時に圧縮した後の推定ファイルサイズが表示されるのが嬉しいポイントです。適切な圧縮率を選んでファイルサイズを最適化しましょう。
【ポイント7】トンボとセーフラインに注意する（印刷用の場合のみ）
「トンボ」とは、印刷物を裁断する際に切り取られる領域を示す目印です。デザインが用紙の外側に少しはみ出すように配置することで、裁断後にデザインされた領域が足らず、印刷物に白い余白ができてしまうのを防げます。
「セーフライン」とは、印刷物が裁断される際に、テキストや重要なデザイン要素が裁断されないようにするためのラインです。デザインがラインより少し内側に収まるように配置し、裁断が少しズレた場合でも重要な部分が失われないようにする役割があります。
【ポイント8】文字をアウトライン化する（印刷用の場合のみ）
「アウトライン」とは、文字が図形データとして認識されるようにする処理のことです。文字をアウトライン化することで、たとえば印刷会社が持っていないフォントを使ったデザインであっても、意図通りに表示させることができます。
【ポイント9】入稿先のガイドラインを確認する（印刷用の場合のみ）
アウトライン化や写真の配置の仕方などは、入稿先（印刷会社など）から指示される場合があります。入稿先のサイトを確認し、入稿ガイドを先に読んでおくと安心です。サイトには入稿用のテンプレートも用意されているので、ダウンロードしておきましょう。
当社では2018年以降のデータは「グラフィック」という会社に入稿しています。入稿方法が複数ありますが、「ダイレクト入稿」を使うとIllustratorから直接データを送れるので便利です。さらに、グラフィックのダイレクト入稿を利用する場合、アウトライン化や画像リンクの埋め込みは必要ありません。
グラフィックの入稿ガイドはこちらをご覧ください。
ぜひ、ここまで紹介した9つのポイントを意識して、修正作業をおこなってみてください。
最後に、Illustratorを使って作業いただく際の実践的なノウハウについてご紹介します。
【番外編】Illustratorを使って実際の修正作業を解説
前章では、修正作業の際に押さえておきたいポイントを紹介しました。 ここからは、Illustratorを使った修正作業のノウハウを3つ紹介します。
それぞれの工程で、実際に行った作業を詳しく解説していきます。
ロゴや写真の差し替え
「ウィンドウ＞リンク」からリンクパネルを表示します。リンクパネルから変更したい画像を選び、右上のオプションアイコンから「リンクを再設定」で簡単に変えることができます。
ロゴはガイドラインを守って配置しましょう。
ロゴには、視認性や識別性を保つために保護エリアと最小サイズが設定されています。保護エリアとは、ロゴ周りに使う「余白」のことです。 保護エリア内には他のデザイン要素や文字などを表示することができないルールになっています。
ちなみに、下記はapplepleのロゴの保護エリアと最小サイズです。
色の統一
色を変えたい場所を選択して、「選択＞共通＞カラー」から色を一括変更できます。
これでブランドカラーの色に一括で変更できました。
フォントの統一
フォントの種類は2種類程度に収めて、統一感を出します。
「書式＞フォントの検索と置換」を使うと、使われているフォントが瞬時に分かるため、便利ですよ。
当社のリニューアル前の会社案内では、8種類（太さ違いのバリエーションも含めると14種類）のフォントが使われていました。
まとめ
本記事では、実際に行った作業の流れにそって、修正作業で押さえておくべきポイントを解説しました。また、印刷とWebの両方を考慮することで、幅広い読者に対応することができます。
会社案内は、会社の顔となる重要なツールです。定期的に更新・見直しをして、クオリティと信頼性を維持しましょう。
