About

Shogo Tabuchi田渕 将吾

  • Art Direction
  • Web Design
  • Frontend Development

Profile

田渕 将吾
1982年生まれ。学校法人・専門学校 HAL 大阪校を卒業後、都内WebプロダクションにてWebデザイナーとして就職。その後、AID-DCC Inc.にてアートディレクション、Webデザイン、空間デザイン、フロントエンドエンジニアリングを従事するかたわらS5-Style™の名義で個人プロジェクトを細々と展開中。主な個人プロジェクトにWebデザインポータルサイト S5-Styleなど。CSS Design Awards The Official Judging Panel For 2016

Shogo Tabuchi
After I graduated from HAL Osaka College of Technology and Design, I got a position at “Web Production” in Tokyo as a web designer. My next position was at AID-DCC Inc., where I did art direction, web design and front-end development. At the same time, I started various personal projects under the name of “S5-Style™”. My main projects include WebDesign Bookmark S5-Style.CSS Design Awards The Official Judging Panel For 2016

History

1982
長野で生まれ、岡山で育つ
2003-2004
学校法人・専門学校 モード学園 大阪校
2001-2005
学校法人・専門学校 HAL 大阪校
2005-2009
SERAKU Corporation ltd.
2009-2014
ARCHETYP Inc.
2014
AID-DCC Inc. 入社
1982
Born in Nagano and raised in Okayama
2003-2004
Osaka Mode Gakuen College of Fashion & Design
2001-2005
HAL Osaka College of Technology & Design
2005-2009
SERAKU Corporation ltd.
2009-2014
ARCHETYP Inc.
2014
Joined AID-DCC Inc.

Site / SNS

Home
www.s5-style.com
Bookmark
bm.s5-style.com
Twitter
shogoTabuchi
Facebook
shogo.tabuchi

About Hello world.

S5-Style Hello world.は、田渕 将吾のポートフォリオ サイトです。

新しくプログラミング言語を習得する際に最初に作るのが「Hello world.」と表示するプログラムですよね。いつも新しいことを学んで発信していきたいという想いからポートフォリオサイトのデザインコンセプトを「Hello world.」としています。

2回目のリニューアルとなる今回のバージョンでは「ノイズデザイン」と「ミニマルデザイン」のバランスにこだわってみました。「ノイズ」は伝えるメッセージ以外の不要な情報のことで、「ミニマル」は伝えるメッセージに対して極力ノイズを避けたシンプルかつクリアな状態のことをいっています。

デザインにノイズをのせて、無駄なノイズを省いて、またノイズをのせて、無駄なノイズを省いて・・・。それを繰り返すことで「ミニマルなノイズ」を表現してみました。

トップページなどにレイアウトしているグリッチグラフィックは、WORKSのサムネイルを元にCANVASタグで生成しています。画像の色を動的に左右にずらしてみることで面白い表現になりました。

また、HTML5のPushState APIによってナビゲーションをクリックした時のシームレスな画面遷移を実装していたり、マウスオーバーした時のアニメーションにもエモーショナルな動きをつけています。この実装にはGreensockライブラリを利用していて、JQueryに比べて軽快で表現豊かなCSS3による3Dアニメーションを実現することができました。

BGMにも一工夫してあります。HTML5のWebAudio APIを利用して周波数データをビジュアライズしています。それと下層ページに遷移した時にlowpassフィルタを調整して音質を変化させて表現豊かな画面遷移にしてみました。音楽はCubesatoさん制作のオリジナルBGMです。

もちろんサイトとしての機能性も考慮して、WORKSやINFORMATIONなどはWordPressでCMS化しています。これからは更新していくことが楽しみになるサイトになったので、どんどん更新していきたいです(たぶん)。
Hello world!!

“S5-Style Hello world.” is Shogo Tabuchi’s portfolio site.
Everybody knows that when you learn a new programming language, the first program that you write is “Hello world” To show my desire to continually learn new things and share them with others, I made “Hello world” the design concept for my portfolio website.
In the current iteration of the site—it has already gone through two redesigns—I have tried to keep a careful balance between a “glitchy design” and a “minimalistic design”.
You can think of noisy design as containing information superfluous to the message being conveyed, and minimalistic design as focusing entirely on the message, as free of noise as possible.
When designing the site, I added noise, removed unnecessary noise, added more noise, and removed more unnecessary noise… Through repeating this process, I tried to give the site a look of “noisy minimalism.”
The “glitchy” graphics used for the layout of the main page, etc., are made with tags, using thumbnails from the Works page as a base. I managed to create an interesting effect by dynamically shifting the image color left and right.
I used the HTML5 PushState API to implement features such as seamless image transitions when users click on navigation links, and expressive animations on mouseover. I chose GreenSock for the implementation, as it is lighter than JQuery and it enabled me to create a wider range of 3D animation with CSS3.
I also did a couple of tricks with the background music. The frequency data from the music is visualized on the site, an effect that I accomplished using the HTML5 Web Audio API. Also, the low-pass filter is adjusted when users navigate to a subpage, which changes the sound quality and makes the page transitions more expressive. The music is an original composition by Cubesato.
Of course, I also took the site’s functionality into consideration; pages like Works and Information use WordPress as a content management system.

Home
SOUND ON / OFF
SOUND INFORMATION
MENU
Now Loading