Y38Design

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

Profile

Y38design

元カーデザイナー。
カーデザイナー時代は主にアドバンスが守備範囲。

その後転職し、プロダクト(BtoB、BtoC問わず、固物から柔らか物まで)、Web(html5xCSS3、主に静的サイトもしくはNucleus)、グラフィック(ペラもの主体)、等を経験。

一度デザイナーから離れ、純粋なMacオペレータとして社会復帰を図っている途中。

−クルマのスケッチを描く時にはカタチがよく見えるシルバーで描く。
その時に使うコピックというマーカー。
シルバーの中で一際目立つウインカーの黄色。Y38はその黄色のコピックの色番号。

シルバーという落ち着いた色の中で浮き立つ、そんな意味を込めた名前です。

今は会社に勤務しつつ、今でもスケッチを描いたり最近イラストを描くようになったり、webの勉強をしたり、趣味で活動しています。

抱えているもの

2005年、結婚を機に幼稚園からの夢だったカーデザイナーの道から外れ、その時からメンタル面で弱くなる。

その後マルチなデザイナーとしてやっていくも病状はなかなか良くならず実家療養することに。

こんな病みを抱えてどこまでデザイナーであれるか踠いている半デザイナー。

Portfolio

お仕事

Webデザイン, 未分類 2014年2月11日 火曜日 17:46:49

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

有彩色のススメ

カーデザイン, 未分類 2014年2月9日 日曜日 18:25:45

みなさん、クルマはどんな色をお乗りですか?
昨今はやはりシルバーが多数派ですかね。
クルマという大きなモノ、できれば自分の好きな色をという思いと、できるだけ無難な色を、という思いと両方あるかと思います。
確かにシルバーはどんなクルマでも違和感無く、また立体感も出ますし、売る時のことを考えても無難ですね。
しかーし!せっかく乗るのならば思い切って有彩色を選んでみませんか?
昨今のクルマには、魅力的なカラーが設定されています、特に軽自動車。
キュートに、セクシーに、アクティブに、ポップに、、、。
自分の好きなカラーを選ぶとそれだけ愛着もわきます。
自分のキャラクターに合った色を選ぶもよし、クルマのキャラクターを生かすもよし。
普通の鉄板の色から少し離れてみてはいかがでしょう。
それと、シルバーの意外な落とし穴があります。
それは夕暮れ時の視認性の低さ。
これはけっこう重要なことなのです。
夕暮れ時、しかも無灯火だとアスファルトや背景に溶け込んでしまってとても目立たないのです。交差点で対向車としてシルバーのクルマが来ているのに気づかずにヒヤッとすることがあるのです。
シルバーに限ったことではないですが、夕暮れ時は早めにライトオンしましょう。

Webサイトのリニューアル

Webデザイン, 未分類

昨今はどんな会社さまでもWebサイトをお持ちかと思います。
しかし、一度作ってそのままになってる会社さまも多いのでは、と思います。
サイトのリニューアルはどのくらいのサイクルですればよいのでしょうか。
僕が思うに1年から2年くらいしたらデザインのリニューアルはした方がよいかと思います。
その際に注意すべきは、コンテンツは引き継ぐこと。
多少の改変はあるとしても、サイトの構成をいじくりまわすのは慎重になった方がいいように思います。その方が見慣れたお客様を惑わせることがないからです。
またそれは会社の信頼にも繋がります。
ここからは技術的な話ですが、サイトを組む時に、構造的に正しいhtmlで組んであれば、cssファイルだけでデザイン変更をすることができます。
最初に構造的に正しいhtmlであれば、htmlを改変することなくデザイン変更できるので、リニューアルの費用も比較的抑えられますし、検索エンジンも迷うことがありません。
もちろん、コンテンツ例えば新着情報や実績などは随時更新すべきですが。
デザインはcssで、と言われて久しいですが、同じhtmlから、cssの変更だけでサイトをリニューアルする例は少ないのではないかと思います。
しかしせっかく構造的に正しいhtmlがあるのならそれを生かさない手はないですし、またサイトはそもそもそういうふうに作られるべきなのです。
数年後のリニューアルを見据えたサイト作り、これから必要ではないでしょうか。

お仕事

Webデザイン, 未分類 2014年2月5日 水曜日 10:08:02

あけましておめでとうございます。
昨年、広島のとあるWeb制作事務所にバイトでお仕事させていただくことになりました。
が、ここのところ仕事がございません。
ポートフォリオを見て気になった方、ホームページでお困りの方、
お気軽にメールフォームからお問い合わせいただければ幸いです。
よろしくお願いします。

Illustratorでの作業時に覚えておくと便利なショートカット

グラフィックデザイン, 未分類 2013年12月25日 水曜日 19:19:07

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

注意文なんかにいいインデント

Webデザイン, 未分類 2013年11月22日 金曜日 16:01:43

インデント
html

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

css

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

cssでリボン

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で吹き出し

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でドロップダウンメニュー

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;
}

cssでパンクズリスト

Webデザイン, 未分類

cssでパンくずリスト
このパンくずリストは画像を使っていません。
デモ
html

<ul>
<li><a href="">Home</a></li>
<li><a href="#">contents1</a></li>
<li><a href="#">contents2</a></li>
<li><a href="">contents3</a></li>
</ul>

css

li{
float:left
display:block;
float:left;
background:#ccc;;
line-height:2;
position:relative;
padding:0 1em 0 2.5em;
margin:0 1px 0 -.5em;
}
li:after{
content:"";
display:block;
position:absolute;
left:100%;
top:0em;
line-height:2;
line-height:.5em;
border-left:1em solid #ccc;
border-top:1em solid transparent;
border-bottom:1em solid transparent;
width:0;
height:0;
z-index:2;
}
li:before{
content:"";
display:block;
position:absolute;
left:100%;
top:0em;
line-height:2;
line-height:.5em;
border-left:1em solid #fff;
border-top:1em solid transparent;
border-bottom:1em solid transparent;
z-index:1;
width:0;
height:0;
margin:0 0 0 2px;
}
li:last-of-type:after{
content:none;
}