About
Shogo Tabuchi田渕 将吾
- Art Direction
- Web, Spatial and Interaction Design
- Front-end Development
Profile
田渕 将吾
1982年生まれ。学校法人・専門学校 HAL 大阪校を卒業後、都内WebプロダクションにてWebデザイナーとして就職。その後、AID-DCC Inc.にてアートディレクション、Web・空間・インタラクションのデザイン、フロントエンドエンジニアリングを従事するかたわらS5-Style™の名義で個人プロジェクトを細々と展開中。主な個人プロジェクトにWebデザインポータルサイト S5-Styleなど。CSS Design Awards The Official Judge
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, spatial design, interaction 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 Judge
History
- 1982
- 長野で生まれ、岡山で育つ
- 2003-2004
- 学校法人・専門学校 モード学園 大阪校
- 2001-2005
- 学校法人・専門学校 HAL 大阪校
- 2005-2009
- SERAKU Corporation ltd.
- 2009-2014
- ARCHETYP Inc.
- 2014-
- AID-DCC Inc. 入社
- 2015-2017
- CSS Design Awards The Official Judgeに参加
- 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.
- 2015-2017
- Joined CSS Design Awards The Official Judge
Site / SNS
- Home
- www.s5-style.com
- Bookmark
- bm.s5-style.com
- shogoTabuchi
- shogo.tabuchi
- shogotabuchi
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