卍

ロゴのリニューアル 続き

前回はツリーマップ、ラフスケッチをやったので、いよいよPCを使っての実制作に入った。
ここでラフをもとに試行錯誤してゴミを作り、いいなと思ったものは一日経ってまた見て微調整していった。
デイビットエイリー師匠の教えのもと、「ポイントはひとつだけ」「トレンドはファッション業界にまかせる」を重視した。
シンプルにして、あれもこれもと盛り込まない。
トレンドに惑わされないように。長く使えるように。

最終的に2つに絞られた。

上は星(目標)、斜め線(前向き)といったイメージ。
下は小文字の「s」「d」を抽象的な形にして、斜め線、三角、矢印を使ったマークにした。
またネガティブスペースに(<)が入り、「今<将来」「よりよくする」といった意味合いもこめた。

色はもともとモノトーンで行くつもりだから、考えなかった。
星好きとしては上をベースに再考しようか迷ったが、下のほうがツリーマップより抽出したキーワードを形にできたような気がする。
本当は説明しなくても意味が伝わるロゴが良いのだろうけど、
そこまでいけるようにするのが今後の課題かもしれない。

卍

ロゴのリニューアル

ロゴをデザインするということ。を読んで創作意欲が沸いたところで、 自分のロゴをリニューアルすることに決めた。
まずは本を参考にツリーマップから。
著者のデイビットエイリーもツリーマップに2日はかけるとかいてあり、自分もキーワードからどんどん連想するワードを派生させる作業を何日かかけた。
また、手書きのラフの重要性も説いており、そこも参考にしながらすぐにPCの作業に入らないことを意識した。

ロゴ制作はデザイン領域の中でも一番難しく、そして一番面白い仕事だと思う。
苦手意識が本当に強く、いつまでも上達しないのでデザインの仕事を本当に辞めようか悩んでいる所だ。
しかし、なんで苦手意識が治らないのは、手書きでの作業をかなり疎かにしていたかもと、この本を読んで気づいた(今さら・・・)。

ツリーマップに時間をかけたところ、空、星から始まり「前向き」「矢印」「三角」「目標」「丸」
といったキーワードにいきついた。
屋号をsorano designにしたのは、単に宇宙が好きということもあるが、
空を眺めて散歩するのが好きだったり、落ち込んでも上を向こうとか、
自分の好きなこと、自分を鼓舞する意味でつくった名前だ。

また、宇宙(空)という広い視点から原子という小さい視点を見られるクリエイターを目指す、
という意味もある。

本当は社会にメッセージを投げかけるような社名がいいのかもしれないが、
独立して生き残ることがひとまずの命題だったので、
自分へ向けたメッセージが強い名前になった。

そんなこんなで上記のキーワードが出た所で、手書きでロゴを考えた。
今回は気持ちを新たに「手書きで考える」ことに重点を置いた。
苦手意識が少しでもなくなるように。

卍

ロゴをデザインするということ。

前回のデザイナーとして起業した(い)君へ。成功するためのアドバイスーWork for Money, Design for Loveにつづいて、ディビット・エイリーのロゴデザインの本を読んだ。

ロゴだけでなく、デザインを取り組むことについて打ち合わせからアイデアの出し方、
デザインへの落とし方、リリース後について、自身の経験とともに詳しく書いてあった。
海外と日本のデザイン事情は別のイメージがあったが、共通点が多く、
上手く行った例、失敗した例も紹介してくれた。

ひとつのロゴができるまでの過程、オリエンからアイデア、スケッチも載ってあって、
ロゴができるまでの裏側も垣間見えた。

デイビット・エイリー(David Airey)の本は2冊とも読みやすく、
モチベーションも上がる語り口で書かれているため、何げにファンになってしまった。

僕はロゴを作るのが苦手で、本当この時点でデザインの仕事辞めたくなるんだけど、
この2冊で救われたと思っている。精神的に。

ここ数年、この仕事自分にあってないな、
じゃあ何やろう、他にできることないな、
とりあえず今の仕事やるか、みたいなループが頭の中を駆け巡っている状態で、
技術的な部分だけでなく、モチベーションも下がった状態が続いている。

それが完全に無くなったわけではないけど、
彼の前向きなメッセージは心に刺さり、それだけでも十分読んでよかったと思う。

卍

flexboxの使い方

flexboxを使ってコンテンツを横並びにする。
スマホ(640px以下)は縦にするときのコード。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript"></script>
<style type="text/css">
body{
 padding: 0px;
 margin: 0px;
}
.row{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction:column;
  margin: 0px;
  padding: 0px;
}
.row li {
  flex-basis: 15%;
  background-color: grey;
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding: 10px;
}
@media (min-width: 640px) {
  .row{
    flex-direction:row;
  }
}
</style>
</head>
<body>
<ul class="row">
    <li>1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト</li>
    <li>2テキスト2テキスト2テキスト2テキスト</li>
    <li>3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト</li>
    <li>4テキスト4テキスト4テキスト4テキスト4テキスト4テキスト</li>
    <li>5テキスト5テキスト5テキスト</li>
 </ul>
</body>
</html>

サンプルではモバイルファーストの組み方にしているので、
flex-direction: row;で横並び、flex-direction:column;で縦並びにする。
ただandroid4くらいではflex-directionが効かない機種もあるようなので、
古いandroidでも正確に表示したい場合は、divで並べたほうが良い。

justify-content: space-between;で等間隔でならべる。