ロゴを一緒に作ってみよう!(初心者の勉強記録)

Q(キュー)

デザイン
ロゴを一緒に作ってみよう!(初心者の勉強記録)

こんにちは。今年の4月に入社したSUI(すい)です。
私自身入社してから作らせていただいたロゴを元に、考え方や制作工程を皆さんに共有したいと思います(^^)!

ロゴの制作工程

ロゴが完成されるまで_03.png

このような制作工程があって様々なロゴは完成されているんですね。

今回は下記のロゴを作った流れに沿って進めていこうと思います!

imgconnection_logo_fix_03.png

INDEX

    ヒアリング・構想

    ☆ヒヤリングした内容を元に、方向性を決める

    企業ロゴ、サービスロゴなど様々な目的で使用されるロゴですが、どういった目的・場所で使用されるのか、背景を汲み取ることが制作していくうえで大切です。クライアントがロゴを作ろうと思った理由や、目的を深く考えることでデザインの方向性を決めていくことに繋がります。

    ※今回は自社のサービスロゴを制作例に挙げています。

    社長からのロゴ作成依頼として頂いたテーマがこちら▼

    " 悩みを持つ企業と解決できる企業を繋ぐサービスロゴ。繋がりや人の温かさを感じるようなロゴ"

    テーマから構想を練り始めます。

    今回は、マーク規定やどのような形にするのか明確な要望はありませんでしたがロゴを制作する前にはクライアントに聞くべき必要な情報です。

    大きく分けて三つに分類されるロゴ。
    ①【マークと文字が合わさったもの】をロゴマーク
    ②【マークのみ】をシンボルマーク
    ③【文字のみ】をロゴタイプと分けられています。

    ロゴが完成されるまで.png

    様々な場面で使用されるロゴですが、サービスロゴなのにシンボルマークだけだと何のサービスを利用できるのかわからない、ということもあるので「思っていたのと違う!」と認識違いを未然に防ぐ大切な工程です!

    ロゴについての詳しい内容はこちらから、より深く知ることができます。

    コンセプト作成

    ☆ヒヤリングで得た情報を書き出す

    連想する言葉や自分のつぶやきを書き留めることで、情報をより理解し整理することができます。

    IMG_4205.JPG

    企業と企業を繋ぐサービスのロゴになるので、繋がりを大切にするイメージや
    企業様同士が信頼して自社のサービスを使いたいと思ってもらえるようなロゴ。
    二つの企業を繋げ、自社も成長したいという思いを込めて実際にデザイン制作スタートしていきます。

    デザイン制作

    ☆ラフを書いてみる

    今回作るロゴの名前は「アイエムジーコネクション」。コネクションを英語にしてcoから多くの派生をだしアイデアの数を増やしていきます。
    今回はサービスの名前を知ってもらいたいことからロゴマークにしています。IMG-connectionの「CO」から繋がりの意味をもつ握手に見えるよう作り込んでいきます。


    syatyou-03.jpg

    ラフが完成した後、実際にイラストレーターで形を作っていきます。
    私はこのような手順で作ってみました。

    STEP:01

    下書きをイラストレーターに読み込み、画像をテンプレート化します。

    STEP:02

    青色のフチで囲った手から作り始めます。
    楕円形ツールを使い、大きさに合わせて円を置いていきます。
    パスと楕円形を繋げるために二つのパスを選択した後、右クリック > 連結を使用し、パスを繋げていきます。
    手の大枠ができました!

    STEP:03

    次に、もう一つの手で先に作った手を切り抜いていきます。
    下に丸を作り、もう一つの手を ウィンドウ > パスファインダー > 前面オブジェクトで切り抜きを選択すると握手の形に近づいてきました。

    STEP:05

    不透明度を下げ、ラフを見ながら作業できるようにします。
    ペンツールで爪の丸みを描き、線幅ツールを使い太さを調整していきます。

    STEP:06

    爪の不要な部分をパスファインダーで削除します。
    この時に爪がパスなためオブジェクト > アピアランスを分割を選択し、シェイプにすることでパスフェインダーを使用できます。

    STEP:07

    最後に親指の爪に見えるように〇を設置すると、ラフで描いた形をイラストレーターで再現することができました。

    イラストレーターで完成したロゴがこちら▼

    logo_01.png

    形を作った後、フォントのイメージを探るために様々なフォントを横に並べ、決定していきます。

    logo_beginner_text.png

    その後作ったものを見てもらい、ブラッシュアップにつなげます。

    ▼一回目に見てもらった画像

    logo0602_03.png

    ブラッシュアップ

    ☆頂いた意見からデザインに反映する

    「手の感じが欲しい。」「もっと手を作り込んでほしい!」と意見をいただき再度形を書き直し、作り直しました。頂いた意見から、ラフを書き換え、指だとすぐにわかるよう形を調整し、形を整えます。

    logo_shape_02

    この形で決定した後、色のバリエーションを見てもらいます。


    logo0614_03.png

    繋がりを持たせるよう温かみが出るような色合いを何種類か提出します。
    三種類見てもらい、色を決定しました。

    ロゴの完成

    imgconnection_logo_fix_03.png

    決まった色は青色が誠実さ、緑色が安心を与える意味の色で、BtoBのサービスに合う色合いです。実際に作ったロゴは会社のサービスに使用されます。ロゴが決まったときは少しづつ制作の流れなどを経験できたことなど、とてもうれしい気持ちでいっぱいでした。まだまだ初心者な私ですが一緒に学んで成長できるように頑張りましょう(^^)!

    また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です!
    デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。

    blog_recruit.jpg

    関連記事

    Q(キュー)

    デザイン

    ロゴを一緒に作ってみよう!(初心者の勉強記録)

    apiko

    デザイン

    ブランドカラー・コーポレートカラーとは?重要性と選び方

    apiko

    デザイン

    色と配色、色の持つイメージ

    apiko

    デザイン

    【2022年版】webデザイン おすすめ日本語フォント(Google fonts、Adobe fonts)

    apiko

    デザイン

    【Webデザイン・DTPデザインにおすすめ】商用利用可能な明朝体の日本語フリーフォント-Part2