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

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

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

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

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

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

html

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

css

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


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


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


• menu
  1. submenu
  2. submenu
  3. submenu

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


このパンくずリストは画像を使っていません。
デモ
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;
}