Y38Design

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

About

名前:
Y38 design
略歴:
2002年、カーデザインを主とするデザイン事務所に入社。
コンセプトカーのデザイン、プロダクトデザインなどを手がける。
2005年よりプロダクトデザインを主とするデザイン事務所にて勤務。
プロダクトデザイン、グラフィックデザイン、Webデザイン・コーディング、Flashムービーなどを手がける。
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. >Product design
  3. >Illustration
  4. >Web site
  5. >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
チョロQ「U」
2002/--/-- チョロQ「U」
チョロQモータースから発売された一人乗り電気自動車、「U」。 ボールペン/Photoshop

Product design

ジュラルミン製iPhone4/4S用ケース
----/--/-- iPhone4/4S用ケース "BumperPro"。
apple製"Bumper"をモチーフに独自のアイデアを盛り込んだデザイン。
指でひっかけやすくしています。
ジュラルミン削り出し。 Rhinoceros
ジュラルミン製iPhone4/4S用ケース
----/--/-- iPhone4/4S用ケース "ThinkAdditional"。
appleの製品デザインの哲学にのっとった局面を採用したiPhoneケース。
名前はappleの往年の広告キャッチコピーから。 ジュラルミン削り出し。 Rhinoceros
医療機器
----/--/-- 医療機器デザイン・モデリング 大型医療機器。 Photoshop Rhinoceros
コミュニケーションロボット
----/--/-- コミュニケーションロボット Photoshop Rhinoceros
オーディオ機器
----/--/--  オーディオ機器モデリング Photoshop Rhinoceros
ゴルフバッグ
----/--/-- ゴルフバッグスタディ Illustrator

Illustration

萌え巨乳警備員
2014/10/29 萌え警備員 工事看板に載せるために描いたもの Illustrator
萌え巨乳警備員
2014/10/29 萌え警備員 工事看板に載せるために描いたもの Illustrator
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
見明暢
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.
夜間保育園
----/--/-- 夜間保育園 夜間保育園を表現すべく昼の空と夜の空をイメージして。
またオトナがみても耐えられる、上品なかわいさを表現。
CMS導入
総合病院
----/--/-- 総合病院 病院らしい清潔感、透明感と暖かみを表現
CMS導入
ラケットメーカー
----/--/-- ラケットメーカー ラケットに合わせて縦に長く分割したデザイン。
html5導入
css3
オリジナルブランドサイト
----/--/-- オリジナルブランドサイト iPhoneケースを始めとするオリジナルブランドのサイト
html5導入
css3

Logo design

Hair garden cocosia
2013/3/15 Hair garden Cocosia 美容室にふさわしい、森のイメージをロゴにしました。 Illustraor
Esras.
----/--/-- Esras. オリジナルブランドのロゴ。
多彩なデザイン商品を表すべく、虹色をモチーフに。 Illustraor

close

Weblog

illustratorで基準オブジェクトを動かさずに揃える 2016/06/23 Category: グラフィックデザイン

イラレで、ふたつのオブジェクトを揃えたい。
だけど、基準となるオブジェクトは動かしたく無い。

そんなことありませんか?

まず、普通に中心揃えしてみます。

例えばグリッド状に並んでいる四角。
このうちのひとつの中心に円を置きたい、とします。

20160623-スクリーンショット 2016-06-23 19.07.02.png

で、普通に揃えてみます。
20160623-スクリーンショット 2016-06-23 19.07.24.png

結果は、
20160623-スクリーンショット 2016-06-23 19.07.33.png

そう、四角も動いて、それぞれの中間をとっていますね。

でも、四角は動かしたく無いんだ!ということもあります。
ただの四角ではなく、複雑なオブジェクトが、複雑かつ決めた配列で並んでいる時。
スマートガイドもうまく使えない時。

そんなときは、

ふたつのオブジェクトを選択して、
20160623-スクリーンショット 2016-06-23 19.07.02.png

次に、動かしたく無いオブジェクトをもう一度クリックします。
すると、
20160623-スクリーンショット 2016-06-23 19.07.44.png

もう一度クリックした四角の、オブジェクト境界線が太くなります。

そこで、改めて揃えます。
20160623-スクリーンショット 2016-06-23 19.07.50.png

すると、四角は動いてません。
20160623-スクリーンショット 2016-06-23 19.07.59.png

そのまま、縦方向も、
20160623-スクリーンショット 2016-06-23 19.08.07.png

これも四角は動かず、円が中央にきました。
20160623-スクリーンショット 2016-06-23 19.08.13.png

ここでは例として、中心揃え、しかも簡単な四角と円、簡単な配列なので、
ぶっちゃけ、スマートガイドを使えばすみます。
ですが、もっと複雑な状況もあります。そんな場合だと、
・基準となるオブジェクトをコピペして揃えて、もとの場所にふたつを重ねて、コピペしたものを消す
・基準となるオブジェクトをコピペしてガイドにする
などの手法をとらないといけません。

無駄なコピペの手順や、いらないガイドが残ってしまったり、と不便ですね。

この手法は、中心だけでなく、上下左右、どこ揃えでも使えます。

例えば、「上にあるオブジェクトの下端」に、「下にあるオブジェクト」を揃える、
こともできます。

上に並んでいる四角の一番左を基準にして
20160623-スクリーンショット 2016-06-23 19.36.21.png

下端揃え、
20160623-スクリーンショット 2016-06-23 19.36.30.png

「上にある」四角の「下端」に「下にある」円の下端が揃いました。
20160623-スクリーンショット 2016-06-23 19.36.58.png

さらに、「左にある」四角の「右端」に揃えます
20160623-スクリーンショット 2016-06-23 19.36.44.png

上下左右おかまいなしに、揃えてくれます。
20160623-スクリーンショット 2016-06-23 19.37.04.png

確か、illustrator ver.10くらいからある機能らしいのですが、
自分がこれを知って使い出したのはCS1を使っている頃からだったような。

ちょいちょい、便利な機能が追加されて、知らないことがまだあるんだろうなぁ、といつも思います。

ロックつきpdfのロック解除 2016/06/17 Category: グラフィックデザイン

資料を正式に支給される前や、
図面上にデザインのイメージを置きたい時など、
pdfからロゴや図面などのベクターが生きてる要素を抜き出したい時、
ロックがかかってるとイラレで開くことも配置することもできませんね。
そんな時はそのpdfを、Safariなりブラウザにドラッグして開きます。
そして、プリント。
その時、左下のプルダウンメニューから、「pdfとして保存」を選択します。
任意の場所に保存したら、あら不思議、ロックが解けています。

Windowsではブラウザからpdfにプリントできるのかやったことないので今のところ、
Mac限定のバッドノウハウですが。

※あくまで素材が支給されるまでの提案段階で仮に置く、などの、緊急用です。
ロゴデータなどを勝手に抜き取って使い回すことを推奨するものではありません。

Officeファイルからの画像抜き出し 2016/06/16 Category: グラフィックデザイン

グラフィックなどの作業をしていて、写真やロゴデータなどを、エクセルやパワポなどに貼り付けて送って来られて困ること、ありませんか?

簡単に元画像を抜き出す方法があります。
拡張子が「.〜x」の場合に限りますが。

まず、その.〜xのファイルの一応複製します。
そして拡張子を.zipに書き換えます。
そしてzipを解凍。
すると、エクセルならexl(だったかな)、パワポならppt(これもうろ覚え)、ワードならdoc(これry)というフォルダがあるはず。
さらにその中にmediaというフォルダがあります。
それを開くと、中に、埋め込まれた元画像が元サイズのまま入っています。

これでいちいちOfficeファイルを開いて目一杯画像を拡大してPhotoshopにコピー、という作業から解放されます。

ちなみに、拡張子にxが付いてない場合は、
一度Officeで開いて別名保存でxのついたバージョンで保存し直せば、同じことができる、、、気がしたけれど、これはちょっと覚えてないです。

お試しあれ。

イラレでオリジナルのスウォッチバネルの表示 2016/03/19 Category: グラフィックデザイン

イラレで作業していると、自分なりによく使う色があるかと思います。

そんな時、いちいち色をつくるよりも、カスタムのスウォッチパネルを作って保存しておくと便利です。

まず、スウォッチパネルで、「未使用項目を選択」し、
20160319-1.png

選択されたものを消去します。他にもいらないものは消去します。
20160319-2.png

新規書類をつくって、なんでもいいのでオブジェクトをひとつ描きます。
20160319-3.png

そのオブジェクトに自分なりによく使う色をつけます。
20160319-4.png

カラーパレットパネルの塗りの部分から、スウォッチパネルに色をドラッグします。
20160319-5.png

次に、オブジェクトの色を変え、カラーパレットからスウォッチパネルへのドラッグを繰り返します。

そして、自分なりに色が揃ったら、保存します。
(ホームフォルダのライブラリの中に保存しようとしますが、
 自分は、アプリケーション/illustlator/プリセット/ja-Jp/スウォッチ の中に入れます)
この時、全てがただの単色だけなら「交換用として保存」でいいのですが、
グラデーションなどが含まれていると、一番下の「illustratorとして保存」を選択しないといけません。
20160319-6.png
20160319-7.png

そして、一度イラレを再起動すれば、消したスウォッチパネルの中身は復活しているはずです。

そこで、カスタムし保存したスウォッチパネルを呼び出します。
20160319-8.png

あとはお好みの位置に置いて、ワークスペースとして保存すれば、常にこのパレットが表示されるようになります。

また、これは、自作のブラシ、シンボル、アクション、などでも同様にできます。

ベジェの引き方 2015/09/12 Category: グラフィックデザイン

ベジェを描く時、ハンドルやアンカーポイントの場所に悩むことがあるかと思います。

今回は、アンカーポイントの置き方について。

まず、一番理解しやすく基本として抑えたいのは、円。

円は4つのアンカーポイントからなっており、
水平垂直に位置しています。
まずはこれを基本とします。

20150912-スクリーンショット 2015-09-12 17.41.37.png

複雑な曲線も、水平垂直にアンカーポイントを置くことで、
自分で理解しやすく、制御もしやすくなるかと思います。

次に、「R止まり」という考え方です。

四角の角を円弧にした例を見てみましょう。
同じく水平垂直の位置にアンカーポイントがあり、
ハンドルも水平垂直に伸びています。

20150912-スクリーンショット 2015-09-12 17.42.10.png

これは円と同じで引きやすいと思います。

しかし、これが例えば少し回転したらどうなるでしょうか。
トレースなどする時に。。。

20150912-スクリーンショット 2015-09-12 17.42.21.png

水平垂直じゃなくなって、難易度があがりましたね。

ところが、「R止まり」という考え方をすると、
比較的アンカーポイントの位置に悩まずに済みます。

これはあくまでごく単純化した例ですが、
曲線というのを、直線が交わった部分の角を丸めたものと考えます。

プロダクトデザイン的にいうと、直線が交わり、そこにRをかけるのです。

そこに、直線と、R(曲線)の境ができますね。

ここをR止まりといいます。

ここにアンカーポイントを置くと、直線部分とR部分とはっきり分かれますので、
ハンドルの制御がしやすくなります。

20150912-スクリーンショット 2015-09-12 17.43.48.png

これを複雑な曲線に適用してみると…
20150912-スクリーンショット 2015-09-12 17.56.31.png

黒い複雑な曲線を分解し、
色のついた曲線(上記の直線部分にあたります)が角になって交わると考えます。
水色の丸がR止まりです。
そのR止まりにアンカーポイントを置いていきましょう。
アンカーポイントの角側を意識してハンドルを伸ばし、反対側のハンドルはそのあと調整する感覚です。

こうやって、曲線は、直線(もしくは軽い曲線)が角に交わる。そこがあとで丸まったもの。
の集合体と考えればいいわけです。

これはカーデザインやプロダクトデザイン的な考え方なのです。
実際に三次元のモデルを作る時に、
まず角で交わるように形作り、
最後に角を丸めてつくっていくのです。
3次元のデザイン独特の考え方で、
やってみないことには理解が難しいのですが、
2次元のベジェにも有効な考え方だと思います。

やみくもにアンカーポイントを増やさず、
制御しやすい範囲で最小限の数を置いていくのは、
この考え方がいいかな、と個人的に思います。

わかりにくければ、はじめは角をつくってベジェをひき、
R止まりに+でアンカーポイントを追加、-で角のアンカーポイントを削除、
とやると、わかりやすいと思います。

なかなか言葉で説明するのは難しいのですが、
だいたいのモノは、
直線/平面/軽い曲線/軽い局面、はまず角で交わり、
そこにあとからRをかけるものだ、
と意識してみるといいと思います。

illustratorにて、パスを速くひく方法 2015/07/18 Category: グラフィックデザイン

イラレでパスをひくのは慣れるまで時間がかかります。
少しでも速くひくためのtipsです。

まず、aキーで白矢印(ダイレクト選択ツール)を選択します。
次にpキーでパスツールを選択し、描き始めます。

パスを描いていて、
アンカーポイントを置く場所間違った、
ハンドルを調整したい、
そんな時、ツールを選びなおさなくてすむのです。

パスツールのまま、commandキーを押せば、マウスのポインタが白矢印に変化し、
アンカーポイントを移動できたり、ハンドルを調整することができます。
また、パスツールのまま、optionキーをおせば、ハンドルを再定義できます。
さらにcommand+optionキーでハンドルを折ることができます。

また同じcommand+optionキーでパス全体を選択することができます。
command+optionキー押しっぱなしだとパス全体をコピー移動でき、
commandキーだけにすれば、パス全体を移動できます。

たったこれだけでツールを変えることなくパスを整えながら描くことができます。

特にツールをマウスで選択される方には有効です。
マウスの移動時間がかなり短縮されます。

パスツールを選ぶ前に、白矢印(ダイレクト選択ツール)を一度選択することがポイントです。
そうでないと、commandキーを押した時、黒矢印(選択ツール)になってしまい、
パス全体しか選択できず、アンカーポイントの選択ができなくなるからです。

パスツールを選択する前に、白矢印(ダイレクト選択ツール)、
これを癖にするとよいでしょう。

美少女?警備員 2015/07/16 Category: イラストレーション

仕事で度々要望がある、美少女警備員。
違うバージョンの子を描いてみた。

20150716-20150707_securityPolice2.jpg

イラレのスクリプト 2015/02/02 Category: グラフィックデザイン

看板のレイアウトをどうにか効率よくできないか、という話になり、
イラレのスクリプトに挑戦。

考えたのは、
フォーマットとなる書類に、固定の要素だけ置いておく。
工事によって変わる部分をダイアログを出してきいてくる。
それに答えるかたちで順々に入力。
フォントや色や位置を指定して配置する、というもの。

順々にダイアログを出してテキストを入力させるのはわりあい簡単にできた。
でもそこからは苦難の道だった。

まず、色が指定できない。
リファレンスを見てその通りにやってるはずなのに色がつかない。
また、フォントも指定どおりにならない。
おかしい。
いろいろ探してもよくわからなかったんだけど、
どうやら文字列の中身を一文字ずつ指定してやらないといけないのか?ということに気づき、for文で中身をひとつずつ指定するような文を検索で探して改造してようやく指定できた。
javascriptを理解しているわけではないので似たような事例を探しては改造、を繰り返し、ようやく思うものができた。



これで、テキストオブジェクトをマウスで選択してキーボードで入力して確定、またマウスを持ってテキストオブジェクトを選んで…っていうのから解放され、
一度スクリプトを起動させれば、キーボードを叩くだけですむようになった。

実装した機能は、
・順々に項目を聞いてきて入力させる
・フォントを指定する
・カラーを指定する
・文字をセンター揃えにする
・一定の文字数を越えると長体をかける
・最初の「〜〜〜をしています」のところは「を」で改行させる
・指定した場所に配置させる

アクセルの踏み間違え 2014/10/14 Category: カーデザイン

若者から老人まで、オートマでのアクセルとブレーキの踏み間違え。

これをどうすれば解決できるか、少しだけ考えた。
ひとつ、自動車学校で、オートマにもマニュアルの所作、クルマの仕組みを根本から理解させること。

二つ、自動車学校で左足ブレーキを教えること。

みっつ、すべてのオートマ車からクリープをなくすこと。

クリープを無くせば、今どっちのペダルを踏んでるかわからなくなることがない。
進むのは、あくまでアクセルを踏んだ時だけになってないことが、間違い。
そもそもアクセル踏んでないのに勝手に進むのがそもそも危険極まりない。
そこで。

クリープを無くしたクルマは動き始めにギクシャクしてしまうだろう。
そこで左足ブレーキ。
マニュアル車でクラッチをゆっくり繋ぐように、
オートマでは、左足ブレーキを踏んだ状態から発進する。
左でブレーキを踏んだまま、アクセルを右足で踏みはじめる。
じわじわと左足をあげていき、アクセルオンしていく。
クラッチで発進するのと同じ所作。
これで、常に止め、から発進、というあいまいにされていた動作がしっかりとした役割を持つ。
ついでに、現代のクルマに設定されてることが多い、
アクセルとブレーキを同時に踏むとエンジンが絞られるという悪い設定もなくしてほしい。

このように、オートマでもクラッチを繋ぐように発進操作することで、誤操作は減ると思うのだが。

まだこの方法には問題がある。
高齢者は馴染めないだろうし、
左足ブレーキを使う方法はこれから免許をとる人にしか広まらないかもしれない。

でも、オートマにマニュアルの所作を、という一番手のかからないやり方ではないだろうか。

魂動-7 2014/10/05 Category: イラストレーション

魂動デザイン RX-7
魂動デザイン的なRX-7的な。
«Prev || 1 | 2 | 3 |...| 12 | 13 | 14 || Next»

close