2017/04/23SHAREツイートシェアはてブGoogle+PocketLINEこんにちは!takafumiです。あなたはFacebookを利用していますか?僕は5年程前からFacebookをちょこちょこ使っているのですが、当時からずっと悩んでいたことがあったんです。それは、Facebook上のプロフィールページに使うカバー画像でした。このカバー画像なんですが、普通に風景や町並みの写真を使う分にはまったく問題ないんですが、自分の顔写真を使ったり、テキストやロゴなどを入れたりすると、顔の一部が切れてしまったり、ロゴが隠れてしまったりするんです。パソコンではちゃんと収まって表示されていても、スマホで見てみるとあなたあれ、ロゴが隠れちゃってる。なんてことが、よく起こるんです。スマホは色々な画面サイズがあるので、どのスマホでも見ても切れに表示させるのは本当に大変です。これで終わりです必要なもの準備しようフェイスブックのカバー写真を作る前に、必要なものを準備しましょう。一覧でまとめてみました。「Facebookカバー作成キット」が完成しました。詳しい説明に入るまえに、こちらからキットをダウンロードしてください。illustraotrファイルはこちらpngファイルはこちらファイルの説明Facebookカバー作成キットはillustratorファイルとpngファイルの2種類で用意しました。illustratorをお使いなら、facebook-kit-template.aiというファイルを使ってください。バージョンはCSまで対応しています。いう画像ファイルを参考にして作成してください。どちらのファイルを開いても、基本的な構造は下のようになっています。一枚のカバー画像でPC、スマホのどちらにも対応できるように、少し変わったレイアウトになります。緑色の枠で囲まれた1の部分はPCで閲覧したときに表示されるエリアになります。青色で囲まれた2の部分はスマホで閲覧したときに表示されるエリアです。緑色になっている3のエリアはテキストやロゴを配置したい場合に、推奨するエリアになります。takafumiこの領域以外にロゴやテキストを配置すると、デバイスによっては隠れてしまうことがあるから注意してね!赤く塗られている領域はユーザーアイコンやボタンなどで隠れてしまう部分なので、注意してレイアウトしてみましょう!実際につくってみようFacebookカバー作成キットとillustratorを使って実際にカバー画像を作ってみましょう。illustratorに詳しくない人でも分かるように説明していきますので、安心してくださいね。それでは、スタートです!ファイルを開く先ほどのリンクでダウンロードした、facebook-kit-template.aiをダブルクリックしてください。自動的にillustratorが起動します。次のような画面が表示されたらOKです。背景画像の配置まずは、カバーのメインとなる背景画像を配置していきましょう。今回は以下のリンクからフリー画像をダウンロードして使うことにしますが、あなたはお気に入りの画像を使っていただいて大丈夫です。画像のダウンロードリンクはこちら。リンク先のページで、『無料ダウンロード』をクリックします。画像サイズを選択したら、『ダウンロード』をクリックしてコンピュータに保存しましょう。背景画像を配置していきましょう。レイヤーウィンドウが表示されていない場合は、レイヤーアイコンをクリックして表示させてください。下にある『背景レイヤー』の『鍵アイコン』をクリックすると、レイヤーがアンロックされます。配置する画像を選択して『配置』をクリックしてみましょう。キャンバス上の適当なところでクリックをすると、画像が配置されます。takafumiあれ!画像デカすぎじゃない!?そうなんです。最終的に書き出す画像サイズよりも、背景サイズが大きすぎるので背景写真の一部しか見えないんです。画像を小さくしてみましょう。画面左にあるツールバーから黒矢印の「選択ツール」が選ばれているのを確認してください。背景画像の角にポインターを持っていくと、拡大縮小ができます。そのまま縮小してしまうと縦と横の比率がおかしくなってしまうことがあります。キーを押した状態でマウスを動かすと、画像の比率を保持したまま画像を縮小できます。枠に収まるように画像サイズを調整してみましょう!(下の画像をクリックするとアニメーションで操作を確認できます)タイトルの追加バナーに簡単なテキストを追加してみましょう。レイヤーウィンドウにある『タイトルなど』レイヤーの鍵アイコンをクリックして、レイヤーのロックを解除します。『タイトルなど』レイヤーが選択された状態で、ツールバーから『文字ツール』を選択します。キャンバスのどこでもいいので、クリックしてもらうとテキストを挿入できます。coding」というテキストを追加しました。テキストが緑色のエリアに配置されるようにしてくださいね。画像の書き出し背景画像とテキストが追加されたので、さっそくフェイスブックのカバー画像として書き出してみましょう!でも、そのまえにやることがあるんです。あなた赤い色のブロックとか線が邪魔だよね。赤い色のブロックや緑色のブロックはガイドとして役割なので、画像として書き出すときには表示されないようにしなくてはいけません。方法はとっても簡単で、各レイヤーを非表示にするだけです。書き出し設定用のウィンドウが表示されるので、次の画像のように設定して『アートボードを書き出し』をクリックします。書き出された画像はつぎのようになります。背景画像の下がグラデーションになっているのは、スマホで閲覧する場合を考慮したものです。Facebookにアップロードしてみようカバー画像ができたので、さっそくフェイスブックに画像をアップロードしてみましょう。自分のプロフィールページに移動してください。カバー左上にある『カメラアイコン』をクリックします。メニューが現れるので「写真をアップロード」を選択して、先ほど作成したカバー画像を選択しましょう!カバー画像のサイズが縦長なので画像の位置をマウスのドラッグで調整してください。(下の画像をクリックすると、アニメーションで操作方法が確認できます)位置が決まったら、『変更を保存』をクリックして完了です!これで終わりですこれで、Facebookカバーの作成は完了です。『Facebookカバー作成キット』とillustratorを使うと、思った以上に簡単にカバー画像がつくれるのがわかったと思います。フェイスブックのカバー画像は、あなたに興味を持った人が最初に訪れるページになります。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。【無料ソフト】gimpを使って画像の切り抜きをやってみよう次の記事セミナーは準備が大事!初めてウェビナーをやってわかった大切なこ...デザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。