人を惹きつけるデザインを作れ!「テーマはシンプル」デザイン初心者の戦い

今回のデザイン変更、日程的には3〜4日で完成という、割と短期間で出来たと自負していましたが、実際はいろいろと試行錯誤の末の完成だったりします。
で、完成後リリースすると、Twitterで、

@fujimotta 前回エントリーのロゴとデザイン変えます宣言から今回のデザイン確定に至るまでの過程や試行錯誤など、デザインがFIXするまでの舞台裏ちっくなエントリーも機会があれば読んでみたいです♪ (もちろん無理にとは申しません、素朴なリクエストレベルなニュアンスで♪Wed Jul 13 11:18:18 via webbardiche
bardiche

というお声を頂いちゃいました。
嫁以外にデザインをほめられることが殆ど無いので、小躍りしながら喜んでしまいました。(@bardiche さん、ありがとうございます!)
で、せっかくリクエスト頂きましたし、自分自身もどういう経緯で完成まで持っていったのか改めて書いておきたいと思いましたので、メモがてらまとめておきます。

「デザイン変えます」宣言から、デザイン確定まで

スタートは、こちらのエントリで「デザイン変えます」と宣言したこと。
宣言したのはいいのですが、こういう決心って手早く着手しないと気持ちが揺らいじゃうんですよね。
かといって、なにも案がないまま作成に着手してもまた中途半端なものになりかねません。
約一日、考えることにしました。

改めて思ったこと「やっぱりシンプルにしたい」

で、デザインを考えている間思っていたことは、「シンプルにしたい」という一点でした。 ちょうど「earth in us」さんのページをみていたときに、ああシンプルで綺麗にまとまっていて見やすい…と感じたのがきっかけかもしれません。

デザインはノートをモチーフに

せっかく「想造ノート」なんて名前なんだから、デザインも名前にちなんだものにしたい。 ということで、安直ではありますがそのままノート風デザインにすることにしました。
ちなみにモチーフとなったのはこちらのルーズリーフ。
art_spiral_square
相変わらず方眼大好きなので、方眼デザインのものをチョイスしました。

今回詰め込みたいアイデア

前回のエントリでも一部書きましたが、今回詰め込みたかった要素は以下のとおりでした。

  • シンプルなデザイン
  • ソーシャル連携
  • 過去の記事を読み返す工夫

デザインはシンプルに、でもソーシャル連携と過去の記事を読み返すための工夫はきっちり入れていきたいと考えていたので、そういう意味ではバランスよくカスタマイズできたかなと考えています。

デザインフィックス舞台裏

ここからは、実際にデザインしてからの紆余曲折で波乱の「フィックスまでの流れ」をご紹介しましょう。
今回のデザイン、背景画像としてパンチ穴が配置されています。
想造ノート: 僕がブログのデザインを新しく作るときに気をつけた3つのポイント
実は、この穴はタイトル画面のみでした。
想造ノートロゴ_2011-07-12
だったのですが、やっぱりどうもロゴマークだけだと印象が弱い。 全体に「ノートらしさ・アナログらしさ」を作るならば、やっぱり全体に表示される方がいいだろう、ということで、今回はひとつだけ穴が開いた画像を縦に繰り返し表示させています。
souzou_note_bg_2011-07-12
あと、見出しはシンプルにしました。 検索で見ていると色々と凝ったデザインのものは多いのですが、今回はベースライン+文字に影をつけるだけに。 見出し1と見出し2の違いは、フォントサイズのみだったりします。

注目の難関ポイント

今回のデザイン変更作業で、かなり時間のかかった作業が3つあります。それが

  • ソーシャル連携の導入
  • 及び配置デザイン
  • CSSの反映

です。

ソーシャル連携の導入

意外と面倒だったのがこちら。 TwitterにしろFacebookにしろ、Javascriptの読み込みが必要だったり動くかどうかの検証が必要だったりで結構手間がかかってしまいました。
特にBloggerは癖がありすぎて一手間も二手間もかかってしまう印象。自分で書き方を工夫しながら、なんとか導入しました。

ソーシャル連携の配置デザイン

次に手間だったのがその配置です。
エントリの頭と一番下に表示させると決めていたので、あとはそれをどう見せるか、なのですが、これも1px単位での微調整をしながらのデザインになりました。
そして一番手間だったのが…

CSSのデザイン

そう「CSSデザイン」これだったかもしれません。
テンプレート内に記述されてるクラス名を指定してやってもデザインが反映されなかったり、変なところまでデザインが変わってたりでひたすら試行錯誤の繰り返しでした。
ですが、お陰でCSSデザインの面白さも感じられたのでコレはコレでいい経験が出来ました。

実作業録

ここからは簡単な作業録です。 イメージをねる時間は含めていません。

7/12の夕方から

まずテスト用ブログを作成しました。今回は「souzou_draft」というブログを作って、そこでテンプレートを編集していました。
(テスト環境が簡単に作れるのはBloggerの利点かもしれませんね。)
で、次に決めたのが、「ベースとなるテンプレート」探しです。
今回は比較的汎用性の高そうな、「シンプル」の白地のものを利用することに。
Blogger: 想造ノート - テンプレート デザイナー
シンプルはカスタマイズの余地が結構あるので好みだったりします。

ついつい作業…で深夜作業に

最近は11時頃には着床・5時過ぎに起床するというサイクルを作っていたのですが、この日はもう作業に夢中になってしまい、ついつい深夜作業となってしまいました。
深夜の間に 「ロゴ作成」 「背景作成」 「ソーシャル連携の設定」 と進めていき、気づけば朝の五時に…。その日(?)はそこで作業終了としました。

起きてまた作業

で、起きたあと、勢いづいているそのままで引き続き作業することに。
「購読用アイコン作成」して、本番の環境(このブログ)にテンプレ反映。
いらないブログパーツを外して、必要なブログパーツを改めて設定しなおしました。
結局完成は夕方に。完成後にこちらのエントリを投稿し、作業終了!です。

今回残念ながら導入を見送った物

最後に、「今回は導入を見送ったもの」をお送りしながら最後の言葉とさせていただきます。

LINKwithin

LinkWithinは今回は外すことにしました。
理由はひとつ。デザイン崩れです。
コレのお陰でコメント欄の方にまで文字がかぶっていってとんでもない状態になってしまっていたのです。(もうすこしCSSを工夫すれば何とかなったのかもしれませんが…。)
BRPSというBlogger用のアドオンも発見したので、今回からはそちらに切り替えることにしました。

ZENBack

こちらも今回から外すことに。理由は簡単に言うと「ロードの重さ」ですね。
多くのサービスに連携できる反面、そこにアクセスするための処理時間が意外と大きかったので、今回は見送りです。
代わりと言ってはなんですが、Disqusの「Response」表示をOnにしているのでTwitterでのレスポンスは確認できるようになっています。

その他ブログパーツ

あと、その他の小物系ブログパーツもかなり減らしてます。 「商品オススメ」「読了系」「アプリオススメ」など、結構放置状態だったので、一旦外すことに。
運用できそうであれば再度取り付けることもあり得るかもしれません。


著作・制作
fujimotta

このサイトをフォローする!

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL