Sketchを超える無料デザインツール「figma」でノンデザイナがロゴを作ってみた

2019年2月15日

この記事のまとめ

✔ figmaは無料で使える点でSketchより優れている(機能制限あり)
✔ なんとなくPaintを使ったことがある人なら感覚で使えちゃう

今回やったこと

現在作っている「morning | 朝活を応援」というアプリのロゴを作りました。
普段はデザインを全くやらないので、優しい目で読んで下さい

Sketchか、figmaか

とりあえず、何かを比較するときはGoogle Trendを見てみるのですが、トレンドの線自体は拮抗していました。

Sketch vs Figma

figmaは割と最近のツールなのにやるじゃん!と思ったのですが、内訳を見ると、どうやら別のfigmaで検索ボリュームが出ているようです。なので、比較になりませんでした。

アニメのフィギュアを調べるための検索キーワードたち
じゃないほうのfigma(おそらく世間的にはこちらがマジョリティ)

自分のSketchの経験としては、デザイナーが作ったSketchファイルを開いて、フォントサイズやカラーコードを確認したことがある程度です。なので、Sketchとの相対評価はちょっと難しいので、figmaを使ってみて絶対評価での感想を書きたいと思います。

以下、登録フロー

早速、figma にアクセスして登録しておきます。
登録も支払い情報などは不要でしたので、かなりスムーズでした。

Try Figma for freeをクリック。トップにFreeって書いてあると安心する。。。
Googleアカウントでサインアップ後、チーム名を入力(画像省略)して、プランを選択

無料プランは、
– 最大3プロジェクトまで
– 30日前までのバージョン履歴が使用可能
– チーム作業する際の編集者は2人まで

という制限付きでした。
自分は基本的に1人か2人で作業するので、気にせずフリープランを選択しました。

作業画面。Sketchに似てる


プロジェクト名を入力すると、作業画面にいけました。
見た目はSketchに似てますね!
Sketchファイルのインポートもできるみたいなので、互換性は高そうです。

今回は、標準のペイントツールなどでは作成できないアイコンを取り入れてみました。
たどたどしいですが、なんとかロゴを作ることができました

Googleのロゴもカラフルだしええやろ!(小並)

ロゴを作るときに考慮したこと

ロゴを作る際は、以前読んだことがある下記の記事を参考にしました

ロゴのリデザイン ー なぜGapが失敗しAirbnbが受け入れられたのか

今回のメッセージは下記でした
– 早朝の雰囲気を伝える
– 早朝に開発作業する雰囲気を伝える
– ポジティブな明るめのデザイン

なので、デザインは下記のように落とし込みました

中学生だったら褒めてもらえた。多分そういうレベル。

最後に

デザインをやってみて思ったことは、とにかく楽しいということでした。
自分の頭で考えていることがすぐに形に落とし込めるのは良い。
ただし、プログラミングと違って、回答を得るのが難しいので、誰かにフィードバックしてもらわないとダメな方向に突き進んで行ってしまうかもしれないとも思いました。
このロゴも、多分デザイナーから見たらいくらでも改善点があると思うので、今度詳しい人に見てもらおうかと思います。