「「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント」に触発されてペンを取った私、坪内が本日はお送りします。サイトを一からデザインする手間に比べれば、あっという間です。ブログの本質はデザインでなく、コンテンツなので、手間を掛けるのであれば、コンテンツに手間を掛けるべきというのは、言わずもがな。いって、デフォルトのテンプレでは味気ないし、似たようなブログとの差別化もしたいと思う気持ちも分かります。デザインなんてよく分からないし、カッコイイのが自力でできると思えない、という「非Webデザイナー」の気持ちもわかります。そこで、本日は、私がブログをデザインするときにいつも心がけている、スピードブログデザイン術をご紹介したいと思います。デザイナーではありません。デザインをしたこともありません。デザイナーでなくてもそれなりのブログデザインは出来るんです。準備:まずはセンスを磨く突然ですが、センスありますか?デザインセンス、服のセンス、etc..。ネタ探しに毎日数えきれない海外のサイトを回遊しているのですが、世界には本当にセンスのある人がたくさんいます。自分は何を見てカッコイイと思うか、どういうジャンル、どういう色、どういう形に自分はビビビと来るか、感じてみてください。登録してもいいかもですね。MOSAICファッションやフォトグラフなど様々なイケてる記事をアグリゲートしたサイトです。デザインもカッコイイし、紹介している記事もカッコイイ。NOTCOT.ORG投稿される世界中のデザインアイテムを選りすぐって紹介しているサイト。英語版もここによく投稿します。ここに掲載されるとそれだけで数千PVを獲得できます。materialicious建築、インテリア系を中心に、投稿されたデザインアイテムを紹介しているサイトです。Minor個人的に大好きなブログです。様々なカッコイイアイテムを紹介しています。SPGRAのブログデザインはこのブログにインスパイアされて作りました。今では違う部分も多いですが、画像にタイトルを重ねる部分やレイアウトの構成などから似ている部分が感じ取れると思います。PopWhore自身の作品をはじめとした、超カッコイイグラフィックを紹介しているサイト。クールなグラフィックはブログのデザインにも使われています。toxelサイトのコンセプトはSPGRAに近い感じで、世界中の情報元からイケてるアイテムを紹介するブログです。さんは、ネタ元としてSPGRAもよく利用します。DVICEガジェット系のカッコイイアイテムを紹介しているブログです。男心をくすぐるカッコイイアイテムがたくさんです。FASHION世界中のファッション誌からカッコイイ写真を紹介しているサイト。カッコイイですが、肌の露出も多めなので職場閲覧注意です。クリエイターボックスさんの「デザインの要素と原則」も読んでおきましょう。プロのWebデザイナーはこんなことも考えているのですよ。デザインというのは、本当に奥が深いです。実際にブログのデザインステップに移っていきましょう。ステップ1:キーカラーを決めるまず、ブログのキーカラーを決めましょう。ブログの読者層がイメージ出来ているなら、その人たちが好みそうな色をメインのカラーにしましょう。分からなければ、自分の好きな色でもいいと思います。大切なのは、キーカラーに合う、色の組み合わせなので。キーカラーは決まりましたか?私は「グレー」をキーカラーに選びました。色の組み合わせに話を移します。色の組み合わせ次第でブログの印象は大きく変わります。色と色のバランスさえ良ければ、色数は多くても構わないと思ってますが、難易度は高いです。Hunterこちらのサイトもカッコイイ。左のナビゲーションメニューはホバー時にカラフルに変化する。いうブログはナビゲーションメニューがレインボーに変化し、使っている色数はとても多いですがブラックをベースにクールにまとまってます。素人がヘタに手を出すと間違いなくヤケドするので、大体、テンプレートに利用する色数は3-5色位までにまとめたほうが無難だと思います。色数が問題なのではなく、肝心なのはどういう色の組み合わせにするのか。考える時間がもったいないので、サクっとセンスのいい人に教えてもらいましょう。COLOURloversご存知、素敵な色の組み合わせを投稿できる「ソーシャルカラーコーディネートサイト」。検索のページで、先ほど選んだ色の名前をHuesの所からひとつだけ選んでみてください。素敵な色の組み合わせがいっぱい出てきますよ。数はベラボウにあるので、気にいるのが出てくるまでひたすらページ送りしましょう。私は、この色の組み合わせが気に入りました。COLOURlovers簡単ですね。センスのある人が勝手にカラーコーディネートしてくれましたよ。ステップ2:レイアウトを決める色の組み合わせが決まったら、これまたサクっとレイアウトを決めましょう。ブログのレイアウトで多いのは、2カラムでヘッダー、フッターがあるパターンですが、ここでも悩む時間がもったいないということで、いけてるブログにインスパイアされましょう。細部のデザインまで見る必要はありません。自分にとって読みやすいブログはどういうレイアウトか、感じることができればいいのです。作られたカッコイイブログのデザインギャラリー。使いでなくても必見です。Heroes多数のブログを紹介しているデザインギャラリー。ブログサービス毎に分類されています。「クリエイティブでユニークなブログデザイン55選」。ここで重要なのは、パーツ毎に分解してみることです。デザインが凝っていても、分解してみれば単純なレイアウトのはず。ソーシャル系リンク、最近のエントリー、人気エントリー、広告、コピーライトみたいに全部分解していきます。Split.Personalityを分解するとこんな感じです。クリックで拡大Webデザイナーさんなんかは、ワイヤーフレームとかなんとかを作成して一からコツコツ作り上げますが、素人の我々はイケてるブログのレイアウトをマネすることから始めます。それが手っ取り早くイケてるブログを作る方法なのです。分解できましたか?ステップ3:レイアウトに色の組み合わせを反映させてみる分解したものに色を組み合わせてみましょう。くるまで色んなパターンを試してみてください。白から薄いグレー位までの薄めの無彩色はどんな色とも合うので、ページのイメージを大きく損なわない限りは、選んだ色の組み合わせに追加してもいいでしょう。組み合わせの中で一番目立つ色は、差し色やリンクテキストとして使いましょう。合体させてみるとこんな感じになりました。クリックで拡大ステップ4:ロゴを作るブログで最も重要なアイデンティティは何と言ってもロゴでしょう。ロゴはFaviconやTwitter用画像などにも使えますし、唯一画像を作るべきとしたらこのロゴですね。ロゴを作るのは非常に大変かつ難しい。私がオススメするのは、「カッコイイフォントをさらりと使う」という方法。ブログのタイトルが日本語の場合は、カッコイイフォントはなかなか無料ではゲット出来ないですが、メインタイトルをカッコイイ英字フォント、サブタイトルを日本語フォントという組み合わせでもいいかもしれませんね。ロゴマークは、フォントの頭文字をちょっといじる感じで十分じゃないでしょうか。カッコイイフォントは下記のようなフォントデータベースから探してください。ロイヤリティフリーかどうかは各自で確認して下さいね。Squirrel商用利用可能なフォントだけをデータベース化したフォントサイト。カッコイイフォントを探すだけで、ライセンスを気にする必要はありません。FONTSPACE気になるフォントにカーソルを合わせれば、それが商用利用可能かどうか表示してくれるユーザーフレンドリーなフォントデータベース。選んだフォントと選んだ色でロゴをサクっと作ってみると、こんな感じになりました。作りすぎて、まったく気に入ってないのですが、ここではよしとします。ステップ5:パーツごとにデザインするさて、レイアウトが決まれば後は、自分が納得行くまで細部を作り込みましょう。ボーダーを調整してみたり、背景画像を入れてみたり。作り込む時のコツも今までと同じ。イケてるサイトに学ぶということ。先ほどのいけてるブログリストをもう一度、見てみましょう。今度は細かくパーツごとにみます。このブログのナビゲーションメニューがかっこいいとか、フッターがかっこいいとか、いろいろ感じてみてください。世の中にはニッチなコンテンツを運用している人がいるもので、パーツごとに探すことができちゃうサイトもあります。前掲のブログ集では物足りないなら、以下のサイトから探して見ましょう。Designヘッダーやフッター、コメントフォームなど、パーツごとにカッコイイデザインを探せるサイトです。Hongkiat50の素晴らしいブログフッターデザインというエントリー。クールなブログフッターがわんさか。イメージが湧いてきたら、そのイメージに合う画像も素材集からいただいてきましょう。ここでも商用不可などは十分にご注意を。素材集は他のカリスマブロガーさんが色々エントリーを上げられているのでそちらを参考にしてください。ほげほげ日記は、軽くボーダーを引いたりするだけにとどめておきます。最近はやりのソーシャルメディアのボタンは目立つところに置いておきたいと思います。いうわけで、完成イメージは、こんな感じになりました。自分でいろいろ作る場合は、「「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント」で触れられているポイントに注意しながら進めてみるといいでしょう。デザインに関するステップはこれで終わりです。あとは、コーディングを頑張る実際は、記事ページのデザインなんかもしないといけないのですが、コメントフォームが付いたりするくらいなので、基本的な部分は今まで紹介したやり方と同じです。お使いのブログサービスがテンプレートを配布している場合は、選んだレイアウトに一番近いテンプレートを適用させてから、コーディングするのが近道です。一からコーディングする場合のポイントは、それぞれのパーツをブロックごとに分け、四角で囲んでいくことです。大きな要素から順番に四角で塊を作っていき、それを<div></div>でマークアップしていけば、完成です。開発担当の若者たちが、素敵なワザを紹介してくれることを期待してるので、割愛させていただきますね。まとめ:センスのいい人に学べばブログデザインはあっと言うま作例としてあげさせていただいた、SPGRAほげほげ日記は、2時間ほどで作りました。時間をかけたのが、ダミー記事の内容だったりします。非デザイナーがヘタに一からパーツを作りだすと、1つのパーツだけで2時間くらいかかって、しかもページに当てはめてみると、なんだか違和感丸出しになってしまうこともしばしば。それに比べれば、センスのいい人たちのデザインを参考にするだけで、一瞬でそれなりのブログができてしまうこの方法は、非デザイナーには断然オススメの方法です。気に入った感じのものが出来上がってしまえば、あとは、細部の作り込みをコンテンツ更新の合間にやっていきましょう。誰かに見せたくなる、世界に一つだけのブログが完成するはず。愛着を持ってブログを更新出来れば、自然とページビューも増えてくるでしょう。未来のカリスマブロガーさん。あなたのブログが素晴らしいブログになることを願っています。良いブログができたら、フェンリルのこともたまには紹介してくださいね!SPGRAも忘れずに!!では。4つリッチに見せるデザインテクニック。