さがめしみっけ。のデザインについて

こんにちは。

あっという間に12月になりましたね。
12月といえばクリスマスや大晦日…それに忘年会シーズンと、イベント事がたくさんありますね。
出費が多く来月のクレカ請求が恐ろしいもち太郎と申します。

さて、今回は私が携わらせて頂きました、弊社でリリースしたさがめしみっけ。のデザインについて書かせて頂きます。 sagameshi-mikke.tes.co.jp

さがめしみっけ。とは？

サービスについては、弊社社員が書いたこちらの記事で詳しくご説明しておりますので是非ご参照くださいませ😄 blog.tes.co.jp また、今回の記事はこちらの記事に便乗して書かせて頂きました🙇

デザインにあたって

開発メンバーの方々と話合って決めていくことになりました。私の思うようにデザインして良いと言って頂けたので、かなりわがままを聞いて頂きました…！
本当にありがとうございました。

私自身もともと紙面のデザインを行ったことはあるのですが、会社向けでWebデザインを行うのは初めてだった為、手探り状態で行っていました。

初めに開発メンバーと打ち合わせを行い、デザインは以下の流れで進めることになりました。

デザインの方向性の決定

案出し・ラフスケッチの作成

実際に作成してみる

方向性の決定

まず初めに、自分のイメージを伝えるためにイメージを手書きで作成しました。

f:id:manabkr:20181129151120j:plain — サイトのイメージ

一番工数をかけたのは目玉焼きのイラストです。
…という冗談は置いておいて、まずメンバーに伝えたかったのは「雰囲気」。
今回地元・相模原のおいしいお店を紹介する目的があったので、親しみやすさを重視しました。
また、前述の記事でも書いてある通り料理の写真を流し、気になった写真をクリック（タップ）してお店情報を表示する仕組みとなっているので写真を堂々と見せるデザインにすることを目指しました。
文字が汚くて大変恥ずかしい…

最終的にデザイン方向性は手書き風で親しみやすさを出す に決定しました。
続いて案出し・ラフスケッチにて、具体的なデザインを想定して進めていきます。

案出し・ラフスケッチ

おおまかな方向性が決まったところで、以下のデザインをざっくり決めていきます。

サイトのロゴ
サイトデザイン

サイトのロゴ

f:id:manabkr:20181129173348j:plain — ロゴ案

実際にサイトに表示するロゴの案を複数出します。
この時提出した案は①シンプルな手書き風、②色々つめこみタイプ、③キャラ推しタイプの３つ。

①の手書き風…前述の「親しみやすさ」を重視し、既存のフォントを使用して作成をせずに作成することに重きを置いた。
②の色々つめこみタイプは、料理を紹介するサイトなので「さがめしみっけ。」という文字を食材や食器などに見立てた。
③のキャラ推しタイプは、そのままの通りでご飯が入った茶碗のキャラクターを作成し、キャラクターをメインにするロゴ。

カラーで見たい！とお声を頂いた為、この内容で実際にデータを作成し、そのデータをもとにもう一度打ち合わせを行うということになりました。

サイトデザイン

f:id:manabkr:20181130144713p:plain — サイトデザイン案

サイトデザインのラフを作成しました。パターンは3つほど用意をし、「親しみやすさ」を元に作成しました。

パターンとしては、

パターン①…食べることを目的としているので「食卓」をイメージ
パターン②…相模原のお店を紹介するということで「街中」をイメージ
パターン③…お店を紹介する為「お店」をイメージ

サイトの画面遷移と使用するWebフォントなどアイディアをメモしながら作成しました。結果、地元・相模原麻溝公園にある相模原のシンボルの建物を入れたパターン②で決定いたしました。

実際に作成

イメージが固まってきたところで実際にデザインを作成します。

サイトのロゴ

カラーで見たい！とお声を頂いた前回。カラーを用意しました。

f:id:manabkr:20181214175257p:plain — さがめしみっけ。ロゴ

打ち合わせを行った結果、色を見直して「飯感が出てる」ロゴの以下に決定しました。

f:id:manabkr:20181214175431p:plain — さがめしみっけ。ロゴ決定

じつは、さがめしみっけ。の「っ」はエビ、「け」はお箸、「。」は飯を探す虫眼鏡になっています。
「み」も一部ストローになっていたのですが、いやそれは分かりづらいわとお声を頂いたので省きました。

サイトデザイン

「さがめしみっけ。」で相模原感を出すために大事な要素として背景がありました。親しみやすさを意識して手書き風のデザインに。

お料理の写真が街中にひらひら無限に流れていくため、動きを意識して背景をループさせることになりました。

f:id:manabkr:20181214173618g:plain — 背景ループ

~~相模原麻溝公園内に家なんか建ってないよね？~~ 遠近法です。（苦しい言い訳）

このループの境目の作成が微調整に微調整を重ね、非常に苦労しました。

…が！以下のとてもカンタンなHTML+CSSでループの境目を確認が出来ますのでもし同じように境目に苦しんでいる方がいらっしゃいましたら参考にして頂ければと思います。

HTML

<html>
  <head>
    <link rel="stylesheet" href="backloop.css" type="text/css" />
  </head>
<body>
  <div class="bg-image-loop">
  </div>
</body>
</html>

CSS (backloop.css)

.bg-image-loop {
  width: 100%;
  height: 160px; /* 画像の高さを指定 */
  position: relative;
  background: url("background.png") repeat-x 0 0;
  background-size: auto 100%;
  animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */
  margin: 80px 0;
  padding: 0;
}
@keyframes bg-slider {
  from { background-position: 0 0; }
  to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */
}

上記はこちらを参考にさせて頂きました。

onocom.net

おまけ

今回作成した背景が社内で意外と評判で、弊社ホームページの背景と2019年の弊社のカレンダーにもなりました👏
「さがめしみっけ。」で使用した背景に私の上司のお車を入れたアレンジバージョンになっています。

ホームページ

www.tes.co.jp

2019年カレンダー

f:id:manabkr:20181214172427p:plain — 2019年カレンダー表紙

f:id:manabkr:20181214172458p:plain — 2019年カレンダー1月サンプル

頑張って作成致しましたので、もしゲットされた方がいましたらぜひご活用頂けますと幸いです。

感想

個人でデザインを作成する分には好き勝手出来ますが、「会社で」デザインとなるととてもハードルが上がりました。
メンバーでデザインについて話し合ってまとめていくことは、初めての体験だったので非常に勉強になりました。
また、他の方の意見を頂くことで別の視点から物事を捉えられてデザイン作成にもとても助かりました。