kimi.jp

HOME / History

 

kimi.jpサイトのヒストリー

サイトの更新の歴史をお伝えします。

2008.05.01 「kimi.jp」ドメイン取得。休眠状態。
2008.10.06 kimi.jpサイトbuild1を作成も破棄。
2008.10.25 kimi.jpサイトbuild2を作成も破棄。
2008.11.14 blog.kimi.jp始動。
2008.12.26 「きみ.jp」ドメイン取得。「kimi.jp」へリダイレクト。
2009.01.10 kimi.jpサイトbuild3を作成も破棄。
2009.08.09 photo.kimi.jp始動。
2009.09.13 kimi.jpサイトbuild4を作成。暫定オープン。「About」のみ公開。
2009.09.18 「History」公開。更新情報からリンク。
2009.09.30 「Group Sites」公開。Profileを公開。
2009.10.06 「Group Sites」を更新。「Profile」を更新。
2010.01.06 iPhoneアプリ、『ねこすん時計(Neko Time)』がリリースされました。
2010.01.09 iPhone, Twitter, Ustreamのページを追加しました。
Profileを更新しました。トップページにNew!、Hot!をつけるようにしました。
2010.01.16 「Domain」、「Contact」公開。
2010.01.24 「Sitemap」を「About」内に公開。
2010.02.09 「iPhone」を更新。
2010.02.23 「iPhone」を更新。
2010.02.24 「TV.kimi.jp」を新設。「ぬこ.jp」へのリンクをトップに。
2010.03.06 「iPhone」を更新。
2010.03.07 トップページにiPhone及びモバイルデバイスでの振り分けスクリプトを導入した。
2010.03.27 「iPhone」を更新。
2010.04.03 「The 3rd Impact」を公開。
2010.05.16 「iPhone」を更新。
   
   
   

グループサイトについては掲載していません。

 

kimi.jpサイトのストーリー（ナルシストMix）

開発コード名『icon』

　一見しただけではそこに何があるのか分からない。不作法ともみれるトップページ。４×３に並んだ12個のボタンが各コンテンツの入口だ。各ボタンをマウスオーバーすることによってその中のコンテンツがなんであるかがわかる。極限までシンプルにしたサイトデザインはkimiのウェブワークスの真髄であり、コードネーム『icon』のアイデンティティである。

　同時期に、むしろkimi.jpを作る直前にも同じソースコードを流用して『kagawa.biz』を作成しているが、『Kagawa.biz』にくらべてボタンをリデザインし、また、非マウスオーバー時のフォトショップでの加工固有の『影』の部分のドット単位の編集したことにより、よりすっきりとしたボタンに仕上がっている。『Kagawa.biz』ではその加工が施されていないためややみにくいままである。両サイトは似ているが別物なのである。

トップページに文章は1行のみ

　元来、多くの個人サイトの管理者、およびサイト製作者はあまりに多くのコンテンツをトップページに掲載しすぎである。ブログに端を発し、メニューや本文、自己紹介、リンク、ブログパーツなどあらゆるものを一つにまとめた個人サイトは煩雑な感が否めない。それらの流行り物へのアンチテーゼが、今回のデザインである。

　また、著作権表示を除いたら1行の更新履歴のみがトップページの文章である。そこには『更新履歴』の文字列は無く、あえて更新内容のみが記述されている。これは見たらわかるであろうという認識（更新履歴以外の何でもないという主張）から常時表示される語句を削り取った結果であり、前述した極限までのシンプルへの追求の成果であることに違いない。

　加えて、更新履歴をクリックすると、詳細な更新内容が表示される（つまりこのページだ）。トップページという特性上、リンクの非マウスオーバー時には下線を表示させずに文章をマウスオーバーさせて初めてそこにリンクがあることに気づく。これは前述したボタン群の流れを汲んでいるといえよう。

色彩の変化

　色調について述べよう。トップページは明度が高く目に優しいトーンである。しかし、ここまではこれまでのkimiが製作するサイトによくあることであり、なんら不思議でない。白、黒に近いグレー、青の3色はよくつかわれている。しかし、一度コンテンツ頁に遷移するとその色調は一変する。完全に明度のない黒と白である。kimi.jpのロゴもふくめてくっきりとしたデザインに仕上がっている、強調表示や著作権表示も含めて黒で統一している反面、リンクについてはデフォルトの青である。これは、リンク＝青という閲覧者の既知の情報にすんなりうけいれさせるためと、本来のリンク表示の持ち味である強調表示との協調であり、唯一kimiがのこしたデフォルトへの歩み寄りである。

ボタンからみる各コンテンツへの遷移

　コードネーム『icon』のアイデンティティであるボタン。マウスオーバーしないと何故コンテンツ内容を表示させなくしたのか。これは技術的な側面から迫ってみる。御覧の通りシンプルであまり強調部分がないデザインであるが、このままでは少し静かすぎではないだろうか。文章も明度の高めの彩色である。そこで、動的な遊び心としてとりいれらたのがJavascriptによるオンマウスオーバー効果である。一見不作法に見えるボタン群も、マウスオーバーすることで初めて動的に内容が表示させる。もちろん一見したときのシンプルさにも貢献しているがサイトを静的なものから動的なものへにも加担しているのである。簡単なJavascriptを用いることで、ほぼブラウザにとらわれずに表示することができる。

　文章執筆時にはほとんどコンテンツがないものの、サイトが出来上がっていくにつれて考えていることがある。それはすべての『ボタン』から他のページに遷移させないということだ。原稿執筆時にこそどのページにもリンクされない空白のボタンはあれど、今後は減っていく予定である。そこにすべてのページへのリンクを貼ってしまうとそれはただのバナーにしか過ぎない。あえていくつか『空白のボタン』を残すことで、それはサイト内インテリアとしての風格を残すのである。シンプルなサイトの空気を乱さないインテリアとして一役買っている。

　また、コンテンツ頁は基本的にトップページからしかアクセスできない。これはトップページに何度もアクセスすることで一見しただけではわからないトップページのボタン配置を覚えさせるという意味もある。

まとめ

　多少冒険もあったりしろ、間違いなくkimiのこれまでの集大成のデザインであることには間違いない。また、ソースコードの編集のしやすさから、末長いデザインにしていきたい。

 

Copyright (c) 2009- kimi All rights reserved.