How Come?

R's Portfolio Website

My Avatar Me

It's me!

ようこそ。 フロントエンドエンジニア Rのポートフォリオサイトです。 私は考えることが好きで いつでもどこでも 「なんで?」 が頭の中に浮かんでいます。 "How Come?" この単語をタイトルにしたのは、 ドメインとしての独自性が 高いから。 "Develop" 自分が知らなかったことを知って 受け入れるか、 もしくは考えつづけたい。 "Create" サイトトップのアニメーションは、 家の絵をIllustratorで なんとなーく描き始めたことが きっかけで生まれました。 考えることが好きな私が、 考えるよりも先に手が動いた! "howcome.dev" 自分の生活を開発して 創造することは 信じられないくらい とっても楽しい!

Welcome to my portfolio website. My web name is R. I am a frontend engineer. I like to spend my time on thinking. Every time, Everywhere, "Why?" keeps popping up in my head. "How Come?" The reason why I named this title is its uniqueness as a website domain. "Develop" I'd like to explore things I never knew, to accept, or to grow thoughts about it. "Create" When I realized it, I was starting to draw a house with Illustrator. I just followed my heart. As a result I created the site top animation. I do like thinking, but I moved my hands without thinking! "howcome.dev" It's incredibly so much fun to develop and create my life!

ABOUT
私について

「疑問」・「家」・「人」
ぜんぶ好き。好きになりたいから好き。

How Come?

×

なんで?が好き。
大学時代に考えることが好きになりました。
ひとつのきっかけは、講義でジンメルのゲシュタルトを安定させる枠の機能性について学んだことです。
枠があることで人は安心する。
額縁の意味を考えたことで、「ブランド」、「レッテル」、「固定観念」といった
普段目にする身の回りの事象を俯瞰的に見られるようになりました。

冒頭のアニメーションでは、額縁をborderで表現しています。
自分の成長過程を象徴する重要なものです。

Home

×

家が好き。
今までは嫌いでした。私には帰るふるさとがなかったからです。
最近、「ただいま!」と言える場所と、「おかえり!」と言ってくれる人ができました。

トップページの写真には、私の大切な友達、私の家を作ってくれた人たちを飾りました。
こんな居場所があるのだったら、もうすこし家を好きになってみてもいいかもしれない。
この背景のグラデーションは、彼らと見たある日の夕焼けの色の再現です。

Human

×

人が好き。
話がしたい。思いを共有したい。
私の人間性を知ってもらいたい。あなたの人間性を知りたい。
尊重し合いたいから。

同じ倫理観を持った方々と働きたいです。
この思いから、単なるポートフォリオサイトではなくMy World展開のサイトに発展しました。

愛すべき人・才能をサポートする仕事がしたい。

お客さんの目的、目指すゴール、理念を共有しながらみんなで作りたい。
経営者・デザイナーの視点を理解できるエンジニアになりたい。

WORKS
つくったもの

How Come?
このサイト
デザイン
コーディング
期間:5週間〜たえずたのしく開発中 サイトトップのアニメーションをもう一度見にいく
Web Animations API, Affinity Designer, Affinity Photo, Affinity Publisher
おうちをつくろう
デザイン
コーディング
期間:建設中
仮想空間的模様替えを楽しみたい。
パズルにするかどうするか。 おうちを見てみる
Canvas, Create.JS, Affinity Designer, Affinity Photo, Affinity Publisher
Germany Walk
(やや)架空の
ドイツ観光情報サイト
デザイン
コーディング
期間:10日 Germany Walkを見てみる
PHP, Photoshop
アフィリエイトバナー制作
LP2枚をもとにバナー6個を制作
期間:3日 RESUMEサイトへ飛びます(鍵つき)
Photoshop
ダウンロード特典の
PDF・バナー制作
ペルソナ設定
構成
デザイン
コーディング
PDF全9ページ
バナー2個
期間:1ヵ月 RESUMEサイトへ飛びます(鍵つき)
Photoshop, Illustrator, XD, HTML, CSS
ネイルサロンサイト
新規立ち上げ
TOPと下層2ページコーディング
Google Map設置
期間:1ヵ月 RESUMEサイトへ飛びます(鍵つき)
HTML, CSS, SCSS, Photoshop, Bitbucket
レジ画面デザイン
カンプ作成
期間:1日 RESUMEサイトへ飛びます(鍵つき)
Photoshop
JMS小倉東京オフィスさま
サイト全面リニューアル
ペルソナ
カスタマージャーニーマップ
ワイヤーフレーム
カンプ作成
コーディング
レスポンシブ化
WorkPress組み込み JMS小倉東京オフィスさま サイトに飛びます
HTML, CSS, SCSS, Git, SourceTree, XAMPP, GitHub, WordPress, Photoshop Illustrator, XD

EXPERIENCES
WEB業界に入ってから
いままで

ゲームアプリ制作会社
コーディング
2019/03 ~ 2019/05
ブラウザゲームの開発でコーディングを担当。
WEB制作会社
デザイン&コーディング
2019/01 ~ 2019/03
ネイルサロンの新規サイト立ち上げ、WEBシステムのレジ画面のデザイン、コーポレートサイトのリニューアルデザイン制作、ダウンロード特典の冊子デザイン等を行う。
ECサイト運営会社
ECサイト更新・運用
2018/10 ~ 2019/12
大手アパレルブランドのサイトのバナー更新やLP制作、EC-CUBE、 WordPressの投稿ページ更新、Mail Publisherを使ったメルマガ配信を行う。
WEB制作会社のインターン参加
LP&バナー制作
2018/06 ~ 2018/07
LP制作とバナー制作を行い、実務の基本を学ぶ。
JMS小倉東京オフィスさま
サイト全面リニューアル
フェリカテクニカルアカデミー
WEBサイト制作科在籍
2018/05 ~ 2018/07
Adobeソフトの使い方、HTML、CSS、JavaScript、PHP、WordPressテーマ作成を学ぶ。