ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

「前年のデザインはクソだった」と思い続けながら生きること

2016/01/03, cocopon

年の変わり目だからか、ポエムが書きたくなってしまった。

この年末年始で、プライベートなプロジェクトを2つ上げました。そのうちのひとつが、ポートフォリオサイトのリニューアル。

ポートフォリオを更新するたびに思うこと

ポートフォリオサイトを更新するたびに思うのが、「前のデザインはクソだったな(綺麗に言いなおすと、隙があった)」ということ。外観然り、設計然り。「すべてのコンポーネントは再利用できるようにした!宝石のように美しい部品をまた作ってしまった…」なんて惚れ惚れしながら設計したにも関わらず、結局は毎回フルスクラッチで作りなおしていたりするものです。

「前年のデザインはクソだ」と思わなくなったら終わりだ

無論、その瞬間では最大限の力を注いでいます。それでも「前年のデザインはクソだった」と毎年思っていて、この繰り返しはいつ終わるんだろう…なんて途方に暮れるわけですが、優秀な先輩方に話を聞くと皆さん同様の感情を抱いているようで、「人間成長しなくなったら終わり」と言われると確かにそうだなぁ、一生勉強なのだなぁと思う次第です。

個人サイトで振り返ってみた

テーマを少し絞って、Webデザインのお話。工業系出身でまったくデザインに興味のなかった人間が、本人なりに努力をして、ここまでコツコツ積み重ねてまいりました。最近は、信頼してデザインから任せてくれる案件も少しずつ増えてきて嬉しい限りですが、最初のウデマエはひどいものでした。個人サイトを振り返ってみると、その軌跡がよくわかります。

2015-12-27 19.49.18

現存する最古のWebページ。同級生にHTMLなるものを教えてもらって、「Aタグがあるってことは、BタグとかCタグもあるの?」なんて無邪気に聞いていた駆け出し時代。「◯◯のホームページ」「アクセスカウンター」「誰も書いてくれない掲示板」などなど、フルコースで極上の味わい。黒歴史入り待ったなしです。

hkhp_pineapple

少し進化しました。今も変わらずパイナップルが好きです。

dotstars_osx

OS X風。このころはMacに強い憧れを抱いていました。メインマシンのWindowsにリンゴマークの壁紙を設定するなど愚かなことをしていたものです。

dotstars_ink

オープンソースのベクターお絵かきツール「Inkscape」の存在を知り、作風が変わりはじめます。外観重視の日記ソフト「Osciroi」を公開し、UIやグラフィックデザインに興味を持ちはじめたのがこのころ。

dotstars_dot

とはいえ、やっぱりドット絵もいいよね。

dotstars_aqua

こんなデザインのころもあったんだ。すっかり忘れていました。
そういえば、昔「シイラ」というOS X用のブラウザーがありまして、そのサイトがすごくカッコよくて…多大に影響を受けてデザインしていたことを思い出しました。もう跡形もないんだなぁ…もう一度見てみたかった。(Wayback Machine

dotapon_darkalbum

スキューモ(≒リアルなモノ感・質感重視)全盛期。写真風のサムネイルや濃い目の影に趣を感じます。空白の取り方がまだ甘い。

cocoponme_current

ひとつ前のもの。だいぶすっきりしましたが、まだごちゃごちゃ感が残っています。機能性も微妙。

newest

そして現在。余計な要素を取り払い、広く小奇麗に仕上げてみました。セリフ体を採用したのはこれがはじめて。

特に改善したなぁと個人的に思っているのが、広い領域での空白の持たせ方。スマホの世界から外に出た瞬間、画面サイズは広大で可変になります。どのくらい余白を空ければよいのか、どのあたりに置くのが適切なのか…。以前はまったくわからず、何となく置いてみては首をひねる毎日だったのですが、向き合ううちに少しずつ見えてきたような気がしています。センサーの感度が上がって、ぼんやりしていた輪郭が少しずつクリアになってきたような感覚。

技術的にも大幅前進。

CSSの設計はキレイな方だと思っていたのですが、体系的に学び直した結果、そうでもなかったことが判明。今回はBEMを採用してより堅牢になっています。
JSは、altJSとしてTypeScriptを採用。「型なんてなくていいじゃん、不自由だし」と思っていた時代もありましたが、型のある安心感を再認識している昨今です。View層をカバーするライブラリにはReactを採用。状態爆発が起こりにくい設計になっていてすばらしい。
1年ほどコツコツ続けてきたジェネラティブアートの勉強会の成果も所々に差し込んでいます。トップ絵にはシェーダーを使って、これまでの自分には手の届かなかった表現にしてみました。

基本的に自信のない人間なので、いつまでも足踏みしているように見える自分と、遙か先をゆく優秀な方々との差に焦りを感じながら、「また今年も技術を食い潰すのみだった…」なんてネガティブな振り返りをしてしまいがちなのですが、自分なりのペースで前進はしているようです。

ウッ、このブログのデザインもそろそろ直さないと…。

2016年も前進あるのみ

尊敬する周りの方々はそれぞれの「好き」に没頭していて、それはもう比較するのもおこがましいほどの凄まじいエネルギーを注いでいます。そんな人たちはとてもカッコよくて、まぶしい。自分もいつか仲間入りしたいものだ…なんて淡い希望を抱きつつ、たくさん手を動かしながら、まずは自分の「好き」を探しているところです。

とりあえず、来年も「前年のデザインはクソだった」と言えるように。今年もコードとデザインの境界で、ひたすらモノを作り続ける所存です。

お仕事のご相談、お待ちしております。 http://cocopon.me/about/