前回に書いたエントリーからはや半年、ついに第2回目のエントリーです。
実は前回のエントリーを書いたあとにコツコツやっていたんですが、破滅派のリニューアルを始めたため、ほったらかしになってしまっていたとさ。
元のチュートリアルも賞味期限切れかと思いますが、成果物とその感想でもつらつらと書いていきたいと思いますです、はい。
2.Creative Studio Website

これは車のサイトというふれこみでしたが、まあ、サイト構造としてはかなり寂しいですね。
そういえば、僕がこの業界に入ったとき研修で車のサイトを作ったのですが、黒背景を使って怒られたことを思い出しましたよ。
よく考えると導線が9本しかないサイトってのも寂しいもんですが、まあ、こんなもんでしょう。

実際に作ったのがこちら。
これはたしか、2時間ぐらいで終わった気がします。
写真はシャッターストックのキャンペーン中にダウンロードしたものを使ってみました。
やっぱ写真ですね。僕は絵心がまったくないので、写真の力に頼り続けたいと思います。
3.Professional Clan/Gaming web template

これはゲームのサイトでしたかね。
ヘッダーの画像は素材として提供されていた(当たり前だけど)ので、そんなに時間はかからなかったはず。
グランジのブラシを使う工程があって、そこで「へ〜」と思った記憶があります。
グランジブラシの使い方がよくわからないという人はやってみるといいかもです。
ただし、これは半透明を使いすぎているので、コーディングはかなり面倒くさそう。

実際に作ったのがこちら。
僕はこういう模倣をするとき、絶対日本語にするようにしています。
かならず劣化しますね。なんだろう。フォントの影響? やはり、日本人は英語を文字ではなく、視覚的な記号(絵画みたいなもの)って捉えてるってことなんですかね。
意味が無い方がクールなのかな。
4.Vibrant modern Blog design

これは他のチュートリアルでも取り上げられていたので、かなりオサレだったのではないでしょうか。
今となっては少しださく見えますが。ポイントははみ出ているところですかね。
ブログのデザインとしては定型的なものなので、参考になるでしょうか。

これが実際に作ったもの。
最大の罠は、背景のぼかしのサイズを間違えたことでしょうか。
背景が光り過ぎで文字が飛んでしまいました…
このおかげでかなりコーディング不可能なサイズの画像になってしまったと思われます。
5.Nature inspired painted background

これはブラシを使いまくるやつですね。
でかい水彩ブラシの重ね方を重点的にやります。
最近、樹木とか鳥とかのすてきなブラシがたくさんあるので、けっこう作りやすいんじゃないでしょうか。

で、これが実際に作ったヤツです。
質感は本物にかなり見劣りしますね。丁寧に仕事をしないと駄目だという見本のようなものです。
このデザインをHTML化するのはかなり大変そう…
神業的な背景敷き詰め技術が要求されそう。両端をちょっと工夫すればイケそうですかね。
終わりに
僕は生意気にも職場でデザイン研修したりするのですが、いつも思うのは「新規にデザインを起こすより、リニューアルの方が絶対に上達する」です。
たとえば、3のヤツとかがそうなんですが、コンテンツが少なすぎるWebサイトってデザインしようがないし、実際にそんな仕事はないと思います。普通はFlashとかのRIAにするはずですからね。
どんな業種でも、デザインは視覚的表現であるとともに、機能の表現(プレゼンテーション)や指示(インストラクション)だったりします。
そうした勘所をつかむには、新規でやるよりすでにあるコンテンツを整理させた方がよいですね。自由が一番苦しいですから。
とまあ、偉そうなことを書きましたが、半年で5個しか終わっていないので、あと65個…いつになったら終わるのかわかりません!
続く….かもしれない。