onsen

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

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

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

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

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

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

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

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

onsen

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;で等間隔でならべる。