ニットを着るイコール君

ニットを着るイコール君

「ニットを着るイコール君」

年明けの初売りにて狙っていたニットを2枚ゲットしました。 その後アウター(これまた欲しかったやつ)も購入し、なんだか幸先が良いです。 そして、もう1枚買おうか悩んでやめたニットをイコール君に着せました。

最近web関係のことは別ブログに書こうかな、と思い別ブログのデザインをしています。 オープンはいつになるか分かりませんが、少しずつ組み立ていますので、そのうちこちらでも宣伝しますね。

凧を揚げるイコール君

凧を揚げるイコール君

「凧を揚げるイコール君」

2017年明けて一発目のイラストは、凧揚げイコール君です。 個人的には喪中なので新年の挨拶は控えるべきところですが、 イコール君には関係ないので、これはイコール君からの挨拶と受け取っていただければ幸いです(笑)

ところで、このイラストとブログを書いているのは実際には2016年なんですが、 このギリギリまで書いている感じが今年の締めくくりには相応しいな、と思いました。 紅白見たりもっと年末感を楽しめよ、って話なんですが、この方が自分らしくて楽しいですね。

今年は「今週のイコール君」を描き始めて、ブログも毎週更新するようになりました。 そして私は文章を書くことによって一週間をリセットさせ、再スタートしていることが分かったので、 自分にとって重要なことだということが分かりました。

2017年も継続して「今週のイコール君」をUPすると共に、何か目標をと考え ていたのですがとりあえずインスタの「いいね」の100を目指そうと思います。 協力よろしくです。

週1でイラストを描き続けて見えてきたこと【今週のイコール君振り返り】

こんしゅうのイコール君振り返り

さて、本日は「今週のイコール君振り返り」を行います。
今年の1月31日から始めた「今週のイコール君」という、 週に1度イコール君のイラストをUPしていく企画を行っていました。

毎週末にブログへUPしたり、平日にはインスタへUPしたりもしていました。 1年を通して気づいたこと、分かったことを書いていきたいと思います。

この記事を書いているうちに、「今週のイコール君を振り返る」よりも、「週1でイラストを描き続けて見えてきたこと」って感じの内容になりました(笑)

 

まず、始めたのが年の始めではなく、なんとも中途半端な1月31日でした。 これが唯一悔やまれます。
それ以外は1年間ほとんどサボらず更新し続けることができました。 友人の結婚式に出ていた日を覗いては更新できたていたはずです。 ちなみに、その週は友人に渡すイラストを描くことを優先しました。 まぁ友人に渡したイラストもイコール君なので、厳密にいうとイコール君は描いていた(笑)

今後も旅行など描けない理由があるかもしれませんが、基本は週に1度更新していきたいですね。

 

描き出したキッカケは、私が好きなイラストレーターさんはだいたいSNSでイラストをUPしていたから、です。 私は好きなイラストレーターさんができた時はすぐにSNSをチェックしてフォローするのですが、 やはりイラストがUPされると嬉しいものです。
そんな風に、どこかで私のイラストを見た方が私のSNSまでたどり着いた時に、フォローしたくなるような イラストをUPしなくては!と思い立ちました。

 

しかし毎日イラストを描いてはSNSにUPしているイラストレーターの方は本当にすごいと思いました。 私は週1ですらキツイと思う瞬間があって、このイラストを描くために友人からの遊びの誘いを断ったりと、 こんなゆるいイラストを描いているわりにはストイックに向き合っていました。
なぜそこまでして描いたのかというと、別に仕事でもないしそこまでしなくても…と言われてしまうかもしれませんが、 理由はただひとつで、描ききることで見えてくる世界があるはずだから、という理由です。 って何かっこつけてんだよ、とツッコまれそうな理由ですが。場合によっては引かれるぐらいの(笑)

 

私は平日は仕事としてwebデザインをやっています。
イラストとwebデザインは繋がっているような感じなので、どちらの勉強をしても片方のためになることもあります。 例えばPhotoshopでイラストを描いて、ブレンドモードを使って合成を行うと、webデザインをした時の写真加工にも 役に立つことがあります。ソフトの構造や仕組みを理解していれば、応用も利く、という感じです。

 

毎週毎週PCに向かって描いていると、少しずつ描くのが早くなったり、イコール君の顔が安定してくるのも分かりました。 最初のころはまるで別人みたいになっていたので(笑)今でもなかな描けない時もありますが、何度も手を動かしていると整ってきます。

 

で、描ききって何が見えたの?よという話ですが、 一番大きいのは自分に自信がついた、ということです。
1年も続けられると思っていなかったので、驚いたことと、嬉しさでいっぱいになりました。 正直logジャーナルを制作している期間はキツく、週末ずっとPCに向かっていることもありました。 好きなことなのに辛い!みたいなこともよくありました。でもここまでくると、ほんとやってよかったなーと思います。

 

イラストを描くスピードも格段に早くなりました。 友人の結婚式の際も、イラストを計2点描きましたが、制作が詰まっていたの でめっちゃハラハラしました。 式で歌う曲作りやその練習もあり、かなり切羽詰まった状況でしたが、 なんとか期日までに間に合わせました。
どんなにいい作品を制作しても期日に間に合わなければ意味がない、という師匠からの教えもあり、 息切れ気味で完成させたのを覚えています。

 

そんなこんなで、大変な時もありますたが、ホントにやってよかったです。 来年からはちゃんと1月しょっぱなから描きます!

本当はこの後にお気に入りのイラストについて書きたかったのですが、記事がめっちゃ長くなったので、 「振り返りvol.2」を作成します…。

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】デザイン編

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】デザイン編

今年1年の超個人的なトレンドを振り返るべく、連日透投下しているシリーズ、 【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】です。 全て書き終わったら下の目次のリンクをちゃんとつなげますね。

 

  1. 今年個人的にトレンドだったフリーフォント
  2. 今年個人的にトレンドだったデザイン
  3. 今週のイコール君振り返り
  4. (今年よく実装したコーディング・マークアップ

さて、本日は「今年個人的にトレンドだったデザイン」の回です。 昨日はフォントについて書きましたが、フォントはデザインによって左右されますので、 今回デザインについて思い出してみると、なぜそのフォントをチョイスしたのか、も分かってくると思います。

数年後に、あの頃はこういうデザイン好きだったなーと自分が思い出せるように、書いていきたいと思います。

 

f:id:logequal:20161224205103p:plain
f:id:logequal:20161224205104p:plain

境界線のデザイン
今年は、境界線の太さ、細さを意識したデザインをよくやりました。
太めにすると、ポップなデザインとの相性がよく、締りも出ます。 それに対し、細めのラインは繊細なイメージになり、シンプルなデザインに合います。
私は特に太めのラインをよく使ったイメージがありますが、 全部を太めなボーダーばかりにするのではなく、エリアによって太さは変えます。 当たり前といえば当たり前ですが、強弱をつけてデザインにメリハリをつける感じです。ボタンの枠線や影にブラックを使って強調させるデザインもよくやりました。

 

カードレイアウト

カードレイアウト
カードUiもよくデザインしました。 下記で紹介するマテリアルデザインではよく登場するUiです。
すっかり定番化してきたな、と思っているのですが、使いやすいのでほんとに今年はよく使用しました。 2015年から既に登場はしていましたが、2016年により頻度が加速しました。
レスポンシブサイトとも相性が良いことや、googleが採用しているUiですので、ユーザの操作性も分かりやすく、取り入れやすいUiだと思います。

 

マテリアルデザイン

マテリアルデザイン
上記でも少し触れたマテリアルデザインですが、Googleが提唱するデザインです。
Googlewebサービスやアプリで取り入れられているので、見慣れたデザインといえるかもしれません。 マテリアルデザインは要素の重なりを物理的に捉えたものです。 そのことから影が重要となってきました。その他定義がありますが、その辺りは省略します。

数年前まではフラットデザインが流行っており、私も実務ではよくデザインしました。 フラットデザインとマテリアルデザインは似ているところもありますが、 フラットデザインは影やエフェクトの効果を極限まで削ぎ落とし、 よりシンプルにしたもの、と捉えています。

そしてこれは再三語られてきたことなので、ここでは言及しませんが フラットデザインはあまりに削ぎ落とした要素が多すぎたために、 最終的には多少の影は付けてもよし、みたいな流れになりました。
その時の見た目がマテリアルデザインと似ていますが、なんというか似て非なるもの、 と思っています。

2016年はフラットデザインから少しずつマテリアルデザインに移行した年でした。 2015年の終わり頃までは、上記のような「似て非なるもの」のデザインをしていた気がします。

2016年からは私の所属する部署のweb課内にて、スマホサイトの制作に重きを置くようになりました。 それはスマホサイトの利用者が多いことからそうなったのですが、 スマホサイトの重要性が高まってきた1年でした。

近頃はスマホサイトにもアニメーション要素を入れたりとアプリとの境界線が徐々になくなってきました。 もちろんアプリのような複雑な動きはできませんが、できるだけ説明をなくして、ユーザーに操作方法を分かってもらえるか、という考えから取り入れられたものですが、ユーザビリティを考えることは昔から変わっていませんね。

 

私は将来的にアプリのデザインをする可能性もありますが、今のところはwebサイトでできることを最大限に行っていきたいと思っています。

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】フォント編

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】フォント編

 

今年もあと少しですね。
というわけで、一年の振り返りをしてみたいと思います。 こういうのするの初めてだなー。
全3回(4回かも)に分けて執筆します。

  • 1.今年個人的にトレンドだったフリーフォント
  • 2.今年個人的にトレンドだったデザイン
  • 3.今週のイコール君振り返り
  • (4.今年よく実装したコーディング・マークアップ)

ってな感じで執筆していきます。 4に関しては書けたら書きたいところですが。大丈夫かな…
では、今回は「今年の個人的にトレンドだったフリーフォント」について

 

源柔ゴシック

源柔ゴシック
ではでは、まず日本語フォントから。今年よく使った、と書きましたが通年でよく使うフォントです。
有名すぎるフォントで今更感ありますが、今年は改めてこのフォントの良さを感じました。タイトルなんかをデザインする際にかなり役に立ちます。 紙媒体制作時は1番このフォントを使っています。
web制作の際はどうしてもfont-familyでメイリオヒラギノ角ゴ辺りの設定になってくるので、 1番というわけにはいきませんが、タイトルを画像にする時なんかはよく使います。

そして、少しカッチリした感じやビジネス色を出したい時は源柔ゴシックとセットの源真ゴシックを使用します。(厳密にいうとセットではないですが) こちらは源柔ゴシックの角が丸い感じに対し、ベーシックなゴシック体の見た目をしています。

 

Axis

Axis
そしてここからは英文フォントについて。こちらのAxisは文字間にかなりバラつきがあるので、カーニング必須、って感じではありますが、その手書き感が気に入っています。 カッチリしたデザインには合いませんが、ポップなデザインや可愛いイメージにはピッタリです。 Axisの数字もよく使いました。

 

f:id:logequal:20161223223403j:plain

AQUINO
AQUINOもよく使いました。 上記のAxisと似ていますが、AQUINOの方がちょっと太めです。 こちらは大文字しか使えないので、小文字を使いたい時はAxisにして、使い分けていました。 数字もありませんので、使いたい時はAxisを使っています。
このフォントの面白いところは、Oだけ泡のようなものが付いいる点です。もちろん付いていないバージョンもあります。 海のイメージがあるからだとは思いますが、こういうユーモアがあるのって面白いですね。Qも特徴的でカワイイです。

 

Montserrat

Montserrat
そして最後に、後半の方でよく使ったなーと思うフォントです。
Montserratはgoogleフォントですので、webフォントが使えます。
このフォントを見つけたきっかけは、サイトの制作時に、チェックボックスにチェックを入れたら数字がカウントする、というスクリプトを実装したのですが、 その際に表示される数字で何か分かりやすいwebフォントないかなーと検索した時に見つけたものです。

可読性もよく、そのままフォントをダウンロードしてその後のデザインにも取り入れました。 webフォントがあると、サイトの大見出しや中見出しに画像ではなくテキストを入れることができるのでありがたいです。

 

以下、上記のフォントを組み合わせて作ったタイトル集です。
log=の人気曲「もぐらくん」を使って適当にタイトルを付けました(笑)

f:id:logequal:20161223213418p:plain

全部テキストとcssでできるタイトルです。
レスポンシブサイトの制作時に使用しました。 横線は確かボーダーに疑似要素を用いて整えた気がします。 しかしその時は可変ではなかったので、1つずつチマチマサイズを変えていました。 つい最近コリスさんかどこかで可変タイプのスニペットを公開されていたので、 今後可変にしたい時はそれを参考にしようと思います。

 

f:id:logequal:20161223221818p:plain

画像で制作したパターン。
英字の部分をAxisで入力し、境界線を付けました。

 

f:id:logequal:20161223213420p:plain

少しのポップさと、若いこ向けのターゲット層だったので、装飾を足しました。 横の◯が雲だったりウサギの耳だったり色々言われましたが、言われるものが可愛かったのが面白かったです。 (特に何というわけではない)

 

f:id:logequal:20161223213424p:plain

少し幅を取るので、1ページが長めの縦長のサイトになると邪魔と言われました(笑)確かに。 なので短めのページでタイトルも1つ2つしかない時には目立って良いかな?と思います。

 

さて、フォントについて書きましたが、 今回選んだフォントたちは今年新たに出てきたフォント、というわけでもなく、 ほんとに個人的に今年よく使った、というだけです。
その時々でデザインのトレンドだったり、ページのデザインのイメージによって使用フォントは変化します。
私は所謂インハウスデザイナーというやつで、なかなか極端にイメージの異なるデザインをやることはないのですが、 それでも自分の中でのトレンドというものがあって、色んなデザインに挑戦してみたい、というのもあります。 また来年もステキなフォントに出会えるといいな、と思っています。

サンタイコール君

「サンタイコール君」

「サンタイコール君」

多分来週は描けないだろうなーと思って1週早めに描きました。 当日はインスタにUPします。

さて、今週は久しぶりのライブです。 このライブ以降はしばらくライブ活動を休止する予定ですので、ぜひお越しください。

2016-12-21(wed)
@扇町para-dice
tsubu
内田修人
cue
フラフープス
log=
時間:18:30/19:00
料金:¥1000/¥1000 (+1drink¥500)
問い合わせ先:06-6357-4681

コーヒーミルを回すイコール君

「コーヒーを入れるイコール君」

先日、ブルーボトルコーヒーにて購入した豆を挽くためにコーヒーミルを購入しました。 やっぱり挽きたては美味しくて、香りも良いですね。
時間がある時にしかできないですが、ほんとに買ってよかったと思います。

「コーヒーを注ぐ注ぐイコール君」

そういえば少し前にこのお湯を注ぐイコール君も描いたのですが、徐々にコーヒーグッツが集まってきて嬉しいです。 美味しいコーヒーの入れ方講座的な教室通いたいなー