私について

東京都渋谷区在住。静岡県出身。酪農家からデザイナーになった変わり者です。

幼少期からコンピューターが身近にある環境だったので、小学生の時にはコンピューターに夢中になっていました。Webサイトを見たり、当時流行っていたFlashを自分で作ってみたりしました。

得意分野としては、新規・既存問わず要件を定義して、UI / UXを考え(スマホ前提の場合はペーパープロトからのデザイン。PCベースの場合は、ワイヤーフレームからデザイン・スマホ設計)、実際に実装、高速でPDCAを回すのが得意なタイプのデザイナーです。

ロジカル(垂直思考)も大事ですが、ラテラル(水平思考)の概念も取り入れていきたいと、日々頑張っています。

好きな事は、「料理」「お菓子作り」「お絵かき」「プログラミング」「サイクリング」

デザインとは何なのか?

この問いを常々考えています。なぜなら、この答えの問いに、自分がデザイナーとしてどういう人間になりたいかの答えが出ていると思っている為です。

この答えを出すために、一度「デザイン」についての語源を考えることにしました。Wikipediaには、

  • デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。
  • また、デザインとは具体的な問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

と書かれています。

つまり、「あらゆる改善を定義し、解決するための設計を考え出し、見た目のレイアウトに落とし込む職業」と捉える事ができるのではないかと、私は考えました(個人的にネガティブな言葉があまり好きではない為、「問題」を「改善」と置き換えました)。

つまり、「改善定義・設計・見た目」の3つで成り立っているのではないかと思っています。

一般的には、この工程は上流工程〜下流工程と分かれるのでしょうか?ですが私は、この3つは本来上も下もなく、全て同時並行で進めた方がいい工程だと思っています。「ウォーターフォール型」ではなく、「アジャイル型」の思考で進めていけば、この3つを全て同じ人間が行えます。

  • GAで数値落ちている?原因はここかな?クリエイティブを変えた瞬間に落ちたからな
  • 人手足りないから、クリエイティブを外注しよう。予算これぐらいで、仕様書はこれで、デザイナーはこの人で行くか
  • 写真のクオリティが落ちている。原因はおそらくガイドラインがないからだ。ガイドライン作るために、クリエイティブの方向性を定義しよう
  • このサイトを作るには、この実装環境がいいな。なぜなら〜
  • 元気な印象を与えたいから、メインカラーは進出色で活発なイメージのオレンジがいいな。でもサブカラーは、オレンジを引き立たせるために、補色の水色を使おうかな
  • 下タブの方が親指で全部操作できるから、メニューは下がいいかな?でも、このページはメニューよりこの機能を使わせたいから、ページ毎にUXの整合性が取れるデザインにしたいんだよな〜

という様なことを、考え・実行し・見た目に落とし込む事が、私にとってデザインではないかと思っています。

上記のようになれば、もはや「デザイナー」や「ディレクター」、果ては「エンジニア」という職業の垣根すら、必要がなくなるかもと思っています。興味があれば他の工程の仕事もこなし、4つ5つと思考を並列で走らせられる人間になりたいと思っています。

「改善定義・設計・見た目」がデザインなら、デザインが進化したその先には、「いつでも、どこでも、誰でも、様々な仕事をする事ができる」ようになるのではないかと思っています(「ユビキタスの進化」というらしいです)。

「デザイナー」という職業が出てきたのは、実は歴史上から見たらつい最近です。それまでは、誰でもデザイナーでした。厳密にいうと、1920年代以降デザイナーという専門職が出来てきました。

19世紀までの日本では、誰でも家を作り、誰でも食事を作り、誰でも道具を作り田畑を耕し、誰でも自作でものを作り売っていました。江戸時代の働き方が「パラレルキャリア」と言われるのも頷けます。

今の時代、デザインが発達してきて、昔のように、誰でも1人で何かを作れるようになってきています。

  • 誰でも無料で、Unityでゲームが作れる
  • 誰でも無料で、Figmaでプロフェッショナルなプロトタイプが作れる
  • 誰でも無料で、フレームワークを使ってWebサービスを作れる

この「いつでも、どこでも、誰でも、何かを作ることができる」事が、デザインの本来の姿であり、未来であると、私にはしています。

ロゴマークに込めた思い

このロゴマークには、新しいトレンドが現れるWeb業界において、常に最新の情報をキャッチアップしていきたいという思いを込めました。

3本の線は、日々枝分かれで生まれ続けてくる、最新の技術・トレンドを表しています。Webの世界は、まるでインターネットという大樹に、枝分かれで日々新しい技術・トレンドが生まれてくると思っています。その様子を、このロゴマークの形に込めました。

また、私がプログラミングにも興味がある為、Gitのロゴマークを少し意識しています。


配色にもこだわりました。私は「赤」の色をとても大切にしています。それには、主に以下の理由があります。

  • 私のパーソナルカラーが、夏を表す「Summer」であり、夏には情熱的な赤がふさわしいと思っている為
  • 私の誕生日は「7月」で、7月の誕生石が「Ruby」だから

配色は、#ED2F78#EA352Dのグラデーションを使っています。これは、赤を代表する宝石のRubyでも、最上級の宝石である「Star Ruby」を表しています。


3本の線の先端が丸・三角・四角なのは、ありとあらゆるデザインは、丸・三角・四角の図形で成り立っている。と思っている為です。

その為、このポートフォリオサイト自体に、丸・三角・四角の図形を豊富に使っています。

よく使うツール

Adobe Illustrator

古くからあるAdobeのドローソフトである、Illustratorを使って、現在は主にアイコンを作っています。

紙媒体の場合は、CMYKによる色補正も行います。

素材がない場合は、ほとんどIllustratorで1から素材を作っています。

Adobe Photoshop

古くからあるAdobeのフォトレタッチツールである、Photoshopを使って、現在は主にバナー画像作成、写真の加工・修正を行っています。

素材をそのまま生で使うことはほぼない為、人物の切り抜きや、素材作成に主に使っています。

Adobe XD

Adobeが提供しているプロトタイプ作成ツールであるXDを使って、現在は主に画面のレイアウトをデザインしています。

プラグインの実装から、カンプ、デザインスペックまで完備している為、とても重宝しています。

Adobe Animate

Adobe Animate(旧Flash)を使って、稀に動画を作成しています。

高度な動画を作るわけではなく、静止画のみでは伝わりにくい箇所を補うために、簡単なモーションと紙芝居形式のアニメーションを作ります。

作ったアニメーションは、コードに変換して、必要な部分だけ抜き出して、実装しています。

Vim

コーディングは、主にVimを使って実装しています。

.vimrcの基本的な改造ができるほか、プラグインをインストールして、自分独自のVimに作り直しています(ツールはdeinを使用)

基本的にマウスは使わず、全てキーボード操作で行っています。

Hyper Term

ターミナルは、主にHyper Termを使っています。

テーマを使って自由に見た目を変更できるほか、プラグインを入れて、自分独自のターミナルに作り直しています。

しかし、日本語入力をサポートしていない為、GitのCommitで日本語でメッセージを入れる場合は、Mac標準のターミナルを使っています。

netlify

正確にいうとWebサービスですが、GitのRepositoryを監視して、自動的にDeploy、公開までワンストップで行ってくれる、netlifyを好んで使っています。

独自ドメインのSSH対応や、Formの設置までサポートしてくれる為、とても重宝しています。

このポートフォリオサイトも、netlifyを使っています。

よく使う技術

HTMl5

Webの標準言語である、HTML5を主に使っています。

メンテナンス性が高く、拡張性が高いコードを書くようにしています。

なので、上記2点の観点から、生のHTML5を使うより、フレームワークや静的サイトジェネレーターを使って、実装することが多いです。

CSS3

Webの装飾の標準言語であるCSS3を使って、デザインの装飾を行なっています。

メンテナンス性が高く、拡張性が高いコードを書くようにしています。

なので、上記2点の観点から、生のCSS3を使うより、後述のSassやPostCSSを使って、実装することが多いです。

Sass

CSSの拡張メタ言語である、Sass(Scss仕様)を使って、デザインの装飾を行なっています。

実務で使う場合は、普及率から言ってこちらを使うことが多いですが、自分で作る場合や、新規のプロジェクトの場合は、後述のPostCSSを導入することが多いです。

PostCSS

Node.JS製のCSSフレームワークである、PostCSSを仕様して、デザインの装飾を行います。

トランスパイルの速さ、プラグインによるカスタマイズ製などに惹かれて、新規で作る場合は、PostCSSを積極的に導入しています。

Ruby on Rails

Ruby製のフレームワークである、Ruby on Railsを使用することができます。

しかし、ほぼerbによるデザイン実装、Scssによるデザイン装飾が主な仕事でした。

最近はUdemyでRailsを使い、Webアプリを作る学習をしております。環境構築、Herokuで公開することは可能です。

Git

ソースコードのバージョン管理ツールである、Gitを使用することができます。

ソースコードだけでなく、デザインデータの管理もGitを使用しています。

GUIを使わず、全てターミナルで操作しています。

私個人のGithubのアカウントも、公開しております。

Jekyll

Ruby製の静的サイトジェネレーターである、Jekyllを使って、ホームページを作ることができます。

複雑な演算を行わないコーポレートサイトは、以前はJekyllを使って制作していました。

HUGO

Go言語製の静的サイトジェネレーターである、HUGOを使って、ホームページを作ることができます。

Jekyllより多機能で、かつ生のHTMLとJavaScriptをそのまま使いまわせる汎用性から、好んで使用しています。

このポートフォリオサイトも、HUGOで実装しています。

学習中の技術

Gatsby

React製の静的サイトジェネレーターである、Gatsbyを現在学習しております。

個人的に作っている勉強会のブログは、Gatsbyで運営しております。

VuePress

Vue製の静的サイトジェネレーターである、VuePressを現在学習しております。

Nuxtよりコンテンツ生成に特化しているのが特徴で、Markdownの記法を標準でサポートしています。

Firebase

Googleが提供している、高機能ホスティングサービスである、FIrebaseを現在学習しております。

Firebase Authenticationを使って、認証機能を導入することはできました。