もともとのデザインを一新して、モダンなデザインを目指しました。今回、リニューアルするときに意識したことなどを、順番に。

Webページのイメージの決定

Webデザインする前に、方針を決めるために、このWebページのイメージを箇条書きにしました。

• アート
• 技術
• 交流
• アイデア
• 創造
• 記号

この中から、抽象化しやすそうな、「交流」と「記号」というイメージを選びました。

色の決定

デザインの中で使用する色を決めました。スタイリッシュな見た目にしたかったので、メインカラーは無彩色の#ffffffと#aaaaaaに決めました。もちろん無彩色だけではのっぺりしてしまうので、アクセントカラーとして、#0066ffを選びました。大体の見た目が次の配色になります。

ロゴの制作

色が決定したところでロゴデザインを始めました。正直、あまりロゴデザインは得意ではありませんが^^;
シンプルでピクトグラム的な幾何学図形の「記号」的な組み合わせで「交流」を表現しようと思いました。いろいろ試行錯誤した結果、”inter-arteq”の”i”と”q”をモチーフにした円と四角形で「交流」を表現し、（イメージからは外していましたが）「創造」を表すために傾けました。

デザイン

デザインは「交流」のイメージにしたがって、大きなクロスが一番目に着くように配置しました。また、モダンなデザインを目指していたので、CSSの”:first-letter”を使って、目立たせるべき部分を悪目立ちしないように、先頭文字だけ大きくして、アクセントカラーの背景色の白抜き文字にしました。また、メニューには文字だけではなく、Batch.のアイコンを使って視覚的にもわかりやすいデザインにしました。

今回はTwitterBootstrapも使わず、使ったjsプラグインはjQuery.jsとjquery.colorbox.jsだけなので、見通しよくデザインできたと思います。また今度、裏で動いているWordPressで使ったプラグインなども紹介したいと思います。