春ですね。日本はもう桜の季節のようで。桜舞い散る中に忘れた記憶とWEBデザインしたい欲が戻ってきますね。僕の住んでるこの街カナダ(トロント)は現在、雪です。0度をさまよってます。チョットアナタサムイデスヨ。というわけで、心機一転したい時期なのかなんなのかよくわかりませんがタイトルの通りデザインしたくて仕方ない症候群にかかってしまったのでブログデザインをマッハでリニューアルしました。今回はその備忘録です。
リニューアル前のNAGOCRE(なごくり)
リニューアル前
現在
自分で言うのもなんですが、結構デザイン気に入ってました。ただ、Wordpressやプラグインのバージョンをアップしたかったのとブログが重くてしょうがないということに内心気づいていましたのでリニューアルに至りました。このブログをつくって以来、2年ぶり。相変わらずヘッダが重いけど、全体的にちょっとはマシになったかな。写真ブログなのでまだ重い感は否めないですがまぁ、写真ブログなので。ご愛嬌で。はい。ヘッダー部分やサイドバーの情報を軽く整理しました。
ハイパーメディアクールモダンジャパニーズビューティー☆ユウヤマナシの名をほしいままにしてきた僕なだけあって、先日リリースしたViewts-世界絶景-のようなモノトーン系＋アクセントカラーのシンプルなデザインが好きなのですが、まぁ自分のブログだし好きなように暴れてやろうじゃないのってことで自分の中での3色ルールという色制限を卍解してカラフルで女子力高いだろ系男子のブログになってしまったのがこれです。
自分で言うのもなんですが、今回のデザインも前以上に気に入ってます。自己満バンザイとか無駄なことごちゃごちゃ言ってないで僕が普段行なっているサイト(ブログ)制作の手順をざっくり書きますというか、まとめ記事がたくさんあるので参考リンク貼ってきます。
参考までに制作日数
構想・デザインに2日
Wordpressテーマ制作に2日
ちょっくら細かい機能の実装に1日
1週間を目標にしてましたがなんとかなりました。
デザイン:自分の作りたいイメージを膨らませる
まずはこれ。どんな雰囲気のサイト(ブログ)を作りたいのか、ポップなのか、レトロなのか、ガーリーなのか、シンプル系なのか。まずはイメージを膨らませます。やはり1人で悶々としているよりも既存のサイトを参考にするのが一番早い。以前、このブログでもギャラリーサイトをまとめましたので参考にしてみて下さい。
ブックマーク数が500を越える国内の人気WEBデザインギャラリーサイトのまとめ
ブックマーク数が500を越える海外の人気WEBデザインギャラリーサイトのまとめ
デザイン:素材調達・Photoshopでシコシコ制作
僕は長年Photoshopを愛用しています。カスタムシェイプ、パターンやブラシなどデザインに合いそうな素材を調達します。
グリッドシステムのレイアウトをベースにする
レイアウトがまだ得意じゃないって方は960グリッドシステムで配布されているPSDファイルをベースに制作していくとキレイにレイアウトできるかもです。
960 Grid System
[browsershot url=”http://960.gs/” width=”575″]
詳細は、Webデザインレシピさんのレイアウト作りを簡単にしてくれるCSSグリッドシステムの記事がわかりやすいです。
背景に継ぎ目のないパターン素材を
僕は、シンプルな背景テクスチャをうっすらひくのが好きです。左の背景みてください、微妙にザラザラしてますよね？
11 Free Light Subtle Patterns (.PAT/JPG) | Premium Pixels
その他、以下参考リンクです。
背景デザインに困らない、継ぎ目のない無料パターンテクスチャ素材30個まとめ – Photoshop VIP
デザイン質感アップ、継ぎ目のない無料ピクセルパターン素材16個まとめ – Photoshop VIP
海外では最近単色ベタ背景のサイトが多くみられますが、あれはあれでスゴくかっこいいですね！今度チャレンジしてみたいなと思ってます。
フラットデザイン？こんな感じのサイト
Squidee – Don’t explain your changes, show them. Helping designers and developers share PSDs
[browsershot url=”http://squidee.co/” width=”575″]
フラットデザインのギャラリーサイトなんてのもあるみたいです
Flat UI Design | A showcase of flat UI design
[browsershot url=”http://fltdsgn.com/” width=”575″]
ただ、シンプルなほどレイアウトやフォントに細心の注意を払わないと一気にダサくなります。まさに紙一重ですね。
カスタムシェイプやブラシで装飾
deviantARTは僕の愛用するお気に入りのサイトです。カスタムシェイプやブラシが調達出来るだけでなく、インスピレーションを沸かすにも重宝しています。
deviantART
[browsershot url=”http://www.deviantart.com/” width=”575″]
背景をひいたら構想のデザインに合いそうなカスタムシェイプやブラシを適当に調達。
そして自由にデザインします。
Photoshopカスタム・シェイプいろいろ | DesignWalker
カテゴリー別に選ぶ、フォトショップ用ブラシ1000個集めました。 – Photoshop VIP
また、普段僕は自分用のグラデーションを作成する派ですが、まだ慣れてない方はグラデーションやスタイルを入れとくと便利かもです。
保存版！Photoshop用無料グラデーション750個+まとめ – Photoshop VIP
保存版！Photoshop用無料レイヤースタイル750個+まとめ – Photoshop VIP
コーディング:製作時間を短縮する便利ツール
ちなみに、僕のこのブログは約2年前に僕がフリーランスになるときに勉強がてら制作したもので特にテンプレ等は使ってません(テンプレや無料配布の無料テーマファイルを参考にしたりはしました)。今回のリニューアルに関しても、前述したようにあまり時間を掛けたくなかったのでそれを基にして修正を加えたレベルです。
もし、制作時間を短縮して効率よくサイト制作するのには、バンクーバーのうぇぶ屋さんの約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々やWebデザインレシピさんの私（Webデザイナー）が効率よく仕事するためにしているコーディング術や検索術がオススメです。
ちょいとしたアクセントにはWEBアイコンフォントが超便利
みなさんアイコンフォント使ってますか？Fontelloはいろんなサイトで配布されているアイコンフォントを自分で好きなアイコンを好きなだけ選んでオリジナルのアイコンフォントを作成できるという超優れたWEBサービスです。
Fontello – icon fonts generator
こんな感じでオリジナルアイコンフォントが作成出来ます。
先日リリースしたViewts-世界絶景-でもFontelloを使っていますが、このブログでもいたるところに使用されてます。
サイドバーの見出しや、
フッターなどいたるところに。
詳しくは先日書かれていたWebクリエイターボックスさんのアイコンフォントでリンクタイプ別にアイコンつける方法とKAYACさんの意外と知らない？アイコンはWebフォントでつくるとこんなに便利！を参考にどうぞ。とりあえず、顔文字アイコンくそ可愛い。
Sass(Scss)でコーディングスピードアップ
前のテーマをちょっと手入れしたくらいなので今回はCompass使ってませんが、クロスブラウザ対応がめんどくさい昨今、これを覚えるとなかなか便利なのでリンク貼っときます。
CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 – YATのBLOG
構築:Wordpressでテーマファイル作成
長らく愛用のWordpressを使ってオリジナルのテーマファイルを作成していきます。これを書いていると長くなってしまいますので、今回は割愛。下記のかちびとさん、WEBクリエイターボックスさん、Webデザインレシピさん、Stocker.jpさんの記事がとってもわかりやすいです。
WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと.net
WordPress オリジナルテーマの作り方 | Webクリエイターボックス
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
おそらく最もわかりやすいWordPressテーマ制作チュートリアル | Stocker.jp / diary
レスポンシブ対応:スマフォや電子パッドで見やすく
いわゆるWEBデザイントレンドであるレスポンシブデザイン。ざっくり言うと、スマートフォンや電子パッドの解像度にあわせて見やすいレイアウトで表示させようというものですね。ちなみにこのブログはまだ対応してないですが、Viewtsを作った時に下記のサイトが参考になりました。
必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
レスポンシブWebデザインのメリット、デメリット比較まとめ – Photoshop VIP
このブログも近日対応させますねー。
アップロード前に画像圧縮
ファイルはなるべく軽量化したいもの。特に画像系ですね。ってことでJPEG圧縮サービス。
JPEGmini – Your Photos on a Diet!
[browsershot url=”http://www.jpegmini.com/” width=”575″]
PNG圧縮サービスはこれ(パンダが憎たらしいほど可愛い…)。
TinyPNG – Compress PNG images while preserving transparency
そしてアップする、と。
最後に
Viewtsのデザインとこのブログのデザイン、最近はフロントエンドの仕事が多かったのでデザインは結構久しぶりでした。楽しくてしょうがなかったです。ってことでリンクぺったぺった貼りながら僕が普段やっている制作の流れを書いてみましたが、いかがでしたか？またこのブログで旅行記事と並行してデザインのコツなどWEB系のことも書いていこうかなーと思います。そんなわけで、生まれ変わったNAGOCREを今後もよろしくお願いしますー。
