古巣のリニューアルによせて

2011-12-30 12:06 | デザイン | § 3

私が学生時代に運営していたウェブサイトがもうすぐリニューアルするらしい。
http://www.tsukunavi.com/
(※現在はリニューアル予定日の1/1へのカウントダウンが表示されている)

ツクナビ 20111214時点のキャプチャ
(2011/12/14時点のキャプチャ)

現行のデザインを作った者としては、それがスクラップされるというのはとても嬉しく、そして少しだけ寂しい。

作ったといっても、当時デザインリニューアルしようというただの言い出しっぺになっただけだ。その延長でプロジェクトメンバを募ってコンセプトデザインをまとめ、ウェブデザインに優れた先輩に原案(Illustratorで作ってもらった)を考えてもらい、それを自分なりにチューニングしてコードに落とし込んだ、というのが実情である。基本構造は当時のプロジェクトメンバの議論の成果だし、この「ツクナビらしさ」のデザインの基礎は先輩が作ったものだ。

しかしリニューアルに至るまで数ヶ月間はこうした画面配置とにらめっこをしていたようなものなので、誰よりもこのデザインに思い入れが深いということは主張しておきたい。

このデザインができたのは私が大学2年か3年かの夏だから、7年ぐらい前のことだ。
ウェブの世界で7年と言えば遠い昔だ。当時はTwitterやFacebookといったSNSもなかったし(スタート間もないmixiの存在を知ったのはこの仲間たちからだ)、Amazon.co.jpやYahoo! Japanも野暮ったいデザインだったし、学生がウェブで集まる場所といえば2ちゃんねるだった。

ウェブ技術的にはJavascriptが嫌われ、HTMLはXMLに統合されると言われていた。テーブルタグを使った固定HTMLが全盛で、(Movable Typeはクールな存在だった)、ブラウザと言えばIE6で(Firefox 0.8とかOpera 7.5は超マイナー)、主要ウェブサイトはURLに携帯電話向けサイトのためのサブディレクトリ(/iとか/j、/ezなど)を用意していた。スマートフォンなんて日本上陸してなかったし、Photoshop派とFireworks派がいたし、アフィリエイトはまだ普及してなくてウェブ広告と言えばクリック報酬型のバナー広告だし、ライブドアといえば無料プロバイダだし、ネットランナーはWinnyの特集をやっていたし、無料メールマガジンはまだ影響力を持っていた。すべて遠い昔の話だ。

現行のデザインはそんな時代に合わせてデザインされた。
テーブルタグを廃したデザインとか、外部スタイルシートを使うとか、横幅800pxに収まるとか(当時の解像度は1024×768が主流)、FirefoxやOperaでも表示が崩れないとか、透過PNGを使うとか、W3Cのテストに通るようなデザインというのは当時としては画期的だった。

そんな今や時代に取り残されたようなデザインを、現代に合わせて今回新しくしようということになったのは素晴らしい。

何よりも、自分たちのいた場所が、7年経ってもこうして残っているのは素敵なことだと思う。
これからどう変わっていくのかを見るのが楽しみだ。


意味なく架空のタイトルロゴを作ってしまうテスト

2006-03-06 02:08 | デザイン, 画像ネタ | § 1

続くかもしれない企画。グラフィックソフトを駆使して素人が架空のロゴを作ってみよう実験。今回はエロゲと関係ないものをエロゲ風にアレンジしてみました。

男はつらいよ 寅次郎あじさいの恋

まずは名作映画のタイトルをろりぷに系ロゴに。

ポップ体フォント、鮮やかな色遣い、そしてCG背景の3点を押さえるとそれっぽく見えます。
続きを読む »»


バーコード時計、デザイン電話機など

2005-07-27 02:23 | デザイン | § 2

amana :「伝える」から「伝わる」へ
画像制作会社のPRページ。静かな音楽とムービーが流れる時計のようなFLASH。

Bar Code Clock
バーコードで表示する時計。

デザイン電話機
ニューヨークの電話機事情。

WordPress Styles
WordPressテーマのデザインコンテスト。

ライトセイバー
スターウォーズのアレをFLASHで実現。やみつきになる。


最近のメモ

2005-05-25 16:48 | デザイン | 最近のメモ はコメントを受け付けていません。

ローカルに残していたメモ書きやショートカットを大幅整理。デザイン関係のものをまとめてみた。

実用

色のみじん切り
普段から使っているWeb用の色見本帳。彩度別明度別から星形に並べた色見本のほかカラーチップやグラデーションツールなども分かりやすく装備されていてほぼ困ることはない。

WEB COLOR 216
色名で指定できる一覧表や、10進数での指定やRGB比率との一覧表が役に立つ。上のが希望の色を見るのに使いやすい「ツール」であるのに比べて、こちらは配色や配分や指定方法を知るのに使いやすい「解説」に近い。
続きを読む »»


ボタン(バナー)を作ろう

2005-04-24 11:46 | デザイン | ボタン(バナー)を作ろう はコメントを受け付けていません。

Button Maker
…ボタンメーカー(アルファベット限定)
Button Maker for Japanese
…ボタンメーカー(日本語対応)
Taylor McKnight //gtmcknight
…ボタン集
ColorMatch Remix
…色の調和をシミュレート補完


KDDI風ロゴ

2005-03-28 23:54 | デザイン | KDDI風ロゴ はコメントを受け付けていません。

logo

かっとなって作った。
続きを読む »»


参考にしたいデザインメモ

2005-02-07 01:45 | デザイン | 参考にしたいデザインメモ はコメントを受け付けていません。

たまったショートカットを整理。Google風デザイン、ヒラギノ使用のブログなど。
続きを読む »»


Mac風アイコン

2005-02-02 02:54 | デザイン | Mac風アイコン はコメントを受け付けていません。

emblem
続きを読む »»


新春MTいじり

2005-01-02 00:34 | デザイン | 新春MTいじり はコメントを受け付けていません。

元旦はすることもないので夕方からこのページのデザインをいじってました。ちっとはマシになったかな。
続きを読む »»


Appleの新製品風にしてみるテスト

2004-11-07 23:49 | デザイン | Appleの新製品風にしてみるテスト はコメントを受け付けていません。

premini

ふと思いついて作ってみた。これを応用して架空のAppleの新製品を作れるな。
続きを読む »»


 1 2 Next

このページについて

yagitchの日本語練習帳です。本のレビューとか技術的なメモとか。詳細≫

過去の記事

キーワードから探す

一覧から探す

年月から探す

分類から探す