Back to 200811.16 Anniversary Page
2008/09/25 「検索に特化したスタートページ」として、サービスが開始された Sleipnir Start 多くのユーザーからのフィードバックを受けて、現在のスタートページに至った秘話を紐解いてみよう

開発者キヨタカの自己紹介

生い立ち

キヨタカ

大阪の高槻生まれ。父が探偵でラジオライフとか無線機で危ないことをしていて、かっこいいと思っていた、そんな子ども。
小6の時に、Macintosh LC630 に触れ、ResEdit で改造ゲームを作ったりしていたのがコンピュータとの出会い。

社会人になって C 言語を学び、しばらく MFC と LEADTOOLS,
PictBear SE なんかを使って仕事をする。
(実はこの時、Sleipnir / Grani 開発担当のたばと同じ会社だった)
2007 年 11 月 16 日、フェンリルに入社。
Sleipnir 2.6.1 から開発に参加し、Glanchip の修正などを行う。
2008 年、pota に関するプロジェクトに放り込まれる。
同年 9 月 25 日、Sleipnir Start をリリース。

ひとこと

いつも使って頂けていることに感謝しています。
開発・リリースをする上で反省することが多々ありますが、それをバネに、
よりユーザーの皆さんの気持ちを考えて開発を行っていきたいと思います。

この場では、フェンリルの誕生日を記念し、
Sleipnir Start の誕生から現在までを振り返りたいと思います。
おまけとして、懐かしの過去デザインや、リニューアル前の
Yahoo UI 版 Sleipnir Startも掲載しています。(まるで、ゼルダコレクション
それでは、お楽しみ下さい。

新スタートページ企画

pota の抱える問題

当時、フェンリルは、Excite から Google へと検索エンジンを変更、
それに伴ってスタートページも Sleipnir x Excite から pota へ変更しています。

pota はガジェットを使ってコンテンツや機能を追加することができ、
大変魅力的なポータルページでした。
しかし、便利なのですが、既にある iGoogle の方が機能面で優れており、
Sleipnir 向けのスタートページとしては将来性を感じられないため、
新たなスタートページを独自に作る方向へと向かっていきました。

新スタートページプロジェクト発足

2008 年 2 月、新スタートページプロジェクトが発足され、当時の企画メンバーとして pota 担当の umon の下、広報のすどう、デザイナーのほかぞの、Sleipnir 開発のキヨタカが招集されました。

4名中3名が東京の社員のため、招集後すぐに出張となり、
3日間の集中会議が行われました。
会議では、どういったページにするか、
事前に用意したアイデアを持ち寄って話し合いを行いました。

Yahoo! JAPAN っぽいもの / ミニ pota のようなもの / Firefox Start や Google のようなシンプルなものなど、様々な意見が出てきました。

コンセプトについても、話し合い、
「全 Sleipnir ユーザーに使ってもらえるスタートページ」
という熱すぎるフレーズに決まりました。
他にも様々なコンセプト案が挙がりましたが、
すさまじく無理があったりするので割愛します。

そして、その場でラフを描き、大阪の社員全員にスカイプ越しに説明、全員が使うと言わないので練り直しという、VERY HARD な流れを繰り返しました。

模索を繰り返していた当時、iPod touch が発売され、そのアイコンの動きや楽しさを取り入れる ことはできないかというアイデアが、大きなターニングポイントになりました。
アイコンをガジェットに見立て、 検索ボックス+機能をもったアイコンという仕様案で、 ようやく全社員に「使う」と言ってもらうことができました。
※あまりの剣幕に「 YES 」と言わざるを得ない状態だったそうです。

以下はそのころのデザインラフの一部です。

デザインラフ

このころ、Sleipnir 3 がリリースされるという噂が社内で巻き起こり
デザイナー堀江が、ロゴを作ってくれました。おしゃれ★

デザインラフ

アイコン並べてドット絵とか作れるページってどうよ?と、ウキウキして作ったラフです。アイコンとドットのセットを数パターン保存できるようにして、気分で差し替えとか無茶なことを妄想していました。

デザインラフ

今でもけっこう好きなデザイン、下のタブでコンテンツを切り替え。堀江作。

スタートページの名称を決めなきゃ

スタートページの大枠のイメージが決まり、次に名称をどうするかを話し合いました。
せっかく作るのなら一つのウェブサービスとしてリリースしても良いのではないかと、
名称についても様々な案が出ました。
以下は最終候補近くまで残ったものです。

rhizome / pont / kaeru / palette / onestep / skoll / fsp / sleipnirstart /
custa / unicon / crisp / spinel / potasta / inhosta / umon

このとき、私が個人的に押していたのが skoll ( スコル ) という名前で、
意味は北欧神話のフェンリルの子どもです。
いつも太陽を追いかけて走っているかわいい狼です。
custa など、~ Start を略した名称も語呂が良いため、いくつかあがりました。 SPGRA 編集長の つぼ による命名です。
名前だけでも、それぞれ個性が出ていて、なかなか決まりにくかったです。

結局は、ミエナイチカラによって Sleipnir Start にあっさり決まっちゃいました。
その名前になると思ってましたが、チームで何か決定することの難しさを学ぶことができました。
ほんとは、umon でも良かったんじゃないかと思うんですが、
今となっては Sleipnir のスタートページとして誇らしい名前だと思っています。

Sleipnir Start のイメージとなるアイコン

すごい絵が出てきました・・・
これは私が、Sleipnir Start のイメージとなるアイコンを
デザイナー大西に依頼するときにペイントで描いたものです。
扉を開くというところ、実に安易です。
地球が扉につっかえてるようにも見えなくもない・・・

開発&デザイン

名前も決まった!仕様を確定。

開発に着手するため、具体的な仕様を確定させます。
こちらもなかなか進まず、ユーザーの皆さんから意見を募りました。
(※ 08 年 3 月のデベロッパーズブログにて実施。初期段階では、t.o 作成の Sleipnir プラグインにて、よくアクセスするサイトと、前回終了時のページを保存するという構想があり、プラグインは、既に動いている状態まで開発が進んでいました。)

いただいた貴重な意見を元にチームで話し合い、仕様を確定させました。

  • 検索ボックス
  • アイコンは、まずは検索だけの機能にしよう
  • Yahoo!ニュース - トピックスはいるよね

非常に、シンプルな構成です。
しかしここまで来るのに、1ヶ月以上が経過していました。
なんという・・・

デザインラフ

検索ボックス下の矢印をクリックすると、ニュースが展開。
こちらは、ニュースのコンテンツを左のメニューから切り替えると言うものです。
堀江作。

デザインラフ

こちらも下の矢印をクリックすると、ニュースが展開される仕組み。色替えや時計もありますね。

ノートに、その時の苦難が表れていました。
この頃のノートや紙は、見返してみるとおもしろいです。

ノート

悩みに悩んでるときのノートはめちゃくちゃです。

ノート

ラフデザインなどに細かい指示をしています。字汚い。

さぁ、開発

いよいよ、開発です。

ページを作る前に大きな問題がありました。私は、CSS を書いたことがなく、
HTML についても、ホームページビルダー 2000 で、軽くいじっていた程度の知識だったのです。

さらに、スタートページでは、動的な仕掛けは、クロスブラウザを考慮した JavaScript で実装することが決まっていましたが、それもまともにさわったことがありませんでした。

「やばい、何から手をつけよう」

ピンチでしたが、わからないことを調べて新しい知識が増えていくことの楽しさ、
コーディングしたものを、すぐにブラウザで確認できる楽しさに夢中になり、
ガシガシ開発していたのを覚えています。

苦労した点は、ドラッグ&ドロップでアイコンを移動するというところでした。
また、コーディングしていて HTML の style を書き換えることで、
動いているように見せるという手法になるほどなぁと、感激したのを覚えています。
DOM が分かるようになってきたころから、開発スピードがさらに上がっていきました。

Sleipnir Start α版

Sleipnir Start α版 プロトタイプです。
お恥ずかしいのですが公開してみます。
(今見ると、目も当てられない痛々しいコードです >< )

工程管理表

その時の工程管理のほんの一部です。
たったこれだけの実装に、大変なコストをかけていました。
作業の遅い部下に umon の心はきっと折れかけだったと思います。
ちょうど第二回フェンリルユーザーミーティングのころです。
【参考】フェンリルユーザーミーティングに行ってみた - ITmedia Biz.ID

怒濤の差し戻し

この時点になって、初めて代表やすゆきチェックが入ります。

私は直接聞いていませんが、おそらく
「こんなの出せるかぁ!」と思ったに違いありません。

今の私が見たらそう言ってしまう出来だったからです。
デザイン、機能共に見直しを行う必要がありました。

しかし、自分たちだけでは、頭打ちの状態だったため、社内のデザイナー全員から意見をもらい、無理を言ってその後のデザインに協力してもらいました。

アイコンは、iPhone のように美しく、そのアイコンが浮かないように周りも美しく、
私にはデザイナーの手が、魔法の手のように見えました。

Sleipnir Start ほぼ確定デザイン Sleipnir Start ほぼ確定デザイン

とくに席の近かったヒロユキには、ほぼ全てのデザインを監修してもらいました。
※今では Sleipnir Start のデザインは、ヒロユキがほぼ全て Fireworks で作成しています。

何度も見直しを行い、最初の Sleipnir Start のデザインが完成しました。

Sleipnir Start 確定デザイン

なんということでしょう!

本当に美しくなりました。
くっきり感、光と陰のバランス、今見ても素直な画できれいです。

Sleipnir Start アイコン

ペイントで描いたひどい地球のラフも、
アイコンデザイナーの大西により美しく立体感のあるアイコンに仕上がりました。

デザインよし!リリースへ

リリース3日前に最後の NG !!

緊急事態でした。

OK の出ていたデザイン通りに開発したのですが、
アイコンが iPhone のように移動しなかったのです。

通常のウェブサイトでよく解説してあるようなドラッグ&ドロップは、
一瞬で移動してしまい、滑らかさや美しさを表現することができませんでした。
おまけに移動先や衝突判定もおかしい。
正しく行っているサイトはあるのか調べてみましたが、
そこまで細かくやっているところは見あたらず。

しかし、しかし、

できないと言いたくない。

まだまだ未知のことが多いのに、できないと判断することはできない。
その3日間は、必死でした。
どうやって iPhone みたいにぬるぬる動くんだろうか。

1つだけ方法を思いつきました。
普通にドラッグ&ドロップをする透明のアイコンと、それを追いかけアニメーション移動する実態のアイコンの2種類を用意すれば、動いているように見せれるんじゃないだろうか。
それがベストなのかはわかりませんでしたが、その方法で動くことがわかり、リリースに向けて判定や動きなどを一気に作り込みました。

Sleipnir Start 検索アイコン仕様書

↑リリース前に umon が作成したアイコンの移動に関する仕様書です。↓

Sleipnir Start 検索アイコン仕様書

ギリギリまで開発を行っていたわけですが、なんとか 代表やすゆきチェック をクリアしリリースすることができました。

リリースできた!

Sleipnir Start

プロジェクト始動から7ヶ月、振り返るとプロジェクト X のような困難の日々でした。

2008 年 9 月 25 日、あの日を思い出そうとしても、必死だったことしか覚えていません。
そしてすぐに次は何をするかということへ取り組んでいたように思います。

次のニュース機能の実装にも、頭を抱えました。
それを書き始めると、文章が長すぎて Trident が固まってしまうかもしれないので今回はリリースまでのお話とさせていただきます。

後書き

キヨタカ

ここまで読んで頂き、ありがとうございました。
文章力が無いので、読み苦しい点が多々あったと思いますが、お許し下さい。

自分でも読み返してみましたが、開発秘話ではなく、裏話や苦労話となっていますね。

開発において、最も考慮したのが、ユーザーの皆さんがどう思うかです。
願っているものを作れるか、驚きを提供できるか、随分考えました。

今もそれに悩みます。
過去の Sleipnir Start を触ってみて、シンプルでいいなぁと思う部分があり、
機能先行で見失っていた部分に気づかされます。

今後、Sleipnir Start の開発では、初心に帰り、Sleipnir ユーザーの皆さんにハピネスを提供できるアップデートを行っていきます。と思います。

どうぞ、宜しくお願い致します。

キヨタカ

宣伝(;^ω^)

ただ今 はてな&フェンリルグッズのプレゼントキャンペーン を行っています。
フェンリルからは、ステッカーとタンブラー
はてなからは、ステッカーとストラップ

4つセットで、 10 名様に当たります!

応募方法は簡単、上記キャンペーンページをはてなブックマークするだけです。
またこの機会に、はてなブックマークにユーザー登録をして、応募してみましょう。
登録も簡単です。こちらからどうぞ (応募は 09 年 12 月 20 日まで。急げ~)

ノベルティグッズ

はてなステッカーは、DS なんかに貼るとかなりかわいいです。
タンブラーは、サーモス社製のステンレス素材で断熱パワーがすごい!
hot は数時間ずっと暖かいし、ice は氷が半日は溶けずに冷たいですよ。

それと、Sleipnir Start のお友達として、 GLOOMY Start ってのがおります。
機能は検索のみとシンプルですが、眩しいくらいの赤で、目に優しくありません。
でも、かわいいので良かったら覗いてみてください。

GLOOMY Start

おまけ

kolorit

Sleipnir Start の次のスタートページを考えていた頃のデザインです。
コロリートと読み、『彩り』という意味です。リリース予定は今はありません。

トップに戻るトップに戻る

お願いと注意

IE8 コラボとはてなコラボ以外は、10 年 1 月末までの期間限定公開です。また、以下のページは開発を終了しておりサポート対象外となりますので御了承ください。

Sleipnir Start Collection

α版

α版
(プロトタイプ)

検索のみ

検索のみ
(欲しかっただけ)

ニュース機能α版

ニュース機能α版
(公開中止版)

IE8 コラボ

IE8 コラボ
( Yahoo UI 版)

はてなコラボ(今)

はてなコラボ
(最新版)

過去のエピソード