Design アーカイブ

8月2日のホームページを作る人のネタ帳にこんな記事があがっていました。

• 人気ブロガーになるための5つの方法

この記事ではアクセスアップのために、ブログのタイトルに関して触れられています。

とにかく重要なのは、「 オリジナリティデザイン」であること。
無料ブログが提供するデザインには限界があります。
wordpressなどの活用によってクールなデザインも比較的選べる時代にはなりましたが、多少は自分でいじれたほうが、圧倒的に人気ブログになりやすいと感じます。
つまり、人気ブロガーを目指す条件の中に、HTMLやCSSといった知識が求められていると言えます。また、現在の９割以上のブログが閉める３大基本デザインは間違いなく避けたほうが無難かと思います。
・ブログタイトルが文字
・大量絵文字地獄
・記事内のフォントカラーがバラバラ

ブログタイトルを文字ではなくロゴとして入れることで、ブログを初めて訪れた人の第一印象が良くなるのでしょう。
ロゴ一つで、そのブログが”ユーザのために真剣に書いているブログなのか”、それとも”私的な趣味で書いているブログなのか”を判断できると思います。
(もちろん、書いてる人も読んでる人も千差万別、上記に当てはまらない場合もありますが)

リアルの世界で考えると、以下のことに当てはまりそうです。

人の印象は3メートルと30秒で決まる 著者: 江木 園貴 出版社: 祥伝社 発売日: 2008/03/26

そうです。見た目によって、30秒でその人が判断されてしまうのです。
ブログでいけば、ロゴを含めたデザインが当てはまるでしょう。

今日はエンジニアである@tfmagicianがデザイナーの真似事をして、自分のロゴのデザインをするまでの過程を記事にします。

1-byte.jpのロゴ

まずは計画

ここ数日で、デザインに役立つ良い記事があがっていました。
まとめ記事を書いてくれたの日刊ウェブログ式の@milkcoffee1さんと、lifehackerの@kamekitiさんに感謝します。

• 日刊ウェブログ式 – ベクター画像を大量に無料配布するサイトのまとめ
• lifehacker – フォントを7万種類集めたサイト「FontPark.net」

片方はベクター画像のまとめ、もう片方はフォントに関するまとめです。
これらをざーっと見ていけば、自分のサイトのロゴのイメージが固まるのではないか、と考えました。
これをデザインプロセスの中心として、以下の計画を立てました。

1. “ベクター画像のまとめ”のサイトから良いものをピックアップして、Evernoteに入れる。
2. “フォントのまとめ”のサイトから良いものをピックアップして、Evernoteに入れる。
3. Evernoteのサマリーを見ながら、イメージを固める。
4. デザインイメージをスケッチする。
5. 選び出したフォントとベクター画像を利用してロゴを作成する。
6. 手間をかけずにロゴ完成！

といった計画でした。しかし、ある落とし穴が…。

イメージを膨らませる

まずはイメージを膨らませるステップです。
以下のようなベクター画像をまとめサイトからピックアップしました。
このようなビジネスカードからテクスチャタイプまで様々なベクター画像が、@milkcoffee1さんが紹介されているサイトを辿って行くとたくさん見つかります。
以下に紹介したベクター画像も見つけ出すのに30分掛かりませんでした。とにかく膨大にあるので、すぐに気に入った画像が見つかると思います。

続いて、フォントのピックアップです。

lifehackerさんで紹介しているサイトでは、このように自分の好きな文字を入れてプレビューを見ることが出来ます。
気に入ったものを数点ピックアップ、プレビューで自分のサイトの名前を入れることで、フォントが選びやすくなります。

これらの画像は単品で見たときには、自分の好きなデザインばかりです。
しかし、ブログと見比べてロゴが入った場合をイメージしてみると…しっくり来ません。

フォントは良さそうなので、イメージの中心を再度検討しました。
そうして出てきたイメージがこちら。

このベクター画像、別の記事で使うおうと思っていたものです。
散歩しながら考えていると、これがロゴに使えるのでないかと閃きました。

ラフスケッチ

これらをもとにラフスケッチします。

プログラムの設計をするときによく使うA4の用紙にシャープペンでざっとスケッチしました。
なかなか良いじゃないですか！

(計画の失敗)

当初の計画ではこのベクター画像を修正して、簡単にロゴを作る予定でした。
しかし、この段階で問題が生じます。

ロゴを修正する際に使おうと思っていたソフトウェアはこちら。

• Inkscape
  • illastratorライクなオープンソースのベクター画像の編集ソフト。ベクター画像の編集の知識がないと扱うのが難しいです。使いこなせばillastrator同様に色々なことが出来そうです。
• Omnigraffle
  • MSのVISIOライクなベクター画像編集ソフト。illastratorよりも簡単に画像を作れます。そもそも用途も違うのですが…。エンジニアの私としてはこのソフトだけで画像編集は済ませたいところです。

デザイナーの人にとっては当たり前かもしれません。
そうなんです。拡張子epsのベクター画像はAdobeのillastratorでしか扱えないんです！

Adobe Illustrator CS5 Macintosh版 メーカー: Adobe Systems プラットフォーム: Macintosh 発売日: 2010/5/28

Omnigraffleは画像としてのインポートは出来ますが、ベクター画像としては認識しません。
Inkscapeは読み込みさえ出来なさそうです。

はてさて困った。これを利用して、簡単にロゴを作るつもりだったのですが…。

計画の修正とロゴの完成

Adobeのソフトウェアは高くて手が出ません。貧乏人にとっては鬼のような価格です。

ないものねだりをしても仕方がないので、なんとかしてJPEGから加工することにします。
JPEGからの加工は写真の加工の部類に入ると思うので、ソフトウェアはこれを使います。

• GIMP
  • PhotoShopライクなオープンソースのラスタ画像の編集ソフト。

使い慣れないGIMPで四苦八苦しながら、JPEGの画像を切り貼りしました。
そうしてロゴが完成しました。

反省

最後に今度、ロゴやデザインを触るときに気をつけなければ、と思った点を挙げておきます。
個人的なメモになってしまいますが、もし、慣れないデザインの作業をするときには参考にしてください。

• 先に自分の頭の中でイメージを膨らませる。
  • 先に画像を探し始めると、どうしても自分の好みの画像をピックアップしてしまいます。自分の好み = ブログのデザインに合うという訳ではないので、余計な時間が掛かってしまいます。まずは自分の作りたいイメージを固めてから、素材を探しましょう。
• 次はソフトウェアの操作の勉強を。
  • デザインで使うソフトウェアは慣れない人からするとかなり特殊です。先にチュートリアルなどをこなして、操作に慣れておくほうが作業が速くなり、途中で投げ出さなくて良いかもしれません(私は途中でロゴ作成を投げ出したくなりました…)。Youtubeでソフトウェアの名前(InkscapeやGIMP)を検索すると、チュートリアルが結構アップロードされているようです。
• 最後にショートカット禁止。
  • やはり”勉強”をショートカットすることは出来ないようです。ソフトウェアの操作なり、デザインのプロセスなり、しっかり勉強してから取り組まないと、”何かは出来た”けど何も残らなかった、という状況になりかねません。正直、私には今回、何も残らなかった…。”勉強”をショートカットしたいなら、誰かに頼んでしまうほうが得るものが大きいでしょうね。

当たり前過ぎますが、次から気をつけることをまとめてみました。
ロゴはバージョンアップする予定なので、そのときには上記の反省を含めて、再度作り直します。

ちょっとしたデザインぐらい、出来るようになりたいものですよね。

最後に参考になりそうなInkscapeのチュートリアルを載せておきます。

• Leafpad – Inkscape チュートリアル iMac
• Google風3Dロゴの描き方
• Web2.0風の画像が水面・鏡面で反射するような効果
• Inkscapeを使ったベクターグラフィックスのチュートリアル「35 Tutorials to create amazing Vector Graphics using Inkscape」
• Youtube – Inkscape