①初心者のためのポートフォリオサイトづくり【ロゴづくりについて】

Webデザイナーになりたい方がまず準備するべきものの一つにポートフォリオサイトがあります。未経験で何を載せたらいいのか分からない方に向けて何をすべきか書いていきます。
全部書くと長くなってしまうため、まずはロゴ制作の考え方について書いていきます。

ポートフォリオサイトは何で必要？

　デザイナーにとって欠かせないのが実績を載せるポートフォリオサイト。実績を載せられない未経験の人は何を載せたらいいのか分からないという方も多いと思います。
　未経験の方でもポートフォリオサイトは絶対作ったほうが良いです。企業に応募する際に必須なところが多いですし、仕事として未経験でも、こんなデザインできますよというアピールができるからです。

　自分が採用する側だったとして、未経験の人がどういうスキルがあるか不明で応募してきて「やる気だけはあります！」と言われても採用しませんよね。履歴書にPhotoshop使えます！と書いてもあまり意味はないのです。ツールが使えるのは当たり前なので、採用側はあなたがどんな考え方をしてデザインしているのかを知りたいのです。

　でも何を載せたらいいの？と思っている人にはまず自分のロゴから作成することをおススメします。

最初にロゴを作るのはなぜか？

　ポートフォリオサイトの作成にあたって、まずはロゴから作ることをおススメします。ロゴは会社で言えば顔のようなもので、先にサイト全体のデザインを固めてしまうと、後からサイトに合わせてロゴを作るようになってしまうことになるからです。これではコンセプトなどをロゴに入れられなくなり、デザインに統一感をだすことも難しくなります。

　老舗の会社などで、すでにロゴが世間に認知されている場合は別ですが、全て新規で作る場合はロゴから作るのが基本だと思っています。
　これは仕事でロゴからサイト作成までを受注した際にも言えることだと思います。

　ポートフォリオサイトを作りたいけど、何をしたらいいか分からない！という方はまずは「自分ロゴ」の制作から始めてみてください。サイト全部を制作するとなると何から手をつけていいのか分からなくても、ロゴなら取り組みやすいと思います。

ロゴの制作にあたっては、自分の顔を作るような気持ちでポートフォリオサイトだけでなく、紙媒体や様々なことに対応できるデザインを意識して作ったほうがいいです。のちのち、名刺を印刷したり、グッズを制作することも考えて作りましょう。
　様々な媒体を意識するというのは、文字が小さすぎて印刷した際に潰れてしまうことや、複雑なグラデーションは印刷方法によっては色が混ざってしまう可能性がある、などを注意して作成しましょうということです。

まずはロゴの種類について理解する

　いざロゴ制作！でも何をどうやったら？という方はまずはロゴの種類について理解してください。

　ロゴはフォントをメインに作成する場合と、イラストやシンボルを組み合わせて作る場合とがあります。もっと細かく分けられますが、ざっくり言えばその２パターンです。

　フォントメインのロゴというのは、元々あるフォントをIllustratorでデータ化し、文字間や高さ、一部の長さを変えたり消したりして作成するロゴのことです。
　例えばデザイナーなら誰でも知っているであろうフォントのHelvetica（ヘルベチカ）を使用したロゴは世界中にたくさんあります。アメリカン航空や、Post-it、日本ではTOYOTAやPanasonicなどが使用しています。Helveticaは読みやすくどっしりとしていて、信頼感を与えるので企業のロゴに使用しやすいのだと思います。
　Helveticaは映画化までされている大人気フォントです。Panasonicはフォントのみのロゴで、evianは山のシンボルを組み合わせたロゴ、ということになります。

Helvetica（ヘルベチカ）を使ったロゴ

フォントのみのロゴとシンボルを組み合わせたロゴの違い

　例えば、evianのロゴの山のシンボルを消してみましょう。

　どうでしょうか？印象が変わったと思います。
　山のシンボルがあるとevianの水が採れるのは自然豊かな山の麓なのだろうか、などとイメージさせますが、山のシンボルがないと何だかサッパリとして寂しい感じになってしまいました。
　同じHelveticaを使用していてもフォントだけとシンボルがあるのとないのとでは印象が変わってしまいます。
　　シンボルがあると商品のコンセプトやイメージを入れ込みやすく、オリジナリティがあるロゴを作れます。一方、フォントのみのシンプルなロゴは時代に左右されにくく、高級感や重厚感を出しやすく、ハイブランドでもよく採用されるロゴになります。

フォントのみのハイブランドロゴ

　上記のロゴは使用しているフォントや太さ、字間はそれぞれ違いますが、既存フォントをベースに作成しています。無駄なものがなく、視認性は高くなります。

　以上のことから、フォントメインのロゴはシンプルで視認性も高く、高級感をだしやすいロゴで、イラストやシンボルを組み合わせたロゴは視覚的に伝えやすいロゴと言えると思います。まずは自分のロゴはどちらが向いているのか考え、イラストレーターさんであれば自分のイラストを入れたロゴでアピールできますし、自分の名前が印象的であればフォントメインでインパクトを与えたほうが良いでしょう。

実際にロゴを作ってみる

ここからは実践です。自分のロゴを作ってみましょう。

わたしが実際にロゴを制作するにあたりポイントとしたこと

ロゴの方向性が決まったら、まずは手書きで書いてイメージを固めていきます。イメージが固まったらIllustratorで作っていきます。なぜIllustratorで作るのかは、名刺などの紙媒体にもWebでも使用できるベクターデータが都合がいいからです。

　漢字部分は自分の真面目さを伝えられるよう安定感が出る角ばったデザインにしたかったので文字が真四角に近い新ゴという書体をベースに作成しました。
　英語部分は大文字にしたり小文字にしたりして漢字に合うよう様々なフォントを試しました。最初は好きなフォントであるFutura（フーツラ）やCentury Gothic（センチュリーゴシック）を使いたかったのですが、バランスを見てOrator std（オレイター）というフォントにしました。細長く長体がかかっているようなバランスの文字でちょっとかわいい感じの文字です。漢字部分はどっしりとさせて英字部分は添える程度で華奢でガーリーさを出したかったので、このような選定になりました。

選定した欧文フォント

　フォントに馴染みのない人からするとフォントの名前は呪文のように聞こえるかもしれませんが、かわいいフォント、かっこいいフォントなどで検索すると沢山でてきますので、自分が伝えたいイメージに合うフォントを見つけてみてください。フォントの世界は奥が深いので別の機会にブログに書きたいと思っています。
　最初は難しく考えなくても、自分が好きなフォントで制作してみるといいと思います。

　色は名前が和風なので、和風テイストで朱色や紫、紺色や深紅など色々試しました。彩度を落とせば大人で落ち着いた雰囲気になるので、デザイン的には信頼感がでていいとは思いましたが、自分の子どもっぽい見た目の雰囲気に合わないのでやめて、最終的に今の明るめなカラーリングにしました。

完成したロゴ

ロゴ制作でよくある失敗

　ロゴは伝わるように作れば、わたしという人間に会わなくても雰囲気を伝えられる、会社でいえば理念などを視覚的に一瞬で伝えられるものです。
　でも伝わらないロゴも世の中には存在します。すごく複雑な構造をしていて肝心の社名が読みにくかったり、どこかで見たことがあるようなデザインで他社と差別化できていない場合などです

　コンペ形式でのロゴ制作の依頼でよく見かけるのが、コンセプトが曖昧なまま依頼されていて、提出されている方も安直なイメージで作ったロゴが多いパターンです。
　海関連の会社なのでそれが分かるようにお願いします、などの指示があり、提出する側は波と太陽とヨットとイルカのどれかの組み合わせの似たり寄ったりのものばかりが並ぶ、という結果になります。

　そうならないために具体的に何をもって制作すればいいのかというと、その会社の理念や方向性、社長の人柄、本社の土地、サイトで使用されている色や社員の声などなど、そういう情報を取れるだけとってからデザインすることです。とれる情報は全てとってから作るのが良いと思います。何となく、で作るのはデザインではなく、全てに意味があるのがデザインです。

　それでもどうデザインしていいか分からない人はロゴづくりの本を1冊買って読んでみるとヒントを得られると思います。わたしが読んで役に立った本は「たのしいロゴづくり」という本です。著者が実際にロゴを作る時の思考が書いてあるので、ロゴづくりの過程がよく分かって初めて作る人にも分かりやすいと思いました。

たのしいロゴづくり 文字の形からの着想と展開 [ 甲谷一 ] 価格:1,980円 (2022/1/30 05:09時点)

　ここまで言うと、ロゴづくりが小難しいもののように感じるかもしれませんが、自分ロゴなら好きな色やカタチでも作ってもいいので、まずは「自分ロゴ」から作ってみることをおススメします。
　ポートフォリオサイト作り第二弾はまた別に書きます。