見出し画像

ショップのロゴを作ってみよう


前回は商品ページの作成まで行いました。

今回はお客さんが自分のホームページにきた時に目にするショップのロゴを作成します。

画像1

画像2

こんなやつです。これらはプロのデザイナーが作っているので視認性とか諸々すごく良くできてますね。

流石にこのレベルになるとお金がものすごくかかりますが、

今回はタダで作れる方法を紹介します。

hatchfulというホームページがあります。

スクリーンショット 2020-03-21 11.28.25

シンプルながらわかりやすいロゴを作成できるツールです。他のECサイトを運営している方にもおすすめです。

Get startedをクリックします。

スクリーンショット 2020-03-21 11.32.30

こんな画面になりますのでご自身の売りたい商品のジャンル・カテゴリーを選んでください。

今回はHome & gardenをクリックします。

スクリーンショット 2020-03-21 11.33.46

ロゴの雰囲気を選びます。3つまで選べます。

スクリーンショット 2020-03-21 11.35.16

ここでみなさんのECサイトの名前を入れていきます。今回はshopifyドメインの「sun rabbit」を入力します。下にオプションでスローガンがありますが今回は記入しません。

スクリーンショット 2020-03-21 11.37.04

これから作るロゴをどこに使用するか選択します。

スクリーンショット 2020-03-21 11.37.53

はい、hatchfulが自動で生成したロゴが出ました。

いいなーって思ったロゴをクリックすると

スクリーンショット 2020-03-21 11.39.24

こんな画面になります。フォントや色を変更することもできます。

スクリーンショット 2020-03-21 11.42.14

フォントと色を変更して、Nextを押すとこのような画面になりました。Download Logoをクリックします。

するとアカウントを作成してクレメンスと案内が出ますのでメールアドレスを記入します。

スクリーンショット 2020-03-21 11.47.29のコピー

入力したメールアドレスにロゴのzipファイルが送られてきます。

スクリーンショット 2020-03-21 11.49.44


スクリーンショット 2020-03-21 11.50.32

色々なメディアで使用できるロゴになって送られてきました。


次にshopifyのテーマページの編集をしていきます。

スクリーンショット 2020-03-21 11.52.41

オンラインストアのテーマをクリックし、カスタマイズを押します。

スクリーンショット 2020-03-21 11.54.10

まだ何も編集していません。

ここのヘッダーをクリックします。

スクリーンショット 2020-03-21 11.54.56

「ロゴ画像を選択する」で先ほどzipファイルで送られてきたファイルを挿入します。

そのまま入れると

スクリーンショット 2020-03-21 11.56.02

こうなってしまい作画崩壊を起こしますので編集していきます。

photoshopや画像編集ソフトが使えない方はcanvaというオンライン上で画像編集ができるサイトをおすすめします。

スクリーンショット 2020-03-21 11.58.19

これはinstgramとかfacebookとか投稿する画像の編集もできるのでおすすめです。画像の切り抜きなどは有料プラン(30日間体験版あり)で可能になります。

そのまま使うとロゴの背景が白くなってしまうので切り抜きをします。

画像19

pngファイルにすると背景の白色が無くなります。

スクリーンショット 2020-03-21 12.13.18

一個上の画像をロゴの画像に挿入するとこんな感じになります。さっきよりかはましですが、後ろの紺色が変ですね。


スクリーンショット 2020-03-21 12.15.48

テーマ設定を押し、色をクリックします。

スクリーンショット 2020-03-21 12.16.31

ヘッダーの色を編集します。

スクリーンショット 2020-03-21 12.17.31

こんあ色にしてみました。

保存をします。

これでロゴは終了です。

#副業 #転売 #ECサイト #ネットショップ

この記事が気に入ったらサポートをしてみませんか?