私について

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

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

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

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

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

ロゴマークに込めた思い

このロゴマークには、新しいトレンドが現れる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を使って、現在は主にバナー画像作成、写真の加工・修正を行っています。

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

Figma

比較的新しいプロトタイプツールであるFigmaを使って、デザインを作成しています。

バージョン自動的に出来る、チームで同時に同じファイルを編集できる、直接遷移図とコメントを作成できる、Slack通知等、デザインを作る上で便利な機能が標準で揃っている為、とても重宝しております。

Google Optimize

Googleが提供しているGoogle Optimizeを使って、A/Bテストを行なっています。

成果を図るための指標は、「数字」以外ありません。Optimizeのテスト結果とAnalyticsの数値分析に基づき、サービスのPDCAを回しております。

Vim

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

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

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

Hyper Term

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

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

標準だと日本語入力が出来ませんが、設定を変更して日本語でも使えるようにしました。

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を積極的に導入しています。

Git

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

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

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

HUGO

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

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

Gatsby

React製の静的サイトジェネレーターであるGatsbyJSを使って、ホームページと、簡単なWebアプリを作る事ができます。

このポートフォリオサイトは、GatsbyJSで作られております。

NuxtJS

NuxtJSとは、Vue.jsで作られた、Webアプリを作る為のフレームワークです。

このポートフォリオサイトは、以前はNuxtJSを使っていました。理由は、分かりやすいHTMLとJSが書けるからです。

最後に

ここまで読んでいただいて、ありがとうございました。最後に私がこれからやっていきたい事を書いて終わりにしたいと思います。

世界最高のクリエイティブチームを作りたい

漠然とした野望ですが、最高のクリエイティブチームを作ってみたいと思っています。

良くも悪くも、最初のデザイナーや0→1のフェースが多かったので、これからはチームを作っていく、もしくは大きいチームで仲間のデザイナーの能力を吸収しながら、成長していきたいと思っています。

企画が作れるデザイナーになりたい

理由は、企画が作れれば、情報設計やビジュアル力も必然的に高まり、更に自分でビジネスを始める事も出来るからです。

SPAのWEBアプリのデザインをもっとやってみたい

理由は色々あるのですが、

  • ネイティブアプリと遜色がない体験設計が出来る
  • ネイティブアプリとは違う設計もできる(レスポンシブ対応等)
  • 逆にネイティブアプリじゃないと出来ないことも知ることができる(カメラアプリ等)
  • スピーディーにPDCAを回すにはWEBが最適なので、今後新規事業はSPAが主流になると思っているため
  • ネイティブアプリとやっている事は同じなので、経験すればWEB・APP両方ともに応用が出来る

CIやブランディング、デザインシステムの構築

  • AnalyticsやOptimizeを使った、高速なPDCAを回す経験は出来たけど、企画や経営・戦略まで練ったCI/ブランディングの経験が少ない事が、弱点になっていると思っています
  • やることが流動的に変わる0→1やベンチャーは、事業のグロースと方向性が定まるまでひたすらデザインを流動的に変えるものなので、やることが固定化されてしまうデザインシステムとは相性が悪かったのではないか?

お問い合わせはこちら