Y38Design

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

Profile

Y38design

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

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

一度デザイナーから離れ、純粋なMacオペレータとして社会復帰を図り、
現在はWeb系でお仕事復帰。

双極性障害、発達障害、自閉スペクトラム〜精神病、ADHD、強迫性障害、AC、アスペ、毒親、機能不全家庭、
を抱えて生きる半デザイナー

病歴

2005年、結婚を機に夢が叶っていた仕事から転職。この頃から記憶があやふや。
2007年、初めて心療内科を受診。自律神経失調症と診断される。のちにうつ病と診断。
2011年、大事なひとを亡くす。
2012年、病状が限界に達し勤めていた会社を退社。
2013年、無理やり働き出すも雇われた会社がすぐに倒産。
2014年、再度就職活動をし、リハビリと思いMacオペレータとしてパートタイマーで働く。
2015年、仕事でミスが多発することを懸念し、検査を受け、発達障害、ADDと診断。また実家の環境が悪影響を与えていると実感と共に、明言される。
2016年、転院先で改めて発達障害、ADHD、自閉スペクトラム〜精神病領域、と診断。
2017年、障害者枠にて転職。

Portfolio

SSL化

Webデザイン 2018年4月5日 木曜日 12:39:17

当サイトもようやくSSL化が完了しました。
サーバに証明書をインストールして、wordpressの設定をhttps://にしただけでは終わらず、
各投稿に貼られているリンクもhttps://に書き換えないといけない。
手動ではとてもやってられないのでプラグインを探したところ、
Search Regex
というプラグインを見つけた。
これで検索一括置換をして、ようやく鍵マークがつくように。
少し時間がかかってしまった

お仕事

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

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

Webサイトのリニューアル

Webデザイン, 未分類 2014年2月9日 日曜日 16:47:30

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

お仕事

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

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

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

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

自社サイト完成

Webデザイン, 未分類 2013年11月8日 金曜日 15:26:41

自社サイト、一応の完成をみた。
何者にも染まらない、白をベースに仕上げた。
かたまったイメージをもたせないため、タイポグラフィをメインにデザインした。
使える写真素材がなかったため、図やアイコンをイチから作っていった。
ライティングをベースにして図化するのは、いいイメージがなかなか浮かんでこず苦戦した。
そう、ロゴデザインも自分の案。なかなかシンプルで明快なロゴができたと思う。
サイトの色はロゴの色にひっぱられすぎな印象もあるけど。なのでボタンには、さし色でピンクをいれてみた。
はて、これからどうやって育っていくサイトになるだろうか。
日頃のメンテをしっかりしてSEO対策していかねば。
そして逐次いいイメージができあがれば、図やアイコンもかえていきたい。