Vue.jsでWebサービス開発 ⑪サービスのロゴを作成

目次

GitHub

今回の作業が終了した後のブランチはこちらです。

https://github.com/skliber/excursion-demo/tree/logo

サービスロゴ

ロゴを作るにはいくつか選択肢があります。

  • ソフトを使って自分で作る。
    PhotoshopやIllustratorを持っていればそれで良いし、Windowsなら標準のペイントでも良いし、そのあたりの無料ソフトでも良いと思います。

  • ロゴ作成サービスを利用する。
    「ロゴ 作成」などで検索すれば多くのサービスが見つかります。
    ただ、作ったロゴを無料で使用するにあたっては制限があるのが大半で、サイトにロゴのクレジットを明記する必要があったり、サイズが小さい画像しかダウンロードできなかったりします。
    これらの制限はお金を払えばなくなります。

  • 誰かに作ってもらう。
    クラウドソーシング、スキル売買サイトなどでお金を払って誰かに作ってもらいます。

作成

今回はCLIP STUDIO PAINTを使用して作りました。5000円のライセンスを買えばずっと使えるお絵描き用のソフトです。
これを選んだのに深い理由はなく、単に持っていたからです。
私以外でWeb制作に使う人なんて見たことありませんが、ロゴぐらいなら十分作れます。

良さそうな英語フォントでサービス名を書いて、文字色を変えるだけでそれなりに見えます。
フォントのライセンスにだけ注意しましょう。
EXCURSIONの色は#3EE8C4です。

Oの代わりに入っているあのアイコン

本番稼動しているEXCURSIONのロゴにはOの文字の代わりにアイコンが入っていますが、あれはNoun Projectから1.99$で買った物です。

作成済みのロゴ

作成済みのロゴはこちらです。

src/assets/logo.png GitHub

Vue.jsでロゴを表示

ロゴを作成したらサービスに表示しましょう。
このサービスではHome画面の上部とヘッダーメニューの左側に表示することにします。

手順

  1. デフォルトで配置されているsrc/assets/logo.pngのVue.jsロゴを削除します。

  2. 作成したロゴをlogo.pngにリネームしてsrc/assetsに配置します。

  3. src/components/Home.vueを以下のように変更します。

  • template 以下を追加
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <img src="@/assets/logo.png" id="logo">
      </el-col>
    </el-row>
    

el-row type=”flex” justify=”center” & el-col :xs=”24” :sm=”24” :md=”12” :lg=”12” :xl=”12”

レスポンシブかつ中央に表示します。

  • style
    #logo {
      width: 100%;
      height: auto;
      margin-top: 1em;
      margin-bottom: 4em;
    }
    

width: 100%; % height: auto;

レスポンシブにするための設定です。

margin-top & margin-bottom

画面上部にぴったりくっ付いているのと、キャッチコピーと近すぎるのをどうにかするため、上下のマージンを設定して間を空けます。

  1. src/App.vueを以下のように変更します。
  • template
    <li><span id="nav-logo" @click="first">EXCURSION</span></li>
    
    <li><img src="./assets/logo.png" id="nav-logo" @click="first"></li>
    

img

spanで仮置きしていたところをimgに書き換えます。

  • style
    #nav-logo {
      width: auto;
      height: 100%;
    }
    

width: auto; % height: 100%;

レスポンシブにするための設定です。Home画面とは違って、高さをヘッダーに合わせて幅をautoにします。

  • style

    ul.main-nav li {
      color: rgb(104, 112, 121);
      height: 55px;
      padding: 0px 20px;
      cursor: pointer;
      line-height: 55px; /* 追記 */
    }
    

    line-height: 55px;

    ここで右側の「保存一覧」と「ログアウト」のメニューの高さを調整しておきます。

確認

$ npm run devを実行してhttp://localhost:8080/を開いてみましょう。
ここまでできればHome画面とヘッダーはそれぞれこうなります。

  • Home.vue

  • ヘッダー

next

サービスロゴを作成して表示しました。
次回はシェアボタンを作成します。