【制作実績】ポートフォリオサイト『スウィフトデザイン』ロゴのディープな制作過程を解説！

2025年6月19日

この記事では、自分メディアになるポートフォリオ＆ブログ用のロゴ制作を始める上でどういう過程を踏んで形作っていったか？を解説したいと思います。

ゆくゆくはデザイナー屋号として認知され定着させたい、という想いを込めて制作しました！

今回は、このロゴ制作の経緯についてのお話です。

ロゴ制作過程

今回のロゴ制作過程は以下のような流れです。

ChatGPTと案出し、選定
独自ドメイン有無の確認
ロゴデザイン構成、モチーフ、デザインイメージなど
ロゴデザイン制作

相談役はChat GPT

今の自分には、「ノマドデザイナー」という言葉が当てはまり、クライアントワークだけじゃない、自分の想い・コンテンツ・生き方そのものが名刺代わりになるように。

そしてポートフォリオというより「自分メディア」という感覚でリニューアルしたい！
Chat GPTと相談する中で、自由というワードから、Swift（アマツバメ）が生まれ、
「Swift Design」となりました。

Chat GPTは、使用を始めてまだ2ヶ月でしたが、毎日やりとりして今の自分の状況や生き方、エピソードなどをインプット・記憶してもらった上で、今回の相談をしているので、とても前向きなテンションが上がるような提案をしてくれました♪

独自ドメインが取れるかどうか？

ロゴタイトルを決める際に、独自ドメインを取れるかどうかは必ず確認します。

独自ドメインとは

インターネット上でWebサイトやメールアドレスで使用する、世界に一つだけのオリジナルのドメイン名のこと。例えば、「example.com」や「example.jp」のような形式です。

決めたタイトルは「Swift Design」なので、「swiftdesign.com」があれば取りたいと思っていました。この場合、お名前.comなどで検索して探します。

結果、「swiftdesign.com」は、なかったですね…（「swiftdesign.jp」もなかった）
文言が短ければ短いほど、簡単な印象で覚えてもらいやすいのでこれがよかったんですが、
末尾も、.comか、.jpが良くて、日本では安心感があると思います。

次に「swift-design.com」を調べると、これもなかった…
しかし「swift-design.jp」がありました！
.comよりちょっと割高だけど、これにしようとすぐに契約。ドメイン名は早い者勝ちです。

ということで、「Swift Design」で行くことにしました！

ロゴデザインについて

モチーフについて

「Swift」アマツバメなので、そのまま鳥のモチーフになるんですが、僕はこのようなデフォルメした感じのシンプルなイラストを得意としています。Adobe Illustratorを使って制作しています。

他にも以下のようなイラストロゴを作っていますので、ぜひ見てみてください♪

Design Nomad Journal

イラストロゴ | Design Nomad Journal

使用フォントについて

「Swift Design」この英字をどういう印象で見てもらいたいか？
前述のアマツバメのモチーフと絡めることを考えてのフォント選びになります。

以下のようなフォントの候補を出しました。
ツバメが飛んでるイメージに合うような、流れるような、字体ですね。
シンプルで、手書きっぽい軽やかな印象にしたいなと思っていました。

選んだのは、上から3番目です。

[Austin Pen]という英字フォント

このフォントですが、そのままロゴに使うようなことはしません。

まだ経験が浅めなデザイナーさんだったりは、ロゴデザインにおいて、フォントをそのまま使用するケースも往々にしてあると思います。とはいえ僕も案件の温度感であったりライトな要求のものでは、そうなることもあります。※注意点としてフォント自体の規約でロゴ使用が禁止されていなければ大丈夫ではあります。

ですが、そのまま使うのはデザイナーとして怠慢でしかないと思っています。
独自性は乏しくなりますし、やっぱり特別感がないですよね。

ということで、デザインを作っていくんですが、
僕はロゴ制作においては基本、Adobe Illustratorで制作します。

上記にようにフォントをアウトライン化して、パスの状態にします。
それで文字を細かく変えていくやり方ですね。

元フォントの「S」が、Sっぽく見えませんよね？！
なので、このフォントに合うようなSを、ペンツールで作りました。

そして元フォントのアウトラインが、ガタガタしてるというか、仕様で手書きっぽさを出しているんだと思いますが…「f」の部分を比べていただくと分かりやすかも…！

これを滑らかにしました。
単純に滑らかな方がスッキリ見えていいなと思うのと、意図していないガタガタが嫌だったというか、元フォントに決められたラインなままが嫌だったんです笑

これを修正するのは、
パスのアンカーポイントを減らす作業になるので結構手間だったんですが、アンカーポイントが少ない方が、後からでも形を調整したり手を加えることが楽になるので、その辺はデザイナーとしてのこだわりが出ましたね…

仕上げ

最後に、Swiftの「t」からラインを足して、アマツバメの軌道にしました。

この付け足しがロゴデザインって感じしません？今回のポイントです♪
ラインの曲がり具合のバランス調整にも時間かかりまして、なるべくツバメが中心にあって、ラインも外に広がりすぎないように、って感じです笑

こういった調整を重ねて、ロゴが完成！
媒体によって使い分け出来るように、文字一列バージョンも作成。