Y38Design

プロダクトデザインをはじめとして、
Webデザイン、グラフィックデザインなどを手がけるデザイナーY38のサイトです。

About

名前:
Y38 design
略歴:
2002年、カーデザインを主とするデザイン事務所に入社。
コンセプトカーのデザイン、プロダクトデザインなどを手がける。
2005年よりプロダクトデザインを主とするデザイン事務所にて勤務。
プロダクトデザイン、グラフィックデザイン、Webデザイン・コーディング、Flashムービーなどを手がける。
2013年より広島市にてwebデザインを主とするデザイン事務所にて勤務。
PIXIV:
http://www.pixiv.net/member.php?id=297417
twitter:
http://twitter.com/Y38design
tumblr:
http://y38design.tumblr.com/

新しさと楽しさと、そしてかっこよさと。
常にこれらを追求してデザイン業務をしています。

close

Portfolio

  1. >Car design
  2. >Illustration
  3. >Web site
  4. >Logo design

Car design

ハイトワゴンのデザインスタディ
2011/12/13 ハイトワゴンのデザインスタディ Photoshop / Comic studio
クルマのインテリアスタディ
2009/7/30 クルマのインテリアスタディ Photoshop / Comic studio
カングーを想定したカーデザインスタディ
2009/4/27 カングーを想定したデザインスタディ Photoshop
スマートを想定したカーデザインスタディ
2008/12/24 スマートを想定したデザインスタディ Comic studio/Photoshop
ハッチバックのカーデザインスタディ
2008/12/08 ハッチバックのデザインスタディ Comic studio/Photoshop
ルノーカングーを想定したカーデザインスタディ
2008/12/08 ルノーカングーを想定したデザインスタディ Comic studio/Photoshop
SUVのカーデザインスタディ
2008/11/26 SUVのデザインスタディ Comic studio/Photoshop
ルノーカングーを想定したカーデザインスタディ
2008/11/6 ルノーカングーを想定したデザインスタディ ボールペン/Copic
ルノーカングーを想定したカーデザインスタディ
2008/11/6 ルノーカングーを想定したデザインスタディ ボールペン/Copic
スマートを想定したカーデザインスタディ
2008/10/27 スマートを想定したデザインスタディ ボールペン/Copic
ランチアクーペのカーデザインスタディ
2008/10/20 ランチアクーペのデザインスタディ Comic studio/Photoshop
ハッチバックのカーデザインスタディ
2008/10/20 ハッチバックのデザインスタディ Photoshop
ハッチバックのカーデザインスタディ
2008/9/30 ハッチバックのデザインスタディ ボールペン/Photoshop

Illustration

Bellea M92 Elite IA トレース
2009/5/1 Belleta M92 Elite IA 写真をトレースして描いたもの。 Photoshop
S&W M327 トレース
2009/5/1 S&W M327 写真をトレースして描いたもの。 Photoshop
Colt Kingcobra トレース
2009/4/24 Colt Kingcobra 写真をトレースして描いたもの。 Photoshop
IMI Jericho941 トレース
2009/4/21 IMI Jericho941 写真をトレースして描いたもの。 Photoshop
Goverment トレース
2009/3/23 Goverment 写真をトレースして描いたもの。 Photoshop
これまでに描いたクルマのスケッチ
2008/12/12 これまでに描いたクルマ達。 Photoshop
Matador
2008/12/01 Matador 塗りを担当。
線画は戯さんが担当。 Photoshop
Chokora
2008/11/20 Chokora カーデザイン、塗り、背景、レイアウトを担当。
人物は戯さんが担当。 Photoshop
Mermaid
2008/10/28 Mermaid カーデザイン、塗り、背景、レイアウトを担当。
人物は戯さんが担当。
海の中を人魚とともに疾走する、そんなクルマ。 Photoshop
Black rabbit
2008/10/03 Black rabbit カーデザイン、塗り、背景、レイアウトを担当。
人物は戯さんが担当。 Photoshop
Shoot!
2008/10/03 Shoot! 架空の.45口径の銃 ボールペン/Photoshop

Web site

スタジオルイス
2013/11/08 Studio Louis 広島のWeb制作事務所
html5導入
css3

>Visit site.
見明暢
2011/9/11 見明 暢 KOBE DESIGN UNIVERSITY Department of Product Design Assistant Professor
html5導入
>Visit site.
マルコム株式会社
2010/3/31 マルコム株式会社 携帯電話、デジタルカメラ等小型電子機器の筐体及び機構設計、技術者の独立開業支援
html5導入
>Visit site.
東三国の理美容室 brilliant
2010/3/17 brilliant 東三国の理美容室 brilliant
xhtml×css / Nucleus導入
>Visit site.
フリーランスのイラストレーター兼漫画家、戯(たわむれ)さんのサイト 'みずうさ戯
2008/7/29 みずうさ戯 フリーランスのイラストレーター兼漫画家、戯(たわむれ)さんのサイト
>Visit site.
フリーランスのイラストレーター兼漫画家、'戯(たわむれ) あひさ'さんのサイト 'TO RIP'
2008/8/30 TO RIP フリーランスのイラストレーター兼漫画家、"戯(たわむれ) あひさ"さんのサイト
>Visit site.
ケータイ小説家兼歌手 石平ひかりさん×漫画家兼小説家 あひささん='あひか'のサイト 'あひかQun! Qun!! Qun!!!'
2009/5/17 あひか ケータイ小説家兼歌手 石平ひかりさん×漫画家兼小説家 戯あひささん='あひか'さんのサイト
>Visit site.

Logo design

Hair garden cocosia
2013/3/15 Hair garden Cocosia 美容室にふさわしい、森のイメージをロゴにしました。 Illustraor

close

Weblog

10年前のカーデザインのスケッチ 2014/02/16 Category: カーデザイン

今日、Twitterで、Car design academy(@cardesignonline)さんに昔働いてた時のクルマのスケッチをツイートに載せていただきました。
ここではスケッチは載せることはできませんが。。。
自分が描いたスケッチが、表に出るなんて想像してなかったので、いいスケッチなんて言ってもらえてものすごく嬉しいです。

今はクルマのスケッチは久しく描いてないですが、また描こうという気持ちになりました。
描いたスケッチは、このサイトに載せようと思います。

お仕事 2014/02/11 Category: Webデザイン

Lancersという、ソーシャルビジネスマッチングサイトで、コンペがあったのでデザインを提案してみました。
Webデザインのコンペです。
採用されると嬉しいです。

有彩色のススメ 2014/02/09 Category: カーデザイン

みなさん、クルマはどんな色をお乗りですか?
昨今はやはりシルバーが多数派ですかね。

クルマという大きなモノ、できれば自分の好きな色をという思いと、できるだけ無難な色を、という思いと両方あるかと思います。
確かにシルバーはどんなクルマでも違和感無く、また立体感も出ますし、売る時のことを考えても無難ですね。

しかーし!せっかく乗るのならば思い切って有彩色を選んでみませんか?
昨今のクルマには、魅力的なカラーが設定されています、特に軽自動車。
キュートに、セクシーに、アクティブに、ポップに、、、。
自分の好きなカラーを選ぶとそれだけ愛着もわきます。
自分のキャラクターに合った色を選ぶもよし、クルマのキャラクターを生かすもよし。
普通の鉄板の色から少し離れてみてはいかがでしょう。

それと、シルバーの意外な落とし穴があります。
それは夕暮れ時の視認性の低さ。
これはけっこう重要なことなのです。
夕暮れ時、しかも無灯火だとアスファルトや背景に溶け込んでしまってとても目立たないのです。交差点で対向車としてシルバーのクルマが来ているのに気づかずにヒヤッとすることがあるのです。
シルバーに限ったことではないですが、夕暮れ時は早めにライトオンしましょう。

Webサイトのリニューアル 2014/02/09 Category: Webデザイン

昨今はどんな会社さまでもWebサイトをお持ちかと思います。
しかし、一度作ってそのままになってる会社さまも多いのでは、と思います。
サイトのリニューアルはどのくらいのサイクルですればよいのでしょうか。
僕が思うに1年から2年くらいしたらデザインのリニューアルはした方がよいかと思います。
その際に注意すべきは、コンテンツは引き継ぐこと。
多少の改変はあるとしても、サイトの構成をいじくりまわすのは慎重になった方がいいように思います。その方が見慣れたお客様を惑わせることがないからです。
またそれは会社の信頼にも繋がります。

ここからは技術的な話ですが、サイトを組む時に、構造的に正しいhtmlで組んであれば、cssファイルだけでデザイン変更をすることができます。
最初に構造的に正しいhtmlであれば、htmlを改変することなくデザイン変更できるので、リニューアルの費用も比較的抑えられますし、検索エンジンも迷うことがありません。
もちろん、コンテンツ例えば新着情報や実績などは随時更新すべきですが。
デザインはcssで、と言われて久しいですが、同じhtmlから、cssの変更だけでサイトをリニューアルする例は少ないのではないかと思います。
しかしせっかく構造的に正しいhtmlがあるのならそれを生かさない手はないですし、またサイトはそもそもそういうふうに作られるべきなのです。
数年後のリニューアルを見据えたサイト作り、これから必要ではないでしょうか。

お仕事 2014/02/05 Category: Webデザイン

あけましておめでとうございます。
昨年、広島のとあるWeb制作事務所にバイトでお仕事させていただくことになりました。

が、ここのところ仕事がございません。
ポートフォリオを見て気になった方、ホームページでお困りの方、
お気軽にメールフォームからお問い合わせいただければ幸いです。
よろしくお願いします。

Illustratorでの作業時に覚えておくと便利なショートカット 2013/12/25 Category: グラフィックデザイン

キーボードショートカットで快適操作。

イラレでのショートカット

Photoshop編に続いてIllustrator編です。Illustratorでも基本的には使い方は同じです。半角英数にしておくことも同じです。
Photoshopと違うことは、shiftキーを使っても中のツールが選べないものがあること。
よく使うツールは、キーボードショートカットの設定で何かのキーを割り当てておくといいと思います。
(筆者もキーボードショートカットをカスタムしているので、皆様の環境では図のキーでは動作しないことがあります。)
また、Illustratorでテキスト入力時にテキストの入力を終えたい場合は、⌘+Returnで文字入力モードを終えることができます。
adobe製品は、ツールを使っている時に⌘やoption(ctrやalt)を押すとオプション機能が使えます。
例えばペンツール使用時には、⌘を押すとハンドルが触れたり、optionを押すとハンドルを折れたりします。選択ツールツール使用時にoptionキーを押しながらドラッグするとコピーできたり。いちいちツールを変えなくていいのでこれも便利です。
これらを覚えておくと、ツールを選択するためだけのわずらわしいマウスやペンの移動が減って速く、快適になります。みなさんよろしくどうぞ。

注意文なんかにいいインデント 2013/11/22 Category: Webデザイン

インデント

html


<div>
<p>
※注意文なんかにいいですね。<br />
画像も使っていませんよ。<br />
ていうか寒いよ。<br />
:before要素も使っていませんよ。
</p>
</div>


css


p{
margin:0 0 0 1em;
text-indent:-1em;
}

cssでリボン 2013/11/22 Category: Webデザイン

cssでリボン

デモ

html


<div>
<p>この見出しは画像なしです。</p>
</div>


css


div{
margin:100px;
background:#ccc;
padding:5em 5em 5em 0;
}
p{
background:#888;
color:white;
padding:.5em 1em;
margin:0 0 0 -20px;
position:relative;
}
p:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
left:0;
bottom:-10px;
border-right:20px solid #444;
border-bottom:10px solid #fff;
}

cssで吹き出し 2013/11/22 Category: Webデザイン

cssで吹き出し

デモ

html


<div>
この吹き出しは画像を使っていません。
</div>


css


div{
margin:100px;
padding:2em;
border-radius:1em;
background:#ccc;
position:relative;
}
div:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
left:-1em;
bottom:0;
border-top:1em solid #ccc;
border-left:1.5em solid transparent;
border-bottom:1em solid transparent;
}

cssでドロップダウンメニュー 2013/11/22 Category: Webデザイン







デモ


html


<ul>
<li>
<a href="#">menu</a>
<ol>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ol>
</li>
</ul>


css


ul li{
float:left;
margin:0 2em 0 0;
position:relative;
background:#ccc;
padding:.5em 1em;
}
ol{
display:none;
}
ol li{
background:#888;
}
ol li a{
color:white;
}
ul li:hover > ol{
display:block;
position:absolute;
top:2em;
left:0;
}
«Prev || 1 | 2 | 3 |...| 10 | 11 | 12 || Next»

close