どうもウェブデザイナー（自称）のユウです。
もうお気づきのことだと思いますが、本日、午前１時よりサイトのデザインが一新されました。どうですかね？僕的には力作なんですけど・・・
デザイン変更の理由
当サイトのメインコンセプトを 『暇つぶしをデザインする』 に変更しようと思い、それには「今までのデザインでは違う気がする」という自分の感覚を信じて一から作り変えることにしました。
はい。完全に思いつきです。思いつきですが本気です。本気じゃなけりゃ３日も徹夜しません。そのせいで熱が38℃ほど出ました。それでもコード打ち続けましたよ・・・。そして今日、熱にうなされながらリリースしました。
今までのデザインの問題点
今までのサイトデザインも僕的には気に入っていました。ですが、以前のデザインは『ウェブメディア』というコンセプトを意識してデザインしていたので、今回打ち出す 暇つぶしをデザインする とは違う気がしてしまったわけです。
テンプレートの息吹が残っていた
以前のデザインは、とあるテンプレートを僕なりに改造してほぼ原型がなくなるほどデザインしていたものでした。
ですが、完成されたデザインだったので、イジるのには難しい（イジるのは簡単だが、キレイにデザインするのが難しい）部分があって、テンプレートの雰囲気を壊さないようにデザインしていました。
つまり、テンプレートの完成度が高すぎて、自分色に染めるのが難しかったんです。下手にイジると素人感丸出しのダサいデザインになってしまうので・・・。
今回のデザインは完全に俺色
今回のデザインももちろんテンプレートは使っています。以前にテンプレートを0から自作したことがあったのですが、超絶面倒くさくて、非効率的すぎて笑えない状況になってしまいました。
なのでテンプレートは使っているのですが、内部のシステムだけをお借りして、デザインはほぼ全て作り直しました。
だから完全に俺色。僕のセンスがギュッと詰まっています。（センスが良いかは別ね）
ウェブデザインってなんなのか？
ウェブデザインと一口に言っても多岐にわたりますが、簡単にいえばウェブサイトを構築することですよね？
ウェブサイトが出来上がるまでには色々と工程があって、それを全部ひっくるめて『ウェブデザイン』と呼びます。
よく『ウェブデザイン』と聞くと、『デザインするだけ』と思われがちですが、そうではありません。
ウェブデザイナーと呼ばれる職業は、『見た目をデザインする人』『コーディングする人』『スクリプトを書く人』『プログラムを書く人』など色々と役割があります。
プログラムを書く人は通常プログラマーと呼ばれますが、ウェブデザイナーでもある程度のプログラミング知識は必要になります。
これを僕は全部一人でやっています。プログラムに関しては WordPress というシステムを使っていますので、そんなにプログラミングは必要は無いんですけど、システムを呼び出すためのコードは書かないといけません。
ウェブデザインの流れ
当サイトのデザインが出来上がるまでの流れをご説明します。
１．見た目をデザインする。
２．コーディングする
３．スクリプトを書いて動きをつける
４．足りないプログラムをプログラミングする
５．コーティングする
１．まずは見た目から考える
まずどんなイメージのデザインにするか考えます。いろいろなサイトを見て回って、参考になる部分を集めていきます。基本的にはここでPhotoshop等をつかってデザインカンプを作るんですが、僕はそんなことしません（笑）
完全に頭の中だけで「こんな感じにしよう」「ヘッダーはこんな感じかな？」とデザインしていきます。複数人でやる場合は、デザインカンプがないとイメージが伝わらないので仕事になりませんが、僕の場合は全部自分でしますから、その場その場で「やっぱりこうしよう」とかって仕様を変更していきます。（完全に非効率）
２．コーディングしていく
頭のなかでデザインが決まったら、HTML・PHPのコードを書いていきます。テンプレートを使っていますので、全部書く必要はありません。足りない部分のコードを書くのと、必要ないコードを消していきます。（ホント、テンプレート楽でいいです）
ある程度コードが書けたら、CSSで見た目を頭に思い浮かべたデザインにしていきます。僕の中ではこれがメインの仕事ですね。サイトの見た目は９割がCSSでデザインされていますからね。
CSSと言うのは、HTMLやPHPで出力した要素（文字や画像）を適材適所に配置するためのコンピューター言語です。この作業はメチャクチャ楽しいですよ！特に僕みたいに作りながらデザインしている人にとっては「もうちょっと右かな？」「このスペースはもうちょっと開けた方は良いかな？」とかって、感覚だけを頼りに作っていくのがなんだか 匠 みたいでしょ？完全に効率は悪いですけどね（笑）
これが楽しくて、デザインカンプを作らないってのが本音ですかね。カンプ作っちゃうと「その通りに作らないと」って思っちゃって、ただの作業になってしまうんですよね。クリエーティブじゃなくなるんですよ。
最近ではレスポンシブデザイン（PCとスマホでデザインが違う）が当たり前になっているので、PC用とスマホ、タブレット用にデザインしていくのがまた楽しいのです。
３．スクリプトで動きをつける
ここまでで、大体の見た目は出来上がっていますが、足りない部分があります。それは動きです。
CSSでもある程度動きを与えることは出来るのですが、そのCSSを呼び出すためのスクリプトが必要だったりします。
当サイトで言うなら、ヘッダーの部分（サイトの上部）にあるグローバルメニュー（PC）。
カテゴリー名が自動で横にスライドしたり、ボタンを押してスライドさせたり出来るようにしています。
下にスクロールしていくと・・・
画面上部に固定されるようになっています。
サイドバーもメインコンテンツがフッター部分に到達するまで、追従するようにしています。
次に、スマホで見た場合、右上にあるハンバーガーボタンを押すとオーバーレイでメニューが出現します。オーバーレイのやり方は以前の記事で紹介しています。【jQuery】ササッと簡単にオーバーレイで検索フォームを表示する方法。
僕がお気に入りなのは、記事を読んでいる時、下にスクロールすると出現して、上にスクロールすると引っ込むSNSのシェアボタンです。これはAll Aboutというサイトを参考にしました。
こんな感じで、JavaScript（jQuery)を使って動きをプログラミングしていきます。
４．足りない部分をプログラミングしていく
ここまでくればほぼ完成ですが、まだ足りない機能だったり、欲しいプログラムがあったりする（作ってると欲しくなる）ので、その部分を作って実装していきます。
５．仕上げに実装したプログラムをコーディングする
最後に４で作ったプログラム等をコーディングしてデザインして完成です。
作る前からしっかりと計画を立てて、必要な機能を洗い出して、デザインカンプを作って始めればもっと早く効率的に出来るんでしょうけど、それは僕の性分に合わないのでこんな非効率的な作り方になってしまっています。
Webデザインは楽しいよ！
っとまぁズブの素人が適当なこと書いてますけど、素人でも情熱があればある程度のものは出来上がるのです。
僕は今まで誰にもウェブデザインを教わってはいません。全て独学で習得しました。独学でもこの程度のレベルにならなれるということです。
もしちょっとでもウェブデザインに興味があるなら、やってみることをオススメします。わからないことがあれば、インターネットで大体のことは解決できますし、僕もいます。（爆）
インターネットやホームページ、ブログに興味があって、自分でなにか作ってみたいと思ったことがあるならホント楽しめると思いますよ。
モノづくりですよ。モノじゃないけど、これはまさにモノづくり。自分で何か作るのが好きならきっとウェブデザインもハマるはず。
僕で良ければ何でも相談に乗りますので、遠慮なくご相談ください。このサイトのお問い合わせからでも良いですし、僕のTwitter(@makizumeitai)にDMくれてもいいですよ。
最後に
当サイトはまだまだ進化している途中で、突然デザインが変わったりするかもしれませんが、ご了承ください。
なにぶん素人が作っていますので、バグや不具合等が発生するかもしれません。もし発見した場合は、すぐに教えて下さいね。
